I have some jquery mobile pages with custom css but it takes only effect when i reload the page and not at first load.
The css file is called in all sites with:
<link rel="stylesheet" href="http://mobile.kerger-mg.de/rezepte-suche/stylesheet/style.css" />
Thanks in advance for any suggestions and your time.
You must load all css the first time, in other words all pages must have the same inclusions,
don't forget that jqm is based on ajax navigation...
try to link the page in question in this way:
<a href="PAGE_WITH_PROBLEM_CSS.html" rel="external">
in this way, the landing page (PAGE_WITH_PROBLEM_CSS.html) is reloaded.
:)
Related
I have this index.html and login.html and I use a href to link from index to login. and in each index.html and login.html I import the javascript. However, it seems that only the ones come from index.html that is being loaded. so if I place the js in index.html for the login.html, it works fine. but then, we I place it separately ( another js for login.html that is not in index.html) , it doesnt work
TIA
When JQM(jQuery mobile) loads a page it uses ajax to accomplish this. When this happens all code in the <head> section is ignored. JQM looks for the data-role="page" part and inserts it into the same dom as index.html. So basically you are doing it the correct way when you add your js in the index.html page.
If you would like to compartmentalize your js code to work for certain pages use this example:
$(document).on('pageinit', '#page1', function(){
// code for #page1
});
$(document).on('pageinit', '#page2', function(){
// code for #page2
});
$(document).on('pageinit', '[data-role=page]', function(){
// this code will execute for every page that is data-role="page"
});
So go ahead and put all your code in one file. Split your code into appropriate pages like above and include that in your index.html file.
Also if you are using JQM version 1.0.1 with jQuery version 1.6.4(recommended with 1.0.1) use .delegate() instead of .on(). i.e.
$(document).delegate('#page1', 'pageinit', function(){ // notice that pageinit and #page1 are switched around for delegate
// code for #page1
}); // interesting to note that if you use delegate in jQuery 1.7.x it actually just calls the .on() method.
Note If you were making a web application instead of a phonegap app you would be smart to put your javascript in that one file and include that in every page. This way if someone is following a link or bookmarked your page they will still get the correct javascript file they need.
Anyways I hope that helps you out. Good luck!
If you are doing a window.location.href then it will load the new HTML(In you case it is login.html) If you are using this approach then you have to reload all you scripts again and hence add these scripts in all your .html pages.
<script src="cordova-1.6.0.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="jquerymobile/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="jquerymobile/jquery.mobile-1.1.0.min.js"></script>
However if you use the approach recommended by #deadlock then you will just need to load the script once. The later approach is the best one.
Please post your code, specifically how the pages link to each other, and the global config settings you set for app, if any. Like much with jQM, there are multiple practices and strategies supported for page arch.
You can also learn by using desktop browser tools and view the "Resources" to see what and when your resources are being loaded.
In my web app, I have a page where I use autocomplete widget from jQuery UI.
I link to jQuery Mobileand jQuery UI CSS from this page.
link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css"
type="text/css" link rel="stylesheet" type="text/css"
href="Styles/ui-lightness/jquery-ui-1.8.16.custom.css"
when I do this, my jQuery Mobile data-icons dont show at all. I just see a black hole in place. The other pages where I refer to only the jQuery Mobile have no issues. they display the data-icons fine.
Any idea as to what I could be doing wrong?
Put the jQuery UI css link BEFORE the jQuery mobile css and should work.
Try linking your Javascripts in the followng order:
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
If this doesn't help, try using the custom selector in your code :jqmData(), as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling $("div[data-role='page']"), you should use $("div:jqmData(role='page')"), which internally maps to $("div[data-"+ $.mobile.ns +"role='page']") without forcing you to concatenate a namespace into your selectors manually specially for your data-icons
jQuery mobile shows the icon through a background-image and position CSS declaration, it's likely you have CSS that is overriding those styles.
To find your issue, use your debugger, Chrome's debugger is especially useful, under Computed Style look for the background-image/position style and the CSS class in conflict. Then you can see which class is winning and the actual value, if you see a black box you may very well just have a bad url to the image - which you can identify here as well by following the image link on the CSS style and seeing if that image really exists.
Also I don't see your < and > brackets around your CSS declaration, correct me if I'm wrong but I think you're supposed to link to each css file with a separate tag:
<link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="Styles/ui-lightness/jquery-ui-1.8.16.custom.css">
I am using JQuery themes in my html. ThemeRoller works correctly and applies right themes. However I want to change the default theme that it sets when Page loads. For example, I want to use the 'Start' theme when html loads. Can anybody please help?
You can use the "loadTheme" option like that:
$("#themeSwitcher").themeswitcher({
"loadTheme": "Start"
});
You need to download the generated CSS and images from the ThemeRoller and reference the CSS in your page.
As SLaks suggests, you need do the following:
Download a new theme (jquery theme downloader)
Unzip the files and put them into your website (south-street theme gets copied to: MyWebproject\Content\themes\south-street)
Make a reference in your html to the css:
<link href="Content/themes/south-street/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
On a particular page, I am using jquery ui tab to tabify my web page. My JavaScripts are placed in external files and loaded at the end of my HTML. On document ready event, the very first thing I do is to call the tabify plugin.
The problem is that the browser has already painted the page at this point, then repaints it once it tabifies the page. So, I get a split-second flickering of the screen. How do I prevent this flickering? I do not want to load JavaScripts in as I am trying to optimize my site per Google PageSpeed/Yahoo YSlow recommendations.
<html>
<body>
....
<script src="tabify.js"></script>
</body>
</html>
tabify.js
$('document').ready(function(){
$("#tabs").tabs();
});
hide the content with css display:none; then use $("#tabs").show().tabs();
I have a webpage with header footer and all. when i print that page , i need to print with custom header and footer and specific page size also.. what all should i take into effect for this..
which one is better. by using php or using jquery plugins. i want more control on page layout
you should use CSS maybe, and a special stylesheet for printable versions :
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
If you have your data using PHP from a DB you can use FPDF