CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
ShahiM
ShahiM

Reputation: 3268

styles from previous file interfering with current page styles when navigating in jQuery mobile

I am building an app using jQuery mobile. I have run into a problem when using href links to navigate.

Suppose I have a bunch of styles for the divs in a page and then i navigate to another page using an href link. if the second page also has a similar structure, the styles from the previous page gets applied to the second page. Here's an example :

this is one of the styles i have defined in my first page :

ul.rig li h3 
{
color: orange;
font-family: tahoma;
font-size: 1.2em;
font-weight: bold;
height: 20%;
left: 10%;
margin: 0;
position: absolute;
text-align: center;
text-shadow: 0.03em 0.03em 0.03em #000;
top: 40%;
width: 80%;
}

and in my second page i have a style with the same name but different attributes :

ul.rig li h3 
{
font-size: 0.9em;
margin: 0 0 5px;
}

now if i navigate from 1st to 2nd page and inspect the style :

ul.rig li h3 
{
color: orange;
font-family: tahoma;
font-size: 1.2em;
font-weight: bold;
height: 20%;
left: 10%;
margin: 0;
position: absolute;
text-align: center;
text-shadow: 0.03em 0.03em 0.03em #000;
top: 40%;
width: 80%;
}
ul.rig li h3 
{
font-size: 0.9em; //this is striked out
margin: 0 0 5px;  //this is striked out
}

As u can see the style of the same name has replaced the style in the second page. I have ensured that the styles are defined inside the body->page and not in head. what am i doing wrong??

Upvotes: 0

Views: 52

Answers (1)

Tasos
Tasos

Reputation: 5361

The styles on page 1 do not go away when you navigate to another page and as you have the same class name for the list the styles on page 1

font-size: 1.2em;
margin: 0;

take presedence over the styles on page 2, hence why you see a strike-though for

font-size: 0.9em; 
margin: 0 0 5px;

what you can do is add !important to the CSS on page 2 like

font-size: 0.9em !important; 
margin: 0 0 5px !important;

However because !important means (i want this style over anything else) when you navigate back to page 1 the 

font-size: 1.2em;
margin: 0;

wont work because of the !important from the styles and so you will see a strike-though for the styles on page 1 now (not 100% sure on this note as i never used external pages on JQM so i cant say for sure if the CSS on page 2 will stay or go away when navigating to back to Page 1 so try it and see. if you see a strike-through for styles on Page 1 after Page 2 then this [!important] is the reason)

So the easiest way to resolve this issue is to have a different class name for your list on page 2 and have separate styles

you could add style="font-size: 0.9em !important;margin: 0 0 5px !important;" to each li element on page 2 directly

However there is a also a Jquery way to maintain the styles on different pages without creating another class (leave the css styles you have on page 1. On page 2 you don't need them with this method)

$( document ).on( "pagebeforeshow", "#page1", function(event) {
$(".rig li h3").css('cssText', 'font-size: 1.2em !important; margin: 0 !important;');
});

$( document ).on( "pagebeforeshow", "#page2", function(event) {
$(".rig li h3").css('cssText', 'font-size:  0.9em !important; margin: 0 0 5px !important');
});

Demo (this method should work on external pages too)

http://jsfiddle.net/oxpc6xwx/

Upvotes: 1

Related Questions