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.
Related
I am changing the structure of one of my projects and I am unable to figure out why my new code is not adding a class to my element.
The original code is this
(function($)
{
var $nav = $('#nav');
var $nav_a = $nav.find('a');
$nav_a.each(function()
{
var $this = $(this),
id = $this.attr('href'),
$section = $(id);
$section.scrollex(
{
mode: 'middle',
enter: function()
{
$nav_a.removeClass('active');
$this.addClass('active');
}
});
});
})(jQuery);
My new code is this
$("#nav").find("a").each(function(){
var $this = $(this),
id = $this.attr('href'),
$section = $(id);
$section.scrollex({
mode: "middle",
enter: function()
{
$("#nav").find("a").removeClass("active");
$(this).addClass("active");
}
})
});
The new code fails to add the class active to the elements in #nav but the original code works fine. What am I doing wrong in my new code?
You need to point to the correct this
Update from
$(this).addClass("active");
to
$this.addClass("active");
The problem with your code is that you assigned $(this) to $this, thus when you later use $(this) you are actually using $$(this).
Replace the variable in the following line:
$(this).addClass("active");
to
$this.addClass("active");
I have a jQuery function which, on the events mouseover and mouseout of the <div>s with the class .myshp_list_product_image, changes their src attribute.
The issue is that when I hover one of them, it also changes the others.How can I make it only change the one being hovered?
Here's the code of the function:
$(function() {
$('.myshp_list_product_image').mouseover(function() {
$('.myshp_list_product_image').each(function() {
var $this = $(this);
$this.attr('src', $this.attr('src').replace('1s', '2s'));
});
});
$('.myshp_list_product_image').mouseout(function() {
$('.myshp_list_product_image').each(function() {
var $this = $(this);
$this.attr('src', $this.attr('src').replace('2s', '1s'));
});
});
});
You don't need .each() here, get rid of it. You just need to target the current element i.e. this.
$(function() {
$('.myshp_list_product_image').mouseover(function() {
var $this = $(this);
$this.attr('src', $this.attr('src').replace('1s', '2s'));
});
$('.myshp_list_product_image').mouseout(function() {
var $this = $(this);
$this.attr('src', $this.attr('src').replace('2s', '1s'));
});
});
I would recommend you to use mouseenter and mouseleave event, A small demo for the difference between mouseover and mouseenter
I would use .hover() from jQuery
$(function () {
$('.myshp_list_product_image').hover(function () { // mouse in
var $this = $(this);
$this.attr('src', $this.attr('src').replace('1s', '2s'));
}, function () { // mouse out
var $this = $(this);
$this.attr('src', $this.attr('src').replace('2s', '1s'));
});
});
Just target the currently hovered/hovered out element instead of iterating over all elements with same class.
Also you can use .hover instead of mouseover and mouseout and callback function of .attr() to minimize your code:
$('.myshp_list_product_image').hover(
function() {
$(this).attr('src',function(i,oldattr){return oldattr.replace('1s', '2s')});
}, function() {
$(this).attr('src',function(i,oldattr){return oldattr.replace('2s', '1s')});
});
i have number of bootstrap popover and some of them have jqueryui slider as content of the bootstrap popover and that slider is not working
Fiddle
https://jsfiddle.net/yasirhaleem/43qfkjtb/
$( document ).ready(function() {
$('.triggerOverlay').popover({
html : true,
content: function() {
var $this = $(this);
var cont = $this.data('toggle');
return $('#'+cont).html();
},
trigger: 'manual'
}).click(function() {
$('.slider').slider();
});
$(document).on('click', function (e) {
// always hide them all.
var popov = $(".popover");
if (!popov.is(e.target) && popov.has(e.target).length==0 ){
$('.triggerOverlay').popover('hide');
} // if e.target has a popover toggle it.
if ($(e.target).hasClass('triggerOverlay')) {
$(e.target).popover('toggle');
}
});
$( "#slider" ).slider();
});
found the solution to my question posting reply to my own question hope it will be helpful for others.
if someone has better solution please post or suggest in comments.
here is the fiddle https://jsfiddle.net/yasirhaleem/s1ytug1c/
this fiddle http://jsfiddle.net/mmfansler/5kuB8/9/ was not helpful for me i had different schenario, my html was already generated i was using different solution for popover and than we decided to use bootstrap popover and we run into this problem.
All i needed was a callback function below code extend the popover and adds callback function
Extending popover
var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function() {
tmp.call(this); if (this.options.callback) {
this.options.callback();
}
}
Popover Call
$('.triggerOverlay').popover({
html : true,
callback: function () {
$('.slider').slider();
},
content: function() {
var $this = $(this);
var cont = $this.data('toggle');
return $('#'+cont).html();
},
trigger: 'manual'
});
HTML
button<br><br><br><br><br>
<div id="user-profile-overlay" class="customoverlay">content goes here<div class="slider"></div>
</div>
Original fiddle example
Failed example for dynamically created dialog
I got this script to load AJAX content into a jQuery UI dialog whose class is named .open_dia in the fiddle examples. The problem is that I have the .open_dia dynamically loaded into the page in a (window).bind(“load”, function(){} event , so I want to know how to change this line from
var $link = $(this).one('click', function(){....
to something to the effect of
var $link = $('.area').one('click','.open_dia', function() {
so that I can bind the event to the dynamically created element .open_dia to open the dialog. Any help would be appreciated.
Here's the original code:
$(document).ready(function() {
var $loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');
$('.open_dia').each(function() {
var $dialog = $('<div></div>')
.append($loading.clone());
var $link = $(this).one('click', function() {
$dialog
.load($link.attr('href') + ' #content')
.dialog({
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
return false;
});
});
});
Failed Code:
$(document).ready(function(){
$('button').one('click',function(){
$(this).next('.area').append('<a class="open_dia" title="this title" href="http://jsfiddle.net/">Click</a>');
});
var $loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');
$('.open_dia').each(function() {
var $dialog = $('<div></div>')
.append($loading.clone());
var $link = $('.area').one('click','.open_dia', function() {
$dialog
.load($link.attr('href') + ' #content')
.dialog({
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
return false;
});
});
});
Example HTML:
<button>Append open_dia</button>
<div class='area'></div>
Hi I have forked your solution and made modification to your javasript as follows:
var loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');
$(document).ready(function () {
$('button').click(function () {
$(this).next('.area').append('<a class="open_dia" title="this title" href="#">Click</a>');
});
$(document).on('click', '.open_dia', function (evt) {
var dialog = $('<div></div>').append(loading.clone());
dialog.load($(this).attr('href') + ' #content').dialog({
title : $(this).attr('title'),
width : 500,
height : 300
});
dialog.dialog('open');
return false;
});
});
My modified JS fiddle is here: http://jsfiddle.net/91nc1k1t/2/
If you want to load each dialog's content only once, see this update of the forked fiddle: http://jsfiddle.net/91nc1k1t/5/
You can use this:
<button>Append open_dia</button>
<div class='area'><a style="display: none;" class="open_dia"></a></div>
There is no problem if the target DOM element is dynamically generated. For it to work, please ensure that the event handler is registered on container element (parent of the dynamically created element)'s click event. This will fix the issue !
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?