Page 1 of 2

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

Posted: Sat Sep 21, 2019 8:33 pm
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.

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

Posted: Sat Sep 21, 2019 8:39 pm
by Pablo
This is only possible by adding custom code:
https://www.digiplek.nl/open-jquery-ui- ... -hash.html

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

Posted: Sat Sep 21, 2019 10:44 pm
by Aris
Thank you.
Thank you.
Thank you.

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

Posted: Mon Feb 24, 2020 8:43 pm
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?

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

Posted: Mon Feb 24, 2020 8:53 pm
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

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

Posted: Tue Feb 25, 2020 9:29 am
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.

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

Posted: Tue Feb 25, 2020 9:57 am
by Pablo
You do not need to edit the existing code. It's extra code that can be added via Page HTML.

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

Posted: Tue Feb 25, 2020 10:14 am
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?

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

Posted: Tue Feb 25, 2020 11:36 am
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.

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

Posted: Tue Feb 25, 2020 11:50 am
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

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

Posted: Tue Feb 25, 2020 12:09 pm
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.

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

Posted: Tue Feb 25, 2020 12:54 pm
by DarioMartin
So it doesn't need to be within a function() or within <script> tags?

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

Posted: Tue Feb 25, 2020 1:04 pm
by Pablo
The code example of my previous reply can be placed between head tags.
Multiple '$(document).ready(' functions can be used per page.

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

Posted: Wed Feb 26, 2020 11:37 am
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.

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

Posted: Wed Feb 26, 2020 12:17 pm
by Pablo
Did you specify the ID of the panel you want to open in the URL?