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
Related
I would like to hide a picture in a div after 10 seconds using Javascript. The div i have is in the footer.php along with the script I researched to hide but it is not working. Any ideas?? Below is a snippet of my code.
<--footer.php-->
<div id="hide">
<img src="http://www.example.com/image.png">
</div>
<script type="text/javascript">
setTimeout(function() {
$('#hide').hide();
}, 10000);
</script>
<--footer.php-->
Do i need to have something in my stylesheet.css to reference the #hide???
Thanks in advance.
Paul
Be sure that you include jquery properly:
http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/
How do I add a simple jQuery script to WordPress?
http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/
use jQuery() instead of $() in wordpress environment. or you can:
jQuery(function($){
setTimeout(function() {
$('#hide').hide();},
10000);
});
and No, you dont need to have something in stylesheet that refer to the div
good luck !
You code is correct and should work if you have also included a jQuery library.
For example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
I've seen the other post with pretty much this same question, but I don't understand how to implement it. I've got a .css file that is linked to my html file. How would I use "blurfast.js" to get a blurred div background? Can I just do something like this?
mydiv {background:blurfast;}
in my .css file?
No, in JS:
<script type="text/javascript">
Pixastic.process(domeDiv, "blurfast", {amount:1});
</script>
This is made to work only on images so will not work for your requirements as far as I know!
for an image the javascript below should work!
<script type="text/javascript">
var img = document.getElement("myImage");
Pixastic.process(img, "blurfast", {amount:1});
</script>
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.
How can I auto click on the link on page load? I have been trying for ages but id does not work.
<link rel="stylesheet" type="text/css" href="leightbox.css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="leightbox.js"></script>
</head>
<body>
<div class="content">
<p> Click here to activate leightbox popup.</p>
</div>
<!----------// POPUP (ON CLICK) //---------->
<div id="pop02" class="leightbox">
×
<div class="scrollbox">
<h1>This popup loads upon clicking a trigger link.</h1>
text</div>
</div>
</body>
You haven't provided your javascript code, but the usual cause of this type of issue is not waiting till the page is loaded. Remember that most javascript is executed before the DOM is loaded, so code trying to manipulate it won't work.
To run code after the page has finished loading, use the $(document).ready callback:
$(document).ready(function(){
$('#some-id').trigger('click');
});
First i tried with this sample code:
$(document).ready(function(){
$('#upload-file').click();
});
It didn't work for me. Then after, tried with this
$(document).ready(function(){
$('#upload-file')[0].click();
});
No change. At last, tried with this
$(document).ready(function(){
$('#upload-file')[0].click(function(){
});
});
Solved my problem. Helpful for anyone.
$(document).ready(function(){
$('#some-id').trigger('click');
});
did the trick.
$(document).ready(function(){
$('.lbOn').click();
});
Suppose this would work too.
In jQuery you can trigger a click like this:
$('#foo').trigger('click');
More here:
http://api.jquery.com/trigger/
If you want to do the same using prototype, it looks like this:
$('foo').simulate('click');
You are trying to make a popup work maybe? I don't know how to emulate click, maybe you can try to fire click event somehow, but I don't know if it is possible. More than likely such functionality is not implemented, because of security and privacy concerns.
You can use div with position:absolute to emulate popup at the same page. If you insist creating another page, I cannot help you. Maybe somebody else with more experience will add his 15 cents.
I am having a couple problems trying to manually insert some jQuery features into a wordpress theme. I have a lightbox wordpress plugin that is jQuery based that is working fine.
So if I manually load the jQuery script into wordpress the functions seem to work but instead of say a slide being hidden it is revealed when it should still be hidden. Or a pop up that should work is already being shown instead of hidden. I don't think I'm supposed to manually include the jQuery into my skin but using the wp_enqueue_script('jquery'); doesn't seem to be resolving my issues either.
<script src="http://platform.twitter.com/anywhere.js?id=i5CnpkmwnlWpDdAZGVpxw&v=1" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#twitpanel").slideToggle("slow");
$(this).toggleClass("active");
});
});
</script>
<div id="tweetit"><a class="btn-slide">Tell em'</a>
<div id="twitpanel"></div>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#twitpanel").tweetBox({
height: 100,
width: 225,
defaultContent: "Some Random Text"
});
});
</script>
</div></h2>
Like I said it works but in the reverse fashion that it should be.
I think I'm just loading in something wrong?
TIA,
Chase
maybe you need to default the div to hidden?
<div id="twitpanel" style="display:none"></div>
or
<div id="twitpanel" style="visibility:hidden"></div>