Alright, for those of you who have seen the new Google Page, I am attempting to get a similar idea going on my own webpage. Basically, I want the image in the middle to fade in upon a mouse moving on the screen. Here is the URL:
http://mageia.rh.rit.edu/
This is the Jquery I am using to get most of the affect: http://hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/
However, as you might be able to tell, the image loads and then fades out. What I would like to have happen is for the image to not be seen at all until you move your mouse, just like on the Google webpage. I was thinking of perhaps changing the image's visibility by javascipt and CSS, but I'm not sure how to go about that. Ideas would be appreciated!
CSS:
div.fade_in { display: none; }
You can make it fade in on page load:
$(function() {
$("div.fade_in").fadeIn();
});
If you want to wait for the mouse to move:
function fade_in() {
$("div.fade_in").fadeIn();
$("html").unbind("mousemove", fade_in);
}
$("html").mousemove(fade_in);
Edit: tested in IE8 (compatibility mode), FF3.5 and Chrome 3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://mageia.rh.rit.edu//resources/main.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function fade_in() {
$("div.fade_in").fadeIn();
$("html").unbind("mousemove", fade_in);
}
$(function() {
$("html").mousemove(fade_in);
});
</script>
<style type="text/css">
div.fade_in { display: none; }
</style>
</head>
<body>
<h1 class="centertext">Welcome to Mageia</h1>
<h3 class="centertext">The Works of Genii</h3>
<div id = "container" class="fade_in" >
<img class="image1" src="http://mageia.rh.rit.edu/resources/Escher.gif" />
</body>
</html>
For the CSS:
imageID{opacity:0.0;filter:alpha(opacity=00)}
This ensures that the image isn't shown until the JS is loaded.
For the Javascript:
$(document).ready(function(){
$("imageID").fadeIn("slow"3);
});
This changes the opacity from 0 to 1.
Cheers!
Related
I'd like an iframe to load only when the user scrolls down the page and it comes into the viewport. This has been answered (link below) but I'm not very good with javascript and I can't work out how to combine the 2 bits of code in the answer.
Can anyone help? It would be great if someone could combine the bits of javascript for me.
Charlie
Having iframe load after scrolling down on page
Here's what I did:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
title>FS checker test</title>
<style>
<!--
#iframe1 {
background-color: #ccc;
margin: 1800px 10px 10px 10px;
height: 500px;
width: 500px;
}
-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<iframe id="iframe1" frameborder="0" scrolling="no" src="about:blank" data-src="http://www.mets.com"></iframe>
<script>
if ($('#iframe1').visible(true)) {
var iframe=$('#iframe1');
if (iframe.data('src')){
iframe.prop('src', iframe.data('src')).data('src', false);
} else {
}
}
</script>
</body>
</html>
Your brackets are nested incorrectly. Indenting your code will make this sort of problem much easier to spot. Also make sure you have the browser developer tools open to the console, so you can see error messages.
This should work (provided you've also installed the jquery-visible library on the page):
if ($('#iframe1').visible(true)) {
var iframe=$('#iframe1');
if (iframe.data('src')){
iframe.prop('src', iframe.data('src')).data('src', false);
} else {
// or you could omit the 'else' clause, since it's not doing anything
}
}
I have tried different websites even tried to decode waypoint guide but no luck. I can't seem to get scroll function to work with following code. (reference: http://blog.robamador.com/using-animate-css-jquery-waypoints/)
Any help will be greatly appreciated.
<!doctype html><html><head><link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css">
<style>
img {
margin:1000px 0;
display:block;
}
</style>
<script>
//Animate from top
$('.animated').waypoint(function() {
$(this).toggleClass($(this).data('animated'));
},
{ offset: 'bottom-in-view' });
//Animate from bottom
$('.animated').waypoint(function() {
$(this).toggleClass($(this).data('animated'));});
</script>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<img class="animated" data-animated="fadeInLeft" src="http://placekitten.com/g/200/300">
<img class="animated" data-animated="bounce" src="http://placekitten.com/g/200/300">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"> </script>
</body>
</html>
First of all, put the jQuery script and Waypoint script inclusion in the HEAD tag. This is, in the 99% of the case, the right way to include javascript libraries in your DOM.
Second thing: you write your javascript code in the HEAD tag (it's right), but without a "start control". In your case, the browser start to execute your javascript code before reading the rest of the DOM, so it can't attach events on the right elements (the images with class "animated") because it haven't read them yet. In simply word, when the browser start to read your SCRIPT tag, it don't know who ".animated" are, so it do nothing.
There are two way to resolve your problem:
1 - Move you SCRIPT tag and its content at the end of the BODY tag.
2 - Wrap you javascript code in a DOM.ready state like:
<script>
$(document).ready(function() {
//Animate from top
$('.animated').waypoint(function() {
$(this).toggleClass($(this).data('animated'));
}, {
offset : 'bottom-in-view'
});
//Animate from bottom
$('.animated').waypoint(function() {
$(this).toggleClass($(this).data('animated'));
});
});
</script>
Honestly, I prefer the option number 2. =D
I wanted to animate a div on mouseover.
I just don't know how to make it fade in/appear slowly (I think we have to use the .animate function or something like that)
$("#logo").mouseover(function() { $("#nav").css('visibility','visible'); });
Will appreciate any help :)
$("#logo").mouseover(function() { $("#nav").fadeIn("slow"); });
Make sure your css has style for #nav as display:none;
Reference http://api.jquery.com/fadeIn/
SAMPLE DEMO
Try this:
$("#logo").mouseover(function() {
$("#nav").fadeIn('slow');
});
Refer Site http://api.jquery.com/fadeIn/
You can use the fadeIn/fadeOut methods or the fadeToggle method which automatically fades in or out. Every method allows a duration parameter to set the animation time, but there also many more parameters to modify the fading.
Look at the API for fadeToggle to see the whole functionality (and how to use) :) . (fadeIn API, fadeOut API).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample</title>
<script src="js/jquery-1.7.1.js"></script>
<script>
$(document).ready(function(){
$("#logo").mouseover(function() { $('div:hidden:first').fadeIn('slow', function() {
// Animation complete
alert("complete")
}); });
});
</script>
<style>
#nav{display:none}
</style>
</head>
<body>
<div id="logo">Click Me</div>
<div id="nav" style="background:#CCC">sample</div>
</body>
</html>
USe fadeIn()... try this.
$("#nav").hide();
$("#logo").mouseover(function() { $("#nav").fadeIn(600));
I want to use jQuery or Javascript to take my logo and when the page loads, slide it from the left hand side of the page and make it stop and stay at it's resting spot about mid way through the page. (Logo div id="mylogo")
$(document).ready( function () {
$("#myLogo").animate("aCSSAttribute", "toThisValue");
});
also check:
http://api.jquery.com/animate/
If you show your effort, then I can help you out better.
You'll probably want something like this: http://jsfiddle.net/SATMY/1/
Your question is not clear at all, so it is hard to say whether it is possible that my answer is, indeed, a correct answer.
$("div#logo").animate({"marginLeft":"-50px"}, 800);
And initial CSS:
margin-left: -900px; /* Before slide-in */
You'll need to work out just how far it needs to move, the example below makes an assumption of x% but you can do this to the pixel should you need to.
Don't forget to position your logo, and to make sure the outer element has some width/display definition.
Fiddle
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main {width:100%;}
#mylogo{border:1px solid red;width:200px;height:100px;display:block;position:relative}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#mylogo').animate({left:'+=25%'});
});
</script>
</head>
<body>
<div id="main">
<div id="mylogo"></div>
</div>
</body>
</html>
Hi in case of full page submit a trasparent div id coming and changing the cursor to 'wait' . Now when the page is getting submitted and new page is coming up cursor still remains to 'wait' not changing to default until mouse is moved in Firefox
Here is simple html click on show button div is coming when user move mouse over the div cursor is changing as wait cursor. Now when this page is loaded again pressing F5 cursor remain as wait cursor in firefox its working fine in IE is there any way to make the cursor as default on pageload in Firefox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
body {
cursor:default;
}
</style>
<script src="js/jquery.js"> </script>
<script>
var test = true;
$(document).ready(function() {
$('#maindiv').css('display','none')
});
function showDiv() {
$('#maindiv').css('display','block')
}
</script>
</head>
<body>
<div id="divBody" style="background-color:red;width:500px;height:500px" >aa
<div id="maindiv" style="background-color:#999999;height:100$;width:400px;height:400px;cursor:wait">
sss
</div>aa
</div>
<input type="button" value="show" onclick="showDiv()"/>
</body>
</html>
Could you use an animated image to give the user feedback instead of changing the cursor?
ajaxload.info has some great examples.
thats some messy code...
why not use an image or, css to display a div on top of everything else with transparent background and cursor: wait; on your css or style tag then show that div when ever you wish...
HTML
<div id="modal"> </div>
<input id="test" type="text" />
JQuery
$('#modal').css({cursor: 'wait'}).width($(document).width()).height($(document).height());
$('#test').bind('click',function (){$('#modal').show()})
I have not tested this so ... in theory it should work ... if not try and change body width and height to "100%"
take care