Where do I add this function? - javascript

I think I found the answer I am looking for here:
Refreshing page automatically when viewport size change but I do not know how or where to put this:
window.onresize = function(event)
{
document.location.reload(true);
}
I am trying to accomplish the same thing as the OP where I need to force a refresh on screen rotate.
Any help is appreciated.
EDIT:
The script is not working or so it seems. When I rotate my tablet (android) the responsive images do not resize which they should if the browser is being refreshed. This leads me to believe it is not working.
EDIT 2:
My error, forgot to re-upload the changed file. It has been a long day and I just noticed that Filezilla still had the change file prompt on the screen! This is now working for me.
EDIT 3: NEW PROBLEM
Now that it is working, I noticed that when I scroll the page it forces a refresh again with every movement (scrolling down, not up) even though the viewport has not rotated. Why is this and is there a way to fix it? It appears not to affect my iPhone 4, only my Samsung tablet...
ADDED:
I figured out that it is when the browser tabs move off the viewable area of the page that it forces a refresh on the tablet. Is there a way to change this?
UPDATED:
Appears to be a Chrome issue again.

Doesn't really matter where you put it on the page as long as it's in a <script> tag.
You could put it at the top of your page in the <head> if you want.
<head>
<script language="javascript">
window.onresize = function(event) {
document.location.reload(true);
}
</script>
</head>

Related

Iframe cause document height to be equal to the window/viewport height on IOS devices (chrome & safari)

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";

How to do automatic reload of page when viewed in iPad Portrait mode?

I have a wordpress site and working on the responsiveness of the site currently. The site when viewed in landscape mode looks fine. But when it's orientation is change to portrait mode (vertical) the different widgets on the site break or get cut off to extreme right.
However after a page refresh in portrait (vertical) mode all widgets show up fine and the site in general renders correctly. Seems like the CSS/JS is not loading up or unable to detect the orientation change until a refresh is done.
Can't expect the users to reload to get the proper view in portrait mode. Is there a way to reload all CSS/JS or just do an automatic page refresh on orientation change ?
Came across a thread where some one suggested the following to add to <head> tag
<meta name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
I'm a novice to Wordpress so don't know where and how to add this so that all pages take up this effect. Also not sure if the above would work or is there some thing else I could try.
Any suggestions are welcomed as I have no idea how to sort this problem out.
Many thanks in advance
NOTE: this question is a duplicate. I'm re-posting here the gist of my answer from the main question.
window.addEventListener('orientationchange', function () {
var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display');
document.body.style.display='none';
setTimeout(function () {
document.body.style.display = originalBodyStyle;
}, 10);
});
The code listens to the orientationchange event and forced a re-flow of the body element by hiding it and showing it 10 miliseconds later. It does not depend on any <meta> tags or media queries.
Answers that suggest adding <meta name="viewport" content="width=device-width, initial-scale=1.0"> don't work. Here's a demo. To make sure you see how it doesn't work, start with the iPad in landscape mode, load the page, then rotate. Notice the page doesn't expand to full height, despite using flexbox all the way.
Compare that to this page, where we use the hide/show body technique in production.
Detect and reload:
<script>
window.onorientationchange = function() { location.reload() };
</script>

iPad safari don't show loaded images until slide the screen

i have a problem in iPad Safari. when i use Javascript to append image to div using elm.appendChild(img) the images don't appear until the screen is touched. the same code works perfect on IE,Firefox,Chrome,and android browsers.
i have uploaded video that shows the problem. http://www.youtube.com/watch?v=nBN9fThDik8
is it related to the device ? or there some special code for loading images in iPad safari?
or any solution ?
iPad (more so than iPhone as far as I've experienced, although that's just a gut feeling) is notorious for avoiding loading and rendering large resources unless it decides the user is going to see them.
How about faking the user input required to trigger the render, ie the scroll, after appending the image? Sample code here, may work:
function scroll(){
var body = document.body;
var xy = [body.scrollLeft, body.scrollTop];
window.scrollTo(xy[0],xy[1]+1);
window.scrollTo(xy[0],xy[1]);
};
To be called immediately afterwards, eg:
appendImg();
scroll();

Why wont this js code work in Chrome and Safari?

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.

CSS/javascript hover does not display correctly in chrome

I am building a site that has an image map menu with a popup box that is supposed to pop at the mouse when the mouse is hovering over a particular area. It works great in firefox and IE but when I load the page in chrome the boxes appear as if the page were not scrolled. it works fine if the page is scrolled all the way to the top, but as soon as the user scrolls down, the boxes are to high on the page.
I am using a script i got from http://www.dhtmlgoodies.com/index.html?whichScript=bubble_tooltip www(dot)dramanotebook(dot)com/menu/ (i can only put one hyperlink in)
Thanks in advance for Your help
Thats a bug in this script that also shows up on the example page. Maybe its enough to delete this line:
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
I was about to ask 'have you tried this in Safari?', since Chrome and Safari both use the webkit engine.
Take a look at the .js file.
function showToolTip(e,text){
/* blah blah*/
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; /**** THIS ****/
var leftPos = e.clientX - 100;
/*etc.*/
}
It has a fix applied specifically to Safari, using the userAgent string. Chrome sends 'Safari' in the user agent string, too, so it will apply that to Chrome also. This is generally considered a poor practice. In general, I'd say the scripts from dhtmlgoodies are very outdated. Is this fix still needed for newer webkit renderers? Who knows. You might try commenting it out and seeing if that fixes it.

Categories

Resources