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>
Related
I have an autogenerated layout looking like this created by the jQuery.PrettyTextDiff-plugin:
<head>
<script type="text/jaascript" src="the jquery library"></script>
</head>
<body>
<div class="diff">
<span>
<br/>
</span>
Continuing layout...
</div>
<script type="text/javascript" src="diff_match_patch.js"></script>
<script type="text/javascript" src="jquery.pretty-text-diff.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.diff span:first-child').remove(); // As of my last try
});
</script>
</body>
I wish to remove the first span inside the 'diff'-layout in runtime but I can't get it to work. I've tried several solutions found here at SO after a thorough research.
$('.diff').closest('span').remove();
$('.diff span').first().remove(); //recommended solution by the jQuery Foundation - yet it won't work
$('.diff span').remove();
$('.diff').find('span:gt(0)').remove();
Nothing seems to remove the span. How should I do to remove it?
Try like this…
$('.diff').each(function(){
$(this).find('span').eq(0).remove();
});
The statements you have provided should work:
$(".diff").remove("span");
fiddle
I believe that the code you're talking about is generated dynamically. You need to wait until is rendered and remove the span tags after it.
You could also fix the problem in the plugin itself, or ask the author of the library to fix the issue for you.
Did you wrapp your jQuery code like:
$(document).ready(function () {
$('.diff span').remove();
});
this should work.
UPDATE:
To remove only the first child do:
$('.diff span:first-child').remove();
Fiddle
try with this$(".diff").find("span").html("");
Click here.
Somewhere I saw a rapid comment suggesting that I could use CSS to solve this - so I did. It works as a charm.
.diff span {
display: none;
}
I am having trouble using jQuery to fadeOut() an image and fadeIn() another when a button is clicked.
To keep it simple, here is the HTML of just the part that needs to be affected:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id="landing-page">
<div id="call-to-action">
<img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1608452_3821343707689_2110853534_n.jpg?oh=ab5ebfd5dce574e97a43e9a7c0739583&oe=52D0F2AC" id="learn-button"/>
</div>
<img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1551908_3821359708089_1101636385_o.jpg?oh=aa19a9ac5f5b5e4f3cf704858482803d&oe=52D11726"id="line"/>
</div>
</div>
</body>
Here is the jQuery:
$(document).ready(function() {
$("#call-to-action").click(function() {
$("#landing-page").fadeOut("slow");
$("#more-info").fadeIn("slow");
});
});
When the button #call-to-action is clicked, the #landing-page div should fadeOut, and the #more-info image should fadeIn. It is not working. In fact, any jQuery command I've typed in has not worked for other divs. I believe there is something wrong with my jQuery plugin, or I'm missing some reference to the jquery sheet.
"or I'm missing some reference to the jquery sheet."
Yes. The code you show does not include the jquery.js file. If you have a copy of jquery.js in your project then add this in the <head> section immediately before your other JS include:
<script type='text/javascript' src='jquery.js'></script>
Otherwise you can reference a copy from a CDN:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
(Specify whichever version of jquery you want to use in accordance with what your chosen CDN supports; I've suggested the latest version compatible with old IE.)
Also you probably want to hide the second img to start with, and not fade it in until the first img has finished fading - if you pass a function as the second argument to .fadeOut() it will be called after the fadeout finishes:
$(document).ready(function() {
$("#more-info").hide();
$("#call-to-action").click(function() {
$("#landing-page").fadeOut("slow", function(){
$("#more-info").fadeIn("slow");
});
});
});
Demo: http://jsbin.com/OmaCOju/1/edit
You missed to include the jquery library. You can include it from google CDN. From you question i understand that on click of a button you want div to be fade-in and fade-out. Please refer the below demo for doing this.
Demo : http://jsbin.com/IGAJeqew/2/edit
How to add a class to first div using jQuery.
I Tried following code but doesn't work for me.
maybe I'm missing something.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script>
$('.item')
.eq(0).addClass('first').end()
.eq(-1).addClass('last').end();
</script>
<style type="text/css">
.first, .last{
background-color:#0099FF;
}
</style>
</head>
<body>
<div class="item">aaa</div>
<div class="item">bbb</div>
<div class="item">ccc</div>
<div class="item">ddd</div>
<div class="item">eee</div>
</body>
</html>
Edit: Thanks to everyone, is there anyway to add a class to rest of DIVs?
You are executing the code before the markup is ready. Wrap the code in
// document ready short-style
$(function() {
});
try
$(document).ready(function() {
$('.item:first-child').addClass('first');
});
Your code is correct, but it's executed before the DOM is ready, please move the <script></script> to the last line before </body>.
To add a class to the rest of the elements you can do this (from VisioN's comment)
$(".item:not(:first,:last)").addClass("differentClass");
$(".item :first").addClass('first');
u use this code
$(function(){
$(".item:first-child").addClass("anyclass");
})
or
$("div:first-child").addClass("anyclass");
your code should execute when the DOM is fully loaded. So use $(document).ready().
the script can be run as soon as the DOM hierarchy has been fully
constructed. The handler passed to .ready() is guaranteed to be
executed after the DOM is ready, so this is usually the best place to
attach all other event handlers and run other jQuery code.
Read more about $(document).ready().
check the code below. It will help you to get done what you want.
$(document).ready(function() {
$('.item').first().addClass('first');
});
Otherwise your js is ran even before the DOM is loaded
$(".item:first").addClass('first'); will work fine too.
Try the demo too.
Hope this will help you out. If you have any questions please don't hesitate to ask. Thanks
Here is the jQuery code
<script>
$(document).ready(function(){
$('body .item:first').addClass('YOUR CLASS VALUE');
});
<script>
Regards,
http://www.santoshkori.com
see jsfiddle here
$(document).ready(function() {
$('div:first').addClass('first');
});
You could always use straight CSS, although it is CSS3. E.g. you could replace your curre t CSS with:
.item:nth-of-type(1), .item:nth-of-type(3)
{
background-color:#0099FF;
}
If you do just want jQuery then you could try:
$('.item:first').addClass('first');
$('.item:last').addClass('last');
Try this
JS CODE
$(document).ready(function(){
$('div.item')
.eq(0).addClass('first').end()
.eq(-1).addClass('last').end();
});
DEMO
Note
you need to use $(function() { ... }) to wrap whole jQuery code.
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>