Faulty DOM rendering every refresh - javascript

This is getting kinda weird.
I am designing a website and every time I refresh my site (localhost) in safari, google chrome, the elements move someplace else and when refresh back after a few times, it corrects and after refreshing again, the rendering is faulty again.
Do you guys have any idea?
One thing I notice is that when it renders faulty, the way it display the screen is not instant instead it starts on the upperleft, folding to the lower right like a curtain.
It works good in opera, firefox, IE.
Thanks!
EDIT:
I tried to ask my friend to load it in his computer and it looks like it is doing well on his side. It looks like a problem on my Computer. I'll go try the codes out myself in another computer and re-edit my post when I see the results. Thanks for the help guys!

does any of the html elements don't have a display property or width specified? Post the html markup and css for better understanding your problem.

Related

Owl Carousel displaying different and wrong on refresh

I have an owl.carousel on my website displaying testimonials. I didn't have any issues with this until about a month or two ago. I have no idea what happened that now I have this problem but i'll try to explain as best as I can.
I'm getting two different views of the carousel on the firefox and chrome. On firefox, it looks perfectly fine and displays correctly. On chrome how ever, it seems like after the browser cashes the page, the carousel decides to align all the text to the right (I know this is confusing so ill put picture in so you guys can see). The reason I say after it cashes the page is because, when I load the page with no cashe on chrome, it looks perfectly fine as it does on firefox, but as soon as I go to another page and then come back or refresh the page, the carousel all shifts to the right.
Here is what it looks like on chrome:
https://gyazo.com/2466dc69c470851122693d622975c018 --> Chrome
Here is also a link to the website for who ever that wants to read the code them selves (scroll down the home page and you will see the testimonials section):
http://ecocertificates.com.au
Any help would be greatly appreciated guys!
Thanks in advance :)

Javascript causing inifinite loading on mobile only

I am currently working on a website that is still pretty simple.
You can click on ingredients and it shows you possible meals you could make with the selected ingredients.
While the site is working as intended on PC (tested on two different PCs), the page is loading infinitely on mobile (tested on android: chrome and firefox).
If I exclude my app.js file, the site is loading normally, so I guess the problem is somewhere in there.
The code is rather long (over 250 lines) so I don't know how I should upload it.
I googled my problem but found nothing so far, would be great if anybody could help.
If anyone has the same problem:
I was able to find the problem after some additional debugging.
There was a problem in the calculation of the element's locations in js.
If the width of my parent div falls below a specific value, the script is rounding down to 0 and is trying to divide by 0 in the next line.
I am still confused because usually js is responding with an error to division by 0, but at least it works now..

Javascript carousel not loading properly under some conditions?

So I've been working on a website, and the main focus of the site is a javascript-driven 3D carousel, and I got the code for the carousel from here: https://github.com/kaizouman/3dcarousel
I integrated the code into my site, and only modified the number of carousel items and the size of each item. I left the rest of the code untouched (demo.js and 3dcarousel.js). It works perfectly, but only most of the time. I've noticed that it'll work perfectly in Chrome about 90% of the time, in Safari about 80% of the time, and in Microsoft Edge & IE, it pretty much never works. When it doesn't work, it just loads each image individually. When it happens in Chrome, if I keep refreshing the page, it'll eventually work properly. Also interestingly, when I navigate to another page in Chrome and then hit the back button, the carousel will always fail to load.
Here's what it looks like in Microsoft Edge and also when it fails to load in Chrome:
And here's what it looks like when it loads properly:
I can't for the life of me begin to figure out why this is happening, does anyone have any idea? The website is located at http://lipocircuit.com/new.html.
WOW this was a simple fix, I just commented out the line that includes the prefixfree.min.js script, I guess that's outdated and not needed anymore. I feel dumb but I'll leave this up in case anyone else has this issue.

Firefox and IE continue to load after content has been inserted into a DIV

I have a situation where I'm inserting javascript generated HTML code into a DIV. One would think this would be a no brainer, but for some reason, once the code is in, the status bar and tab loading graphics start up in both browsers and never stop again. The page continually appears to be loading data, but in reality, there's nothing more to load. Any idea why this may be happening? Solutions? I appreciate any help. Thanks!
Install the Firebug plug-in for Firefox. Open it up and got to the NET tab. That will allow you to see your network activity. Something on the server may be stalling. This will help you find it.

Why does this website freeze in IE 7 but not in any other browser?

I built a Parts Catalog for a company recently. It works perfectly in Firefox, Chrome, Safari, etc.
However, in IE 7, every single page works except for the actual parts page itself: http://www.swstruckbodiesandtrailers.com/index.php?pageId=69
It actually locks the entire browser up, and after reviewing the source, I have no idea why.
Does anyone have any insight? It's merely simple HTML, CSS, and a few lines of jQuery--nothing out of the ordinary.
I've never encountered a page that froze the entire browser before.
You need to cut down the site piece by piece and isolate the exact cause of the lock up.
Alright, I isolated the offensive code to this:
<div class='partsLevel1'>
<h3><span class='floatLeft'>Box Parts (0)</h3>
</div>
Clearly this is a simple blunder on my part by forgetting to close the <span> tag. I've quite surprised this actually freezes IE though. That doesn't seem like a very graceful failure on their part.
It looks like when IE gets multiple floated elements that remain unclosed, it just locks up entirely.
And the reason I have a seemingly unnecessary <span> inside of a <h3> element is because when you're logged in, there are a few administrative links that are floated right.
Thanks for your help everyone.
My guess would be that there is an AJAX call that is not getting to the correct ReadyState for some reason.

Categories