Develop Reference

Jquery on('click') not working after initializing menuzord

I have the following on click method on an Element:
$('.searchInputContainer a.dnnSearchBoxClearText').on('click', function () {
var $this = $(this);
var $wrap = $this.parent();
$('.searchInputContainer input').val('').focus();
$this.removeClass('dnnShow');
$('.searchSkinObjectPreview', $wrap).remove();
return false;
});
But after initializing the menuzord element, the on click method isn't working anymore.
jQuery(document).ready(function () {
jQuery("#menuzord").menuzord({
align: "left",
indicatorFirstLevel: "<span class='hide-on-desktop hide-on-tablet'> <i class='fa bw-ico-arrow-small-down' aria-hidden='true'></i></span>",
indicatorSecondLevel: "<i class='bw-ico-arrow-small-down hide-on-mobile' aria-hidden='true'></i><i class='bw-ico-arrow-small-down hide-on-desktop hide-on-tablet' aria-hidden='true'></i>"
});
});
Does anyone know what this can be due to? Or maybe Menuzord overwrites the event?

After using the selector in the JQuery "on" method, it worked:
$('.searchInputContainer').on('click', 'a.dnnSearchBoxClearText', function () {
var $this = $(this);
var $wrap = $this.parent();
$('.searchInputContainer input').val('').focus();
$this.removeClass('dnnShow');
$('.searchSkinObjectPreview', $wrap).remove();
return false;
});
But I don't understand the different. Would be nice if someone can explain it to me.

icon change onclick of menu element jquery

I am trying to replace the calendar icon which is on right side of header,based on item we selected from the menu elements.
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
});
});
Please check full code here

You can do it like this
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
classI= $(this).find("i").attr('class');
$("#chicon i").attr("class",classI+" pull-right");
});
});
Here is working example http://codepen.io/anon/pen/ALWRww

You can write it like this:
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var text = $(this).attr('class');
var icon = $(this).find('i').attr('class');
var newClass = icon + ' pull-right';
$("#title").text(text);
$('#chicon i').removeClass();
$('#chicon i').addClass(newClass);
});
});

This will change your icon and text
$(document).ready(function() {
var oldicon = "fa fa-calendar-check-o";
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
var newicon = $(this).find("i").attr("class");
$("#chicon i").removeClass(oldicon).addClass(newicon);
oldicon = newicon;
});
});

I have done minor change script as below:
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
var icon_class=$(this).find('i').attr('class');
$("#chicon").find('i').attr('class',icon_class+' pull-right');
});
});

Set Variable inside (document).ready for all functions?

Really new to jQuery and this had been baffling me for a while.
I'll use this as an example:
$(document).ready(function(){
$("#link1 a").hover(function(){
var $this = $(this);
$this.css("color", "#fff");
});
});
Obviously enough, this will change the color of the a inside #link1 to white on hover.
THIS is what I was trying to do:
$(document).ready(function(){
var $this = $(this);
$("#link1 a").hover(function(){
$this.css("color", "#fff");
});
$("#link2 a").hover(function(){
$this.css("color", "#f00");
});
});
This doesn't work.
Am I able to set var $this = $(this); inside (document).ready so it works with all functions inside it?
Sorry if this is a silly question, couldn't find an answer anywhere else. Wasn't 100% sure to search for if I'm honest!

your statement var $this = $(this); while valid, doesn't achieve what you need. If you think about it... THIS is referring to $(document)
So, if you change your code to this :
$(document).ready(function(){
$("#link1 a").hover(function(){
var $this = $(this);
$this.css("color", "#fff");
}); //In this case $this refers to $("#link1 a")
$("#link2 a").hover(function(){
var $this = $(this);
$this.css("color", "#f00");
}); //In this case $this refers to $("#link2 a")
});
however, that is not really necessary, as you can just do this :
$(document).ready(function(){
$("#link1 a").hover(function(){
$(this).css("color", "#fff");
});
$("#link2 a").hover(function(){
$(this).css("color", "#f00");
});
});
Now if you wanted to increase the scope of $this you can do something like so :
$(a).hover(function() {
var $this = $(this);
//now if you wanted to check for which link is currently hovered you can say this :
var link = $this.attr("id");
//this will set link equal to the current id
//NOW you can have if statements checking which link it is...
if(link == "link1") { ... do stuff }
if(link == "link2") { ... do other stuff }
}
also, if you are using JQuery version POST 1.7 you should be calling events like so :
$(a).on("hover", function () {
...some function
});
Lastly, don't be afraid to look at the JQuery API for some help with things... it is very well written and provides examples
https://api.jquery.com/

No, but you could select everything -
$(document).ready(function() {
$this = $('*'); // all elements in the DOM for this page
});
I don't recommend it though, why are you doing this?

Add class to several elements

I have a cloned element and I want it so if I add a class to one of them it checks for active removes is and adds it to this and translates to the other. Here's what I'm working with:
$(document).ready(function() {
$("li").click(function(){
/*Here I want to add something like var active = $(.clonedelement + this, this)
but that does probably not makes sense, so what should i do? */
var active = $(this)
// If this isn't already active
if (!$(this).hasClass("active")) {
// Remove the class from anything that is active
$("li.active").removeClass("active");
// And make this active
active.addClass("active");
}
});
});
Right now, it removes the current active from both, not does only add class to one.
I made a jsfiddle of it
http://jsfiddle.net/pintu31/8BxuE/
function UpdateTableHeaders() {
$(".persist-area").each(function() {
var el = $(this),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
Header = $("#headerny", this)
if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
Header.addClass("floatingHeader");
} else {
Header.removeClass("floatingHeader");
};
});
}
// DOM Ready
$(function() {
$(window)
.scroll(UpdateTableHeaders)
.trigger("scroll");
});

If you just need to highlight the clicked element with the class of active, and remove all others then try this:
$("li").click(function(){
$("li").removeClass("active");
$(this).addClass("active");
});
You don't really need to check if either this, or others already have the class, simply steamroller to 'active' class off all the others and add it to the one that's been clicked

try this
demo updated 1
demo updated 2 //with clone(true)
demo updated 3 //with clone(false) - default
demo updated 4
$(document).ready(function() {
$(document).on('click', 'li', function(){
var ind = $(this).index();
$('li').removeClass('active');
$('li').eq(ind).addClass('active');
$('#header1').empty();
$('#header').find('ul').clone(true).appendTo( '#header1' );
});
});

$(document).ready(function() {
$("li").click(function(){
$("li").removeClass("active");
// And make this active
$(this).addClass("active");
}
});
});

Writing JQuery If Statement

I am trying to write a JQuery If Statement.. What I am trying to achieve is basically to highlight the appropriate link (a) when the certain div (infotab) is clicked. They are all hidden as you can see, but when clicked, become visible in a nice fade. I want to highlight the item that was clicked. (Change the background color to whatever I want, such as red in the code below.)
The code I have below works, but incorrectly. It highlights all of the a's in that div. I just want the one highlighted that was clicked. Thanks for your help you guys are great.
$(document).ready(function () {
$('#infotab_two_s, #infotab_three_s, #infotab_four_s, #infotab_five_s').hide();
});
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s';
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
$("subnav_holster li a").css({
"color": "red"
});
});
});

Grab the li that was clicked and access that element's a:
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s';
var clicked = $(this);
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
clicked.find('a').css({
"color": "red"
});
});
});

You should cache this and then highlight it:
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s',
$this = $(this);
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
$('.subnav_holster li a').css({
"background-color": "white" // reset all to default color
});
$this.find('a').css({
"background-color": "red" // set highlight to this element only
});
});
});