I am working on a page for my portfolio website that displays various services. There's a large box in the center column of three columns. On the left and right of the central box are columns of 3 boxes each. Each box is a clickable link that then changes the content in the central block.
I'm trying to make the boxes on the sides of the central box grow in height on mouseover and shrink on mouseout using jQuery .animate().
My problem is that the boxes are very spastic. When you mouseout of one and go to another sometimes it will shrink and then grow and then shrink again. How can I force them to stop growing and shrinking a 2nd time?
Here's the link to the page in question: http://www.nukamedia.com/beta/services.html
Here's the jQuery code:
var classes = ".how-it-works, .built-for-power, .done-on-time, .inform-your-customers, .spread-the-word, .keep-in-contact";
$(classes).on("mouseover", function() {
$(this).animate({height: '+=20px'},500);
});
$(classes).on("mouseout", function() {
$(this).animate({height: '-=20px'},500);
});
Here's the HTML Markup:
<div class="services-content container">
<div class="row">
<div class="left-control-squares twocol">
<div class="how-it-works box-defaults">
Learn<br/>
How It<br/>
<span>Works</span>
</div>
<div class="built-for-power box-defaults box-text-align">
Built For<br/>
<span>Power</span>
</div>
<div class="done-on-time box-defaults box-text-align">
Done On<br/>
<span>Time</span>
</div>
</div>
<div class="eightcol" id="content-square">
<img src="images/click-to-learn.png" />
</div>
<div class="right-control-squares twocol last">
<div class="inform-your-customers box-defaults">
Inform<br/>
Your<br/>
<span>Customers</span>
</div>
<div class="spread-the-word box-defaults box-text-align">
Spread The<br/>
<span>Word</span>
</div>
<div class="keep-in-contact box-defaults box-text-align">
Keep In<br/>
<span>Contact</span>
</div>
</div>
</div>
</div>
You should consider using the jQuery stop() function. This will stop the animation in its tracks.
$("#myelm").stop().animate({height : "300px"});
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
I've built a UI card with a share button. Upon tapping the share button, a share sheet shows up above the card itself.
This card will live in a grid of other such cards so the "share" button should trigger only the share sheet for the current card
I have a Save button which should also fire another sheet, but it doesnt seem to be working.
I've built this demo (http://jsfiddle.net/8hed8yrd/11/) with the share sheet working. I cant seem to get a save sheet to work. Any pointers?
Note: Demo doesn't have save sheet to avoid confusion in code.
<div class="grid">
<div id="card">
<div class="hero_text hero_small">TITLE</div>
<div class="subtext">SUBTITLES</div>
<div class="toggleLink explore_text"><span class="icons">SHARE</span>
</div>
<div class="toggleLink explore_text"><span class="icons">SAVE</span>
</div>
<div class="share_sheet">
<div class="share_this">SHARE THIS IMAGE</div>
<div class="share_close">CLOSE</div>
</div>
</div>
<div>
jQuery(document).on("click", ".toggleLink", function () {
jQuery(this).next('.share_sheet').fadeIn('fast');
return false;
});
jQuery(document).on("click", ".share_sheet", function () {
jQuery(this).fadeOut('fast');
});
The problem is that you use jQuery(this).next('.share_sheet'). The second toggleLink SAVE have a share_sheet div right after itself, but the SHARE button doesn't. Thats why jquery can't found the div. Use siblings instead of next if you want to found the same element, or do it like i do in this fiddle: http://jsfiddle.net/PSYKLON/8hed8yrd/12
<div class="toggleLink explore_text"><span class="icons">SHARE</span></div>
<div class="share_sheet">
<div class = "share_this">SHARE THIS IMAGE</div>
<div class = "share_close">CLOSE</div>
</div>
<div class="toggleLink explore_text"><span class="icons">SAVE</span></div>
<div class="share_sheet">
<div class = "share_this">SAVE THIS IMAGE</div>
<div class = "share_close">CLOSE</div>
</div>
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;
Building a site that gives play by play info for a game and want to insert a div after a specific div appears.
<div id="pbp-no-drive-0-0" class="no-drive">
<span></span>
</div>
<div id="pbp-no-drive-0-1" class="no-drive">
<span></span>
</div>
<div id="pbp-0-0" class="all-plays">
<div class="drivesum></div>
<div id="pbp-in-drive-0-3" class="play-in-drive">
</div>
<div id="pbp-no-drive-0-25" class="no-drive">
<span></span>
</div>
<div id="pbp-0-1" class="all-plays">
<div class="drivesum"></div>
</div>
The "no-drive" divs will appear first, the "all-plays" div appears after a drive has started. I'm attempting to insert the "no-drive" divs after "drivesum" divs if they are already not there. There are multiple "all-plays" and "no-drives". It is for american football and the "no-drives" represent special teams kicking off.
What would be the best way to handle this?
You can write up a conditional statement. If you are not sure when this would be appended, then you can have a timer in place.
var timer;
timer = setInterval(function() {
if( !$('.all-plays').find('.no-drive').length) {
$('.no-drive').insertAfter('.drivesum');
clearInterval(timer);
}
}, 100);
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..