how to hide a div after a few seconds using jQuery mobile? - javascript

I want to show a div for 5 seconds when the web page is loaded and then make it disappear. This is my code:
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
setTimeout(function() {
$('#mask').hide();
}, 5000);
</script>
</head>
<body>
<div id="mask">
<h2>This div will fade out </h2>
</div>
</body>
</html>
The above code doesn't work, however if I delete the single line that calls jQuery mobile javascript
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
it works perfectly.
Any idea on how I can make it work having both jQuery and jQuery mobile in the <head> section?

As jQuery initialises lots of event listeners wrap up your code on an event listener like:
jQuery(document).ready(function ($) {
setTimeout(function () {
$('#hide').hide();
}, 5000);
});
http://jsfiddle.net/wcuxS/1457/

Try including the div in your first page:
<div data-role="page" id="page1">
<div data-role="header">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<div id="mask">
<h2>This div will fade out </h2>
</div>
</div>
</div>
Then add your script within the pagecreate event:
$(document).on("pagecreate", "#page1", function () {
setTimeout(function () {
$('#mask').hide(800);
}, 5000);
});
Working DEMO

You need to work with the Jquery Mobile api. Embed you timeout function within the $(document).on('pageinit') event callback. Also I am not sure if its called 'pageinit' but there is a Jquery Mobile event that behaves like $(document).on('ready'). Do some research on the JQM api

Related

jQuery mobile - Pagecontainer disappears from DOM

In jQuery mobile I want to load pagecontainers from external files. I can add the markup to my DOM, but the problem I am facing afterwards is that as soon as I navigate to #page2, the entire #page1-div disappears from the DOM and thus I cannot navigate back (Please see screenshots below).
DOM before clicking "Go To Page 2"
DOM after clicking "Go To Page 2"
As you can see, the entire #page1-div is gone for good. Why is that? Any thoughts? Please see my markup and code below:
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<title>Hello jqm</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$(document).on( "pagecontainerload", function( event, ui ) {
console.log('navigating to page1...');
$.mobile.pageContainer.pagecontainer("change", "#page1");
console.log('navigating done!');
} );
console.log('loading pagecontainers...');
$.mobile.pageContainer.pagecontainer("load", "page1.html");
$.mobile.pageContainer.pagecontainer("load", "page2.html");
console.log('pagecontainer-load done!');
});
</script>
</body>
</html>
page1.html
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
Go To Page 2
</div>
</div>
page2.html
<div data-role="page" id="page2" class="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
Go Back To Page 1
</div>
</div>
Remarks: This is a follow up question to this one: jQuery mobile - Splitting up pages to different files
jQuery Mobile removes external pages when you navigate away of them. You should leave a base page cached in DOM rather than loading all pages.
Solution one: in test.html, add html markup of page1.html and load page2.html externally.
Solution two: add data-dom-cache="true" to page1 div to keep it cached even if it's loaded externally.
<div data-role="page" id="page1" data-dom-cache="true">
Update
You can cache all external pages at once without the need to add data-dom-cache to each and every page div. All you need to do is to globally set domCache option of page widget to true on mobileinit event. The code should be placed after jQuery.js and before jQuery-Mobile.js.
<script src="jquery.js" />
<script>
$(document).on("mobileinit", function () {
$.mobile.page.prototype.options.domCache = true;
});
</script>
<script src="jquery-mobile.js" />
For this case, you should try to init the page manually
In page1:
$(document).bind("mobileinit", function () {
...
$.mobile.autoInitializePage = false;
$.mobile.initializePage();
});
In page2:
$(function () {
$.mobile.activePage = null;
$.mobile.initializePage();
});
This is my solution for switch 2 pages not in same HTML.

Can't use Javascript when using AJAX (jQuery Mobile)

