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.
Related
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
I have index.html and guide.html, I link to the guide.html in the index page. however when i go to the guide one through the link the page won't have the design until I refresh. What am I doint wrong? Each page has its own css.
Here's an image right after I click:
And here's another one right after I refresh:
Could be cached css/html. If it looks right after pressing ctrl+F5 on the page in question, it is working correctly.
Web browsers cache CSS files. I see you're using Chrome for Windows - CTRL + F5 will fully refresh the page, CSS and all.
If this problem appears on a live site for some reason, you could re-name your CSS file to avoid the browser using a cached version. For instance custom.css would become custom-2.css.
I have an inline style on element on one of my templates.
- hero_image = article.hero.url(:medium) if article.hero.url
%article{style: "background-image: url('#{hero_image}');background-attachment : fixed;"}
It works marvelously for me. Except when I go to another link and the use the back button to return the page.
When I use the back button to return the page, the inspector the source is the exactly the same, but no image. When I refresh the page, same code, but the image is there. Seriously weird and annoying.
I've seen reports of this being a bug in Chrome related to background-attachment:fixed; but the work arounds they suggest don't work.
Is there a way to force (via Turbolinks?) this element to refresh?
It turns out that the issue is fixed by adding the base url to the url like so:
- hero_image = base_url + article.hero.url(:medium) if article.hero.url
%article{style: "background-image: url('#{hero_image}');background-attachment : fixed;"}
(I added a base_url helper thanks to this: https://stackoverflow.com/a/2952576/1291663)
I've run into the same problem on my app, trying to display user avatars.
There are (many) bug reports related to this particular situation dating back a couple of years, but the bug is still present as of time of this writing.
The solution I've gone with is to replace the background with an actual img tag, and than use z-index tricks to push it back.
I just signed up for captcha. It gave me php code to display the captcha box on the page and code to put on the server. It works fine but the input box is misaligned (it might be based on the rest of the styling of the page.) I want to modify it manually but I can't.
When I do an inspect code in google chrome, it shows me the styling for the input box I needed. I unchecked a particular style
position: absolute!important
and it now looks fine. Now I need to actually modify the code. But it says the location is registration.php:1. Where is this? Registration.php is the file which creates the html code for the page and it does a "require" for a captcha php file. But I don't see the css style in that file either!
See these 2 images to see where the CSS could be coming from:
1- In Chrome console under the elements tab
2- In Chrome console under the resources tab
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.