I have this code snippet I'm using to define some tracking on my site - however it appears to be firing the "QuickViewAddToCartClicked" 3 times in stead of once.
I've spent an hour logically trying to think through what is causing this.
Any ideas would be greatly appreciated!
Thanks.
Please see my code below:
<script>
$( document ).ready(function() {
$( ".quickview_btn" ).click(function() {
var quickview_url = $(this).attr("href");
var qvURL = $(this).attr("href");
$(".quickview_btn").colorbox({
href: qvURL,
opacity: 0.6,
onComplete: function(){
$( ".qlBtns" ).click(function() {
mboxDefine('dynamicElement5', 'QuickViewAddToCartClicked');
mboxUpdate( 'QuickViewAddToCartClicked', 'Clicked=Yess');
});
}
});
mboxDefine('dynamicElement', 'QuickViewPLPclicked');
mboxUpdate( 'QuickViewPLPclicked', 'paramURL='+quickview_url);
});
});
</script>
Related
I have this code.. the problem is that the CSS is not applying in both div's but only in the first one #main-wrapper
I have the same code but this time in a button press and its working, but with the if statement only the single works.. im not sure if the codes is somewhere wrong please help ... i tried to put the script in the end of the body tag but still nothing
if (window.location.href.indexOf("#expand") > -1) {
$( "#main-wrapper" ).animate({ 'width':'984px' }, 'slow');
$( "#sidebar-wrapper" ).animate({ 'display':'none' }, 'slow');
}
You can't animate 'display':'none'.
You could animate the opacity:
$( "#sidebar-wrapper" ).animate({'opacity':0}, 'slow', function(){
$(this).remove();
});
or, as suggested by Me.Name in comments:
$( "#sidebar-wrapper" ).fadeOut('slow');
or use slideUp:
$( "#sidebar-wrapper" ).slideUp();
i am working around an ajax loading powered website . Here i am trying to load different url on different link but there is a little bit problem i am facing . There is used 4 links and 4 pages to load each page is linked with another but on clicking a link 4 pages are loading .
my html is
<div class="col-md-12">
this is one
hello
hello
hello
<div class="ajaxshow"></div>
</div>
and my javascripts are
(function($){
'use strict';
var ajaxcontent = $('[data-content="ajax"]'),
pathname = window.location.pathname,
url = window.location.href,
ajaxUrl;
ajaxcontent.each( function(index, el) {
$( this ).append('<span class="ajax-live"></span>');
ajaxUrl = $(this).attr('href');
$(this).click(function(event) {
event.preventDefault();
$( '.ajax-live' ).addClass('ajax-live-on');
$( this ).after('<span class="ajax-close animated bounceInRight"></span>');
$('.ajaxshow').append().load(ajaxUrl);
$('.ajaxshow').addClass('animated bounceInUp');
$('.ajaxshow').css('display', 'block');
});
$(document.body).on('click', '.ajax-close', function( event ){
event.preventDefault();
$( '.ajax-live' ).removeClass('ajax-live-on');
$( this ).removeClass('ajax-close');
$( '.ajaxshow' ).fadeOut(600).slideUp();
});
});
})(jQuery);
though hete each function is not working it doesnot working.can anyone help?
A working example is here
http://orlandojoes.co.uk/website/ajaxTest.php
The problem is your ajaxUrl variable is within a different closure than the one you assume so by the time it is clicked, it is always the fourth link.
This is because first you do
var ajaxcontent = $('[data-content="ajax"]'),
pathname = window.location.pathname,
url = window.location.href,
ajaxUrl;
Here, ajaxUrl is global to the 'each' closure. In order to fix this problem, remove the ajaxUrl declaration from outside the 'each' scope, and define it within
var ajaxcontent = $('[data-content="ajax"]'),
pathname = window.location.pathname,
url = window.location.href;
ajaxcontent.each( function(index, el) {
$( this ).append('<span class="ajax-live"></span>');
var ajaxUrl = $(this).attr('href');
$(this).click(function(event) {
.
.
.
Also change
$('.ajaxshow').append().load(ajaxUrl);
to
$('.ajaxshow').load(ajaxUrl);
There is no need for append as load will insert the HTML response within the ajaxshow div
user your code in document ready function like this:
$(document).ready(function () {
var ajaxcontent = $('[data-content="ajax"]'),
pathname = window.location.pathname,
url = window.location.href,
ajaxUrl;
ajaxcontent.each( function(index, el) {
$( this ).append('<span class="ajax-live"></span>');
});
$(document).off('click','[data-content="ajax"]');
$(document).on('click','[data-content="ajax"]',function(event) {
var ajaxUrl = $(this).attr('href');
event.preventDefault();
$( '.ajax-live' ).addClass('ajax-live-on');
$( this ).after('<span class="ajax-close animated bounceInRight"></span>');
$('.ajaxshow').append().load(ajaxUrl);
$('.ajaxshow').addClass('animated bounceInUp');
$('.ajaxshow').css('display', 'block');
});
$(document.body).off('click', '.ajax-close');
$(document.body).on('click', '.ajax-close', function( event ){
event.preventDefault();
$( '.ajax-live' ).removeClass('ajax-live-on');
$( this ).removeClass('ajax-close');
$( '.ajaxshow' ).fadeOut(600).slideUp();
});
});
I hope this code will work.
My home page contains multiple boxes.
On each boxes, when mouseover in or out , the title disappears and the content appears.
It works fine.
The problem is that when mouseovering more than one box on a short period of time, it is a mess.
$( ".views-field-wrapper" ).each(function(){
$( this ).hover(function() {
$( "#front_panel",this ).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
});
How can I stop the previous mouseover reaction when mouseovering another box?
EDIT :
My intial code: http://jsfiddle.net/tz3d6ct6/
Kumar's code that works perfectly with jquery > 1.6 (I must use jquery1.4) http://jsfiddle.net/hrkf5p7w/
Try to use stop() and no need to use loop to bind hover event,
$( ".views-field-wrapper" ).hover(function() { // no need to use each loop
$( "#front_panel",this ).stop(true).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).stop(true).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
Try it without using using delay() like,
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='views-field-wrapper type-t nodetype-t'>
<div id='front_panel'>title</div>
<div style='display:none' id='back_panel'>teaser</div>
</div>
I have created a very simple jQuery sliding function that works, but requires improvements. The basic timeline of the function needs to:
SlideDown on mouseenter
Stay visible until mouseleave
When mouseleaves, delay the SlideUp by 2 seconds
^^This works, but if you slide up and down several times, the function stops working for a few seconds. Can anyone please suggest a solution? JS FIDDLE attached
JSFIDDLE: http://jsfiddle.net/lord_dev/b1g50eqk/4/
$(document).ready(function(){
$hover = true;
$( "#slide" ).mouseenter(function() {
if($hover) {
$( ".slide--hidden" ).slideDown('fast');
}
});
$( "#slide" ).mouseleave(function() {
$hover = false;
$( ".slide--hidden" ).delay(2000).slideUp('fast').queue(function(){
enableHover();
$(this).dequeue();
});
});
function enableHover() {
$hover = true;
}
});
Replace your javascript with this. It works great if i understood your problem correctly.
$(document).ready(function(){
var thetimeout;
$('#slide').mouseover(function() {
clearTimeout(thetimeout);
$('.slide--hidden').slideDown();
});
$('#slide').mouseleave(function() {
thetimeout = setTimeout(function() {
$('.slide--hidden').slideUp();
}, 2000);
});
});
I'm using JQuery idle-time plugin to automatically logs out a user after x mins of idle time.
But this idle/active time should be updated in the server as well. So trying to do an Ajax hit to the server inside the active.idleTimer function.
<script type="text/javascript">
(function ($) {
var timeout = 1800000;
$(document).bind("idle.idleTimer", function () {
window.location.href = "MyLOGOUT_URL";
});
$(document).bind("active.idleTimer", function () {
$.ajax({ type: "POST", url : "My_URL" });
});
$.idleTimer(timeout);
})(jQuery);
</script>
But this active.idleTimer is not called when the user is active. What am I doing wrong here?
Seems to work for me:
DEMO
Try putting your code in a jQM pageinit event and use .on() instead of bind:
$(document).on("pageinit", "#page1", function(){
$( document ).idleTimer( 5000 );
$( document ).on( "idle.idleTimer", function(){
$("#textinput-1").val('Idle at: ' + new Date());
});
$( document ).on( "active.idleTimer", function(){
$("#textinput-1").val('Active again at: ' + new Date());
});
});