Page 1 of 1
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
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?
Re: Opening specific panel in accordion bootstrap when there is a bookmark in it
Posted: Wed Feb 26, 2020 6:36 pm
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">
Re: Opening specific panel in accordion bootstrap when there is a bookmark in it
Posted: Wed Feb 26, 2020 6:54 pm
by Pablo
This seems to be correct.
Re: Opening specific panel in accordion bootstrap when there is a bookmark in it
Posted: Thu Feb 27, 2020 10:14 am
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??
Re: Opening specific panel in accordion bootstrap when there is a bookmark in it
Posted: Thu Feb 27, 2020 10:55 am
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.
Re: Opening specific panel in accordion bootstrap when there is a bookmark in it
Posted: Thu Feb 27, 2020 12:17 pm
by DarioMartin
Posted - thanks again for the time you've given me.