I have a site that has multiple pages. The first page is just a listview with icons and links to the other pages. CSS stylesheets work fine on the first page, but when I go to one of the linked pages, my custom css stylesheet (and js for that matter), related to that page, is being ignored. If I look in the FF inspector I see that it has dropped the associated lines that tell it about my stylesheet. If I directly go to the desired page or if I hit refresh, the styles look fine, but whenever I come from a link off the first page, the styles are gone. I see no errors when loading the page. Is this a know issue? How can I force it to not ignore my stylesheets.
I am using jquery mobile 1.4.5 in addition to my own.
Looking further. It looks like hitting the link is appending the body of the 2nd page at the end of the first and not simply loading the 2nd page.
It turns out that by default links behave a little different than normal when using jQuery Mobile. The don't do a full page load, but instead only inject the part contained in a div marked with data-role="page". I did not know this.
http://demos.jquerymobile.com/1.1.1/docs/pages/page-links.html
Related
I'm using Lightbox for the first time, and it's working for my images. However, for some reason, I get a strange box at the end of my page that shows the loading icon, even though there shouldn't be an image there.
The image: http://i.imgur.com/ACImB.png
Upon inspecting the element, I get the following HTML code.
<div id="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image"><div class="lb-nav"><a class="lb-prev"></a><a class="lb-next"></a></div><div class="lb-loader"><a class="lb-cancel"><img src="/z/styles/images/loading.gif"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"><img src="/z/styles/images/close.png"></a></div></div></div></div>
The strange part about this code is that I didn't make that div, it seems to have just been inserted by the script. Does anyone know what this might be and how to get rid of it?
This could easily be a problem with your css or script path.
If you look at the lightbox2 demo it displays that loading page you see and then removes it to display the loaded image. When either the javascript or stylesheets are not correctly linked it will not work properly.
Lightbox2 site: http://lokeshdhakar.com/projects/lightbox2/
You can try using (in chrome, for firefox there's firebug) right-click inspect element, go to the resources tab and expand the frames boxes until you see all the images, scripts and style sheets in a list. It'll let you know if one of them can't be found.
I had the same issue when I integrated Lightbox with an MVC site. The issue was I had referred both lightbox.js and lightbox.min.js files. I fixed the issue by removing one reference.
I got a problem with my css cache,I got a page which loads transcations of that particular user.I used jquery table sorter to sort the table which inplace creates a arrow icons on the end of .It works fine for most of the time but some times the arrows doesnt show up.i need to do a manual CSS clear cache ctrl+r or cntrl+F5 to get the icons back.Is there any alternative to clear the css cache on succesfull page load.so that we do not need to manually refresh the page to get the icons.It happens both on IE and mozilla.
I just started using this bookmarklet to refresh CSS while I was working on a page that responded wonky to page reloads. If you take that logic, you can call it on page load and it should update your style sheets.
I am using an iframe and i have a tinymce UI button. When the button gets pushed i remove a stylesheet from the iframes head (and i add another stylesheet). This works.
On second button push i remove the formerly added stylesheet. This works.
But when i want to insert the stylesheet which i removed on first button push it does not work.
It looks like i am only allowed to insert a stylesheet which has never been loaded in the iframes head.
Does anyone know why that is?
Is there a workaround for this?
I had to change the function used to replace the stylesheet.
Formerly, i used
ed.dom.loadCSS( ed.settings.content_css );
to insert a stylesheet into the editor iframe head.
Main developer of moyxiecode spocke confirmed that loadCss only loads a stylesheet once (it several times in the past)
Using this jQuery code instead of the above code works like a charm:
$('#'+ed.id+'_ifr').contents().find('head').append('<link href="'+ed.settings.content_css+'" rel="stylesheet">');
I am making a sub site, I would like a new CSS sheet thats cut down to just what that page needs.
What I would ideally like is a firefox extension that shows the CSS used on a currently viewed page, but not the CSS unused on that page.
Is this possible?
What I would ideally like is a firefox
extension that shows the CSS used on a
currently viewed page, but not the
CSS unused on that page.
To see unused CSS, you can use the Dust Me Selectors addon of firefox.
It extracts all the selectors from all
the stylesheets on the page you're
viewing, then analyzes that page to
see which of those selectors are not
used. The data is then stored so that
when testing subsequent pages,
selectors can be crossed off the list
as they're encountered.
You can test pages individually, or
spider an entire site, and you'll end
up with a profile of which selectors
are not used anywhere.
Due to network or some other reasons, some sites do not have their css files loaded and you will see unformatted/un-layout-ed ugly page.
It happened to pages I did before also. Kind of beyond control from a developer/design point of view.
I'm thinking of something like this place at the top of the page and obvious:
/*.... header and stuff */
<body>
<h2 id="hiddennote">If you do not see this page properly, please refresh</h2>
/*.... rest of the page .... */
The external stylesheet have a definition like this:
/* other styles defined */
#hiddennote {display: none;}
Functionally I know it'll work. Any drawbacks?
Another potential drawback is that it depends on the user knowing what the page is supposed to look like. You could fix that by changing the language of the message to something like, "This page is not displaying properly! While you are free to use the content below, you may want to refresh your browser to try loading the layout and styling information." You could also include a screenshot, assuming your images are not hosted on the same troublesome network.
The obvious drawback is if the page fails to load the CSS the second time.