$(function(){
$("#top-img").hover(function(){
$(this).stop().animate({height:"400px"},{queue:false,duration:700});
},
function() {
$(this).stop().animate({height:"300px"},{queue:false,duration:700});
});
});
This is the code I am using, its simple for the most part. When I hover over the div #top-img it takes it from a height (set in CSS) of 300px and animates it to a height of 400px.
I would like a slight delay so that
people have to hover over it for a second before it runs and
you have to move off of it for a second before it goes back to
300px.
Check out the HoverIntent jQuery plugin. I;ve used it in the past and its extremely easy to use and implement
This kind of works, but the problem is when hovering and off hovering a lot of times it does not end and just keep going up and down. So I need to some how add what I need out of both. .
$(document).ready(function(){
$("#top-img").hover(function(){
$(this).delay(400).animate({height:400},1000);
},function(){
$(this).delay(300).animate({height:300},500);
});
});
Related
I want to give to the header-body the effect like in this site preview.oklerthemes.com/?theme=Porto
Use a relative position (to show the scroll)...and the use the fixed.. but when I put the fixed position I see that this come to the original position AND THEN come up. --> https://jsfiddle.net/uxhgpz6e/2/
enter
So, i'd like to avoid this "jump effect", but still use the relative+fixed.
Change your scroll value and it should get the behaviour you want : See this fiddle
$(window).scroll(function(){
if($(window).scrollTop() > 100){
$('.header-body').css('position','fixed').css('top','-100px');
} else {
$('.header-body').css('position','relative').css('top','0');
}
});
I'm using a bootstrap 3 fluid grid to display thumbnails, and I love how the images scale in size as the browser is resized. The downside however, is a "big bang" effect when each page is loaded. That is, the grid begins collapsed then grows as images are added. I imagine a simple fix is to hardcode image sizes, but this would lose the scaling benefit I believe.
One attempt to fix this was to load a transparent placeholder image right before each thumbnail, which would of course be cashed on the first page of results and thus expand the grid faster. On callback for thumbnail loaded event, I remove the placeholder. This seems to help, but other times I still see the shifting as badly as before. In addition, with a slow connection you can actually for a moment see the real thumb below the placeholder.
<script type="text/javascript">
$(function(){
// For each thumbnail, insert a placeholder image.
// Once the thumb is loaded, remove the placeholder.
$("[id^=thumb-]").each(function(i, thumb) {
var $thumb = $(thumb)
var imgTag = "<img id='ph-" + (i + 1) +
"' class='placeholder' src='{% static "img/placeholder.png" %}'/>";
$thumb.parent().prepend(imgTag);
var $holder = $thumb.prev();
function loaded() {
$holder.remove();
}
if (thumb.complete) {
loaded();
} else {
$thumb.on('load', loaded);
$thumb.on('error', function() {
console.log('Error with thumbnail placeholders.');
});
}
});
});
</script>
Regarding compatibility, I'd like to at least have a usable site with older browsers, but it doesn't have to be perfect.
I'm not as interested in fixing my Javascript solution above as I am the best solution overall.
Please look at the live beta site here to help diagnose. I attempted a jsfiddle, but couldn't quite reproduce it. I will paste more context into the question once we understand what was wrong.
In this case, I would recommend adding the <img> tag to the plain HTML. Then set the src in your javascript function.
You'll also need to set height and width attributes on the <img> tags so their space is preserved, to prevent redrawing the page after the images are loaded. You could do this with a simple javascript function that determines the window.width and then sets the height and width attributes.
Something like this.
I am trying to get this mousever to work, but I seems to be acting very buggy in all browser versions. I have something like this
<div id="foo" onMouseOut="makeHidden('foo');">Link Text</div>
I don't want the div to be hidden when the mouse goes over the link, and I assumed it wouldn't because the link is in the div. How can I get the div to stay visible until the mouse leaves it's boundary.
You might want to look in to using jQuery http://jquery.com/
Then you could write something like this:
$("#foo").mouseenter( function(){makeHidden('foo');} );
$("#foo").mouseleave( function(){makeVisible('foo');} );
Or just cut out the middle man
$("#foo").mouseenter( function(){$(this).css("visibility", "hidden");} );
$("#foo").mouseleave( function(){$(this).css("visibility", "visible");} );
By using a fancy bubbling trick. See: http://jsfiddle.net/minitech/kZcCr/
You want to stop the propagation of the mouseout event if it's being applied to an element's children, and you also want to cancel the mouseout of the parent if we're moving into one of its children. That can be done using relatedTarget, or toElement on IE.
actuallly i m not geeting ur point might be this code will help u
<script type="text/javascript">
function abc (mylink){
document.getElementById('mylink').style.display = 'none';
}
function abcd(mylink){
document.getElementById('mylink').style.display = 'block';
}
I know how to toggle an entire div, however I only want to hide all but the top 10% or top 100px, for example. And then when the div is clicked, the entire div opens.
I thought I saw this a while ago, but can't remember where.
Thanks.
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').hide();
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').toggle(400);
return false;
});
});
Your code should be something in the lines of:
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').animate({height: '20px'});
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').animate({height: '100%'});
return false;
});
});
Take a look the image on my home page, is this kind of what you want to do?
http://www.carsonshold.com/
I have it jet out when you hover over it, but that can easily be changed to a click. It somewhat complicated to do, and still isn't perfect in IE (the page loads and the clip isn't recognized until you hover over it).
It may be slightly different from what you want since I did this on an image rather than a div, so I needed to animate the clipping mask. The function I used is as follows:
var featureDuration = 300; //time in miliseconds
$('#featured-img').hover(function() {
$(this).animate({ left : "-164", clip: "rect(0px,384px,292px,0px)" },{queue:false,duration:featureDuration});
}, function() {
$(this).animate({ left : "17px", clip: "rect(0px,203px,292px,0px)" },{queue:false,duration:featureDuration});
});
If you want to animate the clip, you will need to insert this JS as well because it doesn't behave properly otherwise. http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/
Take a look at the CSS in my code if you are unsure how I did the rest of it, or comment on here if you have any questions.
Cheers
Did this rather quickly, note it will only hide the bottom portion.
http://jsfiddle.net/loktar/KEjeP/
Simple toggle that changes the height, hiding the rest of the content within. Easy enough to animate as well, just modify the toggle functions to adjust the heights rather than adding a class.
Hi all
I want this div to dissapear when it show up.
It is working now this way, but since sometimes the div is added after a load() I would need to merge it somehow with a live() I guess....
//Fade out the result alert.
$('.Alert').delay(6000).fadeOut(500);
Any ideas of how to do this?
Thanks in advance
It depends on how you add your div to the page after the load().
After you add the element to your page, add the handler or function you want them to have.
Example :
$('<div class="Alert"></div>').appendTo('body').delay(6000).fadeOut(500);
Live example