I'm using jQuery Tourbus to guide a user through my website. I want it to show up on loading the window the first time someone visits but after that it shouldn't load unless the user clicks on the information icon.
To make sure it auto loads only when the user vists the first time, I did this -
<?php
if($tourbus_verify==0) {
?>
<script type="text/javascript">
$(window).load( function() {
var tour = $('#my-tour-id').tourbus( {} );
tour.trigger('depart.tourbus');
} );
</script>
<?php
}
?>
Upon loading the page, I have a method that enters the value 1 into the database. So, if a user visits for the first time, $tourbus_verify will be 0, so the tour loads when the page loads. If the user has already visited the page before, the $tourbus_verify will be 1 so it won't auto load.
The tour it loads is as follows -
<ol class='tourbus-legs' id='my-tour-id'>
<li data-orientation='centered' data-width='400'>
<p>Hello</p>
<a href='javascript:void(0);' class='tourbus-next'>Next</a>
</li>
<li data-el='#stuff' data-orientation='top' data-width='400'>
<p>That's awesome</p>
<a href='javascript:void(0);' class='tourbus-prev'>Previous</a>
<a href='javascript:void(0);' class='tourbus-next'>Next</a>
</li>
<li data-el='#tourbus-restart' data-orientation='left' data-width='400'>
<p>Bye</p>
<a href='javascript:void(0);' class='tourbus-stop'>End!</a>
</li>
</ol>
Everything works well so far. Now, I have an icon which upon clicking loads the tour -
<div class="row-fluid">
<span style="cursor: pointer;" id="tourbus-restart">
<i class="fa fa-info" aria-hidden="true"></i>
</span>
</div>
And at the end of the page, I have -
<script type="text/javascript">
$("#tourbus-restart").click(function(){
var tourclick = $('#my-tour-id1').tourbus( {} );
tourclick.trigger('depart.tourbus');
});
</script>
This loads the same tour as before but with a different ID -
<ol class='tourbus-legs' id='my-tour-id1'>
<li data-orientation='centered' data-width='400'>
<p>Hello</p>
<a href='javascript:void(0);' class='tourbus-next'>Next</a>
</li>
<li data-el='#stuff' data-orientation='top' data-width='400'>
<p>That's awesome</p>
<a href='javascript:void(0);' class='tourbus-prev'>Previous</a>
<a href='javascript:void(0);' class='tourbus-next'>Next</a>
</li>
<li data-el='#tourbus-restart' data-orientation='left' data-width='400'>
<p>Bye</p>
<a href='javascript:void(0);' class='tourbus-stop'>End!</a>
</li>
</ol>
For some reason, this works well once, but fires an additional instance of the tour the second time, so I end up running two tours at the same time as shown in the image below -
So, I have to click each Next twice to finish the tour. Does anyone know what could be causing this? Thanks!
I see it this way:
The line $(selector).tourbus() is to initialize the plugin and bind some functionality to the element selector. When you put it inside the click event handler, you are initializing the element only when you click. So, if you click twice, then you are initializing twice. I can only assume clicking three times would initialize the plugin three times on the element; and so forth. When you initialize again, the previous instance(s) still remain attached the element.
So, by putting the line outside the click event handler, you are ensuring that the plugin is initialized only once.
Related
I'm using WPBakery Page Builder for tabs. And I want to show a text block outside the tab section (on a diferent row) with a specific class when first tab with href #1521496635357-e8313acf-e8c2 is open and another text block when the secound tab with href #1521496635380-99d0c08b-67d8 is open (and the first text block to be hidden).
Can you give me a hint with CSS or JS?
Thank you!
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab vc_active" data-vc-tab="">
<a href="#1521496635357-e8313acf-e8c2" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">PRIX STANDARD</span>
</a>
</li>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#1521496635380-99d0c08b-67d8" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">PRIX BUDGET</span>
</a>
</li>
</ul>
Your example is not entirely clear to me, but you should be able to add event listeners to your tabs:
<a href="#1521496635357-e8313acf-e8c2" data-vc-tabs="" data-vc-container=".vc_tta" onclick="doSomething()">
In your page javascript, you could have a function that does something:
function doSomething() {
document.getElementsByClassName("myclass")[0].style.display = "none";
document.getElementsByClassName("myotherclass")[0].style.display = "inline";
}
You could certainly handle this better by introducing jquery or another framework to simplify some of this handling, but depending on your situation that may or may not be feasible.
Sorry if this is such a 'newbe' question, been fighting this for a while...
Seeking to fire an <a href> from within a tag.
Found several ways to do it, however.. the entire script is with-in an <ul>, so script to "click" the <a href> occurs on load of index.html, not when the specific tag is called.
Sorry if confusing; here are some snippets of code that may help explain.
<ul id="menu">
<!-- several <li> to other parts of the site, then: -->
<li>
<a href="#!/WORKHISTORY" onclick="ga('send','event','Internal Links','Work History')">
<span class="over"></span>
<span class="txt1">Work History</span>
</a>
</li>
</ul>
Followed by:
an <article> and a <ul>
Within the <ul>, is a tag referencing the "workhistory" tag.
<li id="WORKHISTORY">
<div class="box">
<a id=wrkhst1 href="/gallery/1426894494/1426894576.jpg" rel="prettyPhoto[1426894494]">
<span class="over"></span>
</a>
</div>
</li>
I have tried to use <script>document.getElementById('wrkhst1').click();</script>
Which works, however it fires at the load of index.html, not with the click of the parent <li>, as it reads the main index page and loads it.
I tried the same script this in the and not using the tag, but same result.
You need to add an eventhandler, for the onclick-event, on the li element. There you simulate the click on the <a> tag.
In code it could look like:
document.querySelector('#WORKHISTORY').onclick = function(){
document.querySelector('#wrkhst1').click();
};
BUT there are very few scenarios where this is needed. I'm sure in your case it would be better to make the <a> display: block; and set it to the size of the <li>. So <a> can do for what it was made for, without any need of javascript.
I am using simpelmodal to create dialog in jquery, but now the issue is in one of my html page i am adding
li elements dynamically , and when on a click of a button i try to fire $("attachment-modal-content").modal() dialog box doesnt appear until i again tap over a screen or move the screen. as soon as i move the screen it appears.
notable things is that if i dont load any li elements in the page , it popups normally.
here is the example page , initially attachment-modal-content is set to display:none
<div>
<a href="#" id="openDialog" />
<ul id="mylist">
</ul>
<div id="attachment-modal-content">
<h3>Attachment</h3>
<ul class="attachment">
<li id="imageBtn" class="green"><em><i class="fa fa-camera"></i></em><span>Image</span></li>
<li id="audioBtn" class="red"><em><i class="fa fa-volume-up"></i></em><span>Audio</span></li>
<li id="videoBtn" class="yellow"><em><i class="fa fa-video-camera"></i></em><span>Video</span></li>
<li id="linkBtn" class="blue"><em><i class="fa fa-link"></i></em><span>Link</span></li>
</ul>
<ul class="attachList">
</ul>
</div>
</div>
</div>
button code
$("#openDialog").on('click',function(){
$("#attachment-modal-content").modal();
});
once i load the date using $('#mylist').append('<li><li>') , dialog wont appear on a first button click , it appears
when i move the screen.
I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help
I know this is a real newbie question, but that's what I am! I've been playing with ajax, and I have these two images swapping when I press the two buttons.
Question: How do I make the button have the active state displaying while it's corrisponding image is displaying?
I'm sure I need to do something like set an id on the image, but other than that, I'm not sure...
My code (I'm not displaying the ajax stuff that is making the image swap, because I doubt you need that too):
<div class="wrapper">
<div class="transcriptionbuttons">
<ul class="transcript">
<li class="transcript"><a class="transcriptionhorbutton" href="javascript:void()" onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback)"></a></li>
<li class="transcript"><a class="transcriptionvertbutton" href="javascript:void()" onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback)""></a></li>
</ul>
</div>
<div class="transcriptimage" id="targetDiv">
<img src="this gets populated with ajax..." alt="">
</div>
</div>
Thank you!
Joel
Edit:
Sorry it wasn't clear. The list items are buttons. Click a list item, and it loads an image in targetDiv. I want the button that is "active" to remain active.
If I understood the question.... you could, for example,
<img id="targetImg" src="this gets populated with ajax..." alt="">
and in your JavaScript callback
document.getElementById("targetImg").setAttribute("src", "new_image_source.jpg");
EDIT
If instead you meant you wanted to change the <a> tag when clicked, you could...
<li class="transcript">
<a class="transcriptionhorbutton"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>
and pass this into a function which will make the changes you want (admittedly that part is a little unclear)
EDIT 2
<li class="transcript">
<a id="transcriptionhorbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>
<li class="transcript">
<a id="transcriptionvertbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this);"></a>
</li>
<script>
var buttons = [ document.getElementById("transcriptionvertbutton"),
document.getElementById("transcriptionhorbutton")];
function make_active(el) {
deactivate_buttons();
el.setAttribute("class","active");
}
function deactivate_buttons() {
buttons[0].setAttribute("class","inactive");
buttons[1].setAttribute("class","inactive");
}
</script>
It's not the prettiest solution, but it should give you an idea of how the problem can be solved