I'm having a problem with CSS Bootstrap on images that overlap on each others. The problem is also that sometimes it happens, sometimes it doesn't so it's very inconsistent.
I also noticed that if I click on F12 Dev tools, the images automatically get spaced properly.
I tried refreshing the cache pressing CTRL+F5 but the problem remains.
This is the website http://www.sdhealthy.com/productssnacks.html
and this is a sample of images overlapping (picture).
Anybody can please point me to what's wrong on the CSS code??
I've had a look through your code and you are using the isotope jquery plugin to position and animate the divs with 'isotope-item class'.
I suspect that you need to add this part of your jquery...
$(".isotope-w").isotope({
itemSelector: '.item',
layoutMode: 'fitRows'
});
to a $(document).ready function.
This is because the isotope plugin is calculating heights of the divs before the images have finished downloading.
A "workaround" would be to manually add the height attribute to each of the images but I woould try and correct your jquery.
Firebug is also reporting an error:
ReferenceError: $ is not defined: $(document).ready(function () {
http://www.sdhealthy.com/productssnacks.html
Line 29
If your isotope code is already supposed to run on document ready, this error will prevent it from running.
Related
I have installed easylife switcher in magento. Everything is working fine except the image is not showing correctly. It is zoomed image and I am unable to zoom in or zoom out.
I have selected the option of switch all media section as switch main image is not working at all.
Please help!!
I have found the answer by myself after struggling with the code. There is nothing wrong with easylife switcher. The thing is that according to your theme you have to add code. So for generating thumbnails in my theme bxslider was used. So, I just initialized that along with existing code in JS callback.
I often encounter this issue when refreshing and browsing my asp.net website.
(I covered some of the information that was visible in the pictures below.)
Before Refreshing:
After refreshing:
This also happens when I navigate to a new page, but just like I mentioned before, it doesn't happen all the time but it does happen regularly.
I've added some Jquery to try and fix this but the problem remains.
$(window).bind("resize", function () {
$("#content").width($(window).width() - 16);
});
Also tried this code just to make sure the DOM is ready.
$(document).ready(function() {
$(window).bind("resize", function () {
$("#content").width($(window).width() - 16);
});
});
UPDATE:
I've fixed the content div by setting it's max-width to 980 pixels, the navigation menu is still leaving it's intended position. If anyone can provide an answer as to why this happened it would be appreciated, this max-width thing seems like a bit of a lazy hack because although it fixes the div's width it's a solution for a problem which shouldn't be happening in the first place.
These two pictures show the current problem.
Before refreshing:
After refreshing:
I copy / pasted the example from http://getbootstrap.com/components/#navbar into this URL:
http://www.frostjedi.com/terra/scripts/demo/bootstrap-nav.html
...and it's not working as I'd expect.
So if you shrink the browser width past a certain point the horizontal menu gets replaced with a button that, if clicked on, shows a vertical menu. At least that's my understanding of how it's supposed to work. But in the above example that is not how it works. The button appears but nothing happens when I click on it.
Any ideas?
Have a look to the browser console (i.e. Firebug): you'll find there an exception
Error: Bootstrap's JavaScript requires jQuery
I am using jquerymobile 1.4.2.
I tried with all the functions which are specified using jquery(scrollTop).But it snot working in my page.
Is it possible to scroll to a specific position using css when we reload a page or when submit a button.
Your problem is that you have the script at the top of the page. I see you wrapped it in a $(document).ready() but that alone isn't always guaranteed to work, like in your case. $(document).ready fires when the dom is loaded, the dom tells the browser that somewhere in the page there is an image, but the browser won't know the size (in pixels) of that image until it's completely loaded. This causes your issue:
1) dom starts loading
2) dom is done, $(document).ready() fires
3) the script tries to animate the scrollTop but it won't work because the page has not yet reached its complete height (because the images are not loaded), so there is no scrollbar.
4) the images load but the script has already done its job
Solutions:
1) add height and width attributes to your images
2) use $(window).load() instead of $(document).ready()
A hint for the future: if the problem is "sometimes it works, sometimes it doesn't" it's a timing problem 90% (or even more) of the times. So try to figure out what happens and when.
No, there's no way to do that in CSS. Sorry!
Maybe, you should try for this one : jQuery.mobile.silentScroll()
I'm running into something really weird with my HTML/CSS.
When I reload the page sometimes one of my elements ends up positioned where it's supposed to be (centered vertically) and sometimes it ends up out of the viewport (something like 700px above the top of the page).
That the page acts differently on different page loads is only half of the weirdness. If I remove body's height: 100% property and re-add it in the web inspector everything magically fixes itself. (body is this element's direct parent.)
My instinct tells me that the answer to the first part of the weirdness is that there's some race condition going on causing things to happen in a different order randomly. But I'm not sure what that might be or why it's affecting things.
What could cause removing and re-adding an identical CSS attribute from an element to cause the page layout to change?
I can't reproduce in a jsfiddle unfortunately but here's a gif of this in action:
Edit: A new piece of the puzzle. I've discovered that this only happens in Chrome and appears to happen only if the page is loaded with an empty hash on the URL.
http://myurl.com works
http://myurl.com/#foo works
http://myurl.com/# intermittently has issues
There was a workaround to trigger a re-flow posted by #Huangism below but there are some caveats (some complications with timing when exactly to trigger a re-flow and also triggering a re-flow on a working page causes a flash of the content).
I think this is a weird bug with chrome, try this
After the content is shown, using jquery - hide the div that contains that content, check it's height and show it
Assuming $el is your jquery div element
$el.hide().height();
$el.show();
Try it and see if it fixes the issue or not
Try setting the height using js or jquery.
It looks like when you reload the page your CSS attributes are set to your body tag via style="" and then quickly removed. Its likely something in your js
Good grief this is hacky. Would still love an explanation for exactly what's going on and the proper way to deal with it but...
After figuring out that somehow an empty hash being appended to the URL was part of the issue an acceptable workaround seems to be completely removing an empty hash if present by using the html5 history API.
My code looks something like this:
// when the page is ready...
$(function() {
// if the url ends with a "#" (and the browser supports it...)
if(window.location.href && window.location.href.indexOf('#') == window.location.href.length - 1 && window.history) {
// clear the darn empty hash using the html5 history API
window.history.replaceState({}, '', './');
}
});