Using jQuery Mobile, I want an alert to display when the user opens a page
<div data-role="page" id="page3">
<div data-role="header">
<h1>Page Three</h1>
</div>
<div data-role="content">
<script>alert('How are you');</script>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
But the above code shows the alert on the startup of the app and when I open the page it does nothing. Thanks in advance for your help.
With jQueryMobile there are specific events to know when the page loads.
You should instead try the following (put this in your head element, before the body):
<script>
$('#page3').live('pageshow', function() {
alert('Page ' + $(this).attr('id') + ' about to be shown');
});
</script>
You could also handle instead the 'pagebeforeshow'/'pagecreate' events.
Try this
<script>
$("div[data-role=content]").eq(0).ready(function() {
alert('How are you');
});
</script>
Do it like this. It is assumed this div is loaded after page load.
Accessed with div Id.
$('#page3').load(function() {
alert("loaded....");
});
Accessed with div class.
$('.page').load(function() {
alert("loaded....");
});
In the <head> portion of your page place the following:
<script>
$(document).on('pageshow','#page3',function(){
alert('How are you');
});
</script>
Note: the .live() method has been deprecated. See the docs for more details about why. Also the .on() method is preferred but does require that you are using jQuery 1.7+. If you are pre jQuery 1.7 use delegate instead.
<script>
$(document).delegate('#page3','pageshow',function(){
alert('How are you');
});
</script>
Related
For some reason, after I refresh website, code in .on('load', function()) doesn't want to work. First load is working fine, as intended.
That behaviour started to happen when I introduced loader (animation before page full loads). Before that everything worked just fine.
/* Before page loads */
$( function() {
$('#intro').hide();
});
/* After page loads */
$(window).on('load', function() {
$('.loader').hide();
$('#intro').fadeIn(3200);
includePartials();
slideOutLandingPage();
});
To be specific, problem is that $('#intro').fadeIn(3200); doesn't happen and $('#intro') still has attribute display: none;
Any idea what might be the reason for that? Any idea how to bypass this?
HTML:
<body>
<div class="loader"></div>
<div id="intro">
<div class="title">
<div class="title-block">
<h1>Pretty website</h1>
<h2>Click anywhere!</h2>
</div>
</div>
</div>
<div id="container">
...
</div>
</body>
</html>
There are no errors in console.
To your advice, I have added console.log in several places to check order in which they are called, but everything looks like it should.
When I delete /* Before page loads */ part it works on refresh just fine, but loader is (obviously) still there after loads. Not to mention that my whole structure (formatting) of page goes bad.
Here's how I put console.logs:
$( function() {
$('#intro').hide();
console.log('Before load');
});
/* After page loads */
$(window).on('load', function() {
console.log('After load 1');
$('.loader').hide();
$('#intro').fadeIn(3200);
console.log('After load 2');
includePartials();
slideOutLandingPage();
});
Since many people wrote in here about document ready - it's not the solution. It must specifically work on load.
I had the same problem with my loader.
I only used this to make all my container appear after window is loaded (this was my first test)
$(window).on('load',function() {
// Animate container
$(".container").animate({opacity:1}, 1500);
});
But it worked the when i reload the page, not when I refresh the page.
I was asking to myself why, but I think I might have the answer...
It's simply because I have this function inside my ready function.
$( document ).ready(function() { }
If I separate the two, everything work even when I refresh or reload the page.
The problem is because $("#intro").hide() is called after $("#intro").fadeIn() method. You need to remove calling hide method and append display:none property to the #intro element.
Something like this.
<body>
<div class="loader"></div>
<div id="intro">
<div class="title">
<div class="title-block">
<h1>Pretty website</h1>
<h2>Click anywhere!</h2>
</div>
</div>
</div>
<div id="container">
</div>
</body>
<style>
#intro {
display: none;
}
</style>
<script>
$(window).on('load', function() {
$('.loader').hide();
$('#intro').fadeIn(3200);
includePartials();
slideOutLandingPage();
});
</script>
Then this will be working.
I mean, it seems to work fine, no?
$(function() {
$('#intro').hide();
console.log('Before load');
});
/* After page loads */
$(window).on('load', function() {
console.log('After load 1');
$('.loader').hide();
$('#intro').fadeIn(3200);
console.log('After load 2');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loader"></div>
<div id="intro">
<div class="title">
<div class="title-block">
<h1>Pretty website</h1>
<h2>Click anywhere!</h2>
</div>
</div>
</div>
Solution was to set intial display: none in css then remove "before load" actions and add few lines to on.load
/* After page loads */
$(window).on('load', function() {
console.log('After load 1');
$('.loader').hide();
$('#intro').css('display','flex').hide().fadeIn(3200);
console.log('After load 2');
includePartials();
slideOutLandingPage();
});
Little crude but works.
$( function() { is document ready event it is triggered after $(window).on('load'.
http://jsbin.com/siduyovaxi/edit?html,js,console,output
Using Jquery 1.7.1
I have two divs
<div class="highlightStart"></div>
{page content here}
<div class="highlightEnd"></div>
Those show up in the page source. But this jquery I added at the bottom of the page is not working:
<script type="text/javascript" id="makeHighlight">
$(document).ready(function () {
$("div.highlightStart").replaceWith("<section class='highlight'>");
$("div.highlightEnd").replaceWith("</section>");
});
</script>
No javascript errors showing in the browser console (Chrome). Just nothing gets replaced.
First i want to site that you're a producing an incorrect structure of DOM. If your script will run it will looks like this:
<div class="highlightStart"><section></div>
{page content here}
<div class="highlightEnd"></section></div>
and this is not a good structure if you want have:
<section>
{page content here}
</section>
Should be something like this:
Your DOM:
<div id="content">
{page content here}
</div>
And in your script:
$(document).ready(function () {
content = $('#content').text();
$('#content').html($('<section>').text(content));
});
Please see myfiddle for reference
The replaceWith method expects entire elements, not tags. You'll need to wrap your page contents with a new element, then remove the two original divs.
Update: This might get you close:
$(document).ready(function () {
$('.highlightStart').nextUntil('.highlightEnd').andSelf()
.wrap('<section class="highlight"></section>');
$('.highlightStart, .hightlightEnd').remove();
});
http://jsfiddle.net/isherwood/H36UE
Something's off a bit with this, but I'm out of time. Good luck.
Based on help from isherwood, used this as the solution:
http://jsfiddle.net/H36UE/1/
With HTML tree like this:
<div><div><div class="highlightStart">highlightStart</div></div></div>
<div>Outside<div>Content to Highlight</div>More</div>
<div>second</div>
<div>third</div>
<div><div><div class="highlightEnd">highlightEnd</div></div></div>
This Javascript:
$(document).ready(function () {
$('.highlightStart').parent().parent().replaceWith("<div class='highlightStart'>");
$('.highlightEnd').parent().parent().replaceWith("<div class='highlightEnd'>");
$('.highlightStart').nextUntil('.highlightEnd').andSelf().wrapAll("<section class='highlight'>");
$('.highlightStart, .highlightEnd').remove();
});
<div class="show_hide panel-header" rel="#panel">
<h4>Disclaimer</h4>
</div>
<div id="panel" class="panel">
<p>Lorem ipsum</p>
</div>
Above is my HTML ... a simple div for the header (event handler) and the hidden div to show/hide. Works perfectly for a simple show/hide, but I may have several panels on screen at once and I don't want to explicitly ID each one and give it it's own function. How can I use the this selector to achieve dynamic interactions?
My JQuery currently:
<script type="text/javascript">
$(document).ready(function(){
$(".panel").hide();
$(".show_hide").show(); //Probably don't need this line...
$('.show_hide').click(function(){
$(this).children("div").slideToggle();
});
});
</script>
Any help is appreciated. I'm new to JS/JQuery and having some trouble understanding the different selectors. Thanks!
Your div isn't a child, it's the next div in line:
$(this).next("div.panel").slideToggle();
you can try this
<script type="text/javascript">
$(document).ready(function(){
$(".panel").hide();
$('.show_hide').click(function(){
$(this).next(".panel").slideToggle();
});
});
</script>
My page is at www.danielcw.info.
At the bottom I am calling:
$(document).ready(function() {
$("#single_1").fancybox({});
});
On:
<div id="single_1">
TESTTESTEST
</div>
Nothing happens. Can anyone please explain where I am going wrong, I see all the JS and CSS loaded and on the page.
Thank you,
Daniel
Typically, Fancybox is initialized on an anchor tag which points to a div element or a link housing the content to be shown on the Fancybox:
HTML:
Click here to launch Fancybox
<div style="display:none">
<div id="single_1">
Content goes here
</div>
</div>
Javascript:
$(function(){
$('a#fancybox').fancybox({
// Fancybox options here
})
.trigger('click'); //Optional - if you wish to trigger the Fancybox after initialization
});
Try using,
$(document).ready(function() {
$("a #single_1").fancybox();
});
<a id="single_1" href="#">
TESTTESTEST
</a>
You've merely instantiated the plugin. You have to trigger it now.
So you can add any DOM element and watch for an event then trigger the plugin.
Click me
The JS
$('fancyme').on("click", function() {
$.fancybox('#single_1');
});
OR
You can trigger on page load
$(function(){
$.fancybox('#single_1');
});
i have a problem with jQuery and jQueryMobile.
I have a site with 2 pages:
<div data-role="page" id="main">
<div data-role="header">
header1
</div>
<div data-role="content">
<a id="1" href="#detail">link</a>
</div>
</div>
<div data-role="page" id="detail">
<div data-role="header">
header2
</div>
<div data-role="content">
<div id="foo">content2</div>
</div>
</div>
when i press the link i save the id with jquery:
$(document).ready(function(){
var test = 0;
$('a').click(
function ()
{
test= $(this).attr('id');
}
);
});
to this point, everything is fine. the problem is, when i want to read out the var test after i clicked the link, it is not saved anymore.
what can i do to prevent this?
i want to make something like this:
$('#foo').html(test);
jQM Docs:
http://jquerymobile.com/demos/1.0.1/docs/api/events.html
Important: Use pageInit(), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as
the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
I would also suggest reading on var Scope and Closures in JavaScript
Related:
Why the variable is out of scope?
Reading from your comment you need to use pageInit. Have you tried
$( '#main' ).live( 'pageinit',function(event){
var test = 0;
$('a').click(
function ()
{
test= $(this).attr('id');
}
);
});
var test = 0;
$('#main').live("pageshow",function(event){ //or pageinit, or pagecreate
$('a').click(
function ()
{
test= $(this).attr('id');
}
);
});