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
Aris
 
 
Posts: 222
Joined: Wed Aug 28, 2013 9:28 am

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

Post by Aris » Sat Sep 21, 2019 8:33 pm

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: 19271
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Sat Sep 21, 2019 8:39 pm

This is only possible by adding custom code:
https://www.digiplek.nl/open-jquery-ui- ... -hash.html

Aris
 
 
Posts: 222
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 » Sat Sep 21, 2019 10:44 pm

Thank you.
Thank you.
Thank you.

DarioMartin
 
 
Posts: 10
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 » Mon Feb 24, 2020 8:43 pm

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

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

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: 19271
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Tue Feb 25, 2020 9:57 am

You do not need to edit the existing code. It's extra code that can be added via Page HTML.

DarioMartin
 
 
Posts: 10
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 » Tue Feb 25, 2020 10:14 am

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: 19271
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Tue Feb 25, 2020 11:36 am

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

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: 19271
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Tue Feb 25, 2020 12:09 pm

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: 10
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 » Tue Feb 25, 2020 12:54 pm

So it doesn't need to be within a function() or within <script> tags?

User avatar
Pablo
 
Posts: 19271
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Tue Feb 25, 2020 1:04 pm

The code example of my previous reply can be placed between head tags.
Multiple '$(document).ready(' functions can be used per page.

DarioMartin
 
 
Posts: 10
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 » Wed Feb 26, 2020 11:37 am

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: 19271
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Wed Feb 26, 2020 12:17 pm

Did you specify the ID of the panel you want to open in the URL?

Post Reply