Opening specific panel in accordion bootstrap when there is a bookmark in it

Issues related to hyperlinks and web site navigation.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/links.html
Post Reply
Aris
 
 
Posts: 202
Joined: Wed Aug 28, 2013 9:28 am

Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by Aris »

HI.

Probably my question means nothing.

I wish to make a link in a web page to open a specific panel in an accordion bootstrap (with FAQ), which is located in another web page.

I tried to put in this panel a bookmark, but there is no result.

Is there something I must take in to consideration?

Thank you.
User avatar
Pablo
 
Posts: 21570
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by Pablo »

This is only possible by adding custom code:
https://www.digiplek.nl/open-jquery-ui- ... -hash.html
Aris
 
 
Posts: 202
Joined: Wed Aug 28, 2013 9:28 am

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by Aris »

Thank you.
Thank you.
Thank you.
DarioMartin
 
 
Posts: 21
Joined: Mon Feb 24, 2020 8:37 pm

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by DarioMartin »

Can anyone advise how the extra code is inserted in the Accordion code - its not using the Edit Object HTML and I can't seem to do it editing Page HTML - anyone help me here?
User avatar
BaconFries
 
 
Posts: 5324
Joined: Thu Aug 16, 2007 7:32 pm

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by BaconFries »

In general it is out with the forum to assist with inserting external / custom code. Also note the program is not a HTML Editor but HTML Generator. To add external / custom code you can use the HTML Object.
https://www.wysiwygwebbuilder.com/add_html.html
DarioMartin
 
 
Posts: 21
Joined: Mon Feb 24, 2020 8:37 pm

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by DarioMartin »

I'm fairly familiar with the HTML object, having used it in various websites I've put together using WYSIWYG, unfortunately it won't allow me to modify the code generated. In the example given here by Pablo, the actual code for the Accordion object is modified above the <body> tag. This would normally be achieved by using the "Edit Page HTML" function, again, with which I am familiar, but I can't seem to see how the code for the Accordion object has been modified to allow that extra bit of code to be inserted, so I was hoping someone to could point me in the right direction.
User avatar
Pablo
 
Posts: 21570
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by Pablo »

You do not need to edit the existing code. It's extra code that can be added via Page HTML.
DarioMartin
 
 
Posts: 21
Joined: Mon Feb 24, 2020 8:37 pm

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by DarioMartin »

Good morning, many thanks for your response. I have added the extra code after <head> and before body :

Code: Select all

