I want to make an text animation with JQuery but I dont know how should i start and how should i code this. Actually what/where to google it.
If you look at http://www.apple.com/stevejobs/ you see that text are moving and the last is added to the top with nice fadeout and so on.
Could you help me to give an example/ scratch of doing it in JQuery Ajax and html.
I want to implement it in Python as backend and in the front use Ajax ,JQuery, Javascript and so on. please give hint that which one is better.
Thank you
Put text in <div>s
Use jQuery's effects to show, hide, and animate the text.
Optionally add jQuery UI's easing effects and use something like the easeInOutCubic easing function.
This should get you started atleast with the effect.
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#de9a44; margin:3px; width:80px;
height:40px; }
#one { background:#de9a44; margin:3px; width:80px;
height:40px; display:none; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="one"></div>
<div></div>
<div></div>
<script>
//sets a timer to 1sec
$(document).ready(function () {
window.setInterval(yourfunction, 1000);
});
//goes to a php file and return data to be appended to your div.
function yourfunction() {
$.get("test.php", function(data){
$("#one").html(data)
$("#one").slideDown("slow");
});
}
</script>
</body>
</html>
timer thanks to Kristof Claes and here more info on the jquery get() function. My recommendation for you is to map out a logic of what you want to accomplish, and search for how it might be called and start forming piece by piece your result..That's what I do, I'm no expert in jquery but i have an idea and thanks to great people in in S.O. and google I am able to accomplish awesome things.
Related
My webpage contains a DIV. If Javascript is enabled, I want the DIV to be invisible (display: none;) when the page loads. If JS is disabled, I want it to be visible (display: block;).
I can do:
document.write('<div style="display:none;">...</div>');
or
document.getElementById('foo').style.display = 'none';
With the first code there won't be a DIV if JS is disabled. With the second, the DIV will be visible when the page loads and disappear when the JS is executed.
I'm too stupid to solve this.
Can I put JavaScript inside the <div>-tag to write only the style? Certainly not like this:
<div <script>document.write('style="display:none;"');</script>>
Maybe something like:
<div onLoad="document.write('<div style="display:none;">...</div>');">
Does someone have an idea?
One problem with displaying an element unless JS hides it is that, even with JS on, the element is likely to display until the JS kicks in. So it's often better to have some JS at the top of the file that adds a class to the root element straight away, to get in before the CSS loads. Here's a simple example (in my noob JS):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
(function() {
var root = document.querySelector('html');
root.className = "js";
}());
</script>
<style media="all">
div {width: 500px; height: 200px; background: blue;}
.js div {display: none;}
</style>
</head>
<body>
<div></div>
</body>
</html>
This is much better than using oldfashioned <noscript> and document.write() etc.
EDIT: I should just note that an easier way to target the html element is with document.documentElement. Thus, the code above could be written as—
<script>
(function() {
document.documentElement.className = "js";
}());
</script>
Why don't you just put the <div> in a <noscript>?
<noscript><div style="display:none;">...</div></noscript>
Now you don't even have to use Javascript to deal with it.
I think there is a problem with my JavaScript. It's basically not working, no matter anything i try.
I have this VERY simple script:
<div id="simplediv" style="background-color:yellow;border:1px solid black;display:none;width:200px;height:200px;">Click anywhere in the document to auto-close me</div>
Click Here
And on this website it works:
http://www.javascripttoolbox.com/lib/popup/example.php
But when i add it to my own page:
<head>
<title>Script</title>
</head>
<body>
<div id="simplediv" style="background-color:yellow;border:1px solid black;display:none;width:200px;height:200px;">Click anywhere in the document to auto-close me</div>
Click Here To Show DIV
</body>
It won't work. i've also tried with other javascript codes inside the tags, and they all worked exactly on the website where I took it from, and I don't know why it doesn't work now.
Does anyone know why it's behaving like this?
As stated, the onclick="" Popup function is not defined; your browser doesn't know what this function is supposed to do.
Edit as you need, but putting something like this in your header would define your function:
<script type="text/javascript">
function showDiv(div_id){
document.getElementById(div_id).style.visibility="visible";
}
function hideDiv(div_id){
document.getElementById(div_id).style.visibility="hidden";
}
</script>
Then you would call these functions in your onclick="" event with the needed parameters. Similar to the following:
Click Here To Hide DIV
Click Here To Show DIV
I am trying to change the content of a div on the page but the page has a lot of things to load and on slower computers there is a flicker where you can see the div changing (changing through jquery btw). Is there anyway that everything can be hidden and display it all at including the changes I made using jquery?
I had a similar issue with my web application.. This is what I did
Hide body in HTML
<body style="display:none">
And write this script :
$(window).bind("load", function() {
$("body").fadeIn(100);
});
OR this script
$(window).load(function () {
$("body").fadeIn(100);
}
This creates beautiful effect and shows the page ONLY after everything is fully loaded..
Perhaps you could do something like
<head>
<style>
body{
display:none;
}
</style>
</head>
<body>
flickery <div></div>s go here
</body>`
And your script
$(window).load(function(){
$(document.body).css("display","block"); //shows it when all the elements are ready for presentation
});
New to Javascript and trying my best, but can't solve the problem despite extensive searching.
Trying to make an item fadein on page load using inline script (XHTML). I'd love to use external, but can't given software restrictions. Here's the code I've developed so far...
<script type='text/javascript'>
$(document).ready(function() {
$('#evan').fadeIn('slow');
});
</script>
<div id='evan' style='position:absolute;left:-200px;top:40%;width:80px;height:80px;background-color:red;'></div>
While the box does appear, it doesn't fadein so I'm assuming the Javascript isn't written correctly.
Any assistance you can provide would be greatly appreciated. Thanks.
I think for fadeIn to work the item has to be hidden first and your element position (left: -200px) is not within the viewport.
<script type='text/javascript'>
$(document).ready(function() {
$('#evan').fadeIn('slow');
});
</script>
<div id='evan' style='position:absolute;top:40%;width:80px;height:80px;background-color:red;display:none'>Some content</div>
Demo: Fiddle
This is my ready handling:
$(document).ready(function() {
$(document).hide();
$('.foo').each(function(elem, i) {
$(elem).text('So long and thanks for all the fish');
});
$(document).show();
}};
What I'm trying to do is hiding the document completely until everything is ready on my terms, but it seems that the show() function doesn't wait for the elements iteration.
By the way, I tried changing show() and hide() to css('display', 'hide') and css('display', 'block') but still, you can the text is changing in your eyes.
How do you make sure all your code ran before calling show()?
Let's suppose you fix this by hiding the body or a container element. That won't do the trick, and here's why:
What happens during the time after the document is (mostly) loaded but before you hide the document?
That's right, the document may get displayed during that time despite your best efforts.
So what you could do instead is use a CSS class that hides, say, the body without any JavaScript intervention. For example:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
body.hide { display: none; }
</style>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready( function() {
$('.foo').each(function( i, elem ) {
$(elem).text( 'So long and thanks for all the fish' );
});
$('body').removeClass( 'hide' );
});
</script>
</head>
<body class="hide">
<div class="foo"></div>
</body>
</html>
Of course this does mean that if JavaScript is disabled, your document won't be visible at all. What if you want to have a non-JavaScript fallback? In that case you could do it like this instead. We'll hide the html element instead of the body because that way we know the code will work in the head (the body element may not exist yet at this point), and only hide it if JavaScript is enabled:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
html.hide { display: none; }
</style>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
$('html').addClass( 'hide' );
$(document).ready( function() {
$('.foo').each(function( i, elem ) {
$(elem).text( 'So long and thanks for all the fish' );
});
$('html').removeClass( 'hide' );
});
</script>
</head>
<body>
<div class="foo">
This content is displayed if JavaScript is disabled.
</div>
</body>
</html>
Now you have a non-JavaScript fallback, but the document will still be hidden immediately when JavaScript is enabled, because of the code that adds the hide class.
Also note that you had the parameters reversed in your $().each() callback. (Interestingly enough, the order you used makes much more sense and indeed is the order used by the newer native .forEach() function. The order in $().each() is really backwards - one of those things that seemed like a good idea at the time but really was just a mistake.)
You can not hide() the document. Instead, try hiding the main container element on your page; or hiding the body e.g. $('body').hide() might work as well.
Just an aside: the display property should be none. hide is not a valid value.