I want to use Swiper Javascript Api(http://www.idangero.us/) in Jquery Mobile..
But because Jquery Mobile uses ajax, my javascript doesn't work..
Example sources are like that.
index.html
<head>
<link href="./scripts/jquery.mobile-1.4.0.css" rel="stylesheet" type="text/css"/>
<script src="./scripts/jquery-1.10.2.min.js"></script>
<script src="./scripts/jquery.mobile-1.4.0.js"></script>
<link rel="stylesheet" href="./scripts/idangerous.swiper.css"/>
<script src="./scripts/idangerous.swiper.2.4.1.js" defer="true"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"></div>
<div role="main" class="ui-content page_content">go sub page</div>
<div data-role="footer"></div>
</div>
</body>
sub.html
</head>
<body>
<div data-role="page">
<div data-role="header">
</div>
<div role="main">
<!-- using swipe javascript source-->
<script defer="true">
$(document).on('pagecreate', function() {
var mySwiper = new Swiper('.swiper-container',{
//Your options here:
mode:'horizontal',
loop: true
//etc..
});
})
<div class="swiper-container">
<div class="swiper-wrapper">
<!--First Slide-->
<div class="swiper-slide" style="background:white;">
<center><font color="black">1</font></center>
<center><font color="black">page1</font></center>
</div>
<!--Second Slide-->
<div class="swiper-slide" style="background:white;">
<center><font color="black" >2</font></center>
<center><font color="black" >page2</font></center>
</div>
<!-- Third Slide-->
<div class="swiper-slide" style="background:white;">
<center><font color="black">3</font></center>
<center><font color="black">page3</font></center>
</div>
</div>
</div>
</div>
</div data-role="footer"></div>
</div>
</body>
I used Swiper api(javascript) at sub.html. But when I access index.html page and click sub link, sub page's Swiper api doesn't work. When I refresh that page, it work..
How can I view the Swiper api even I do not refresh it?
jQuery Mobile uses AJAX to load in your new page. However, it strips out the head--as well as anything outside a container with data-role="page" (or body if not provided).
The solution is to move your script so it appears within the section of the page that jQuery Mobile injects into the page, so it doesn't get removed.
Then, if you want to execute javascript on $.ready(), you'll need to bind to jQuery Mobile's onPageInit event like so:
$( document ).on( "pageinit", function( event ) {
alert( "This page was just enhanced by jQuery Mobile!" );
});
In the real world, I've noticed that pageinit sometimes doesn't solve the problem, so if all else fails, try binding to pagebeforeshow and see if that does the trick.
My guess is that the document.ready is only fired once - when your page has initially been loaded and DOM is ready. You can put your code directly into a tag in the loaded sub.html. No need to use the $(document).ready event handler.

Showing a dialog from a separate html file and passing it a parameter

I am using android 2.2, phonegap 1.3, and jquery-mobile 1.0
I have a list view in which there is an element in the list that I want to use to create a dialog. I would like my dialog to be defined in a separate file so I can reuse it and I would like it to set the title according to the value I pass.
My dialog looks something like this:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
<div data-role="page" class="ui-page-z">
<div data-role="header" data-theme="z" class="ui-bar-z">
<h1 id="title"></h1>
</div>
<div data-role="content">
...
</div>
</div>
</body>
</html>
I have tried using a #href with the title parameter (as defined below), dialog is opened but the title param isn't present.
<ul data-role="listview" data-theme="a">
...
<li><a href="dialog.html?title=blah" data-rel="dialog"/></li>
...
</ul>
I have read that I could use a data-url but in this case it is not clear where I define it (in the <a> or in a <div> which wraps it) and how I extract this in the dialog page.
EDIT
For the record the mechanism works in a standard browser but without the styling.
I created the script inside the <script> tags below which listens for page show events and updates the title and placeholder for the input.
<div data-role="page" class="ui-page-z">
<div data-role="header" data-theme="z" class="ui-bar-z">
<h1 id="title">
</h1>
</div>
<div data-role="content">
<input placeholder="Type here..." id="configtext">
</input>
...
<script type="text/javascript">
$("div.ui-page-z").live("pageshow", function(event, ui) {
var dataUrl = $(".ui-page-active").attr("data-url");
$("#title").empty();
$("#title").append(SMSPLUS.getValue("title", dataUrl));
$("#configtext").attr("placeholder", SMSPLUS.getValue("placeholder", dataUrl));
});
</script>
</div>
The script wasn't detected when placed in the header (presumably because the framework takes no notice of headers for dialogs)
You might try removing the
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
</body>
and only return the body html & javascript in your ajax call. Having two DOMS in one might confuse the browser.

Start simplemodal on page load

I am coding a little web page and I want to start simplemodal on the start of loading the page.
So now i have this code in body
<div id='container'>
<div id='content'>
<div id='basic-modal'>
<input type='button' name='basic' value='Open' class='basic'/>
</div>
<!-- modal content -->
<div id="basic-modal-content">
<h3>Random Text in the SompleModal box.</h3>
</div>
</div>
</div>
You can see the button as a input, when i click it the box poppes up and there is the text.
Here also the basic.js, but i dont understand it, because i started learning Web Designing a few days ago.
basic.js
jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();
// Load dialog on click
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});
});
also included are these files.
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
I read that it it possible to use onLoad or in jscript .ready but i dont know how.
Use the $(document).ready() function :
$(document).ready(function() {
// Any thing in here will execute when the DOM has finished loading
$('#basic-modal-content').modal();
});
jQuery Docs for .ready()
Try with this:
<script>
function openModal()
{
$('#basic-modal-content').modal();
}
</script>
<body onload="openModal();"></body>

Calling a Script when button clicked

In a jquery mobile webpage, I would like to call a script defined within script tags in the HEAD section of the jsp.
<head>
<link rel="stylesheet" type="text/css" href="jquerymobile/jquery.mobile-1.0a1.min.css" />
<script type="text/javascript" src="jquerymobile/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquerymobile/jquery.mobile-1.0a1.min.js"></script>
<script>
$("#button").click( function()
{
alert('button clicked');
}
);
</script>
</head>
<body>
<html:errors/>
<div data-role="page" data-theme='a'>
<div data-role="header">
<h1>jquerymobile</h1>
</div>
<div data-role="content">
<div id="button" data-role="button">Click on button</div>
</div>
</div>
</body>
When the Button is clicked, I want the alert to be shown. But nothing happens when the button is clicked.
Could someone tell me where I am going wrong?
EDIT1:
The following code brings up the alert in Firefox & Opera Desktop Browsers.
$(document).ready(function() {
$("#vbutton").click(function() {
alert("clicked");
});
});
<a id="vbutton" data-role="button">Click Button</a>
Any reason why the same does not work with Opera Mobile & Fennec browsers - where it shows the Error Loading Page dialog??
Your problem is that you are searching for $('#button') before it exists...
Try wrapping your jQuery code in a $(document).ready(function(){ ... }) or its shorthand alias jQuery(function(){})
The other option is to include your initialization of the click event on the button until AFTER the #button exists in the DOM. In other words, you can move your <script> tag to the bottom of the page and it should work.
The problem was due to debug statements like
debugger;
debug.info(....)
which were understood by Firefox/Firebug, but were causing problems in Fennec & Opera Mobile browsers.

Categories

Resources