Animating a div's apearance on mouseover in jquery - javascript

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));

Related

Javascript: like Facebook posts using facebook javascript sdk?

I'm fairly new in using Facebook javascript SDK and I have no idea what I am doing!
I'm trying to like a facebook post using Facebook javascript SDk in my html page.
My full code this:
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="bod" style="width:100%; height:100px; background:#000;"></div>
<script>
$( "#bod" ).click(function() {
FB.api("/10153XXXXXXXXXX/likes", 'post',function(response) {
if(response === true) {
alert("done!");
}
});
});
</script>
</body>
</html>
I thought this code will like the given post (its ID is 10153XXXXXXXXXX) once i click on the div #bod but when I click on the div, nothing happens and I don't even get the alert(); at all!
could someone please advise on this issue and let me know what I'm doing wrong?
First of all you'll need to initialize the FB SDK.
Then, in order to call the API you'll need a valid access token therefore, you'll need to login the user using your App.
I would suggest to double check the docs again:
https://developers.facebook.com/docs/javascript
https://developers.facebook.com/docs/javascript/examples
In the second link you'll find an example to login a user and then call the API that I believe will be helpful for you.
I hope it helps.

How to remove parent div without removing the inherited css properites?

This is what i am trying to do,
<div id="table">
<div id="user"></div>
<div id="user1"></div>
</div>
When i click a button,this happens
$("#body").append("<div id=\"user-wrap\"></div>");
$('#user').appendTo($('#user-wrap'));
$('#user1').appendTo($('#user-wrap'));
$('#user-wrap').appendTo($('#table'));
Then I apply moz-transform on user-wrap. Before I apply another transform, I have to remove this userwrap div. when I append the children of user-wrap to body again and remove the user-wrap. My transforms are not preserved. I solved this problem by storing the value in a separate variable and applying it again after removing. But the problem is when I applied the scale transforms with user-wrap on the two divs actually looked more closer. Now since I removed the user-wrap the individual user divs are apart even though I applied the transforms again. The inter-distance between children are lost.How do I solve this problem?
I am rephrasing the entire thing again, I want to apply transforms to a group of children in div and then remove the div while preserving the scale/rotate and inter-distance value between the children?
I know it is a complex question, help will be appreciated. I am hoping all the javascript samurai's and CSS ninjas could help me out here ;)
Against all odds:
<!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>Untitled Document</title>
<script type='text/javascript' src='jquery-1.5.1.min.js'></script>
<script type='text/javascript'>
function screwItUp() {
//EDIT: or if ($('#table div:first-child').attr('id') == 'user')
if ($('#table div:first-child').html() == 'USER') {
$('body').append('<div id=\'userWrap\'>USER-WRAP</div>');
$('#user').css('font-size',Math.floor(Math.random()*42)+'px').appendTo($('#userWrap'));
$('#user1').css('font-size',Math.floor(Math.random()*42)+'px').appendTo($('#userWrap'));
$('#userWrap').appendTo($('#table'));
} else {
$('#user').appendTo($('#table'));
$('#user1').appendTo($('#table'));
$('#userWrap').remove();
}
}
</script>
</head>
<body>
<div id="table">
TABLE
<div id="user">USER</div>
<div id="user1">USER1</div>
</div>
<button onClick='screwItUp(); ' >TOGGLE</button>
</body>
</html>
Sample: http://zequinha-bsb.int-domains.com/togglewrap.html

What's the best way to display a blown-up image using minimal JQuery?

The Goal:
On mouseover (or :hover), enlarge the preview image by about 400% and display it in the center of the page
Remove the preview when the mouse leaves
The Problem:
Solutions like FancyBox are too bloated
in FancyBox's case it ignores width and height for image elements, which makes it useless
Most of these "lightboxes" steal focus when they're called
Really, I'm just looking for a simple, efficient solution.
try something like this. the trick is position you can put the div wherever you want.
read something here. and you can read about hover here
here is an html example. (copy this to a text file and open it withyour browser)
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<script text="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js">
</script>
</head>
<body>
<ul>
<li class="">Lynx</li>
<li>Jaguar</li>
</ul>
<div id="picture" style="position:absolute; top:0px; right:0px;">
</div>
<script type="text/javascript">
var animal = {
"Lynx":
"http://wnbaoutsiders.files.wordpress.com/2009/06/lynx21.jpg",
"Jaguar" :
"http://www.tropical-rainforest-animals.com/image-files/jaguar.jpg"
}
var hovered = function(e) {
//you can get what to show from the elemnt, instead of the content
// you could use an id.
var name = $(e.target).html()
$('#picture').append("<img src='" + animal[name] +"'/>")
}
var unhovered = function() {
$('#picture').empty();
}
//here you bind mouseenter and mouseleave
$('li').hover(hovered, unhovered);
</script>
</body>
Perhaps you're looking for a tooltip? You can use any html (including images) inside the tooltip.
http://flowplayer.org/tools/tooltip/index.html

Change Element Visibility Upon Page Load

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!

Shoud these two JQuery functions produce the same behavior?

Assuming I have the following two JQuery functions -
The first, which works:
$("#myLink_931").click(function ()
{
$(".931").toggle();
});
and the second, which doesn't work:
$("#myLink_931").click(function ()
{
var class_name = $(this).attr("id").split('_')[1];
$("."+class_name).toggle();
});
I want to replace the first with the second, which is more generalizable, but can't find any obvious syntactical problem with the second which might be preventing it from working.
My guess is there's a problem with the syntax:
"."+class_name
Is this bad syntax?
They work the same.
Working Demo
This is what debuggers are for. Step through the code and make sure class_name is calculated as you expect. The debugger should let you view the result of "."+class_name as well.
I created a sample page and dropped your example code in and it worked as expected. Perhaps there is another issue on the page? Can you post a link to the actual site?
Here is the code I used:
<!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></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/script.js" type="text/javascript"></script>
</head>
<body>
<div id="myLink_931">Click Me</div>
<div class="931">HI</div>
</body>
</html>
and the script file:
(function($) {
$(document).ready(function() {
$("#myLink_931").click(function() {
var class_name = $(this).attr("id").split('_')[1];
$("." + class_name).toggle();
});
});
})(jQuery);
Class names and IDs aren't allowed to start with numbers - doesn't explain why one works and the other doesn't though. Give us a bit more info as above.
Is it possible you're not wrapping your 2nd example in the ready syntax [i.e. $(function(){ })] which would mean that the elements haven't been created in the DOM yet?

Categories

Resources