.Show() not working in Jquery Mobile - javascript

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...
}

Related

Javascript FadeIn Not Working Properly

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.

How to fade in a div message on page load with jQuery

I am trying to display a div message when the page loads using fadein and fadeout after 3 secs but my code does not seem to work, any help please? what am I doing wrong?
HTML
<div id="message" class="jumbotron" style="display:none;">
<p><?php echo $m; ?></p>
</div>
jQuery
$(document).ready(function(){
$('div#message').fadeIn(3000).delay(3000).fadeOut(2000);
});
Your code works for me (Here's a fiddle). The issue is either that you haven't included a valid link to the jQuery library, or there is an error that occurs before it gets to the below code that causes it to stop executing.
jQuery
$(document).ready(function(){
$('div#message').fadeIn(3000).delay(3000).fadeOut(2000);
});
Are you writing this script on the same page as the div element or does this lies in an external page?
If on external page then try checking if the control even passes to this page or not by simply putting an alert box or not.
If this script is on the same page, then make sure you write this script after the element you defined as if you have written this on the top or before the #message div then the script would run before it even gets loaded on page and you would not see any difference.
Just fade in the message on page load and then set a timeout in order to fade out after 3 seconds
Check the DEMO
EDIT
$('#message').fadeIn()
.queue(function() {
setTimeout(function() {
$('#message').fadeOut();
}, 3000);
$(this).dequeue();
});
$('div#message').fadeIn(3000,function()
{
$(this).delay(3000);
$(this).fadeOut(200);
});
Hope this will work for you.

javascript jquery expand collapse search results

I have this bit of code below which expands and collapses the results from a search. The search displays the search results on the same page so the whole page isn't reloaded. It works the first time - i.e the first search, however for future searches the expand collapse feature stops working. I think its because the page isn't reloaded but Im not sure how to fix it.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2 /jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.section').hide();
$('h2').click(function () {
$(this).toggleClass("open");
$(this).next().toggle();
}); //end toggle
}); //end ready
</script>
<?php include('db.php');
$descr = $_POST['search'];
echo '<ul id="user_list">';
$user_query = $db->query("SELECT * FROM tblVulns WHERE Name LIKE '%".$descr."%'");
while($user = $db->fetch_assoc($user_query))
{
echo ' <h2 style="cursor:pointer">'.stripslashes($user['Name']).'</h2>
<div class="section" style="display:none"> <h3>'.stripslashes($user['Risk']).'</h3><p>
<h4>'.stripslashes($user['Summary']).'<p>'
.stripslashes($user['Description']).'<p>'
.stripslashes($user['cveCode']).'<p></div>';
}
?>
The code at the bottom is the php receiving the search results. The code at the top is the js that is dealing with expand and collapse
Any help in how to get this work for all searches after the page has loaded would be great. Thanks
You are adding your event listener to the click event of any h2 elements that are present on page load. It sounds like you are then loading in new content and expecting the same code to work for them.
Instead, you will need to do this:
$("body").on("click","h2",function(){
$(this).toggleClass("open");
$(this).next().toggle();
});
Which will work on any h2 that is on the page. If you want only h2s in a certain container to have the effect then replace body for a reference to that element
EDIT:
I see now that you are using quite an old version of jQuery that doesn't support the on() function. I would suggest upgrading if you can, or use Abhishek Saha's answer if you cannot.
I think one of the reason, it doesnt work after the first search is because the new element which gets loaded, is not bind with the click action.
Try this:
replace
$('h2').click(function () {
$(this).toggleClass("open");
$(this).next().toggle();
});
with
$('h2').live('click',function () {
$(this).toggleClass("open");
$(this).next().toggle();
});

How to make something load first before another in javascript and jquery

I have a div with text in it and a background image. When I load the page the text always appear 1st(assume i have low speed internet connection). How can i make the background image load before text? Can You please give me solution in both jquery and javascript
Add the text in the onload event handler for the image.
Note: If you want to keep using a div tag with a background image rather than an img tag, you'll have to add the text during the window.onload event (see this answer for the details).
Assuming your div looks like this:
<div id="Derp" style="CSS-for-background-image-here">Magical ponies!</div>
I would try removing the text completely and then add this kind of jquery call:
<script>
$(document).ready(function() {
$('#Derp').load(function() {
$('#Derp').text("Magical ponies!");
});
});
</script>
The $('#Derp').load(...) is the key here. See the docs for load(). It has an example of exactly what you need.
you could populate the content onload.
Start with this:
<div id="content"></div>
Then, in jquery, do this:
$(document).ready(function() {
mybg= new Image();
mybg.onload=function(){
$('#content').html('YOURTEXTHERE');
}
mybg.src = "PATH/TO/IMG";
});
your simple answer is .load you can do when your window gets loaded fully and then text appears:
$(function(){
$(window).load(function() {
$('p').fadeIn(800);
});​
});
what this is doing is fading in the p tag with text when whole window gets loaded.
you can find a demo here: http://jsfiddle.net/a5P8b/

How to get my div to fade out with jQuery on page load?

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

Categories