I'm using jQuery Mobile on a responsive site mainly for a pop up menu. I've noticed that with this library you automatically get stuff like animations throughout the site.
The disadvantage is that I have special styles for different pages. Say I type in a link to go to the "bio" page, everything loads fine and the same is true for the "roster" and "about" pages. However, when I try to go to another of the pages (say from "bio" to "about" by using the site's menu) the current page retains the styles from the previous page and just swaps out the html content.
How do I keep using jQuery mobile but have each page load styles as intended and (if possible) keep the transitions?
Here are links to the actual pages so you can understand what I'm saying;
http://ramiroproductions.businesscatalyst.com/roster.html - Roster
http://ramiroproductions.businesscatalyst.com/aboutus.html - About
http://ramiroproductions.businesscatalyst.com/biography.html - Bio
You can try refreshing them to understand how they're supposed to look.
Make sure your user-written styles are included after the jquery mobile css to follow rules of cascading and specificity of style declarations. So try first to put the link to your stylesheet AFTER the jquery mobile css stylesheet. If that alone doesn't work, use the browser inspector to check which styles are overriding, and write those styles exactly in that format into your stylesheet.
I've discovered this is because jQuery mobile handles links through ajax. Disabling it solves this issue but you loose the page transitions.
Refer to this question for more info:
How To Disable Ajax In jQuery Mobile Before Page Load?
Is there a way to change a website's actual media queries through javascript ?
I'm developping an app contained in an iframe on my client's websites who recalculate body's width to place a panel in the right side. When the browser is resized, the client's media queries are called and act without taking my iframe into consideration resulting in a messed up layout.
Do you see a way for me to change the clients media queries with javascript so that I can keep the layout clean ?
Thanks for your help !
In this question there's an example of how load css files dynamicly with javascript. You could combine this with removing the original stylesheet via jquery, like:
$("link[rel='stylesheet']").remove()
and reload the same css file but with another media (your new media query).
I found the answer here : https://stackoverflow.com/a/19593526/1324357 We can go to css with document.styleSheets.
I need to measure the navigation of my site to determine the space available for a feature I am building. I recently added a custom font...
The trouble is that I measure the navigation before the new font is loaded. The new font then loads altering the width of the navigation. I am then left with an incorrect width.
Is there a way I can determine when the font has loaded with JavaScript. I am using CSS to load the font.
I assume you are waiting on $(document).load before running your jquery? This just waits for the DOM to become accessible. If you want to wait until the entire webpage (and associated files) are ready, use $(window).load:
$(window).bind("load", function() {
//nav resize code here
});
I wouldn't wrap your entire code in this, just the part that is dependent on the fonts.
I am using the Google Webfont Loader to get my webfonts loaded with a callback and it is working fine.
Although, when a couple of components: Google +1 button, Twitter Search Widget and the Add This button is loaded, they add a new stylesheet to the DOM and makes the browser render the site again. This is causing the font-face to disappear and then show for each new stylesheet added to the dom.
I could hide the font entirely until the components are loaded but they tend to be pretty slow so that would leave me with a pretty bad user experience. About 1 sec of a headline-less site.
Andy tips on how to force font-face to not redraw or how to block dynamically loaded CSS from within Google, Twitter and FBs embed scripts?
Update: Demo here http://kristoferforsell.com/dev/fontexample/
This is currently an inherent issue with browsers and the #font-face property. The blink occurs when the font is loaded and the page updates to reflect the font. If you wish to remove the "blink" entirely, the only sure fire way is to include the font as a data URI in the style sheet. Of course, using the standard "safe" fonts will also remove the blink.
Data URIs allow you to actually embed the code for the font in the stylesheet so there's no blink when the page refreshes to show the desired font. Using data URIs, will obviously increase the file size (kb) of any style sheet.
An online converter to get base64 code can be found here
Usage for #font-face would be like so.....
#font-face {
font-family: "My Font";
src: url("data:font/opentype;base64,[ the base64 code here ]");
}
Not sure if it would fix your issue but you could use css to set the visibility of the elements to hidden until the font is loaded. Google's API provides wf-loading and wf-active classes which are added to the body to address this issue.
I always set up a separate stylesheet just for the #font-face rule, and within that put in the following rules, where replace is the class of the element that's being replaced, for you that would just be the p tag.
.wf-loading .replace { visibility: hidden;}
Yours would be
.wf-loading p { visibility: hidden;}
Then as soon as the webfont is loaded, JS puts the wf-active class on the body, and your text shows up. Let me know how that goes and if you have any issues then just drop me a line. It might also be worth doing some searching for "flash of unstyled content" or "flash of unstyled text" as this is a well known and well documented bug.
I can suggest a simple and dirty trick I have used myself to solve issues like this. If you implement this, from the user's side the effect will be that the entire page will load at once (with the correct Web Fonts), but after a delay. Once loaded, nothing will flicker or change.
Wrap your entire page contents in a div and set its visibility to hidden. Then use js to turn on the visibility once the whole page (stylesheets and all) is loaded.
Here's the code:
<head>
<script>
function show()
{document.getElementById('wrapper').style.visibility='visible';}
</script>
</head>
<body onload="show()">
<div id="wrapper">
...your entire page contents...
</div>
</body>
The onload ensures that the visibility is switched on only after the entire body has loaded. Although I haven't used Web Fonts, I use this trick to fade in the entire contents of this website with no changing or updating afterwards. But yes, there will be a delay before the entire page comes into view.
EDIT: I added Google Web Fonts to the site I linked. Still works fine. No font-face flickering.
This is a shot in the dark, as I've not tested it:
Could you create another html page with only those social networking buttons, and then load that into an iframe? Then only set the src to the iframe once the document is fully loaded, so it doesn't hold anything up.
In html:
<iframe id="socialMedia"></iframe>
In script:
$(document).ready(function() {
$('#socialMedia').src = "http://mysite.com/mysocialmediastrip.html";
});
Where mysocialmediastrip.html contains all the social media buttons. Setting the src will cause that iframe to reload and pull in that content, but IIRC, the rest of the page will be left alone -- all of the button rendering will have been done in mysocialmediastrip.html, not in your main page.
I totally understand what you are saying about the delay process, waiting while window loads before you actually show your goods. Abhranil provided a good solution but you can take his solution further. You can use jQuery's ajax to load your specific page content that's using the special font type. Why? because ajax comes with a special function called beforeSend(). Within the beforeSend function(), you can load a very cool gift animation that will display on your screen, before your main content is ready to viewed.
Use that moment to show some creativity towards your audience, before the main event!
The best and most simple answer is adding font-display: block when specifying a font face
#font-face {
font-display: block; /* Fix flickering */
}
You should also preload the font in the html file
<head>
<link rel="preload" as="font" href="/path_to_your_font.ttf">
<-- repeat for all typeface -->
</head>
I have written a Firefox extension which alters the look and feel of Facebook. For this I used JS code to inject CSS styles to override FB defined values. But for some url patterns I don't want to force my styles. The issue here is the FB doesn't seem to load the full page but parts of page (but somehow the url in address changes).
This means when the new page loads my old styles will still remain applied and I want to restore them to their original values. How should I do that?
You should inject all your custom CSS styles into one <style> element, and then remove this <style> element (using JavaScript) when a new page is loaded on which you don't want your custom CSS.
Here's an example using jQuery: http://jsfiddle.net/thirtydot/BAPZF/