I am trying to get a jQuery-ui div under the class ui.state.alert to fade into the page as it loads so that users notice it. I have added the fadeTo in a js file but when the page loads, the alert just appears, with no fade effect at all. I have even made sure the 'slow' attribute is added. Here is the html code.
<div class="ui-widget">
<div class='ui-state-error ui-corner-all' id="serviceAlert" style="opacity: .1">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right:
.3em;"></span><strong style="color: #1F1F1F">Alert!</strong> Sign Up Services are
currently under construction. Please check back later for further updates.</p>
</div>
</div>
And here is my jQuery file:
$(document).ready(function() {
$('#serviceAlert').fadeTo(1,'slow');
});
I have added the following scripts to my header:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/JavaScript" src="jquery-ui-1.10.4.custom\js\jquery-ui-1.10.4.custom.js"></script>
<script type="text/JavaScript" src="js/script.js"></script>
The first Parameter of fadeTo is the duration, here you have to define a number in ms oder slow etc. Your animation is currently only running for 1 ms (thats a bit short (-: ).
.fadeTo( duration, opacity [, complete ] )
You've done it the other way around.
Example:
$('#serviceAlert').fadeTo(1000, 1); //fades in 1sec to opacity 1
Related
I am using a multiple page format with a persistent header. I can successfully change page either with a straight hyperlink or using $(':mobile-pagecontainer').pagecontainer('change'
The code works fine but it seems to "load" the page an additional time each time I click on the buttons to change page.
In this code the button changes the page and outputs a console.log message.
On click I would expect the page to change and to see one "#btn - page x" console.log message.
What happens is the page changes and I get a console message for each time I've loaded the page, not just one.
Even though my code is working, this can't be right - this will just go up and up with normal user usage.
What am I not understanding here?
I've created a jsfiddle to show what I mean. For example, if I click the "goto page x" button 6 times (that's 3 times for each page), I get an output of 3 "#btn - page x" messages, not just one.
Same with the header button - each time I change the page, number of responses from the header button goes up.
the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>problem</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
header button
</div>
<div data-role="page" id="page1" data-title="Page 1">
<div data-role="content">
<h1>I am page 1</h1>
goto page2
</div>
</div>
<div data-role="page" id="page2" data-title="Page 2" data-theme="b">
<div data-role="content">
<h1>I am page 2</h1>
goto page1
</div>
</div>
<script src="problem.js"></script>
</body>
</html>
and the js:
$(document).on('pagebeforeshow','#page1',function(){
console.log('#page1 pagebeforeshow');
$('#btntest1').click(function(){
console.log('#btn - page1');
//$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
});
});
$(document).on('pagebeforeshow','#page2',function(){
console.log('#page2 pagebeforeshow');
$('#btntest2').click(function(){
console.log('#btn - page2');
//$(':mobile-pagecontainer').pagecontainer('change', '#page1', { reloadPage: false});
});
});
$(function() {
$("[data-role='header']").toolbar();
});
$(document).on('pagebeforeshow',function(){
console.log('pagebeforeshow');
$('#headerbtn').click(function(){
console.log('headerbtn click');
});
})
UPDATE:
So I've been trying all sorts of things to try to fix this, including removing data-rel="back", trying data-ajax="false" (which defeats the point of what I'm trying to do), changing page with
$(':mobile-pagecontainer').pagecontainer('change', '#page2');
or
$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
but no joy. Obviously, I've tried googling but can't find anything to help.
In the full app code the buttons communicate with a database, so as the clicks increase, I'm sending and retrieving the same data to the db multiple times on each click.
I really would appreciate some guidance if anyone has any ideas what I could do?
The problem is that each time you're entering the page, you are binding a listener on the element again. So you're binding multiple listeners. The listener should not be written inside the pagebeforeshowhandler.
Take it out like this:
$(document).on('pagebeforeshow','#page1',function(){
console.log('#page1 pagebeforeshow');
});
$('#btntest1').click(function(e){
e.preventDefault();
console.log('#btn - page1');
$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
});
And for page 2 likewise.
I am trying to build my first application on windows platform using phone gap. I am able to run my application but I'm not able to see any icon like back button, menu button icon in both emulator and device. How can we get the data-icons in page header.
CSS:
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
HTML:
<div data-role="page" id ="pichartimg">
<div data-theme="a" data-role="header">
<h3>Pie Chart</h3>
Back
</div>
<div id='canvasDivpie' class = "sidebar"></div>
</div>
I'm not able to see the back button in page header. What is the issue and how to get icons.
I have been struggling with this too. My experience ist, that it's important to have the correct order in your Javascript inclusions.
I suggest you to first include your CSS. Then right after in the following order:
jQuery
Jquery Mobile
Cordova
any other Javascript
Done so the below example should display a button in your header with an icon on the right side:
<div id="header" data-role="header" data-position="fixed" data-theme="a">
<h1>Some Headline</h1>
</div>
Hope that helps!
I'm seeking to avoid using this for the splash screen, because it does not work on all devices and for other reasons:
<link rel="apple-touch-startup-image" href="img/splash.png" />
So I'm trying to use this instead and it works fine until it slides into a new page, which is then treated like the splash screen again (e.g. it goes blank when the timer expires - in this case 4 seconds). How can I stop/restrict this behavior, so that changePage remains contained in splash page only?
<body>
<div data-role="page" id="splash">
<div class="splash">
<img src="startup.jpg" alt="startup image" />
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
setTimeout(hideSplash, 4000);
});
function hideSplash() {
$.mobile.changePage("#home", "fade");
}
});//]]>
</script>
</div>
</div>
<div data-role="page" id="home">
<div data-role="header" data-backbtn="false">
<h1></h1>
</div>
<div data-role="content">
</div>
</div>
</body>
Good idea here is what I'm thinking. Use single pages instead of multi page(multiple data-role=page). For index.html or index.php or whatever. Put your splash page. The reason for this I will explain later on.
index.html
<head>
<!-- First include all jquery stuff -->
<script src="app.js"></script><!-- external script because we can just include it in every page -->
</head>
<body>
<div data-role="page" id="splash">
<div class="splash">
<img src="startup.jpg" alt="startup image" />
</div>
</div>
</body>
app.js
$(document).on('pageinit','#splash',function(){ // the .on() method does require jQuery 1.7 + but this will allow you to have the contained code only run when the #splash page is initialized.
setTimeout(function(){
$.mobile.changePage("home.html", "fade");
}, 4000);
});
Ok so I did it this way because lets say you have navigation menu and you want to send people back to home page. You won't have to show the splash page again. You can just link to home.html. Also splitting up your pages helps keep the dom leaner. I hope this helps.
<link rel="apple-touch-startup-image" href="img/splash.png" />
Is indeed only for apple mobile devices.
A real splashscreen should only be there to show you a nice picture while you're waiting. Its goal is not to make you wait for real reason. In your case it's taking 4seconds out of the life of your users just to make it look cool.
I have modified your code and put it in this jsfiddle : you'll see it works now. For the splashscreen to take the full width/height edit the css to remove the margins. I've set the timer to 2s, that's more than enough I think.
I have an asp.net mvc 4 with jquery-mobile app.
On one page (url: /StatementBatch ), I have a list of batches, which are simply links to the batch details page (url: /StetementBatch/Details/4 ).
<li>
<a href="/StatementBatch/Details/4">
<h3>January 2012</h3>
<div style="float: right; width: 30%;"><strong>Issued : </strong>1/10/2012 12:00:00 AM</div>
<div style="float: right; width: 30%;">Completed</div>
<p class="ui-li-aside"><strong>1277</strong></p>
</a>
</li>
The oddity is that once the link is clicked, and the details page renders, the browsers current url is now http://localhost:49457/StatementBatch#/StatementBatch/Details/4
What do I need to change in the app to get this behavior fixed?
My guess is that its some sort of ajax loading related problem, but my shared _Layout.cshtml file contains $.mobile.ajaxEnabled = false;, which I expected would kill all ajax loading, but I've obviously mis-interpreted that one.
Thanks!
I suspect this may be the answer
jQuery Mobile ajaxEnabled doesn't work?
Will test and see if I can make it work
moving the mobileinit binding to after jquery, but before jquery-mobile does the trick. This appears to be a bug in MVC4's (new) mobile web application template, which simply bundles all the scripts together
This fails....
<link href="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
<script src="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
<script>
$(document).bind("mobileinit", function() {
// As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
// when navigating from a mobile to a non-mobile page, or when clicking "back"
// after a form post), hence disabling it.
$.mobile.ajaxEnabled = false;
});
</script>
But this works....
<link href="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script>
$(document).bind("mobileinit", function() {
// As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
// when navigating from a mobile to a non-mobile page, or when clicking "back"
// after a form post), hence disabling it.
$.mobile.ajaxEnabled = false;
});
</script>
<script src="../../Scripts/jquery.mobile-1.1.0.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script src="../../Scripts/modernizr-2.5.3.js" type="text/javascript"></script>
Thanks...
That is the default behaviour if you use jQuery mobile. jQuery mobile will enable all your links to be ajaxified. That means it will load content of the linked page via ajax and update the url. If you want to disable a link to be ajaxified, you can add rel attribute with external as value
This will open without ajax
This will do a normal page opening so your urls will updated based on the new page.
Alternatively you can use data-ajax="false" as well
This link also will open without ajax
this link has more info about it http://jquerymobile.com/test/docs/pages/page-links.html
That is strange. If $.mobile.ajaxEnabled = false; is set then it should not generate ajax links. Please check whether your view is using some other master page which has got this setting enabled. Look for "_ViewStart.cshtml" under the corresponding view directory to see which master it is linked to.
In order to disable Ajax behavior for a particular hyperlink use data-ajax="false" attribute. Like below
<a href="/StatementBatch/Details/4" data-ajax="false">
<h3>January 2012</h3>
<div style="float: right; width: 30%;"><strong>Issued : </strong>1/10/2012 12:00:00 AM</div>
<div style="float: right; width: 30%;">Completed</div>
<p class="ui-li-aside"><strong>1277</strong></p>
</a>
I'm writing a Html 5 application for mobile devices using jQuery mobile (and Phonegap, but the following is device independent), using one html page that contains various <div data-role="page"... > elements as subpages. To change between one subpage and another I use $.mobile.changePage. Everything works well unless I place a div tag into one of the <div data-role="content"> containers!
Working example:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.mobile.changePage($('#page2'), {
transition : 'slideup',
reverse : false,
changeHash : true
});
});
</script>
</head>
<body>
<div data-role="page" id="page1" data-theme="a">
<div data-role="content">
Page1
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="content">
Page2
</div>
</div>
</body>
</html>
Now, after adding something as simple as a closed div tag behind Page1
Page1 -> Page1<div />
$.mobile.changePage still fires - one can see the page2 content for a second - but then shows a blank screen.
This happens in desktop browsers as well as in a smartphone (using Phonegap and adjusting the code).
I really appreciate any kind of idea or hint. Narrowing down this problem and making it reproducible alone cost me hours a valuable livetime because it seemed to unlikely....
Change
Page1<div />
to
Page1</div>
...
Page1<div>test</div>
works too.
Not sure why jqm is having a problem with the trailing / on the empty div.