Jquery click function problems - javascript

New to jQuery I am trying to have an image that when I click on it I want to move up a certain amount of pixels then when another image is clicked go back down to the original state?
so far i have tried this
$(".wrap").click(function(){
$(this).css("margin-top", "-15px");
});
I just cant figure out how to make it move down to its original place
thanks

Try to do:
$("img.wrap").click(function(){
$("img.wrap").css("margin-top", "0px");
$(this).css("margin-top", "-15px");
});

For better look use Jquery animate
$( ".wrap" ).click(function() {
$(this).animate({
top: "15px",
}, 500);
});

Place it in document.ready and use latest JQuery source file:
<script type="text/javascript>
$(document).ready(function(){
$(".wrap").on('click',function(){
$(this).css("margin-top", "-15px");
});
});
</script>

Try to wrap it in ready()
And css() may not apply margins so use javascript marginTop like,
$(function(){
$(".wrap").click(function(){
this.style.marginTop='-15px';
});
});
Live Demo

As per my understanding of your question. I've created a fiddle to help you find a solution. Please have a look at the fiddle and the code snippet below. Appreciate your time.
$('.sample img').bind('click',function(){
$('.sample img').removeAttr('style');
$(this).css('top',-5);
});

Do you want like this:
var mt = $('.wrap').css('margin-top');
$(".wrap").click(function(){
if($(this).css('margin-top') == '-15px'){
$(this).css('margin-top',mt);
} else {
$(this).css("margin-top", "-15px");
}
});

Related

simultaneously scroll multiple elements

I'm at a brick wall. I have a little project:
(LINK HAS BEEN REMOVED)
You can see lots of horizontal scrolls, when you bring the browser down to mobile width, you can scroll horizontally. My problem is, how do I get it so that if you horizontally scroll one item, all the others will follow too? I have tried the following:
$('.container').scroll(function(){
$('.container').scrollLeft($(this).scrollLeft());
})
But I'm getting nowhere fast. Any help would be appreciated.
UPDATE
Turns out it does work when you put the code into console AFTER the page has loaded.
I resorted to:
$(document).on('scroll', '.container', function(){
$('.container').scrollLeft($(this).scrollLeft());
});
UPDATE2
Big thanks to #George and everyone who answered to point me in the right direction. The tables are loaded with jQuery:
$(this).next().load("/availability_Dev/availability_Dev.asp?stuff="+stuff+"");
All I had to do was attach my scroll code after the elements were loaded, like so:
$(this).next().load("/availability_Dev/availability_Dev.asp?stuff="+stuff+"", function(){
$('.container').scroll(function(){
$('.container').scrollLeft($(this).scrollLeft());
});
});
You told it works from console after page has loaded. So, try this out.
$(document).ready(function(){
$(document).on('scroll', '.container', function(){
$('.container').scrollLeft($(this).scrollLeft());
});
});
OR use the below code:
$(document).ready(function(){
$('.container').scroll(function(){
$('.container').scrollLeft($(this).scrollLeft());
});
});
Hope this helps.
Please try this
$('.container').scroll(function(){
var scrolled = $(this);
$('.container').each(function() {
$(this).scrollLeft(scrolled.scrollLeft());
})
})
Hope it helps.

Equal height columns with jQuery not working?

