I'm designing an app using phonegap, and I wanted to use jquery mobile's ThemeRoller for making theme's for the different pages of the app. Anyways, my issue, first of all, is that the theme I create is not showing up on the pages. I removed the original jquery structure .css file and replaces it with the correct structure file, along with my theme .css file. Like this:
<link rel="stylesheet" href="css/themes/TestTheme.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
I tried different things, like adding data-theme="a" into each of the different data-role's, but that didn't make any difference. Another thing that is confusing me however, is that when I download the .zip file, and I open up the index page to make sure the theme is being applied correctly, it doesn't have any kind of jquery structuring to it, it's just a plain white page with black text, with no input slider at all, and the buttons look like I've traveled back in time to Windows 95. Any ideas of what's happening?
Related
The location of the favicon is clicking the share button at right top hand corner in iOS's Chrome. The icon is in the share drawer which I circle it out in the picture below.
When I make it as a dynamic icon base on the url, I leave the href empty at the beginning in index.html and add the path of the icon to the href in js or a script to the href. <link rel="shortcut icon" href="" /> As a result, it doesn't work to make it dynamic. What I guess is seem like chrome only set the icon at the beginning. Because I leave it empty in index.html, there is no icon. The change I add later doesn't have any effect on the icon.
But if I hard code the path in index.html, e.g <link rel="shortcut icon" href="/favicon.ico" />. The icon shows up. However, if I want to change href path to something else by script, it doesn't have any effect as well.
Is there any way that can make this icon dynamic? Thank you.
I am developing a Cordova application which previously used the JQuery mobile 1.4.5 script. A previous problem on Android, where transitioning from a page to another caused unnecessary flickering left me no choice but to remove the call to the JQuery mobile script.
<script src="js/jquery.mobile-1.4.5.js"></script>
Instead I simply left the CSS
<link href="js/jquery.mobile-1.4.5.css" rel="stylesheet" />
and used the JQuery mobile classes to change the styles of inputs, buttons, etc, retaining the previous app style (this was highly important especially considering that the app is almost finished and the design in which jquery mobile was heavily used needed to be retained).
When I did this I found out that on iOS the scrolling was no longer fast and smooth as it was before. I tried to revert to the old method, i.e. having the j-query mobile script and the iOS smooth works normally. This proves that J-Query mobile had some specific script that 'fixes' the iOS scroll. I would like to use just this script to fix the scrolling problems. Apart from this problem, the app works and looks just fine.
Below is the 'template' html of every page. As you can see the jquery-mobile classes that are normally automatically wrapped around the components of the app after the page loads are manually assigned to the specific components.
<html class="ui-mobile js csstransitions">
<head>
</head>
<body class="ui-mobile-viewport ui-overlay-a sidy--panels-closed">
<div class="sidy ui-page ui-page-theme-a ui-page-active">
<nav>Menu</nav>
<nav>Search</nav>
<div class="sidy__content">
<div id="wrapper" class="wrapper">
<div>Fixed header</div>
<div>Container</div>
<div>Fixed Footer</div>
</div>
</div>
</div>
<script></script>
</body>
<html>
I tried to search intensively on stackoverflow and other sources. For e.g. this fix did not work when tried on the tag; as the fixed header and footer move with the scrolling and only restore to their original position when the scrolling operation is finished. When trying to assign the class on the container (where the actual scrolling needs to happen); nothing happens.
cssClass{
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
What would be most useful to me is to know which part of the Jquery mobile script makes the iOS scrolling look smooth and native and act very fast!
Thank you for your help!
Your css'ed div needs for IOS (Safari) to have a non-dynamic size in the scroll direction, i.e. the height in your example.
Add a height element:
cssClass{
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
height: ...px;
}
and it should work.
I had the same problem, and was able to solve it with this added property. I use React.JS so, I could easily get computed the height so that it was correct for different devices, adjusted for headers and footers etc. With Javascript you can do compute it with the variable window.innerHeight (at least for Cordova, I don't know if this is a standard browser variable).
I have a review box on my website that has 10 or more reviews. Since it's all text it's getting crawled and indexed. I'd rather it didn't get crawled and I've placed the google:off and google:on idea that I discovered. However that may only work for a googlebot crawl, if at all. I was thinking if the review box could link to the text in an external htm page, like you can to a css page, then that might prevent it from being crawled and still load into the space accordingly. I don't know, is this possible?? Thanks for any response.
I have found an excellent solution on my own, and would like to share it...
I created an iframe for my review box and styled it for width, height, and border in my css. Within the iframe tag I put src="reviewstext.htm". I then created this htm page and copied and pasted all my reviews. Within the head tag of the page I put...
meta name="robots" content="noindex,nofollow"
link rel="stylesheet" href="styles.css" type="text/css"
Also, for some reason the iframe tag takes on the same background color as the body of your site. In my case it was a blue colour. I wanted my iframe to have a white background instead. The css styling didn't seem to work but styling the body tag in my reviewstext.htm file did the trick... like below.
body style="background-color: transparent;"
So, I now have a reviews box that refers to an external page. Not only does the text on that external page not get crawled, but the text is not on my homepage either for crawlers to see. With this change my keyword ratios are back in line and not obscured by all the review text... :o)
i am trying to override the opacity of ui-disabled in my app to have a not focusable textfield with white text that i can change per js (<disabled="true">).
i don't know if it will work on all browsers with the opacity set to 1
or how to use the suggestion on this page exactly (on mobileinit or as a css-file and how about the semantics):
http://jquerymobile.com/demos/1.2.0/docs/api/themes.html
You can override jQuery Mobile's CSS with your own. Include a stylesheet after jqm's in your html, or use a style=... attribute on your html tag — either will override the default. Hence the Cascading in Cascading Style Sheets.
I highly recommend using the developer tools built into most browsers. In Chrome, for example, right-click anything in a web page and select Inspect Element. It will show you the computed CSS for the element, including which styles came from which CSS file, which were overridden by other stylesheets, etc. You can even edit the styles in the tool and see what changes would look like.
Here you can see the stylesheet f.css overrides several properties from the jqm stylesheet, which sets them in several places and overrides itself with various classes:
I have an issue where due to some elements loading faster than others, the page looks broken for a few seconds at the start. An example is the CSS Pie behavior that allows me to do curved corners in IE, it appears before it becomes curved which looks bad. What would be ideal would be it somehow knowing when everything is loaded and then appear all at once, possibly including some kind of elegant visual way of not making the user feel impatient... any ideas or common tricks for doing this?
You could add a css class to the <body> tag by default and use some javascript to remove that css class once the page is loaded?
<body class="notready" onload="this.className = '';">
</body>
with some css classes defined to hide the things you do not want to show just yet:
body.notready .myclassname { display: none; }