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?
Related
My purpose is to achieve something like what you can do with CSS links, when you add media attribute and you can disable those CSS for a resolution of less than n pixels and still load them and use them.
What I'm trying to do is adapt a Joomla website into a mobile one using jQuery and Bootstrap, but some plugins call their own scripts and CSS files when they are inserted, and I can't change this behaviour, nor delete the scripts because client doesn´t want desktop layout to change. So for CSS i did this:
$(document).ready(function({
$('body').find('link').attr('media', 'screen and (min-width:969px)');
}));
This actually works perfect for CSS because it still loads, but doesn´t interfere with mobile layout that calls Bootstrap. So what comes next its try to do the same for scripts, I have tried this
$(document).ready(function({
$('body').find('script').each(function(){
var screen = parseInt($(window).width());
if(screen>==969){
$(this).removeAttr('src');
}
});
}));
But it's not working, and this solution won't work either if screen size change, so am I missing something, or what could be the best approach? My intention is to target the body since here is where this inserted tags could appear. If I remove all script tags content for dekstop would not display properly. Is there something as the media attribute for script tags?
For the javascript you can use the mq function of Modernizr, this allows for you to programmatically check if the current browser window state matches a media query.
First you have to load modernizr.js
For example:
small = Modernizr.mq('only all and (max-width: 1200px)');
...
if(small){
...
}
-Test link for the problematic webpage-
This webpage is a landing page to a parent website. There are several javascripts that are required to run. Unfortunately, not all work simultaneously. I have tried various combinations but cannot find a way to make the webpage work.
The functions taking place in the webpage are:
Revolutionary Slider
Multiplication calculator
tabs toggler
smooth scroll-to-section menu
back-to-top button
Fancybox (lightbox)
Please help . Thankyou
Errors generated by your page
indicate that jQuery library is not the first script you are loading.
Looking into source show that you are loading jQuery in line 75.
Move this line to very top of your page.
I think this is your primary problem. Your scripts may not necessarily require different jQuery versions.
I have done a bit of a web development faux pas by not starting with a functioning page and then building js functionality on top. The site I am redeveloping is an old site which has lots of pretty jquery animations.
I have gone to great trouble to ensure all page loads can be handled with or without ajax but I have just realised this is entirely pointless since the initial page load produces several elements which load with properties of display:none; or opacity:0; and are animated to be visible on doc ready
I would very much like to rectify this but there are several reasons I did it in the first place:
1: to hide a flash of unstyled menu before a jquery plugin kicks in. (I will replace this with a non js menu and animate into the jquery menu to solve this)
2: The other reason is that I like the initial animation on page load and would ideally like to keep it. But this presents a problem since I would like to have the bulk of the page invisible for js users and visible for non js users on load but how can I ensure that my elements css properties are changed BEFORE the page is rendered - I have tried doing this with jquery but by the time the jquery library has loaded (without caching) my page has already rendered so the content is flashed up before being hidden and animated back in?
This block will be visible only for users with JS turned off.
<noscript>html code here</noscript>
You can add some styles like this:
<noscript>
<style>
#content{
background: red;
}
</style>
</noscript>
You can add the following in your <head>:
<script>document.documentElement.className+='js'</script>
Then you can style javascript-enabled browsers differently using the js class on the html element, f.ex:
html .animate{opacity:1} /* all browsers */
html.js .animate{opacity:0} /* js-enabled browsers */
The class is added already in the head, so there is no flicker in the rest of the DOM.
You can also use the noscript tag, but personally I think this is cleaner because you can administrate the styles in a single stylesheet.
given up tearing my hair out, can anyone help?
I'm trying to get the active page to apply a separate style, in the example same as when you click on test1 ie have the dark background hen on the homepage or about us.
http://www.tait-design.com/devsites/test-nav/index.asp
the main pages don't go anywhere ie test1 but the page test1-1 and test2-1 do as examples
I think the issue will lie in the js
http://www.tait-design.com/devsites/test-nav/js/accordion.js
and maybe the css (can't put the full url in)
/css/black.css
I've made a couple of the classes different colors on the text to help identify
I've picked up someone else's work I suspect it's a template site, which has been altered, the left nav wasn't done as an include so each page had a seperate markup to make the active page ...look active. I've changed this to asp just for the includes to work off my site, it will be php though.
This can be done purely in CSS, no Javascript is required.
First, give unique classes to each of the body tags on your pages.
For instance, on the home page it would be something like <body
class="home">.
Then give the anchor tag of the matching link the same class (ie, - see that I've added a
second class to the link).
Now you can specifically style that link in CSS when it's the active
page:
body.home #menu-1 a.home {
// whatever styling you like
}
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/