switching between multiple images - javascript

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

Want to hide error from console $(...).focusOut is not a function

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>

Jquery show/hide hover or mouse enter issue

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/

Jquery click function problems

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");
}
});

jQuery .on() event regarding dynamic content injection

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){
}

.load() animation with external web page?

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 :)

Categories