I have created an modals system with jQuery.
//Open modal
$('.job_inside').on('click', function(){
var id = $(this).data('id');
$('#'+id).fadeIn(300);
});
//Close modal
$(".close_btn").click(function() {
$(".job_full").fadeOut(300);
});
html:
<!-- Open modal -->
<div class="job">
<div class="job_inside" data-id="job1"></div>
</div>
<!-- Modal -->
<div class="job_full" id="job1" style="display: none;">
<div class="job_full_inside">
<div class="close_btn">×</div>
<img src="resursai/img/sanfierro.jpg" alt="" />
<h2>SanFierro dizainas</h2>
</div>
</div>
I want to make, that if modal id job1 is opened, on right arrow key click it closes job1 ant opens job2, and on left arrow click backs to job1. Is it possible, and how I can make it?
Sorry for grammar.
You could do it like this :
HTML:
<div class="job">
<div class="job_inside" data-id="1">open</div> //notice change here data-id="job1" to "1"
</div>
<!-- Modal -->
<div class="job_full" id="job1" style="display: none;">
<div class="job_full_inside">
<div class="close_btn">×</div>
<h2>First</h2>
</div>
</div>
<div class="job_full" id="job2" style="display: none;">
<div class="job_full_inside">
<div class="close_btn">×</div>
<h2>Second</h2>
</div>
</div>
<div class="job_full" id="job3" style="display: none;">
<div class="job_full_inside">
<div class="close_btn">×</div>
<h2>Third</h2>
</div>
</div>
JS :
var currentId = null;
$(".job_inside").on("click", function () {
var id = $(this).data("id");
currentId = id;
$("#job" + id).fadeIn(300); //small change here
});
$(document).on("keyup", function (e) {
if (e.which === 37 && currentId > 1) {
currentId--;
$(".job_full").fadeOut(300);
$("#job" + currentId).fadeIn(300);
} else if (e.which === 39 && currentId < 3) {
currentId++;
$(".job_full").fadeOut(300);
$("#job" + currentId).fadeIn(300);
}
});
This the basic strategy you want to deploy(Live Preview http://codepen.io/larryjoelane/pen/YwJMPG?editors=1010). You really don't need to worry about the fading in and out the element with the right id if you use the class name you have already provided with JQuery's eq function and an index variable that you will have to increment when you press the left and right arrows. You will want to use the which property on the keyup event to capture the keycode of the arrows. Here are some links to the API if want to learn more about them.
Keyup Event(scroll down to see the event.which example): http://api.jquery.com/keyup/
HTML:
<!-- Open modal -->
<div class="job">
<div class="job_inside" data-id="job1">Click to load</div>
</div>
<!-- Modal 1-->
<div class="job_full" id="job1" style="display: none;">
<div class="job_full_inside">
<div class="close_btn">×</div>
<img src="resursai/img/sanfierro.jpg" alt="" />
<h2>SanFierro dizainas</h2>
</div>
</div>
<!--Modal 2-->
<div class="job_full" id="job2" style="display: none;">
<div class="job_full_inside">
<div class="close_btn">×</div>
<img src="resursai/img/sanfierro.jpg" alt="" />
<h2>United States</h2>
</div>
</div>
<!--Modal 3-->
<div class="job_full" id="job3" style="display: none;">
<div class="job_full_inside">
<div class="close_btn">×</div>
<img src="resursai/img/sanfierro.jpg" alt="" />
<h2>Canada</h2>
</div>
</div>
JavaScript/JQuery:
(function($) {
//store the index of the job
var index = 0;
//Open modal
$('.job_inside').on('click', function() {
$("#job1").fadeIn(300);
});
$(document).on("keyup", function(e) {
console.log(e.which);
switch (e.which) {
//left arrow
case 37:
console.log("left arrow");
//if the index is not 0
if (index !== 0) {
//decrement it
index--;
}
//close the next job
$(".job_full").eq(index + 1).fadeOut(200);
//load the previous job
$(".job_full").eq(index).fadeIn(300);
break;
//right arrow
case 39:
console.log("right arrow");
//if the index incremented by 1 is less than the length of
//collection
if ((index + 1) < $(".job_full").length) {
//increment the index
index++;
}
//close the previous job
$(".job_full").eq(index - 1).fadeOut(200);
//load the next job
$(".job_full").eq(index).fadeIn(300);
break;
}
});
//Close modal
$(".close_btn").click(function() {
$(".job_full").fadeOut(300);
});
})(jQuery);
Related
Hello I would like to reach a level 3 div and change the style of this div
in my example I would therefore like to be able to apply disply:none on style color red
to make the word Warning invisible
<div id="Zone">
<div class="MR-Widget ">
<div class="Title"> </div>
<div class="Errors" style="display: none"></div>
<div class="Content">
<div class="search"> </div>
<div class="resultat" style="width: 120px;"></div>
<div class="MR" id="Lock" style="display: none;"> </div>
<div style="color: red"> Warning </div>
</div>
</div>
</div>
To select 3rd level div:
document.querySelector('#Zone > div > div > div')
Now the problem is you have 4 div at 3rd level. So needed to select all and check style color. That gives:
const warningNone = () => {
Array.from(document.querySelectorAll('#Zone > div > div > div')).forEach(el => {
if (el) {
if (el.style.color === 'red') {
el.style.display = 'none';
}
}
})
}
window.addEventListener('load', warningNone);
<div id="Zone">
<div class="MR-Widget ">
<div class="Title"> </div>
<div class="Errors" style="display: none"></div>
<div class="Content">
<div class="search"> </div>
<div class="resultat" style="width: 120px;"></div>
<div class="MR" id="Lock" style="display: none;"> </div>
<div style="color: red"> Warning </div>
</div>
</div>
</div>
I modified the snippet to check the >div>div>div existence
By the way, I put the function to be fired when document loaded, otherwise your red will not apply
3...
try to split the query line in 2:
const warningNone = () => {
const els = document.querySelectorAll('#Zone > div > div > div');
els.forEach(el => {
if (el.style.color === 'red') {
el.style.display = 'none';
}
})
}
window.addEventListener('load', warningNone);
now in dev tools check which line fire the error
I'm trying to allow users to click within .dropdown-content and the menu remains open. However, I also need to leave the .dropbtn available to click otherwise they cannot open the menu.
I originally attempting to use || in the following code: !e.target.matches('.dropbtn') || !e.target.matches('.dropdown-content').
After a discussion in the comments I was informed that I should be using &&. I updated that section of code and still had some issues with getting the code to work properly. The snippet has been updated below.
Below you can see the area that I believe the focus should be. I am gathering all of the sections that would need to toggle between active and non-active states. Then trying to validate the following:
While a user is within .dropdown-content or any of its children it should not close.
Once the user clicks outside of the drop down button or .dropdown-content (not including DIVs that reside within it, aka. children) the menu should close.
Problem Area:
var ourCompany = document.getElementById("our-company");
var services = document.getElementById("services");
var products = document.getElementById("products");
var resources = document.getElementById("resources");
var goTo = document.getElementById("go-to");
// Close the dropdown(s) if the user clicks outside of it
window.onclick = function (e) {
if (!e.target.matches('.dropbtn') && !e.target.matches('.dropdown-content')) {
ourCompany.classList.remove('active-drop');
services.classList.remove('active-drop');
products.classList.remove('active-drop');
resources.classList.remove('active-drop');
goTo.classList.remove('active-drop');
}
}
Code:
/* Navigation Scroll */
var startPos = -1;
window.onscroll = function() {
var bar = document.getElementById('pm-nav');
var ourCompany = document.getElementById("our-company");
var services = document.getElementById("services");
var products = document.getElementById("products");
var resources = document.getElementById("resources");
var goTo = document.getElementById("go-to");
if (startPos < 0) startPos = findPosY(bar);
if (pageYOffset > startPos) {
bar.style.position = 'fixed';
bar.style.top = 0;
ourCompany.classList.add("dropdown-content-scroll");
services.classList.add("dropdown-content-scroll");
products.classList.add("dropdown-content-scroll");
resources.classList.add("dropdown-content-scroll");
goTo.classList.add("dropdown-content-scroll");
} else {
bar.style.position = 'relative';
ourCompany.classList.remove('dropdown-content-scroll');
services.classList.remove('dropdown-content-scroll');
products.classList.remove('dropdown-content-scroll');
resources.classList.remove('dropdown-content-scroll');
goTo.classList.remove('dropdown-content-scroll');
}
};
function findPosY(obj) {
var curtop = 0;
if (typeof(obj.offsetParent) != 'undefined' && obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
curtop += obj.offsetTop;
} else if (obj.y)
curtop += obj.y;
return curtop;
}
/* When the user clicks on the button, toggle between hiding and showing the dropdown(s) content */
function toggleDrop(drop) {
var i = 0;
while (i < 5) {
document.getElementById(document.getElementsByClassName('dropdown-content')[i].id).classList.remove('active-drop');
i++;
}
switch (drop) {
case "our-company":
document.getElementById("our-company").classList.add("active-drop");
break;
case "services":
document.getElementById("services").classList.add("active-drop");
break;
case "products":
document.getElementById("products").classList.add("active-drop");
break;
case "resources":
document.getElementById("resources").classList.add("active-drop");
break;
case "go-to":
document.getElementById("go-to").classList.add("active-drop");
break;
default:
//make this unknown...
}
}
var ourCompany = document.getElementById("our-company");
var services = document.getElementById("services");
var products = document.getElementById("products");
var resources = document.getElementById("resources");
var goTo = document.getElementById("go-to");
// Close the dropdown(s) if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn') && !e.target.matches('.dropdown-content')) {
ourCompany.classList.remove('active-drop');
services.classList.remove('active-drop');
products.classList.remove('active-drop');
resources.classList.remove('active-drop');
goTo.classList.remove('active-drop');
}
}
<link href="https://www.paymaster.com/net4/css/pm-main.css" rel="stylesheet" />
<!-- Website Header -->
<header class="pm-mainHeader">
<div class="maxWidth-1440">This is a Header</div>
</header>
<!-- Website header :END -->
<!-- Website Navigation -->
<div id="pm-nav" class="pm-mainNav">
<div class="maxWidth-1440">
<div class="pm-row pm-box-sizing">
<div class="dropdown pm-col-5">
<button onclick="toggleDrop('our-company');return false;" class="dropbtn">Our Company</button>
<div id="our-company" class="dropdown-content">
<div class="pm-row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
<div class="mFooter redBg">
<h2>Menu our-company</h2>
</div>
</div>
</div>
<div class="dropdown pm-col-5">
<button onclick="toggleDrop('services');return false;" class="dropbtn">Services</button>
<div id="services" class="dropdown-content">
<div class="pm-row">
<div class="column">
<h3>Category 4</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 5</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 6</h3>
Link 1
Link 2
Link 3
</div>
</div>
<div class="mFooter blueBg">
<h2>Menu services</h2>
</div>
</div>
</div>
<div class="dropdown pm-col-5">
<button onclick="toggleDrop('products');return false;" class="dropbtn">Products</button>
<div id="products" class="dropdown-content">
<div class="pm-row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
<div class="mFooter greenBg">
<h2>Menu products</h2>
</div>
</div>
</div>
<div class="dropdown pm-col-5">
<button onclick="toggleDrop('resources');return false;" class="dropbtn">Resources</button>
<div id="resources" class="dropdown-content">
<div class="pm-row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
<div class="mFooter orangeBg">
<h2>Menu resources</h2>
</div>
</div>
</div>
<div class="dropdown pm-col-5">
<button onclick="toggleDrop('go-to');return false;" class="dropbtn">Go To</button>
<div id="go-to" class="dropdown-content">
<div class="pm-row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
<div class="mFooter purpleBg">
<div class="closeBtnContainer">
<span class="closeBtn"><i class="material-icons">arrow_drop_up</i><i class="material-icons">menu</i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Website Navigation :END -->
<!-- Main Content -->
<div style="padding: 300px;">Test</div>
<!-- Main Content :END -->
<!-- Main Footer -->
<footer class="pm-mainFooter">
<div class="maxWidth-1440">This is a Footer</div>
</footer>
<!-- Main Footer :END -->
There was a lot of hate during the start of this question but I'm thankful for those who stuck around and helped out. The combination of different inputs lead me to figure out what the issue was, it was very simple, adding * to the end of .dropdown-content. Adding * tells the code to look at .dropdown-content and all of its children.
One of the original issue was solved by #Carcigenicate, they informed me I was using || instead of && combining this information with the data above lead me to the answer I was seeking, but my code was still not efficient. So, #rockstar pointed out some key things I could do to help improve my code and is responsible for half of the answer. Thanks again man!
Thanks everyone for the help, without further ado here is the...
ANSWER:
var elems = [
document.getElementById("our-company"),
document.getElementById("services"),
document.getElementById("products"),
document.getElementById("resources"),
document.getElementById("go-to")
];
window.onclick = function (e) {
if (!e.target.matches('.dropbtn') && !e.target.matches('.dropdown-content *')) {
elems.forEach(function (el) {
el.classList.remove("active-drop");
})
}
}
I want to trigger a JQuery event when the user scrolls across a div for the firs time.
I have tried using waypoint. It is not working. Here is the code, it gives no error.
var waypoints = $('#main').waypoint({
handler: function(direction) {
alert("Main div");
}
})
HTML code:
<body>
<!-- main content -->
<div id="push"></div>
<section class="grey darken-4 valign-wrapper">
<div class="container valign">
<div class="col s12">
<h2 class="center-align white-text">Hey!</h2>
<div class="divider"></div>
<p class="center-align white-text flow-text developer"></p>
</div>
</div>
</div>
</section>
<div id="main">
<div class="container" style="padding-top:8px">
<h2 class="center black-text darken-4">Profile</h2>
<h4 class="center teal-text darken-4">
I love to Code <a class="pulse btn-floating"><i class="material-icons">favorite</i></a>
</h4>
<div class="divider"></div>
<div class="row" style="padding-top:5%">
<div class="col s4">
<h4 class=" teal-text darken-4">About me</h4>
<p class="flow-text me" style="font-size:20px">
</p>
</div>
<div class="col s4">
<img src="Images/Aarth.jpg" alt="" class="circle responsive-img">
</div>
<div class="col s4">
<h4 class="teal-text darken-4" style="padding-left:11%">Details</h4>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Name:</strong>
<span class="name "></span>
</p>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Age:</strong>
<span class="age"></span>
</p>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Location:</strong>
<span class="location"></span>
</p>
</div>
</div>
</div>
</div>
</body>
Here are the approaches I have used till now, but nothing worked
function Utils() {
}
Utils.prototype = {
constructor: Utils,
isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
Help would be great!
To use waypoints, bear in mind there needs to be enough scroll room for the top of the "main" div to hit the top of the viewport. This will vary depending on the size of the browser window the user has open. You can set a % offset from the top of the viewport to make it trigger when the element is a certain distance from the top.
If your "main" div is the last element, you can also use the special "bottom-in-view" offset to make it work once the scroll hits the bottom of the page, even if the top of "main" can't reach the top of the viewport:
var waypoints = $('#main').waypoint({
handler: function(direction) {
alert("Main div");
},
offset: "bottom-in-view"
});
All of this information is available in the documentation. See http://imakewebthings.com/waypoints/api/offset-option/ for more details
I created an onboarding walkthrough tour for use in a SaaS App that is being loaded with A/B testing software. The tour automatically begins on initial page load. The user can close the tour at any time. I have used localStorage so the browser will recall at what point the user exits the page and that tour will start again at the further point in the tour. I also have a "replay" button that is disabled when the tour is running and enabled when the tour is finished or closed. The replay button's selector is ".tstour-replay". I am animating the movement of the tour steps by adding a class that is using CSS3 #keyframes rules and then delaying the removal of the class so that the animation will repeat if the user goes back and uses that Next animation again. Those are referred to as "popover-ani1", "popover-ani2" and so on.
I am having an issue that is not consistently happening so I cannot find a pattern that explains why it's happening. Sometimes, the Next and Back buttons of the individual tour modals, referred to in the code as #popoverid1, #popoverid2, and so on or #popoverback1, #popoverback2, and so on, will be disabled. They do not respond to clicks and they both have CSS hover effects that do not work properly. However, the close button, .popover-close, always works. I cannot figure out why sometimes the Next and Back buttons are just completely unclickable and lose their interactivity while the Close button is always fine.
I am fairly new to JavaScript and jQuery.
Here's my JavaScript code:
function tourFunction() {
$(".tstour-replay").addClass("tstour-replay-disable");
$("#tstour-start").click(function(){
//if clicked, do nothing
});
$("#popoverid1").click(function() {
$(".popover1").addClass("popover1-ani").delay(200).fadeOut(50);
$(".popover2").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover1").removeClass("popover1-ani");
}, 250);
});
$("#popoverid2").click(function() {
$(".popover2").fadeOut(50);
$(".popover3").delay(50).fadeIn(50);
});
$("#popoverback2").click(function() {
$(".popover2").addClass("popoverback2-ani").delay(200).fadeOut(50);
$(".popover1").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover2").removeClass("popoverback2-ani");
}, 250);
});
$("#popoverid3").click(function() {
$(".popover3").addClass("popover3-ani").delay(200).fadeOut(50);
$(".popover4").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover3").removeClass("popover3-ani");
}, 250);
});
$("#popoverback3").click(function() {
$(".popover3").addClass("popoverback3-ani").delay(200).fadeOut(50);
$(".popover2").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover3").removeClass("popoverback3-ani");
}, 250);
});
$("#popoverid4").click(function() {
$(".popover4").addClass("popover4-ani").delay(200).fadeOut(50);
$(".popover5").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover4").removeClass("popover4-ani");
}, 250);
});
$("#popoverback4").click(function() {
$(".popover4").addClass("popoverback4-ani").delay(200).fadeOut(50);
$(".popover3").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover4").removeClass("popoverback4-ani");
}, 250);
});
$("#popoverid5").click(function() {
$(".popover5").addClass("popover5-ani").delay(200).fadeOut(50);
$(".popover6").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover5").removeClass("popover5-ani");
}, 250);
});
$("#popoverback5").click(function() {
$(".popover5").addClass("popoverback5-ani").delay(200).fadeOut(50);
$(".popover4").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover5").removeClass("popoverback5-ani");
}, 250);
});
$("#popoverid6").click(function() {
$(".popover6").addClass("popover6-ani").delay(200).fadeOut(50);
$(".popover7").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover6").removeClass("popover6-ani");
}, 250);
});
$("#popoverback6").click(function() {
$(".popover6").addClass("popoverback6-ani").delay(200).fadeOut(50);
$(".popover5").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover6").removeClass("popoverback6-ani");
}, 250);
});
}
function tourReplay() {
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
$(".tstour-replay").addClass("tstour-replay-disable");
$(".popover1").fadeIn("fast");
});
}
function disableTourReplay() {
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
//if clicked, do nothing
});
}
//END FUNCTIONS
$(".popover-btn-start").click(function() {
$(".tour-container").fadeOut();
$(".popover7").fadeOut();
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
//if clicked, do nothing
});
tourReplay();
});
$(".popover-close").click(function(){
$(".tour-container").fadeOut();
$(".popover").fadeOut();
tourReplay();
});
//BEGIN FUNCTION TRIGGERS
var trigger_flag = localStorage.getItem('tstour');
if (!trigger_flag) {
disableTourReplay();
$(".popover1").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '1') { //clicked next1
disableTourReplay();
$(".popover2").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '2') { //clicked next2
disableTourReplay();
$(".popover3").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '3') { //clicked next3
disableTourReplay();
$(".popover4").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '4') { //clicked next4
disableTourReplay();
$(".popover5").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '5') { //clicked next5
disableTourReplay();
$(".popover6").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '6' || '7') { //got to last popover, finished tour or closed out
tourReplay();
}
//END FUNCTION TRIGGERS
//BEGIN LOCAL STORAGE SET
$(document).on("click", "#popoverid1", function(e){
localStorage.setItem('tstour', '1');
});
$(document).on("click", "#popoverid2", function(e){
localStorage.setItem('tstour', '2');
});
$(document).on("click", "#popoverid3", function(e){
localStorage.setItem('tstour', '3');
});
$(document).on("click", "#popoverid4", function(e){
localStorage.setItem('tstour', '4');
});
$(document).on("click", "#popoverid5", function(e){
localStorage.setItem('tstour', '5');
});
$(document).on("click", "#popoverid6", function(e){
localStorage.setItem('tstour', '6');
});
$(document).on("click", ".popover-btn-start", function(e){
localStorage.setItem('tstour', '7');
});
$(document).on("click", ".popover-close", function(e){
localStorage.setItem('tstour', '7');
});
And here is the HTML
<div class="tour-centered">
<div id="tstour-start" class="tstour-replay">How Does This Work?</div>
<div class="popover popover1">
<div class="popover-right">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Employees On Your Calendar</div>
<div class="popover-body">Here's Jane Deaux, a sample employee. I preloaded some events for her in your calendar.</div>
<div class="popover-footer">
<div class="popover-progress">1 of 6</div>
<div class="popover-buttons">
<div class="popover-next" id="popoverid1">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover2">
<div class="popover-above">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Calendar Events</div>
<div class="popover-body">Notice Jane's name on the calendar. Each listing is a scheduled or pending calendar event.
<br />
<br />Hover your mouse over her name to quickly see the event details.</div>
<div class="popover-footer">
<div class="popover-progress">2 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback2">Back</div>
<div class="popover-next" id="popoverid2">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover3">
<div class="popover-above">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Add a New Calendar Event</div>
<div class="popover-body">Double-click on any day to create a new calendar event. Use Jane to try it out and deduct hours from her time-off banks.
<br /><br />Give it a try. I'll wait right here until you're done.<br /></div>
<div class="popover-footer">
<div class="popover-progress">3 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback3">Back</div>
<div class="popover-next" id="popoverid3">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover4">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Create More Calendar Events</div>
<div class="popover-body">Great job! You can also click this icon to create more calendar events.</div>
<div class="popover-footer">
<div class="popover-progress">4 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback4">Back</div>
<div class="popover-next" id="popoverid4">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover5">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Customize Your Calendar</div>
<div class="popover-body">Visit Preferences to customize your calendar event codes, create time-off plans, and much more.</div>
<div class="popover-footer">
<div class="popover-progress">5 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback5">Back</div>
<div class="popover-next" id="popoverid5">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover6">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Add More Employees</div>
<div class="popover-body">When you're ready, add more of your employees and create calendar events for them.
<br />
<br />The more employees you load and track, the easier it is to avoid scheduling conflicts.</div>
<div class="popover-footer">
<div class="popover-progress">6 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback6">Back</div>
<div class="popover-next" id="popoverid6">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover7">
<div class="popover-content-final">
<div class="popover-title-final">Ready to Take Back Your Time?</div>
<div class="popover-btn-start">Start Tracking!</div>
<div class="popover-help">
<a href="https://tracksmart.zendesk.com/hc/en-us/requests/new" target="_blank">
I Need Some Help
</a></div>
</div>
</div>
</div>
I am trying to use a link to open a specific tab that is created using divs and the tabs open and close using javascript.
Here are the tabs and the javascript is within the script tags at the bottom:
<div class="span12 module_cont module_tabs">
<div class="shortcode_tabs">
<div class="all_heads_cont">
<div class="shortcode_tab_item_title it1 head1 active" data-open="body1">%%LNG_ProductDescription%%</div>
<div class="shortcode_tab_item_title it2 head2" id="reviews" data-open="body2">%%LNG_JS_Reviews%%</div>
<div class="shortcode_tab_item_title it3 head3" data-open="body3">%%LNG_JS_ProductVideos%%</div>
<div class="shortcode_tab_item_title it4 head4" data-open="body4">%%LNG_JS_SimilarProducts%%</div>
</div>
<div class="all_body_cont">
<div class="shortcode_tab_item_body body1 it1">
<div class="ip">
%%Panel.ProductDescription%%
</div>
</div>
<div class="shortcode_tab_item_body body2 it2">
<div class="ip">
%%Panel.ProductReviews%%
</div>
</div>
<div class="shortcode_tab_item_body body3 it3">
<div class="ip">
%%Panel.ProductVideos%%
</div>
</div>
<div class="shortcode_tab_item_body body4 it4">
<div class="ip">
%%Panel.SimilarProductsByTag%%
%%Panel.ProductByCategory%%
%%Panel.ProductVendorsOtherProducts%%
%%Panel.SimilarProductsByCustomerViews%%
</div>
</div>
</div>
</div><!-- .shortcode_tabs -->
<script type="text/javascript">
jQuery('.shortcode_tabs').each(function(index) {
/* GET ALL HEADERS */
var i = 1;
jQuery('.shortcode_tab_item_title').each(function(index) {
jQuery(this).addClass('it'+i); jQuery(this).attr('whatopen', 'body'+i);
jQuery(this).addClass('head'+i);
jQuery(this).parents('.shortcode_tabs').find('.all_heads_cont').append(this);
i++;
});
/* GET ALL BODY */
var i = 1;
jQuery('.shortcode_tab_item_body').each(function(index) {
jQuery(this).addClass('body'+i);
jQuery(this).addClass('it'+i);
jQuery(this).parents('.shortcode_tabs').find('.all_body_cont').append(this);
i++;
});
});
jQuery('.shortcode_tabs .all_body_cont div:first-child').addClass('active');
jQuery('.shortcode_tabs .all_heads_cont div:first-child').addClass('active');
jQuery('.shortcode_tab_item_title').live('click', function(){
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
var whatopen = jQuery(this).attr('data-open');
jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
jQuery(this).addClass('active');
});
jQuery('reviews').live('click', function(){
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
var whatopen = jQuery(this).attr('data-open');
jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
jQuery(this).addClass('active');
});
</script>
</div><!-- .module_cont -->
All I want to do is have a link on the same page that activates the reviews tab (id="reviews") and is also known as the body2.
all I have so far for my link is:
Reviews
Help. My brain hurts...
You just need to set the link up so that it doesn't take the user to a new page, and then setup a click event to open the tab up. Example:
HTML:
<a href='javascript:void(0);' id='reviewLink'>Review Tab</a>
JavaScript:
$('#reviewLink').click(function() {
$('.shortcode_tab_item_body').css({display:'none'});
$('.body2').css({display:'none'});
});
Or a jsfiddle here: http://jsfiddle.net/tKLhn/