I have a Ruby on Rails web application found here
Github repo here
It adds data dynamically to different columns. Because I want to have the grid layout (Bootstrap) to be responsive even with a same column height, I am using a Javascript approach, which is between script tags right before the end of the body.
$(document).ready(function() {
var heights = $(".prodcol").map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".prodcol").height(maxHeight);
});
This code runs just fine on a development server in Xubuntu, using Chromium or Firefox. When uploading to Heroku and using Windows and Chrome or Firefox, the same height column script sometimes works or sometimes not (by refreshing the page). When not, the columns will have different heights. I've tried changing the script to onload(), load() and probably other listeners, and it doesn't work at all this way.
I find it odd that it only works at times and that it works perfectly with Chromium. Could anybody point out what it is? Thank you for your help, I've been stuck in this for hours and I'm slowly growing desperate.
Edit: For now I decided to use a fixed height and restrict char limits and img size for the column class, as the issue couldn't be solved so far, so the Heroku link will display correctly.
With turbolinks, I found that using $(document).ready can cause issues, instead you could try using:
$(document).on('ready page:load',function(){})
Related
I'm trying to embed a website that I don't have control on inside my website.
The issue as the title mentioned I'm facing an infinite scrolling within the iframe. If I try to open the original website it's working. Does anyone know why this happens?
Check this https://revolution.themepunch.com/le-chef-restaurant-website-wordpress-template/ site to see the expected result.
while if you try to load it in an iframe it won't render correctly.
Code:
<iframe src="https://revolution.themepunch.com/le-chef-restaurant-website-wordpress-template/"></iframe>
Updats:
After debugging that page I found there's a strange behavior, which is the document height is equal to the window/view port height, this is the reason of this issue. What might cause a behaviour like this (document height == window height), I cannot find any part of code that modify the window height using API like resizeto or other stuff.
Notes:
The size of the loaded website is about 20MB.
It opens correctly on Andorid devices.
For Iphone if a scrolling animation forked, then my website crashed completely.
I'm running into the exact same problem. Will post an answer once I figure it out. So far none of the posted solutions I've found have worked (probably because I'm an amateur when it comes to CSS).
EDIT (x-post/repost):
Okay, so the answer that I found is that if you set scrolling=no for your iframe, then the bug will go away. Unfortunately the project I'm working on needs to have a scrolling iframe, so that's sort of a problem for me, but I hope this solution helps!
var iFrame = document.getElementById("iFrame");
iFrame.scrolling = "no";
I'm in charge of a website that is using a jQuery slider called "Accessible News Slider" and can be found # https://github.com/rip747/Yahoo-style-news-slider-for-jQuery. The website is http://thebright.com. When viewing the site on Firefox or IE, the slider works just fine, but when viewing in any webkit browser, the images for each slider load slowly and makes it look like they're falling from the top.
I'm not sure whether this is an actual bug in webkit or if this is something that I am causing by trying to gzip the images so the website will load faster. If anyone else has experienced this problem and knows how to fix it, I'm all ears. I'd also like to know if anyone else has seen this problem, but hasn't been able to fix it.
Thank you.
First : Optimize all the images. As per Google Page Speed (http://thebright.com), you can reduce another 233 KB, which will make your site fast.
Second : The issue that you mentioned - When you check the network tab in Google Chrome, clearly, there is some issue with the Cache Expiry header. Some how it is not setting Expiry header properly. So, every time you go to a page, it is loading the image once again even it was loaded previously. The current value that it is showing is : Expires:access plus 1 month. Seems Apache HTTP Server is not handling this header properly.
I've had this problem for over a month and client isn't paying me until it's fixed.
The website is: http://www.cardwells.co.nz
I'm using WordPress as the CMS with a template and some custom work.
The template comes with a slider background inbuilt which works in all browsers except IE.
I'm also using http://www.smoothdivscroll.com/clickableLogoParade.html for the scroller at the bottom.
Basically I have no clue WHY it's not working in IE - everything seems like it should be working. I've run the site through w3 checker and used that IE specific CSS files - but no dice.
Please help.
There was no real solution - really =\ I disabled, removed, reuploaded and reenabled the template. Either a file was a miss or a DB connection error somewhere along the line. So stupid.
I have an iframe on my index.html and this iframe is dynamic.
on my index.html I have a form, which when submitted, shows the results inside the iframe.
The problem is the Iframes height also has to be dynamic for the website to look "clean".
So in the Iframes php page, I have this code:
<body onload="parent.resize_iframe(document.body.scrollHeight)">
And in the index.html (which is the parent in this case) I have this function:
function resize_iframe(new_height){
byId('iframe001').style.height=parseInt(new_height) + 20 + 'px';
}
The problem here is not the function, but that Safari and Chrome thinks the scrollHeight is something alot bigger than it is.
I have tried alerting the scrollHeight, and the nr is always around 2000px in Chrome and Safari, but in other browsers it is dynamic as it should be (500, 300, 800 etc)...
Any ideas?
UPDATE:
I noticed when I click a link on the index, and then click the browser back button, the iframe DOES resize correctly in SAFARI and CHROME.
But I must click back in the browser for it to work...
SEE THIS QUESTION FOR FURTHER INFORMATION: Can't figure out why Chrome/Safari can't get the ScrollHeight right here
I am not sure but however I want to say what I want say. Safari and Chrome both webkit based browsers so its normal to behaviour like that. So I guess that they calculating the height adding padding and margin to normal height. please google it "webkit calculated style"
Sometimes javascript does not work as expected when the page has validation errors.
First try validating your markup (HTML).
If validating does not work, try using jQuery.
jQuery is cross-browser compatible; you should get the exact same result on every browser.
I have some strange behavior going on with safari, im using the jQuery.GridLayout plugin and css for styling.
Just for some context, this website layout is a simple header followed by the content which are a collection of blocks (each block is a div) positioned by the javascript and rearranged every time the window is re-sized.
When I direct safari to the website url all the blocks overlap to some degree (like 50%) but as I re-size the window if they have to move, automatically all goes to the correct place and only breaks if I refresh the page.
So it seems that loading the page is messing it up either because something fails to register or because something does not happen until I re-size the window.
As anyone experienced such behavior within safari?
It works perfectly in firefox and opera, its an valid html 4.01 transitional page and the css is also validated (wc3 wise that is).
I know that publishing the code is invaluable to sort this kind of issues but this is a production project and I'm obliged not to it.
Either way I appreciate any advice on were to start looking?
How do one goes about debugging this issues in safari?
Thank you.
Safari fires DomReady before linked resources are loaded. This race condition regarding calculating sizes of elements defined in CSS can usually be avoided by loading your CSS resources before any JavaScript (eg: make sure the tags appear in the before ANY tags (which are blocking, but give a change for CSS to load asynchronously). Worse case scenario, move your blocks to the last element in , leaving your tags above.
CSS concatenation of multiple files (if you have them) is also recommended.
If you aren't able to post the actual code of the page for us, you might find your solution while trying to reproduce the problem without your specific content. In the past, I've solved some of my own problems while trying to generate a page that shows the problem to post on IRC / SO. If you are able to reproduce the problem without your content, post it for the community, and an answer will be much easier to find.
My shot-in-the-dark guesses lead towards:
You may find that one of your content blocks is causing the issue.
You may find that a different library you are using is causing the issue.
Some javascript code for your layout may be running before everything is ready / filled in. From my memory, Safari is quick to display pages before images are loaded for instance.
Perhaps you need to specify the an exact width/height of some of your Grid Containers.
Small update:
(new update at bottom)
http://www.howtocreate.co.uk/safaribenchmarks.html
And also something that is working is this small script:
<script language="JavaScript">
// CREDITS:
// Automatic Page Refresher by Peter Gehrig and Urs Dudli www.24fun.com
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http:
//www.hypergurl.com
// Configure refresh interval (in seconds)
var refreshinterval=20
// Shall the coundown be displayed inside your status bar? Say "yes" or "no" below:
var displaycountdown="yes"
// Do not edit the code below
var starttime
var nowtime
var reloadseconds=0
var secondssinceloaded=0
function starttime() { starttime=new Date() starttime=starttime.getTime() countdown()
} function countdown() { nowtime= new Date() nowtime=nowtime.getTime() secondssinceloaded=(nowtime-starttime)/1000
reloadseconds=Math.round(refreshinterval-secondssinceloaded) if (refreshinterval>=secondssinceloaded)
{ var timer=setTimeout("countdown()",1000) if (displaycountdown=="yes")
{ window.status="Page refreshing in "+reloadseconds+ " seconds"
} } else { clearTimeout(timer) window.location.reload(true) } } window.onload=starttime
</script>
I find it odd that a refreshing script solves the issue in safari, but if i manually refresh the page the page havoc ensues...
########UPDATE##########
Well I finally got some more time to work on this and after doing some reading a rather obvious thing came to my mind, let the content load and then format it, so for now all of my js sits between </body> and </html>.
Its not perfect since now you can catch a glimpse of the content without being properly placed when the page first loads.
Maybe ill try calling the js a second time after a few ms have passed of loading.
I know this was proposed a bit upper the thread I just needed time to get my hands dirty thanks all, Ill keep updating till I get it solved in a more proper fashion :)