Hi I tried to have a marquee gif on my website. And the gif only happens when u don't move your mouse for 4 secs. But I can't seem to figure out why this only happens when you land on the page, but when you start scrolling the marquee gif doesnt happen.
Check it out on my website here. Any help is deeply appreciated.Thank you
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=29 height=582 style='position:absolute; left:48%; top:57px; width:32; height:582px;'> <img src=http://transit7.cargocollective.com/1/8/265975/3801686/icecream.gif border=0> </marquee>
In your JavaScriptyou have:
$('html').mousemove(100, function() {
$('#hi').fadeOut(400);
});
This is the cause - it basically means "If you move the mouse over the <html> element (which is anywhere on the whole page) then fadeout the specified stuff (in the #hi div)". And mousemove includes moving the mouse to scroll.
Related
So, I see a few things that seem like they might be relevant to this question, but they aren't similar enough for me to be able to use their answer.
Anyway, basically, I want to have a button with a dollar sign in my sidebar.
When the mouse is hovered over it, I want it to smoothly slide out and have the word "Donate" on it, keeping the $ on the right side of the button. Then, when the mouse is no longer hovering over it, I want it to slide back in.
Example:
Mouse not over:
$
Mouse over:
e $
te $
(slides all the way out)
Donate $
Except with real buttons.
Note: If it can't use an image as the button, that's fine. It'd be nice if I could, but honestly it doesn't matter in the long run, as I can probably make the HTML button look just as nice.
This seems like a really simple question, so I really hate to ask about it, but I simply can't figure it out.
Edit:
Well, here's one thing I tried.
In head tag:
<script type="text/javascript">
$(document).ready(function()
{
$("#imgAnimate1").hover(
function()
{
$(this).attr("src", "donateB.gif");
},
function()
{
$(this).attr("src", "donateA.png");
});
</script>
Where the image is:
<div id="sidebar">
<img id="imgAnimate1" src="Images/donateA.png" alt="" >
</div>
Result (WHILE hovering mouse over it):
http://prntscr.com/45js7q
These resources will get you started in the right direction.
CSS3 transition 1
CSS3 transition 2
Stack Overflow post about same kind of question + Answer
You can achieve this without even using jquery. Only CSS and CSS3 markup
Example:
.myImage{
width:200px;
height:25px;
background:#C96666;
position:relative;
display:inline-block;
left:-180px;
transition: 1s;
}
.myImage:hover{
transition: 1s;
left: 0;
}
I want to change the position of the image that shows while hovering in another image.
How can I do this...
here is my code
http://jsfiddle.net/bulina/aGX5J/1/
<div id="img1">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5ckS6M6g5q7FgL1dx0gxUFudPbBA46cHUN2JhGUajD_suIOah" onmouseover="this.src='http://motherhoodtalkradio.files.wordpress.com/2010/03/pink-daisy-motherhood-incorporated2.jpg'" onmouseout="this.src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5ckS6M6g5q7FgL1dx0gxUFudPbBA46cHUN2JhGUajD_suIOah'"/>
</div>
and css:
#img1{
position:absolute;
left:20%;
bottom:50%;
}
Not sure,might be helpful to you.
If you were not animating the transitions — and given the kinds of images I've grouped as sprites, I don't know why you'd ever do that — then you'd want something like this:
$(document).ready(function(){
$('#home a')
// On mouse over, move the background on hover
.mouseover(function() {
$(this).css('backgroundPosition', '0 -54px');
})
// On mouse out, move the background back
.mouseout(function() {
$(this).css('backgroundPosition', '0 0');
})
});
Now, if you are trying to animate that, then you've got bad syntax for the CSS and for the calls to "animate".
$(document).ready(function(){
$('#home a')
// On mouse over, move the background on hover
.mouseover(function(){
$(this).stop().animate({backgroundPosition: "0 -54px"}, 500);
})
// On mouse out, move the background back
.mouseout(function(){
$(this).stop().animate({backgroundPosition: "0 0"}, 500);
})
});
Again, I am doubtful that jQuery is going to be able to animate "backgroundPosition" for you, but then I don't do "animate()" very often and jQuery always manages to surprise me.
here's a page: http://snook.ca/archives/javascript/jquery-bg-image-animations/
I think this is not possible with normal css.
Consider using either javascript or a CSS Framework like YAML check this page if you're interested http://www.yaml.de/
I'm trying to determine the cleanest way to implement a brief loading screen that would be displayed to my site's visitors while JavaScript is loading some data behind the scenes, processing it and updating the DOM accordingly.
I like what blogger.com does with one of its themes, specifically this one. It seems to completely fill the screen with a grey background with a spinny image on top, and then it fades out once all the underlying work is completed.
Does anybody happen to know how exactly they achieve that effect? I haven't gotten too far with just poking around in Firebug. Doesn't look like it's being hidden or removed from the DOM.
Thanks!
<script type="text/javascript">
function removeOverlay(){
//code to remove the div waiting overlay
}
</script>
<body onload="removeOverlay()">
<div id='mainContainer'>
// this overlay style is in one word ugly, modify it to your style :p
<div id='waitiongOverlay' style='position:absolute;border:1px solid red; background:red; top:0; left:0; width:99%; height:99%; z-index:100;'></div>
</div>
</body>
Here is my HTML code:
<div class="mitcsinaltunk" style="position:absolute;left:5px;top:3px;text-align: left">
<div class="triangle"><img src="images/triangle.png"></div>
<img id="kep1" src="mitcsinaltunk/img1_s.jpg" class="mitcsinaltunk">
</div>
on #kep1.hover() starts an animation and fadeIn triangle.png. triangle.png is on #kep1. When I take the mouse on triangle.png, stops #kep1.hover() animation.
Can I make triangle visible, but disabled?
Try binding your .hover() event to the .mitcsinaltunk container instead. Your question is a little hard to understand (please post your JS), but my guess is that when the mouse hovers over triangle.png, mouse focus on the original image is lost, stopping the fade in animation. Binding to the containing element will solve this.
I have a current webpage that is broken into two sections. The top section contains various controls for filtering content on the webpage, and the bottom section contains a grid of the content.
What I want is encapsulate the filter controls in a div tag that initially is completely hidden except for a button link that will say something like "Click to Expand". Upon clicking the button link the div will open up downward to expose the filter controls that are in it. However, I don't want the div to just suddenly appear, because that's too easy and boring. I want the opening of the div to be noticeable as it slides downward to expose the content.
Is this possible? If so, how do I go about achieving it? I'm not a CSS monkey, but I've done a fair amount with jQuery.
Thanks in advance for any suggestions.
Straight from http://api.jquery.com/animate/ ...
So, instead of clicking the div, you could just add the click function to a button somewhere else on the page.
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
style="position: relative; left: 10px;" />
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
You can use the jQuery slideToggle().
$('#expandBtn').click(function() {
$('#filterDiv').slideToggle('slow', function() {
// Animation complete.
});
});
As an alternative to jQuery there is also the scriptaculous.js blind down and slide down effects.