I have a set of instruction at the top of my page:
<div class="instructions">
<div id="step1" class="step"><span class="step_active">1</span><span class="step_title_active">General Info</span></div>
<div id="step2" class="step"><span class="step_next">2</span><span class="step_title">Select Contact</span></div>
<div id="step3" class="step"><span class="step_next">3</span><span class="step_title">Log Details</span></div>
</div>
I have a form that reveals itself as conditions are met.
The first condition being that both select boxes must have options selected, before the next part appears.
<script>
$(document).ajaxSuccess(function () {
$("#test").hide();
$("#comType, #comDirection").bind('change', function () {
// show the button if they both have a value
if ($("#comType").val().length > 1 && $("#comDirection").val().length > 1) {
$("#test").fadeIn();
}
});
});
</script>
How can I change the classes in #step1 #step2 so that when the above conditions are met, they appear as:
<div id="step1" class="step"><span class="step_complete">1</span><span class="step_title">General Info</span></div>
<div id="step2" class="step"><span class="step_active">2</span><span class="step_title_active">Select Contact</span></div>
Thoughts?
You can use addClass & removeClass property of jQuery.
Try this:
if ($("#comType").val().length > 1 && $("#comDirection").val().length > 1) {
$("#test").fadeIn();
$("#step1").children("span").removeClass("step_active").addClass("step_complete");
$("#step2").children("span").removeClass("step_next").addClass("step_active");
$("#step1").children("span").next("span").removeClass("step_title_active").addClass("step_title");
$("#step2").children("span").next("span").removeClass("step_title").addClass("step_title_active");
}
Related
I am trying to make an image change when I click on a piece of text on a website that I am building.
At this moment I have created a class called device with one of them being device active as shown below:
<div class="col-md-3">
<div class="device active">
<img src="app/assets/images/mockup.png" alt="">
</div>
<div class="device">
<img src="app/assets/images/mockup.png" alt="">
</div>
<div class="device">
<img src="app/assets/images/mockup.png" alt="">
</div>
</div>
And then what i am currently trying to do is remove the class of active when I click on some text with the i.d of #search2. This is my whole jquery script so far:
$("#search2").click(function() {
var currentImage = $('.device.active');
var nextImage = currentImage.next();
currentImage.removeClass('active');
});
However this does not seem to remove the class of active and the image is still displayed? any ideas?
Your selection is done right and it is working for me (the active class is removed from that item). The problem must be somewhere else in your code.
Here is an alternative:
var activeDeviceIndex = 0;
$("#search2").click(function() {
var devicesContainer = $('.device');
$(devicesContainer[activeDeviceIndex]).removeClass('active');
activeDeviceIndex === devicesContainer.length - 1 ? activeDeviceIndex = 0 : activeDeviceIndex++;
$(devicesContainer[activeDeviceIndex]).addClass('active');
});
.device {
display: none;
}
.device.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="device active">
<p>Device 1</p>
</div>
<div class="device">
<p>Device 2</p>
</div>
<div class="device">
<p>Device 3</p>
</div>
</div>
<button id="search2">click</button>
Check on the following, the id on the button to click should be search2 and not #search2, may be just typo stuffs.
after that update your code as follows
/**
*#description - gets the next image to slide, if the last image is the current image, it will loop the sliding
*#param {Element} current - the currently active image
*#param {Boolean} islooped - boolean value indicating if a looping just started
*/
var nextImage = function(current, islooped) {
var next = islooped? current : current.nextSibling;
while(next && next.nodeName.toLowerCase() !== 'div') {
next = next.nextSibling;
}
next = next? next : nextImage(current.parentNode.firstChild, true);
return next;
};
$('#search2').bind('click', function(event) {
var current = $('.device.active').removeClass('active').get(0);
var next = nextImage(current, false);
$(next).addClass('active');
});
I have the following html structure in my web application.
This is a group of <div>s which contain information about items. Specifically there are two <span> tags with pending and done quantities (integer values).
Clicking on other page elements will modify pending and done values.
Is it possible to track those changes and apply a class to the whole <div> when those values are the same?
So the whole <div id="{{ item.id }}"> will have a green background when pending and done match and no color background when values do not match. The actual action to be done is not relevant, what I miss is understanding the right approach in jQuery to monitor values in two html fields.
<div id="{{ item.id }}" href="#" state="{{ item.state }}" class="item">
<div class="row">
<div class="col-xs-4">
<span name="pending">{{ item.pending }}</span>
</div>
<div class="col-xs-4">
<span name="done">{{ item.done }}</span>
</div>
</div>
</div>
Use find and text functions along with these selectors '[name="pending"]' '[name="done"]'.
To listen to javascript modifications (jQuery), an alternative is to override the .val function.
var originalValFn = jQuery.fn.val;
jQuery.fn.val = function(value) {
originalValFn.apply(this, arguments);
if (value !== undefined) {
$('#done').trigger('input');
$('#pending').trigger('input');
}
};
Look at this code snippet.
The function updateSection must be called when the user changes the values.
var target = $('#myId');
var originalValFn = jQuery.fn.val;
jQuery.fn.val = function(value) {
originalValFn.apply(this, arguments);
if (value !== undefined) {
$('#done').trigger('input');
$('#pending').trigger('input');
}
};
var updateSection = function() {
var pending = target.find('[name="pending"]').text();
var done = target.find('[name="done"]').text();
if (pending === done) {
target.addClass('green-class');
target.removeClass('red-class');
} else {
target.addClass('red-class');
target.removeClass('green-class');
}
}
$('#pending').on('input', function(e) {
target.find('[name="pending"]').text(e.target.value);
updateSection();
});
$('#done').on('input', function(e) {
target.find('[name="done"]').text(e.target.value);
updateSection();
});
$('#done').val('3');
$('#pending').val('4');
//updateSection();
.green-class {
background-color: green;
}
.red-class {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myId" href="#" state="{{ item.state }}" class="item">
<div class="row">
<div class="col-xs-4">
<span name="pending">222</span>
</div>
<div class="col-xs-4">
<span name="done">222</span>
</div>
</div>
</div>
<hr>
<p>Enter values to test:</p>
<input id='pending' placeholder='pending'>
<input id='done' placeholder='done'>
Resources
.find()
.text()
.on()
Sure. Place an input element inside each span and have the values actually be stored in the input. Then, set up input event handlers for those input elements that simply compare the values of the inputs. If they are the same. Apply a class.
// Get inputs
var $pending = $(".pending");
var $done = $(".done");
// Set up event handler
$pending.on("input", test);
$done.on("input", test);
function test(){
if($pending.val() === $done.val()){
$("div#parent").addClass("match");
} else {
$("div#parent").removeClass("match");
}
}
input { outline:none; border:none; }
.pending { background-color:rgba(255, 100, 100, .5); }
.done { background-color:rgba(255, 255, 100, .5); }
.match { background-color:rgba(100, 255, 100, .5); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>For testing, type different (and then the same) values into the two fields</h1>
<div id="parent" href="#" state="{{ item.state }}" class="item">
<div class="row">
<div class="col-xs-4">
<span name="pending"><input class="pending"></span>
</div>
<div class="col-xs-4">
<span name="done"><input class="done"></span>
</div>
</div>
</div>
First: the "name" attribute only applies to input elements, you probably want to use the "id" attribute.
I would also suggest creating a function to check for equality, something like this:
var pendingDone = function(){
if($("#pending").text() === $("#done").text()) {
$("#pending").addClass("green");
$("#done").addClass("green");
} else {
$("#pending").removeClass("green");
$("#done").removeClass("green");
}
}
I would suggest just calling this function in all instances that modify the values, since the change and input listener suggested in another answer will not fire if the value is modified by javascript instead of user interaction.
In my application I have 4 links with different IDs and 4 DIV with same ID as each link (I use them for anchor-jumping).
My current code:
One
Two
Three
Four
<div class="col-md-12 each-img" id="1">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="2">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="3">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="4">
<img src="img/album-img.png">
</div>
Sometime users just scroll to second div id="2" first before they click on buttons and when they do so, they are sent to top id="1" first instead of continue to next ID id="3".
Only one button is visible at a time with use of CSS and when link is clicked, I remove that link.
CSS
a.btn{display: none}
a.btn a:first-child{display: block !important;}
jQuery
$(document).ready(function(){
$('a.btn').click(function () {
$(this).remove(); // remove element which is being clicked
});
});
How can I achieve so if user scroll down, each link that has same ID as the DIV get removed.
For instance: If user scroll down to <div class="col-md-12" id="1">, One gets removed and Next link would be Two to click on.
PS: This is for a dynamic page and IDs will change, so we need another selector maybe
This is what I have tried until now, but problem is that it removes all the links and not first one only
$(function() {
var div = $('.each-img').offset().top;
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
$('.each-img').each(function(){
if (scrollTop >= div) {
$("a.btn:eq(0)").remove();
//$("a.btn:first-child").remove();
}
});
});
});
PS: The way HTML & CSS is setup doesn't need to like this and I can change it to whatever that will be better for the function
It's no problem to make it dynamic:
JSFiddle: https://jsfiddle.net/rc0v2zrw/
var links = $('.btn');
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
links.each(function() {
var href = $(this).attr('href');
var content = $(href);
if (scrollTop > content.offset().top) {
$(this).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:fixed; top:0; left:0; right:0">
One
Two
Three
Four
</div>
<div class="col-md-12" id="1">
<img src="http://lorempixel.com/400/500/">
</div>
<div class="col-md-12" id="2">
<img src="http://lorempixel.com/450/500/">
</div>
<div class="col-md-12" id="3">
<img src="http://lorempixel.com/480/500/">
</div>
<div class="col-md-12" id="4">
<img src="http://lorempixel.com/500/500/">
</div>
I think this is more or less what you're after:
JSFiddle
https://jsfiddle.net/wc0cdfhv/
It's good to cache the position of your elements outside the scroll function, this way it doesn't need to be calculated every time.
You should also keep in mind this won't scale too well if you have dynamic content but if you're just working with 4 static links it will do fine.
Code
$(function() {
var scroll1 = $('#1').offset().top;
var scroll2 = $('#2').offset().top;
var scroll3 = $('#3').offset().top;
var scroll4 = $('#4').offset().top;
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop >= scroll4) {
$("#go1, #go2, #go3, #go4").hide();
}
else if (scrollTop >= scroll3) {
$("#go1, #go2, #go3").hide();
$("#go4").show();
}
else if (scrollTop >= scroll2) {
$("#go1, #go2").hide();
$("#go3, #go4").show();
}
else if (scrollTop >= scroll1) {
$("#go1").hide();
$("#go2, #go3, #go4").show();
}
else {
$("#go1, #go2, #go3, #go4").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:fixed; top:0; left:0; right:0; background:#CCC">
One
Two
Three
Four
</div>
<div class="col-md-12" id="1">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="2">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="3">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="4">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
use scrollEvent listener
$(window).scroll(function(e){
if($(this)).scrollTop >= $('div#1').offset().top){
$("a#1").hide();
}
});
Use Something like that and it will work .. Hope this helps
I am useing jquery-ui selectable, I choose multiple divs, For example: divs 1-3 and divs 5-6 after the selection I pass the divs's info to an array and later to a string (strToSend). the problem is : when I choose divs 1-3 and divs 5-6 I get this Information :
for divs 1-3 : 100,200,300.
for divs 5-6 :100,200,300,400,500,600. -> what I really need is to get: 500,600.At first I thought that I need to clear my array in each loop so I tried : _info1.length = 0; _info1 = []; - no change.
I hope my problem is clear, please ideas what to do ?..
//HTML
<div class="ui-selectable" id="day" style="width: 100px; float: left;">
Sunday
<div class="ui-selectee" id="1" >100 </div>
<div class="ui-selectee" id="2" > 200 </div>
<div class="ui-selectee" id="3" > 300 </div>
<div class="ui-selectee" id="4" > 400 </div>
<div class="ui-selectee" id="5"> 500 </div>
<div class="ui-selectee" id="6"> 600 </div>
<div class="ui-selectee" id="7"> 700 </div>
</div>
//Jquery
$(function () {
$("#day").bind("mousedown", function (event) {
return event.metaKey = true;
}).selectable({
stop: function () {
_info1.push(0);
$(".ui-selected", this).each(function () {
var id = this.id;
_info1.push(id);
});
strToSend += _info1[0] + "_" + _info1[1] + "-" + _info1[_info1.length - 1] + "*";
}
});});
Here's a fiddle: http://jsfiddle.net/tS2cV/
Not sure where you're declaring your _info1 but it looks like you just want it to hold the divs you've selected. Your each function (below) goes through and grabs all divs that have been selected, so you don't have to manually push anything into it beforehand.
All I did was declare _info inside of the stop function - I'm sure what you were doing with the string to send so I removed it for simplicity:
$(function () {
$("#day").bind("mousedown", function (event) {
return event.metaKey = true;
}).selectable({
stop: function () {
var _info1 = [];
$(".ui-selected", this).each(function () {
var id = this.id;
_info1.push(id);
});
alert(_info1);
}
});});
(New at jQuery)
Trying to write a function that moves an active class along as an arrow is clicked..
html
<div id="steps">
<a href="#1" data-ref="dynamic-tabs slider-id">
<div class="step step-1 active">
<div class="step-img">
<img width="175" height="120" src="http://site.com/img.png">
</div>
<div class="step-title">Schedule Online or Wave Down a Biker</div>
<div class="step-over"></div>
</div>
</a>
<a href="#2" data-ref="dynamic-tabs slider-id">
<div class="step step-2">
<div class="step-img">
<img width="175" height="120" src="http://site.com/img.png">
</div>
<div class="step-title">We Bike to & Clean Your Car</div>
<div class="step-over"></div>
</div>
</a>
<a href="#3" data-ref="dynamic-tabs slider-id">
<div class="step step-3">
<div class="step-img">
<img width="175" height="120" src="http://site.com/img.png">
</div>
<div class="step-title">Come Back to a Clean Car</div>
<div class="step-over"></div>
</div>
</a>
</div>
<div class="nav-right" data-dir="next" title="Slide right">
right »
</div>
jQuery I'm trying
$(".nav-right a").click(function() {
if( $(".step-1").is('.active') ) {
$(".step-1").removeClass("active");
$(".step-2").addClass("active");
}
});
$(".nav-right a").click(function() {
if( $(".step-2").is(".active") ) {
$(".step-2").removeClass("active");
$(".step-3").addClass("active");
}
});
$(".nav-right a").click(function() {
if( $(".step-3").is(".active") ) {
$(".step-3").removeClass("active");
$(".step-1").addClass("active");
}
});
The problem seems to be that you create 3 (sic!) event handlers which fire sequentially when you click the link.
The first handler, as step 1 is active, sets step 2 to active.
The second handler, as step 2 is now active, sets step 3 to active
The third handler, as step 3 is now active, sets step 1 to active again.
In the end, nothing has happened.
Solution: Use only one event handler, and if-else-statements instead of only if-statements:
$(".nav-right a").click(function() {
if( $(".step-1").is('.active') ) {
$(".step-1").removeClass("active");
$(".step-2").addClass("active");
} else if( $(".step-2").is(".active") ) {
$(".step-2").removeClass("active");
$(".step-3").addClass("active");
} else if( $(".step-3").is(".active") ) {
$(".step-3").removeClass("active");
$(".step-1").addClass("active");
}
});
Of course, we can do much better and write a generic function, which also does not need the step-N classes:
var rotatedElements = $(".step");
$(".nav-right a").click(function() {
var cur = rotatedElements.filter(".active");
cur.removeClass("active");
var index = rotatedElements.index(cur) + 1;
if (index >= rotatedElements.length)
index = 0;
rotatedElements.eq(index).addClass("active");
});
As suggested in comment by theScientist you should use only one event handler.
$(".nav-right a").click(function() {
if( $(".step-1").is('.active') ) {alert('1');
$(".step-1").removeClass("active");
$(".step-2").addClass("active");
return;
}
if( $(".step-2").is(".active") ) {alert('2');
$(".step-2").removeClass("active");
$(".step-3").addClass("active"); return;
}
if( $(".step-3").is(".active") ) {alert('3');
$(".step-3").removeClass("active");
$(".step-1").addClass("active"); return;
}
});
Here it is in a single handler and about as concise as I can make it :
$(".nav-right a").click(function() {
var $steps = $(".step"),
index = $steps.filter('.active').removeClass("active").index();
$steps.eq((index + 1) % $steps.length).addClass('active');
});
There's a couple of problems here, but to address the question you could simplify your code to just this and remove the dependency on .step1, .step2, etc in case you decide to add more steps.
$('.nav-right').find('a').on('click', function(e) {
e.preventDefault();
var $activeStep = $('.step.active'),
$expectedNextStep = $activeStep.closest('a').next().find('.step'),
$nextActiveStep = $expectedNextStep.length ? $expectedNextStep : $('.step').first();
$activeStep.removeClass('active');
$nextActiveStep.addClass('active');
});
However; I would highly recommend putting this in an ordered list, and not wrapping block elements in an anchor. The page will work as you have it but it's just poor semantics.