Develop Reference

Run script only if screen is greater than 767

I only want my script to run if the screen is greater than 767px, so I wrapped my script with
if($(window).width() > 767){
}
Here is my current script:
if($(window).width() > 767){
$('header input').click(function() {
$('#holiday-bg').css({
'background-position': 'center center',
'padding-bottom': '39%',
});
});
}
The script works when it is not wrapped, any ideas?

I only want my script to run if the screen is greater than 767px
you need to check the window size after the click event!
$( 'header input' ).click(function() {
if( $( window ).width() > 767 )
{
$( '#holiday-bg' ).css({
'background-position': 'center center',
'padding-bottom': '39%',
});
}
});

Try replacing "$" with "jQuery".

Add class when gallery slider reaches end or beginning no matter size of gallery content

I have this simple scrolling gallery but can't figure out how to make the Prev/Next controls fade out (via a new class) when the end or beginning is reached.
Here's a fiddle
$('.changeImage').click(function() {
$('#gallery_target').toggle('fast');
});
$('#gallery_next_nav').click(function () {
$( "#gallery_nav" ).animate({
scrollLeft: '+=519px'
});
});
$('#gallery_prev_nav').click(function () {
$( "#gallery_nav" ).animate({
scrollLeft: '-=519px'
});
});
I've tried a few things that didn't work, and can't find documentation that isn't just using a new plugin.

Jquery this not always selecting this

I have multiple divs, When the user clicks on the div, it simply animates some text on the div. The problem is that the correct div is selected some of the time, but some of the time it targets the incorrect div.
$( document ).ready(function() {
$('#SpinnerTrue').css('opacity', '0.0');
$( ".GameWrapper .spinnerWrapper" ).click(function() {
Slide(this, 40);
});
});
function Slide(id, Size)
{
var VidF = $(id).children("#SpinnerFalse");
var VidT = $(id).children("#SpinnerTrue");
var VidV = $(id).children(".LocalVal");
var amount = Size;
if($(VidV).val() == "true")
{
$( VidF ).animate({ "top": "+="+amount, 'opacity': '1.0'}, "fast" );
$( VidT ).animate({ "top": "+="+amount, 'opacity': '0' }, "fast" );
$( VidV ).val('false');
}
else
{
$( VidF ).animate({ "top": "-="+amount, 'opacity': '0' }, "fast" );
$( VidT ).animate({ "top": "-="+amount, 'opacity': '1.0' }, "fast" );
$( VidV ).val('true');
}
}

Works for me....
Sample fiddle: http://jsfiddle.net/JbFe2/
My html, based on your js structure...
<div class="GameWrapper">
<div class="spinnerWrapper">
<div id="SpinnerFalse">FALSE</div>
<div id="SpinnerTrue">TRUE</div>
<div class="LocalVal">LocalVAL</div>
</div>
</div>

How to bind mouseover event after unbinding it?

I'm trying to get a nice animation with jQuery. I came up with that code:
$(document).ready(function () {
$('#arrow_up').hide();
$('#arrow_down').bind({
mouseenter: function() {
$('#content')
.animate({
height: '110px'},
300);
},
mouseleave: function() {
$('#content')
.animate({
height: '100px'},
300);
}})
.click(function() {
$(this)
.fadeOut( 1000 )
.unbind('mouseenter')
.unbind('mouseleave');
$('#content')
.animate({
height: '300px'},
500);
$('#arrow_up')
.delay(1000)
.fadeIn( 2000 );
});
$('#arrow_up').bind({
mouseenter: function() {
$('#content')
.animate({
height: '290px'},
300);
},
mouseleave: function() {
$('#content')
.animate({
height: '300px'},
300);
}})
.click(function() {
$(this)
.fadeOut( 1000 )
.unbind('mouseenter')
.unbind('mouseleave');
$('#content')
.animate({
height: '100px'},
500);
$('#arrow_down')
.delay(1000)
.fadeIn( 2000 );
});
});
It is working nicely, but only the first time. You can check it here: http://www.cow-art.eu/test/index.html
I want to animate the content div on hovering an arrow below. After clicking it I want to slide it down to full size and after the next click - to hide it partially. You can check it on the link provided above. It's working fine, but the arrow hovering animation is working unless I show and hide the content. The second approach is not animating it as the first.
I assume it's because the clicking event is unbinding the mouseenter and mouseleave, and there is no other event what can bind it again.
I ran out of ideas how to fix it. Can you please help me with that one?

marginLeft as a Javascript variable

I'm trying to animate a 'div' in the mobile version of my website.
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "15px"
}, 500 );
}
});
When the 'div' wil change position I'd like to be able to tap once again on it and let it return to its default position.
I tried to create an 'if' statement...but I can't understand why it doesn't work.
I'd like assume the 'marginLeft' of my 'div' as a variable for my javascript code in order to move it to the right if 'marginLeft=10px' and move it to the left (default position) if the "new" 'marginLeft is not equal to 10px anymore.
I've tried with the following code:
var x = ("#iconReorder").style.marginLeft;
if (x = "10px") {
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "15px"
}, 500 );
}
});
} else {
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "10px"
}, 1000 );
}
});
}
Can somebody help me?
I hope that what I said is understandable.
Thank you

So if I understood correctly, this should do:
var x = $("#iconReorder");
x.on('tap', function () {
var to = '10px', time = 1000;
if (x.css('margin-left') === '10px') {
to = '15px';
time = 500;
}
x.animate({
marginLeft: to
}, time);
});
or in action. I replaced tap event with click so that I could see what I'm doing. Anyway it should work better now.
There might be some slimmer way to make it work, but I can't think of any at the moment (maybe some toggle method).

try this
$( "#iconReorder" ).animate({
'margin-left': 15
}, 500 );