I've got this in my js:
$(function(){
$('.slide:nth-child(11) .layout-100:first-child').click(function(){
$('.slide:nth-child(11) .layout-100:first-child').fadeOut('slow');
$('.slide:nth-child(11) .layout-100:nth-child(2)').fadeIn('slow');
});
});
$(function(){
$('.slide:nth-child(11) .layout-100:nth-child(2)').click(function(){
$('.slide:nth-child(11) .layout-100:nth-child(2)').fadeOut('slow');
$('.slide:nth-child(11) .layout-100:nth-child(3)').fadeIn('slow');
});
});
...And so on.
I've got multiple images which I want to be able to switch through with a click function. But how i'm writing it down now is a lot of code. Is there a way of putting this into 1 function?
You can get the index of the visible image and pass that as a parameter to the function. Than you can easily calculate which images should fade in and out.
Can you make a fiddle with something that works? I can edit the fiddle and show you how it could work.
You can give this a shot, but without seeing your html structure I can't test it.
jQuery(function($){
$('.slide:nth-child(11) .layout-100').each(function() {
$(this).click(function() {
$(this).fadeOut('slow');
if ($(this).next().length)
$(this).next().fadeIn('slow');
else
$(this).parent().children().first().fadeIn('slow');
});
});
});
Related
I am really surprised why i am getting this error on console because this code is working absolutely fine. Actually on hover i am showing div over image. Div smoothly slideUp on hover for that i am using this code
<script>
$(function(){
$('.slide').focusOut(
function(){
$(this).find('.caption').slideDown(600);
});
$('.slide').hover(function(){
$(this).find('.caption').slideUp(600);
});
});
</script>
But if i remove focusout then it stucks while sliding up. Hope i am able to understand you. what i want is how can i stop this error or what is the alternative of this
I have edited my code and now it is working absolutely fine
$(function(){
$('.slide').on('hover',function(){
$(this).find('.caption').slideUp(600);
});
$('.slide').on('mouseleave',function(){
$(this).find('.caption').slideDown(600);
});
});
Try the on function:
<script>
$(function(){
$('.slide').on('focusout',function(){
//CODE
});
});
</script>
Your syntax is wrong. Try it...
<script>
$(function(){
$('.slide').focusout(
//CODE
});
});
</script>
Ok so im trying to get some text that is hidden to display when the mouse enters the div then hide when it leaves
so far ive got this on my fiddle
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
})
$(".image").mouseout(function(){
$(".hover").hide();
});
Thanks any help would be great
You Should Read Basic of JavaScript
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
})
$(".image").mouseout(function(){
$(".hover").hide();
});
})//added
Updated Demo
You were missing a });
Also, you can simplify your code to:
$(document).ready(function () {
$(".image").mouseover(function () {
$(".hover").show();
}).mouseout(function () {
$(".hover").hide();
});
});
BTW, your HTML is broken. Fix that first.
Both your HTML and JS code are badly written. And you didn't include jQuery is your jsfiddle, which means that '$' isn't recognized.
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
});
$(".image").mouseout(function(){
$(".hover").hide();
});
});
You can test it here: http://jsfiddle.net/5PR5E/3/
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");
}
});
I'm loading in content from a separate file into an element, this works fine however I am trying to attach an event handler to this dynamic content so I can use the jQueryUI slider in the new dynamic div I have created. I have replaced this with an alert for the moment until I can at least get this to fire. I can't see why it will not work. Any help will be much appreciated.
if (modalContentCall[objname].private_use == true) {
$(this).append($('<div>').load('Content_for_injection.htm #private_use'));
$(this).on('load', function(event){
alert('load occured');
});
};
The above conditional works and loads the content as per line 2 so all good to here, I can't however get the alert on line 4 to display when the content loads.
Thanks in advance for your help.
A
you can use the load callback function to make sure the content is loaded..
$(this).append($('<div>').load('Content_for_injection.htm #private_use',function(){
alert('load occured');
}));
or making in more readable and clean..
var $this=$(this);
var divContent= $('<div />');
divContent.load('Content_for_injection.htm #private_use',function(){
alert('load occured');
$this.append(divContent);
});
try as below
$('body').on('load',this, function(event){
}
Here is basically what I want to do:
I want to slideUp() a div with my content. I want to .load() an external web page (on the same server) in that div and .slideDown() that div.
For now here is what I have:
$(document).ready(function() {
$('a').click(function(){
$('.content').slideUp('1000');
$('.content').hide().load('about.html');
$(".content").slideDown('1000');
});
});
Basically here's what I get: the div .content hides itself, loads the about.html page, and appears. But no slideUps or slideDowns.
Anyone has an idea?
Sorry if this is a noob question, this is the first real time I'm trying js/jquery.
Thanks in advance.
That's because those are asynchronous actions. You have to continue execution in callbacks:
$('a').click(function(){
$('.content').slideUp('1000', function() {
this.hide().load('about.html', function() {
this.slideDown('1000');
});
});
});
try:
$('a').click(function(){
var el = $('.content'), //cache content to avoid multiple calls
slidetime = 1000;
el.slideUp(slidetime,function(){ //slide up
el.hide().load('about.html',function(){ //afterwards, load
el.slideDown(slidetime); //afterwards, slide
});
});
});
you are passing string '1000' to slideUp or slideDown.
It should be number or string that it can take like 'slow'...
Try This
$(document).ready(function() {
$('a').click(function(){
$('.content').slideUp(1000);
$('.content').hide().load('index2.html');
$(".content").slideDown(1000);
});
});
Cheers :)