We Keep Coding

Decrement value by javascript variable inside the css property

I wanna move content with animation.
There's an animation in the jquery function, like that:
.on('click', '.btn', function () {
var contentWidth = $(window).width() - $('.sidebar').width();
$( ".content" ).animate({
left: "+=1000",
}, 5000, function() {
// moving content function
}
);
});
So, because I have various positions of content, I need to use this value in the variable contentWidth. How I can set this value in a variable and decrement the left value every time when I call a function?
Something like left: "+=contentWidth" doesn't work. Is where I make mistake?

Not sure if i got it but...
maybe you could use string interpolation
.on('click', '.btn', function () {
var contentWidth = $(window).width() - $('.sidebar').width();
$( ".content" ).animate({
left: `+=${contentWith}`,
}, 5000, function() {
// moving content function
}
);
});
Not tested but should work theoretically

mbox - firing 3 times instead of once

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>

JQuery backgroundposition only seems to work in one direction

I have been experimenting with Javascript animations for the first time recently and have run into this problem on one of my projects.
The below jquery scrolls horizontally without a problem. However when I add a second value in an attempt to scroll vertically nothing happens, and no errors are thrown up.
$( ".space_background" ).ready(function() {
$( ".space_background" ).animate({
backgroundPosition: "+=200px"
}, 5000, function() {
});
});
The below code is what I thought I would have to add to achieve the effect
$( ".space_background" ).ready(function() {
$( ".space_background" ).animate({
backgroundPosition: "+=200px 200px"
}, 5000, function() {
});
});
I have also tried backgroundPositionX and backgroundPositionY, neither of which work.
Any help sorely appeciated

To move background in vertical direction using jQuery
$( ".space_background" ).ready(function() {
$( ".space_background" ).animate({
backgroundPositionY: "+=200px"
}, 5000, function() {
});
});
Above code works for few browsers reason being jQuery can't animate background position properly as one need it to animate with two values. Above code is working for browsers that implemented the non-standard background-position-x and -y like Internet Explorer. So you need to use any plugins for this like following -
/**
* #author Alexander Farkas
* v. 1.02
*/
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);
or
http://snook.ca/technical/jquery-bg/jquery.bgpos.js
Now you can write following code to animate backgrond position using jQuery
$( ".space_background" ).animate({backgroundPosition:"(-150px 0)"});
For more reference:
http://snook.ca/archives/javascript/jquery-bg-image-animations

Jquery tabs to display one height

I am using jquery tabs to display different content.
my functions looks like this:
$(function() {
$( "#tabs" ).tabs();
});
I have tried to make all the tabs the same height by doing it like this:
var heightStyle = $( ".tabs" ).tabs( "option", "heightStyle" );
// Setter
$( ".tabs" ).tabs( "option", "heightStyle", "fill" );
But this does not seem to work.
Is there another way to set the height to the highest tab?
D

Problem is in your selector, in the above code you are using $("#tabs").tabs(); accessing by id, in below code you are using $(".tabs") accessing by class.

Use this jquery and change class as per your wish
$(function(){
jQuery.fn.equalHeight = function () {
var tallest = 0;
this.each(function() {
tallest = ($(this).height() > tallest)? $(this).height() : tallest;
});
return this.height(tallest);
}
//Now you can call equalHeight
$(".equaltab").equalHeight();
});

jquery - Redo on the old values

[Solved]
This script work good during first run. During run second, third etc. script first display old values var wartosc and late display new value var wartosc (uwaga('notice',wartosc);).
I think that I should somehow close function, but I don't think as :D.
$(function() {
$("#player").on('click', 'img', function() {
var zadanie = $( "input[name^='act']:checked:enabled" ).val();
var wartosc = $(this).attr('value');
var kupka = $('.kupka').attr('value');
switch(zadanie){
case '2':
$( "#dialog" ).dialog( "open" );
$('.wybor').click(function (){
$( "#dialog" ).dialog( "close" );
var ukryta = $(this).attr('value');
uwaga('notice',wartosc); // my own function like alert :D
})
break;
}
});
});

Since the click handle is bound in another handle, it may be bound more than once. You should unbind click event before you bind the new click handle.
$('.wybor').unbind('click').click(function (){...

When you use .attr('value') you're getting the value from the HTML, not the current value of the input if it has changed. Use .val() for that:
var wartosc = $(this).val();
var kupka = $('.kupka').val();