I'm trying to hide the header div on my page, but I have already tried using the jquery functions slideup and slidetoggle, as well as hide, but my div does not seem to hide. I actually want it to hide after 5 seconds, but to no avail. Would the css affect the jquery functions of my div?
My Div:
<div id="headerrr" class="row firstrow">
<span id="description" >You are currently on preview mode</span>
<span id="close-preview">[close preview]</span>
</div>
My CSS:
.firstrow{
background-color:#4d4d4d;
color:white;
height:50px;
padding:15px;
}
My JS:
$(document).ready(function(){
$("#headerrr").hide().delay(100);
$('#headerrr').slideToggle("slow");
});
I am currently using twitter bootstrap 3, would that affect my jquery as well?
Try:
$(document).ready(function(){
setTimeout(function(){
$("#headerrr").fadeOut();
// OR $("#headerrr").slideUp();
},5000);
});
Just calling .delay() will not affect the next sequence of commands as it it not equivalent to Thread.sleep()
If you want to use a delay then
$(document).ready(function () {
$("#headerrr").hide().delay(1000).queue(function(){
$(this).slideToggle("slow");
}).dequeue();
});
Demo: Fiddle
Try this.... It may be helpful to you....
$(document).ready(function () {
$("#headerrr").hide().delay(1000).queue(function(){
$(this).slideToggle("slow");
}).dequeue();
});
This is the FIDDLE document
Related
I want to show the body text in another div in CKEditor. I used the following code.
$(document).ready(function(){
setInterval(function(){
$('#rerg').empty();
$("body#contentfsf").clone().appendTo("#rerg");
},1000);
});
and
config.bodyId = 'contentfsf';
Preview should be in,
<div id="rerg">
</div>
It does not work.
Please provide me with a solution or with any other methods.
Am not too used to jquery, but with javascript this should do :
document.getElementById("rerg").innerHTML = valueToWrite;
$("body").on("keyup", "#contentfsf", function () {
$("#rerg).html($(this).val());
});
This will copy the content from the editor to the div.
You dont need:
setInterval function;
*not tested
I need some help with my code, This is what my HTML looks like:
<body onLoad="loader();">
<div class="loader"><img src="images/loader.gif></div>
<div class="main"></div>
CSS:
.main {
display:none;
}
So, the loading Gif Is shown, and then when the page fully loads, it should do this:
function loader() {
setTimeout(function () {
$("#main").fadeIn("fast");
$("#loader").fadeOut("fast");
}, 1000);
};
But all it does, is that the loader div disappears, then the main div appears like it should for a split second, then just dissappears. Thanks in advance for any help. #:)
I think you mean for the loader to fade out after main has faded in, in which case you'll need to take advantage of the callback argument.
You can also use delay() rather than setting a timeout.
You should also use $(document).ready() rather than invoking the function in the onload="" handler.
$(function(){
$('.main').delay(1000).fadeIn('fast', function(){
$('.loader').fadeOut('fast');
});
});
Noted by Blauharley: You are targeting elements with an ID of main (and loader), whereas the elements in your markup use classes.
http://jsfiddle.net/98ftvycL/
I figured out how to make a toggle button which hides and shows the div with the content, but how can I make the content hidden by default and the toggle button to show the content
$(function(){
$('a.toggle').click(function(){
$('#content').stop().slideToggle(500);
return false;
});
});
Use CSS to hide content during page load.
CSS:
#content{
display:none;
}
Jquery:
$(function(){
$('a.toggle').click(function(){
$('#content').stop().slideToggle(500);
return false;
});
});
Here is a new jsFiddle.
The trick is to hide the entry when the page loads.
$(function(){
// New code
$("#content").hide();
$('a.toggle').click(function(){
$('#content').stop().slideToggle(500);
return false;
});
});
See also the jQuery docs on hide().
An alternative way shown in this additional jsFiddle is to set the "display:none;" CSS property on the div in the first place.
<div style="display: none;" id="content">
<p>Hello</p>
</div>
If you also want to hide the button when the content is shown, we can again use the .hide() function to now hide the button. Another jsFiddle is available. The core code for this becomes:
$(function(){
$('a.toggle').click(function(){
$('#content').stop().slideToggle(500);
// Start of new code
$('.toggle').hide();
// End of new code
return false;
});
});
I'm looking to simply hide and image before the page loads and then once the page has loaded to show the image. Problem is when I try to show the image it doesn't show the image at all.
Here is my html code:
<body>
<div id ="splash" data-role="page">
<center>
<div id='class'> <img src="BookBayText.png"></div>
<div id='book'> <img src="Book.png"></div>
</center>
</div>
</body>
Here is my javascript/jquery mobile:
<script type="text/javascript">
$(document).on('pagebeforeshow','#splash',
function()
{
$("#book").hide();
});
$(document).on('pageinit','#splash',
function(){
setTimeout(
function()
{
$("#class").animate({top: "1em"}, 'slow');
},3000);
//For some reason this line below doesn't run
$("#book").show();
});
</script>
Any ideas why this isn't working??
I managed to get the desired effect I wanted with the following code:
setTimeout(
function()
{
$("#class").animate({top: "1em"}, 'slow');
$("#book").show();
},2000);
Basically I moved the $("#book").show(); line into the setTimeout function. But it still leaves me a tad lost as to why the code wouldn't show the image outside the function. If anyone with the answer to this could update this answer it would really be appreciated.
kinda similar to this post jQuery mobile popup on pageinit .
Although the post blames a delay in the browser, for me it is still unclear why it does it. I have never experience such behaviour.
I wonder what if you do the following changes:
put your center tag inside a data-role:content,
replace pageinit for pageshow.
search your iem as follows
inside either pageinit or pageshow (not settimeout).
>
var elem = $("[data-role='page']:last").find('#book img'); // others may use $.mobile.activePage
if (elem.length) {
// check height or img width here...
}
I'm brand new to jQuery (and javascript in general). I've been meaning to use it/learn it for some time, and nows the time.
So I'm going to use jQuery on this page to fade out the "under construction" warning at the top of the page on load. But I'm unfamiliar with any of the functions or selectors to use.
I found this basic article at jQuery which has a demo that seems to work perfect for what I'm doing, only it's set up to fade out on click.
What do I need to change to get it to fade out after a few seconds once the page has loaded, and can you point me where to look to find out more about those type of functions (specifically on jQuery's site, if you're familiar). And please don't say, "In the documentation." I'm a noob but not a dummy, thanks. I'm just trying to learn more about that particular area of the syntax responsible for functions for now (if that's what they're called).
New to jQuery 1.4 is the delay method. Using it for this purpose:
$("#myDiv").delay(3000).fadeOut("slow");
$(document).ready(function() {
window.setTimeout("fadeMyDiv();", 3000); //call fade in 3 seconds
}
)
function fadeMyDiv() {
$("#myDiv").fadeOut('slow');
}
Hey, the site looks cool. This should do it for you.
$(document).ready(function() {
setTimeout(fade, 2000);
}
function fade(){
$("#tempwarning").fadeOut(1000);
}
Here's a complete example.
Just paste this into an html file and save it.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" />
<script>
$(document).ready(function(){
window.setTimeout('fadeout();', 3000);
});
function fadeout(){
$('#tempwarning').fadeOut('slow', function() {
// Animation complete.
});
}
</script>
</head>
<body>
<div id="tempwarning">
<div class="wrap">
<span class="warning-icon">!</span>
<p>
Oops! Please pardon my appearance. I'm still under development. Please visit often.
</p>
</div>
</div>
</body>
</html>
EDIT:
This line of code:
$(document).ready(function() { });
Waits for the page to load before executing anything inside it.
$(document).ready(function(){
setTimeout(function(){ $("#tempwarning").fadeOut(); }, 2000);
});
<script>
$(document).ready(function(){
window.setTimeout('fadeout();', 1000);
});
function fadeout(){
$('.loader').fadeOut('fast', function() {
// Animation complete.
});
}
</script>
Perfect for a LoadingPage