I am relatively proficient in html and css, but am not with javascript and jquery. I am trying to get a div to move diagonally, however its not working.
Here is my code:
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#box1 div").animate({left: '+=150', top: '+=150'}, 1000);
});
</script>
<div id="box1"></div>
</body>
</html>
I know its probably something really stupid, but does anybody know what the problem is?
Thanks!
You have to first make it position: absolute or relative in CSS.
#box{
position: absolute;
}
$("#box1").animate({left: '+=150', top: '+=150'}, 1000);
Oh yeah, do this:
$("div#box1") //correct
instead of:
$("#box1 div") //incorrect
DEMO: http://jsfiddle.net/DerekL/bwg8R/
To animate something using left and top the element needs to be positioned. either relative or absolute, otherwise left and top don't do anything to the element.
See my example here: http://jsbin.com/ayafup/edit#html,live
And target your #box1 element directly as $(#box1), not all child div's inside it as you're doing, $(#box1 div)
Also move your scripts down to the bottom before </body> for better performance and better practice in general.
Give your div some position because left and top are used after position is set
<div id="box1" style="position:absolute;">s</div>
And in javascript
$("#box1 div").animate({left: '+=150', top: '+=150'}, 1000);
Should be
$("#box1").animate({left: '+=150', top: '+=150'}, 1000);
Because the previos one was selecting child of #box1
Here is the best solution I find for animations effects.. I you don't have any constraint to support older version of browser than animation of you will be like eating a cake..
Try this http://daneden.me/animate/
Cheers...!!!
Related
Hi I'm working on a project to show the Earth and I need some buttons to appear alongside it, at the moment I can only get my buttons to show up either below or above the javascript. I've included a screenshot and my html code, I hope someone can help, thanks so much, let me know if there's something missing that you'd need to be able to help.
HTML:
<body>
<div id="webgl"></div>
<script src="js/three.min.js"></script>
<script src="js/Detector.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/earth.js"></script>
<script type="text/javascript" src="aud.js"></script>
<script type="text/javascript" src="date.js"></script>
<input type="image" id="intro" src="images/icon-intro.png"/>
</body>
</html>
Image:
Here you can see the button outside of the scene, I want it to be placed over it instead.
Give the button an absolute position and, if necessary, some z-index like so
#intro {
position: absolute;
left: 300px; /* X coordinate, adjust as needed */
top: 300px; /* Y coordinate, idem */
z-index: 10; /* This should be needed only if the #webgl container has already some z-index value*/
}
you can use the div overlay to show the buttons over the earth image ..for more information please refer the following link
for that you can set z-index of button greater then the z-index of image ...thus making the button to appear over the image
I am fairly new to web development. I am trying to apply jQuery to my website, such that when the page loads up, the heading is animated. But for some reason I am not able to get it working. Here is the javascript code :
$(window).ready(function() {
$("h1").animate({left:'250px'});
});
Here is the relevant HTML code:
<!DOCTYPE html>
<html>
<head>
<title> Welcome! </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery_functions.js"></script>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
CSS left only works with absolutely positioned elements. If you add position:absolute to your H1 tag, it will work.
$(window).ready(function() {
$("h1").animate({left:'250px'});
});
h1 { position: absolute; }
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<h1>Hello!</h1>
This is because h1 may have a static position. You may need to set a CSS relative or absolute position to that element like
h1 {position: relative}
and this jQuery code will work
$(document).ready(function () {
$("h1").animate({
left: 250
});
});
See JSFIDDLE
I'm new myself but it appears your animate option is missing an argument.
$('img').animate({left: "-=10px"}, 'fast'); is an example. yours tells it how much to move, but you left off the how.
You can try changing
$("h1").animate({left:'250px'});
to
$("h1").animate({marginLeft:'250px'});
maybe $(doucment).ready()
I think it will be work ))
I'm trying to recreate something like they've got over at gimmebar.com.
When you click an image, the content current page slides out left and fades out. The target page fades in and slides in from the right.
I've tried a couple of things, like creating two divs in a container with a width of 200% and scrolling the content in to view and using JqueryUI and slideing the divs.
The scrolling failed with the divs not moving at all and srollLeft always being 0 no matter what.
The slide worked somewhat better but to me it seems like they aren't run simultaneously.
The second div just pops in to existence instead of nicely sliding in right behind the first.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
.container {
width: 100%;
float: left;
height: 800px;
}
#one {
background-color: red;
}
#two {
background-color: #333;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div class="container" id="one"></div>
<div class="container" id="two"></div>
<script>
$( document ).click(function() {
$("#one").hide("slide", { direction: "left" }, 1000);
$("#two").show("slide", { direction: "left" }, 1000);
});
</script>
</body>
</html>
It seems like it should be so easy to achieve but I'm stuck.
Take care.
Edit:
I kind of got it to work as you can see in this fiddle.
The slide is there but I can't see no fade.
There also might be a better way of achieving this but I'm pretty satisfied with not having to load a third lib/plugin just to slide a div.
http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios
Found a tutorial written by their developer. Think that would count as the solution.
A pure javascript solution: in the CSS:
div.wrap {visibility: hidden; position: absolute; overflow: hidden;
top: 0; left: 0; width: 100%; height: 100%}
div.wrap div.newContent {visibility: visible; position: relative; left: 100%;}
in the HTML:
<div class="initContent">
This is the content that is initially displayed
</div>
<div class="wrap">
<div class="newContent">
Put the content you want to be revealed here
</div>
</div>
The newContent div is initially hidden because its left edge is at the right edge of its parent (wrap) div, and the CSS tells the browser to hide any content that overflows the parent div.
Then to reveal the hidden content set a timer that progressively decreases the style.left for the inner div from 100% to 0% and increases the opacity from 0 to 1. I made a class for opening/closing swipey menus that could be adapted slightly to do this. (EDIT : a newer version)
i would recommend you use this jQuery script i used not so long ago in a website and it worked like a charm its called CODA SLIDER, it was made by Kevin Batdorf and the installation its barely 5 lines of code.
Good luck
Alright so I only need to learn JQuery for a couple of animations on a site I'm building.
I've been reading the tutorials on the JQuery site and am just trying to implement a simple diagonal move animation.
I'm still extremely new to JQuery (as in, started today) but from everything i understand, the following code should work. What error am i making?
<head>
<script type="text/javascript" src="JQuery.js">
</script>
<script>
$(document).ready(function(){
$("#moveme").click(function(event){
$("#moveme").animate({right: '+=50', bottom: '+=50'}, 1000);
});
});
</script>
</head>
<body>
<div id="moveme">
Move this text
</div>
</body>
Edit:
Added relative property from css and fixed parenthesis issue with document but still not working.
It seems that you forgot some parenthesis to select the elements correctly.
What about that?
$(document).ready(function(){
$("#moveme").click(function(event){
$(this).animate({right: '+=50', bottom: '+=50'}, 1000);
});
});
Edit:
Also, make sure that you are importing the jQuery script library:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
You missed $(document) in the line
$document.ready(function(){
Also
your jquery animate function is changing CSS of your id="moveme"
i'd make sure that in your css you have this.
#id {
position: relative;
}
You can definitely do this:
$(document).ready(function(){
$("#moveme").click(function(event){
$(this).animate({'margin-left': '+=50', 'margin-top': '+=50'}, 1000);
});
});
Working demo here (just click on the div saying 'hello'): http://jsfiddle.net/px2jz/
How can I add loading effect on <div>. In this code my members.php is so big file so its take time to load. So I want to show that loading… in my member <div> with effect. my javascript skills are so poor so I don’t know is this a right idea to do this or I have to code in member.php. I am so new and try to learn so please help me. I have tried with some free text javascript effect but I couldn’t find what I looking for. I want some image effect like rounding circle or something like that. Here is my code. I appreciate all answers.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#member').load('members.php').show();
});
</script>
</head>
<body>
<div id member>Loading…</div>
</body>
jQuery
function showLoading()
{
$('<div class="loading"/>').appendTo('#member');
}
showLoading();
$('#member').load('members.php');
CSS
.loading {
background: url('') no-repeat;
padding: 12px;
}
Replace the url with the path to the loading image you want, and the padding should be half the image area size.
Simple fiddle available here