I've tried numerous approaches to getting equal columns, and none have worked for me. I've tried every variation of jQuery plugin that I could find with different calls using both document ready and window load, in head and before the end of body... just no luck... the sidebar will not continue to meet my content.
I've created a fiddle with my latest shot (which is this method: http://www.outsidethebracket.com/equal-height-columns/), but am up for changing to whichever method will work.
http://jsfiddle.net/7WraW/
$(window).load(function(){
$("#sidebar").height(Math.max($("#content").height(),$("#sidebar").height()));
})
Appreciate any help!
Works fine if you use $(document).ready instead of $(window).load:
$(document).ready(function () {
var hgt = Math.max($("#content").height(), $("#sidebar").height());
$("#sidebar,#content").height(hgt);
});
http://jsfiddle.net/mblase75/7WraW/5/
Here try this...
$(document).ready( function() {
var contentHeight = $('#content').height();
$('#sidebar').css('height', contentHeight + "px");
});
There is The jQuery plugin for equalizing the height or width of elements that's far more better and with more utilities to accomplish this, and really easy to use:
http://tsvensen.github.io/equalize.js/
hope this helps, happy coding :)
here's a simple solution for equal height columns using jquery:
$(window).load(function(){
$("#left_side").height($("#right_side").height());
});
http://jsbin.com/iyirel/1/watch

jQuery or onClick Div Fade

I apologize if this is in the wrong section..
Could someone possibly point me towards a script or a tutorial on this:
when I click on something, say for instance an "x", I'll click it, then it fades away on click.
If you understand what I mean, could someone point me in the right direction please?
Thanks!
Please familiarize yourself with Google.
Then familiarize yourself with http://docs.jquery.com/Tutorials:How_jQuery_Works
Try out some code on http://www.jsfiddle.net
refer
$('someclass/id').click(function() {
$('someclass/id').fadeOut();
});
check this
$('a').toggle(
function() { $('#us').fadeIn(); },
function() { $('#us').fadeOut(); }
);
.fadeToggle()
show( effect, [options], [speed], [callback] )jQuery UI
Refer this: http://www.webdesignerwall.com/demo/jquery/
There is small tutorials for different UI elements with good explanation.
This describes how to fade in and fade out an element on click
$(document).ready(function(){
$("#elemntID").click(function() {
$("#ID_of_element_need_to_fade_in").fadeIn("slow");
});
$("#elemntID").click(function() {
$("#ID_of_element_need_to_fade_out").fadeOut("slow");
});
});
Its easy you could have googled that.
jQuery('#divId').click(function(){
jQuery(this).hide('slow'); //this will give a little animated effect.
// or
jQUery(this).fadeOut('slow');
});
http://api.jquery.com/fadeOut/
http://api.jquery.com/hide/
use
$('#id').click(function() {
$('#id').fadeIn();
$('#id').fadeOut();
});
[link][1]
<script>
$("button:first").click(function() {
$("p:first").fadeToggle("slow", "linear");
});
$("button:last").click(function () {
$("p:last").fadeToggle("fast", function () {
$("#log").append("<div>finished</div>");
});
});
</script>

JQuery missing : after property ID

So I am working with some jquery code to do a simple hide of a p and a show of a p. I am simple adding a class called showp and showing it while making sure the others are not shown by hiding them first. But I keep getting an error missing : after property ID. Any help would be greatly appreciated.
$(document).ready({
$("#phone").click(function(){
$(".hide2").addClass(".hide2").hide("slow");
$(".hide3").addClass(".hide3").hide("slow");
$(".hide1").addClass("showp").show("slow");
});
});
Change this:
$(document).ready({
To this
$(document).ready(function(){
Try this:
$(document).ready(function() {
$("#phone").click(function() {
$(".hide2, .hide3").hide();
$(".hide1").show();
});
});
Your document ready is invalid.
$(document).ready(function() {
// stuff here.
});
Or better yet, a shorthand:
$(function() {
// stuff here.
});

Force jQuery content slider to pause on hover

I would be grateful if someone can help with with some javascript code. I have a content slider which can be found here:-
link text
This works fine but I would like to change the following code so that it pauses on hover. Any ideas?
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
Thanks in advance of your help.
Kind regards
Jonathan
What you're looking for is the stop method. Something along the lines of:
$(".ui-tabs-panel").mouseover(function(e) {
if($(this).is(':animated')) {
$(this).stop();
}
});
Looks like you're using jQuery.UI. Here's how i've done it in the past using the same library (courtesy of this tutorial):
$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
});

Categories