<script>
$(function() {
   var hash = window.location.hash;
   var anchor = $('a[href$="'+hash+'"]');
   if (anchor.length > 0){
   anchor.click();
   }
}
</script>
This is because I cannot insert it in the place outlined in your source. My Page Code looks like this:

Code: Select all

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="generator" content="WYSIWYG Web Builder 15 - http://www.wysiwygwebbuilder.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="apple-icon.png" rel="apple-touch-icon" sizes="191x192">
<link href="base/jquery-ui.min.css" rel="stylesheet">
<link href="VAVAYoga.css" rel="stylesheet">
<link href="ServNatTherapy_ES.Accordion.css" rel="stylesheet">
<script src="jquery-1.12.4.min.js"></script>
<script src="wb.stickylayer.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(document).ready(function()
{
   $("#LangLayer_Full").stickylayer({orientation: 4, position: [0, 0], delay: 250});
   $("#LangLayer_320px").stickylayer({orientation: 4, position: [0, 0], delay: 250});
   $("#Accordion1").accordion(
   {
      event: 'click',
      animate: 'linear',
      active: false,
      header: 'h3',
      heightStyle: 'fill'
   });
   $("#Accordion1").data("height", $("#Accordion1").outerWidth());
   $(window).resize(function()
   {
      if ($("#Accordion1").data("height") != $("#Accordion1").outerWidth())
      {
         $("#Accordion1").accordion("refresh");
         $("#Accordion1").data("height", $("#Accordion1").outerWidth());
      }
   });
});
</script>
<script>
$(function() {
   var hash = window.location.hash;
   var anchor = $('a[href$="'+hash+'"]');
   if (anchor.length > 0){
   anchor.click();
   }
}
</script>

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">


</head>
It is, of course, not working .... Could you give me some direction?
User avatar
Pablo
 
Posts: 21570
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by Pablo »

In this case, the location of the code is not why it's not working.
It think the code is not correct.

Code: Select all

<script>
$(document).ready(function()
{
   var hash = window.location.hash;
   var anchor = $(hash);
   if (anchor.length > 0)
   {
      anchor.click();
   }   
});
</script>
Note that I cannot teach you how to write custom code.
DarioMartin
 
 
Posts: 21
Joined: Mon Feb 24, 2020 8:37 pm

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by DarioMartin »

I understand you cannot teach me how to write custom code; being a C / COBOL programmer, I am acquainted with writing code.
What I cannot fathom, is within the restrictions of the program, using Edit Page HTML, how the code snippet supplied has been inserted following the declaration of the function. Using the Edit Page HTML function, inserting between <head> tags, I cannot choose whereabouts to place that code. It will by default appear after the closing "}" of the function and the closing </script> tag .... unless there is of course some method of placing the code snippet where you need it within the structure, using Edit Page HTML
User avatar
Pablo
 
Posts: 21570
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by Pablo »

WYSIWYG Web Builder not a HTML or code editor. You cannot edit the code directly, because the code does not existent until you preview/publish the page.
Page HTML is meant to add cusptm code, not to edit generated code.

The position of the code does not matter. if you place it between the head tags then it will work ok.
DarioMartin
 
 
Posts: 21
Joined: Mon Feb 24, 2020 8:37 pm

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by DarioMartin »

So it doesn't need to be within a function() or within <script> tags?
User avatar
Pablo
 
Posts: 21570
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by Pablo »

The code example of my previous reply can be placed between head tags.
Multiple '$(document).ready(' functions can be used per page.
DarioMartin
 
 
Posts: 21
Joined: Mon Feb 24, 2020 8:37 pm

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by DarioMartin »

Many thanks for your time and effort on this - I appreciate you aren't really here to discuss non-generated code; it is only that this particular function would be incredibly useful on the accordion object.

As it stands, even using the code as supplied, I cannot get it to open the tab, using WB 15.3. I have debugged, and the anchor.length stays at 0;

There are no href on the accordion object to link to, I have defined layers within each accordion page and can only select the layers as a bookmark in the menu. Each Layer has a unique ID.
User avatar
Pablo
 
Posts: 21570
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by Pablo »

Did you specify the ID of the panel you want to open in the URL?
DarioMartin
 
 
Posts: 21
Joined: Mon Feb 24, 2020 8:37 pm

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by DarioMartin »

Yes, selected it as the bookmark in the menu. have just given myself a crash course on jQuery to better understand the statements.
This is the declaration between <head> tags

Code: Select all

<script>
$(document).ready(function()
{
   var hash = window.location.hash;
   var anchor = $(hash); 
  
   if (anchor.length > 0)
   {
      anchor.click();
   }  
});
</script>
I put debug alerts in the code. anchor.length returns 1 and the contents of "hash" returns "#IR". This is the bookmark I have selected in the menu.
The id of the layer is "IR" in the accordion.

These are the first six lines of the generated accordion code

Code: Select all

<div id="wb_Accordion1">
<div id="Accordion1">
<h3>Terapia de calor Infra Rojo</h3>
<div>
<div id="IR">
<div id="IR_Container">
User avatar
Pablo
 
Posts: 21570
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by Pablo »

This seems to be correct.
DarioMartin
 
 
Posts: 21
Joined: Mon Feb 24, 2020 8:37 pm

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by DarioMartin »

Beings my accordion is itself set within a layer which displays in the content place holder of a master page, I also did a very very simple "site" using only two basic pages to see if it was the layout of my site causing issues; one page with nothing but a simple text menu, one with a straight accordion on the page and the same menu on the accordion page and I left debug alerts in the code.

In one panel of the accordion I put a bookmark, and selected that bookmark in the menu by its native name "Bookmark1" and in the next panel I put a Layer, and in the menu, selected the bookmark "Layer1"

Panel would not open at all using either of the menus. Using the "debug" alerts I could see the correct names being passed through : "#Bookmark1" and "#Layer1", but panel(s) did not open. I am using WB 15.3.0

This would be really really useful - is there any chance it could be implemented in a future version of WebBuilder??
User avatar
Pablo
 
Posts: 21570
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by Pablo »

You can post suggestions here:
https://www.wysiwygwebbuilder.com/forum ... m.php?f=28

If more users find this useful, then I will consider it for future development.
DarioMartin
 
 
Posts: 21
Joined: Mon Feb 24, 2020 8:37 pm

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Post by DarioMartin »

Posted - thanks again for the time you've given me.
Post Reply