I have this Markup, and the way this is supposed to work is the user click on the "icon arrow" and this following JS is supposed to fire which will display the hidden content, in other words opening the window. this works in another program, but is there any reason this is not firing.
Here is the markup:
<div data-bind="foreach {data:movies}">
<div class="content-item full bottom-border">
<div class="content-item-container">
<div class="movie-listing-header">
<a class="icon arrow"></a>
<div class="movie-details">
<div class="title"></div>
<div class="info">
<div>
<span class="rating" data-bind="css: 'rating-' + (MovieRating || 'NR').toLowerCase().replace(/-/, '')"></span>
</div>
</div>
</div>
<a class="icon right-arrow"></a>
</div>
<div class="showtimes">
<div data-bind="template: { name: 'movie-grouped-showtimes-template', data: $data }"></div>
</div>
</div>
</div>
</div>
and here is the .js
$(document).ready(function () {
$('.icon.arrow').click(function () {
var active_el = $(this);
$('.movie-listing-header').each(function () {
if ($(this).get(0) === active_el.parent().get(0)) {
if ($(this).hasClass('active')) {
$(this).siblings('.showtimes').hide();
} else {
$(this).siblings('.showtimes').show();
}
$(this).toggleClass('active');
} else {
$(this).removeClass('active');
$(this).siblings('.showtimes').hide();
}
});
});
});
Related
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>
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technology closedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
I have list of class="listing-main" and i try to open block class="thelanguage" style="display: none;" on click of class="technology closedlanguage".
But what i need, when i click on class="technology closedlanguage" at that time class change "closedlanguage" to "openlanguage" and style change 'none' to 'block'.
But when i click, only one block open at that time from list of div's
<script type="text/javascript">
$(document).ready(function () {
$('.lsiting-main .closedlanguage').click(function (event) {
event.preventDefault();
var target = $('.thelanguage');
$(target).toggleClass('hidden show');
$('.thelanguage').css('display', 'block');
})
});
I have updated the HTML a bit and also if your willing to use JavaScript then refer the below code, it is working as per your expectation.
Here is the JSFiddle Link: Working JS Fiddle Link
JS Code is :
<script>
document.getElementById("technologyclosedlanguage").addEventListener("click", myFunction);
function myFunction(){
var thelanguage = document.getElementById("thelanguage");
var technology = document.getElementById("technologyclosedlanguage");
thelanguage.style.display="block";
technology.className = "technologyopenlanguage";
alert(technology.className); //class name changed.
}
</script>
HTML Code is :
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technologyclosedlanguage" id="technologyclosedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" id="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
The Language
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
Let me know if it works, and helps you. Happy Coding.
Change your script to:
<script type="text/javascript">
$(document).ready(function () {
$(".closedlanguage").click(function (event) {
var target = $(".thelanguage");
$(target).toggleClass("hidden");
$(".hidden").css("display", "none");
event.preventDefault();
});
How can I make the current option active and disable the others? I was trying this: https://jsfiddle.net/jpr33wnn/2/
I'm new to jQuery and getting stuck. Please tell if doing it wrong. Thanks.
<div class="col-lg-2 inner" id="dropdown1-parent">
<h6 class="right list-item">Hendrik de Zeeuw</h6>
</div>
<div class="dropdown" id="dropdown1" style="display:none;">
<div class="col-lg-3">
<p class="dropdown-header">
Gegevens wijzijen
</p>
</div>
</div>
<div class="col-lg-2 inner" id="dropdown2-parent">
<h6 class="right list-item">Hendrik de Zeeuw</h6>
</div>
<div class="dropdown" id="dropdown2" style="display:none;">
<div class="col-lg-3">
<p class="dropdown-header">
Gegevens wijzijen
</p>
</div>
</div>
.bg {
color: red;
}
(function() {
var object = {
dropdown1: $('#dropdown1'),
dropdown2: $('#dropdown2'),
dropdown1parent: function() {
if (object.dropdown1.is(':hidden')) {
object.dropdown1.show();
}
},
dropdown2parent: function() {
if (object.dropdown2.is(':hidden')) {
object.dropdown2.show();
}
}
}
$('#dropdown1-parent').on('click', function() {
$(this).addClass('bg');
object.dropdown1parent();
});
$('#dropdown2-parent').on('click', function() {
$(this).addClass('bg');
object.dropdown2parent();
});
})();
I have changed your markup little bit like:
HTML:
<div class="col-lg-2 inner ddparent" data-target='dropdown1' id="dropdown1-parent">
<h6 class="right list-item">Hendrik de Zeeuw</h6>
</div>
<div class="dropdown" id="dropdown1" style="display:none;">
<div class="col-lg-3">
<p class="dropdown-header">Gegevens wijzijen</p>
</div>
</div>
Added a class name 'ddparent' to the parent and 'dropdown' to the dropdowns div and an attribute data-target to target the specific ones.
Is this you want:
$(function () {
$('.ddparent').on('click', function () {
var target = $(this).data('target');
$(this).addClass('bg').siblings('.ddparent').removeClass('bg');
$('#'+target).show().siblings('.dropdown').hide();
});
});
An updated fiddle.
You can simplify your code by the use of common classes and DRY principles. This completely negates the need to both maintain an object to store the references to the individually identified dropdown and related parent elements. It also means that a single click handler can work for any number of dropdowns. Try this:
$(function () {
$('.dropdown-parent').click(function () {
var $parent = $(this);
$parent.toggleClass('bg').siblings().removeClass('bg');
var $dropdown = $parent.next('.dropdown');
$('.dropdown').not($dropdown).hide();
$dropdown.toggle($dropdown.is(':hidden'));
});
});
<div class="col-lg-2 inner dropdown-parent">
<h6 class="right list-item">Hendrik de Zeeuw</h6>
</div>
<div class="dropdown">
<div class="col-lg-3">
<p class="dropdown-header">Gegevens wijzijen</p>
</div>
</div>
Updated Fiddle
Here is the code up to now. i want to access the value 1 of the <div class="field-item even">1</div>, and then if the value is 1 add a class, if the value is 0, add a another class. My code only access the first field-collection-container, i can't figure it out the problems.
$(document).ready(function () {
jQuery.each($('.field-collection-container'), function (i, obj) {
alert($(this).find('.field-items .content .field-item').text());
})
});
the html
<div class="container">
<div class="field-collection-container clearfix">
<div class="field field-name-field-interview-feeling field-type-field-collection field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items">
<div class="field-item even">
<div class="field-collection-view clearfix view-mode-full field-collection-view-final">
<div class="entity entity-field-collection-item field-collection-item-field-interview-feeling clearfix" about="/dtesthkinterview/field-collection/field-interview-feeling/4" typeof="">
<div class="content">
<div class="field field-name-field-19 field-type-list-boolean field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items">
<div class="field-item even">1</div>
</div>
</div>
<div class="field field-name-field-no-people field-type-list-boolean field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items"><div class="field-item even">0</div></div>
</div>
<div class="field field-name-field-untrust field-type-list-boolean field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items"><div class="field-item even">0</div></div>
</div>
<div class="field field-name-field-waste-money field-type-list-boolean field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items"><div class="field-item even">0</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="field-collection-container clearfix">
.....
</div>
<div class="field-collection-container clearfix">
.....
</div>
$('.field-collection-container .field-items .field-item').addClass(function () {
return $(this).text() === "1" ? "one-class" : "another-class";
});
Note that you do not need .each() at all.
You could use $.trim($(this).text()) if you expect spaces to be present.
jQuery.each($('.field-collection-container .field-items .content .field-item'), function (i, obj) {
if($(this).text() == "1"){
$(this).addClass("someclass");
}else if($(this).text() == "0"){
$(this).addClass("anotherClass");
}
});
Working Example http://jsfiddle.net/P9meu/
Check this sample on jsFiddle
http://jsfiddle.net/vijaypatel/Q2GHV/
$(function () {
$('.field-collection-container').each(function (index, obj) {
$(this).find('.field-items .content .field-item').each(function (index, obj) {
alert($(this).text());
if ($(this).text() == '1') {
$(this).prop('class','One');
} else {
$(this).prop('class','Zero');
}
});
});
});
Above code is woroking fine with multiple "field-collection-container" and also modify odd even elements
<div class="field-items">
<div class="field-item even">
<div class="field-collection-view clearfix view-mode-full field-collection-view-final">
<div class="entity entity-field-collection-item field-collection-item-field-interview-feeling clearfix" about="/dtesthkinterview/field-collection/field-interview-feeling/4" typeof="">
<div class="content">
<div class="field field-name-field-19 field-type-list-boolean field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items">
<div ***id="id1"*** class="field-item even">1</div>
</div>
Instead of calling like this
$(document).ready(function () {
jQuery.each($('.field-collection-container'), function (i, obj) {
alert($(this).find('.field-items .content .field-item').text());
})
});
u can use id for a div and call like this
$(document).ready(function () {
{
var t=$("#id").text();
alert(t);
if(t==1)
{
$("#id1").addClass(".classname");
}
else
{
if(t==0)
{
$("#id1").addClass(".anotherclassname");
}
}
})
Please find the below code and i hope it solves your problem
$("div.content").find("div.field-item").each(function () {
if ($(this).html() == 1)
$(this).addClass("evenDivClass");
else if ($(this).html() == 0)
$(this).addClass("oddDivClass");
});
If you really only want the alternating fielditem divs in different classes you could try
$.each($(".field-item").find(".even"), function(i,o){ if(o.textContent==="1") $(o).addClass("some"); if(o.textContent==="0") $(o).addClass("other");)
Which is short and fast.
Here is an example of a javascript solution
var fieldItems = document.querySelectorAll(".field-collection-container .field-item");
Array.prototype.forEach.call(fieldItems, function (fieldItem) {
var text = fieldItem.textContent.trim();
if (text === "0") {
fieldItem.className += " Zero";
} else if (text === "1") {
fieldItem.className += " One";
}
});
On jsfiddle
I have a page that when a user clicks a title, the following div toggles display.
I want to somehow say if any other divs are display:block then set them to display none first.
I have the following...
$('.office-title').click(function(){
$(this).next('div').slideToggle();
return false;
});
and my html markup is as such...
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
</office> is not a valid closing. The closing should be </div>
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
CSS:
.office
{
display: none;
}
and jquery:
$(function () {
$('.office-title').click(function () {
$(this).next('div').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
});
HERE YOU CAN CHECK
This should do it: http://jsfiddle.net/gKgJ7/
$('.office-title').click(function(){
$('.office').slideUp();
$(this).next('div').slideToggle();
return false;
});
note:
This is not a valid closing:
<div class="office">sadasd</office>
//---------------------^^^^^^^^----should be </div>
$('.office-title').click(function(){
$(this).next('div').slideToggle();
$(this).parent(".office-row").siblings().hide(); // this should help
return false;
});
This will close all the open div with animation and opens the required div
$('.office-title').click(function(){
var that = $(this);
if('.office').each(function() {
if($(this) == $(that).next('div')) {
$(this).slideToggle();
}
else {
if($(this).css('display')!=='none') {
$(this).slideToggle();
}
}
});
return false;
});
Try like below... it will work...
Fiddle : http://jsfiddle.net/RYh7U/83/
$(document).ready(function () {
$('.office-title').next('div').slideToggle();
$('.office-title').click(function(){
$('.office-title').next('div').slideUp();
$(this).next('div').slideToggle();
return false;
});
});