I have a banner which I need changing on a click. at the moment I have hidden the 2nd banner and currently banner 1 shows. When I click the arrow I want banner 1 to hide and banner 2 to show etc.. only problem I tried using html.
<div class="homeArrow"><img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt=""/></div>
i want homeArrow to be the click button to show next banner
but not sure how to connect to jquery...
This is JS fiddle:
http://jsfiddle.net/8a7GL/152/
Hide / Show one Banner at a time:
$(".homeArrow").on('click',function () {
$(".homeImage").slideToggle();
});
http://jsfiddle.net/8a7GL/152/
Sliding from left to right can be achieved by a little more code in jQuery see:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
You could also use addClass/removeClass and make the sliding CSS3 transitions. This would greatly improve quality.
UPDATE:
Here is the left / right slidy.
HTML:
<div class="homeBannerContainer" style="display: block">
<div id="a1" class="homeImage">
<h4>Banner 1</h4>
<img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
<div class="homeBanner">
<h3>My banner</h3>
</div>
</div>
<div id="a2" class="homeImage" style="display: none">
<h4>Banner 2</h4>
<img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
<div class="homeBanner" style="display: none">
<h3>My banner 2</h3>
</div>
</div>
<div class="homeArrow">
<img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt="" />
</div>
CSS:
$(".homeArrow").on('click', function () {
$('.homeImage').animate({
width: 'toggle'
});
});
DEMO:
http://jsfiddle.net/8a7GL/174/
You can use the show/hide function provided by jquery and even give it an animation.
Just give the banners a selector and use the .click event.
http://api.jquery.com/toggle/
function change(){
$("#firstbanner").toggle();
$("#secondbanner").toggle();
}
In HTML:
<button onclick="change()" />
try this:
if ($('#Banner2Home').is(":visible")) {
$('#Banner2Home').hide();
} else {
$('#Banner2Home').show();
}
return false;
Related
I am trying to simply achieve the show/hide feature on hover using the hover function of jquery.
However not able to show and hide the particular div. When I hover over the current span tag I want only the current(closest) div to hide and the closest or next possible div to be shown.
But currently since the class names are same, it is showing all the divs
FIDDLE HERE
HTML structure:
<div class="parentCat">
<div class="imageContainer">
<span class="hoverEffect">Some Image</span>
</div>
<div class="showContainer">
<span>New Image</span>
</div>
</div>
<div class="parentCat">
<div class="imageContainer">
<span class="hoverEffect">Some Image</span>
</div>
<div class="showContainer">
<span>New Image</span>
</div>
</div>
If you shift the event to the parent element, everything becomes simpler:
$('.ca').hover(function () {
$('.imageContainer', this).hide();
$('.showContainer', this).show();
}, function () {
$('.imageContainer', this).show();
$('.showContainer', this).hide();
});
Updaated working example.
If you want this effect, you need to alter your code. The div which has the hover event can't be one that you are hiding. It is also good practice to nest the related divs INSIDE of a parent div. I believe this is what you are looking for.
HTML
<div class="ca hoverEffect" style="height:40%">
<div class="imageContainer">
<span>Some Image</span>
</div>
<div class="showContainer">
<span>New Image</span>
</div>
</div>
JS
$('.hoverEffect').hover(function () {
$(this).find('.imageContainer').hide();
$(this).find('.showContainer').show();
}, function () {
$(this).find('.imageContainer').show();
$(this).find('.showContainer').hide();
});
Working jsfiddle
My Slick slider implementation shows all slides for 1 second after every page reload and I want to remove it. How can I fix this? Below you can see my code:
HTML:
<div class="big-box">
<div class="slick-slides">
<img src="img/Slider/sliderbild_home_1.jpg">
<div class="slider-flag">
<h2>Dinner mit Freunden Geplant?</h2>
<br />
<h1>Tisch reservieren</h1>
</div>
</div>
<div class="slick-slides">
<img src="img/Slider/sliderbild_home_2.jpg">
<div class="slider-flag">
<h2>Dinner mit Freunden Geplant?</h2>
<br />
<h1>Tisch reservieren</h1>
</div>
</div>
<div class="slick-slides">
<img src="img/Slider/sliderbild_home_3.jpg">
<div class="slider-flag">
<h2>Dinner mit Freunden Geplant?</h2>
<br />
<h1>Tisch reservieren</h1>
</div>
</div>
</div>
JS:
$(document).ready(function(){
$('.big-box').slick({
autoplay: true
});
});
CUSTOM CSS:
.slick-slider{
margin-bottom: 0px;
}
.slick-slides{
position: relative;
}
This problem occur due to processing time taken by slick slider. It will take some time to create slider till then your images displays as it is.
Till now I can grab the src of the image and display it in a fixed division, kind of like a pop up. But I want to hide the div element when the mouse is clicked outside the div. Please guide me how to do it, and also please correct me if my code can be improved. Thanks!
js:
$(document).ready(function () {
$(".pic").hide();
$(".screen").click(function () {
display($(this));
});
});
function display($this) {
var source = $("img", $this).attr("src");
$(".pic img").attr("src",source);
$(".pic img").css("width","450px");
$(".pic").show();
}
html:
<div id="album">
<div class="pic">
<img src="" />
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/1 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/2 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<span class="clear_left"></span>
</div>
blur event of jquery can be used
$(".screen").bind('blur',function () {
hide($(this));
});
function display($this) {
$(".pic").hide();
}
Try like this
$(document).click(function () {
if ($(this).class != "pic") {
$(".pic").hide();
}
});
Live Demo
When i click over the first DIV, the slideToggle effect is done correctly.
When i click over the 2nd one, it seems like it doesn't apply the effect and the content just appear suddenly.
The same occurs with the 3rd element and with any other one but the first.
What's going on?
(demo working here: http://jsfiddle.net/SW5sc/6/ )
I have this HTML structure:
<div class="subcategory">Option 1 </div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
<div class="subcategory">Option 2</div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
And this jQuery code:
$(".subcategory").click(function () {
$(this).next(".subcategoryContent").slideToggle(450).siblings(".subcategoryContent").slideUp(450);
return false;
});
Remove all the "float"-properties from the CSS, and it'll work just fine! :-) The floats ruin the animations..
Figured I would ask here because I can't seem to find an easy solution or a solution on here that fits my needs. The problem I'm having with my site at the moment is when dealing with slide animations and with timing of those animations.
So when a user clicks one of my navigation buttons there is a panel that slides out the content based on the button pressed. if you click another button it will slide that one previous div back up and slide down the new content panel.
The main problem I'm getting is either I get animation timing issues because the other one starts sliding as the other one is for some reason.
All my content panels are siblings to one another...so here's the jQuery I'm using....any suggestions would be greatly appreciated!
$('a.navBtn').click(function(){
var divName = this.name;
$.when(function(){
$("#"+divName).siblings().filter(":visible").slideUp("slow");
}).then(function(){
$("#"+divName).slideDown("slow");
})
});
<div id="services">
<div class="noise_overlay">
<div id="contact"><img src="i/contact.png" /></div>
<div id="linkedin"><img src="i/linkedin.png" /></div>
<div id="facebook"><img src="i/facebook.png" /></div>
<div id="twitter"><img src="i/twitter.png" /></div>
<div id="flickr"><img src="i/flickr.png" /></div>
</div>
</div>
<div id="serviceContent">
<div id="contactContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="contactData">
<span>contact</span>
</div>
</div>
<div class="contentFooter"></div>
</div>
<div id="linkedinContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="linkedinData" class="mpCenter">
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="facebookContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="facebookData" class="mpCenter">
<span>facebook</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="twitterContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="twitterData" class="mpCenter">
<span>twitter</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="flickrContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="flickrData" class="mpCenter">
<span>flickr</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
</div>
You need to chain your animation events so the slideDown doesn't happen until the slideUp is done:
http://api.jquery.com/slideUp/
$("#"+divName).siblings().filter(":visible").slideUp("slow", function() {
$("#"+divName).slideDown("slow");
});
Should be something like that.
I have made a simple jQuery snippet for you. The javascript:
$(function() {
$('a.navBtn').click(function(e) {
var pane = $(this).attr('name'),
switchPanes = function(name) {
if($('.contentPane:visible').attr('id') === name){
return;
}
if($('.contentPane:visible').length > 0){
$('.contentPane:visible').slideUp('fast', function() {
$('#' + name).slideDown('medium');
});
} else {
$('#' + name).slideDown('medium');
}
};
switchPanes(pane);
e.preventDefault();
});
});
Here's a working(?) version. I use the callback of the slideUP to call the slideDown.
http://jsfiddle.net/yazYF/
EDIT: Just like the Justin said, I just have some code to test with. :)
EDIT 2: Now with an initial pane visible
http://jsfiddle.net/yazYF/1/
EDIT 3: Initially nothing...
http://jsfiddle.net/yazYF/2/