Develop Reference

how to check if page is resized or refreshed

window.addEventListener('resize', function() {
document.addEventListener('scroll', function() {
checkScrollHeight();
});
});
function checkScrollHeight() {
let stickyNavbar = document.getElementById('sticky-navbar');
let currentPosition = window.pageYOffset || document.documentElement.scrollTop;
let bannerHeight = document.getElementById('banner-height').offsetHeight || document.getElementById('banner-height').clientHeight;
if(currentPosition > bannerHeight) {
stickyNavbar.style.display = "block";
return;
} else {
stickyNavbar.style.display = "none";
}
}
Currently the function is working when the user resizes the page, but how can I write the code so the function will be called after reloading the page? The navbar should be displayed when it passes the specific height of the banner which will dynamically change based on the screen width.

Just call it. All your JS is executed afresh when the page reloads.
window.addEventListener('resize', checkScrollHeight );
checkScrollHeight();

Use cookies, if you are using only js here.
Like personal lands on page store cookie.
After reloading check the cookie.
https://www.w3schools.com/js/js_cookies.asp
Use this functions for set and get cookies

how to Detect Onclick event on iframe [cross domain ]

I am showing my site inside iframe. I want to detect user Agent,
if user open this iframe on IE then onClick on the iframe user should navigate
to another site or if user browser is chrome or firefox
then he should continue with site inside iframe.
Following is my code:
<iframe id='iframeGoogle' name='a373563b'
src='http://google.com?header=true' width='768' height='1024'>
<script>
$(document).ready(function(){
// $("#iframeGoogle").click(function () {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0) {
window.open="http://example.com";
// site should redirect to another page if user agent is IE
}
else
{
console.log("otherBrowser");
}|
}); //});
</script>
I have some finding on this,
we can't recognize click event on iframe so what should I do now?

I think this will work irrespective of whether the page is on the same domain or not:
var iframeClick = function () {
var isOverIframe = false,
windowLostBlur = function () {
if (isOverIframe === true) {
// DO STUFF
alert('in');
isOverIframe = false;
}
};
$(window).focus();
$('#iframeGoogle').mouseenter(function(){
isOverIframe = true;
console.log(isOverIframe);
});
$('#iframeGoogle').mouseleave(function(){
isOverIframe = false;
console.log(isOverIframe);
});
$(window).blur(function () {
windowLostBlur();
});
};
iframeClick();

onbeforeunload function having serious issue

I am using native.history.js to put a customised URL in the back button.
The script works fine. Now the issue is I want to make a page redirect when the refresh button is clicked; so i modified the script like this:
<script>
var back = 0;
$(window).bind('beforeunload', function () {
if (confirm('Want to continue?')) {
if (back == 1) {
alert('back');
//window.location.href = "<?=$$last_offer?>";
} else {
alert('refresh');
//window.location.href = "<?=$actual_link;?>";
}
} else {
// Do nothing!
}
});
window.onpageshow = function (e) {
if (e.persisted) {
location.reload();
}
};
window.onpopstate = function (event) {
if (document.location.toString().indexOf("redir=1") > 0) {
back = 1;
window.location.href = "<?=$$last_offer?>";
}
};
</script>
Issue is, the beforeunload function seems not working.
What is the problem I can't fin?.
If I am clicking the back button, the page is taking to the desired page, so it works fine.
All I want is that, somehow the page refresh must work as I anticipated.

Try use
$(window).on('beforeunload', function(){
return 'Are you sure you want to leave?';
});
Instead of bind, use on, i dont know what jquery version you use, but i will suggest "on".
Works fine here:
link
on jquery version 2.x(edge)

How to open a web page automatically in full screen mode

How do I open a web page automatically in full screen mode?
I am looking for a solution to open an web page automatically in full screen mode, without expecting user to users press F11 or any other browser-specifc key.
I've searched a lot, but I just could not find a solution.
Is there a script or library or browser specific API available to help me achieve this?

For Chrome via Chrome Fullscreen API
Note that for (Chrome) security reasons it cannot be called or executed automatically, there must be an interaction from the user first. (Such as button click, keydown/keypress etc.)
addEventListener("click", function() {
var
el = document.documentElement
, rfs =
el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
;
rfs.call(el);
});
Javascript Fullscreen API as demo'd by David Walsh that seems to be a cross browser solution
// Find the right method, call on correct element
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// Launch fullscreen for browsers that support it!
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById("videoElement")); // any individual element

Only works in IE:
window.open ("mapage.html","","fullscreen=yes");
window.open('','_parent','');
window.close();

It's better to try to simulate a webbrowser by yourself.You don't have to stick with Chrome or IE or else thing.
If you're using Python,you can try package pyQt4 which helps you to simulate a webbrowser.
By doing this,there will not be any security reasons and you can set the webbrowser to show in full screen mode automatically.

You can go fullscreen automatically by putting this code in:
var elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen() }
demo: https://codepen.io/ConfidentCoding/pen/ewLyPX
note: does not always work for security reasons. but it works for me at least. does not work when inspecting and pasting the code.

view full size page large
(function () {
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
})();
<div class="container">
<section class="main-content">
<center><button id="view-fullscreen">view full size page large</button><center>
<script>(function () {
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
})();</script>
</section>
</div>
for view demo clcik here demo of click to open page in fullscreen

window.onload = function() {
var el = document.documentElement,
rfs = el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen;
rfs.call(el);
};

Problem with function within $(window).resize - using jQuery

I want to use a simple function to hide/show content only on mobile devices.
The function itself is pretty straightforward. I use this code here for that:
$('.toggleMobile').click(function() {
var hideableContent = $(this).parent().find('.hideable');
hideableContent.slideToggle('medium');
});
So... nothing fancy, i know.
It gets more complicated as i try to detect the browser viewport.
I think I took care of that by using the following lines (you probably will find ways to improve it):
function whatMedia() {
var viewport = $(window).width();
var mediaType;
if ( viewport < 767 )
mediaType = 'mobile';
else if ( (viewport >= 767) && (viewport < 991) )
mediaType = 'tablet';
else
mediaType = 'desktop';
return mediaType;
}
Now i just need a function that gets triggered only when the viewport is mobile (maybe the problem is here?):
function toggleMobile(mediaType) {
if ( mediaType === 'mobile' ) {
$('.toggleMobile').click(function() {
var hideableContent = $(this).parent().find('.hideable');
hideableContent.slideToggle('medium');
});
}
}
I have no problem checking for the viewport the first time the page is loaded.
I just use this (very simple bit of code):
// Check media type and activate accordingly
var mT = whatMedia();
toggleMobile(mT);
So far so good. Now comes the fun part:
I want to be able to detect if a user resizes the browser window and activate/deactive the toggleMobile() function accordingly..
I could do this:
$(window).resize(function() {
var mT = whatMedia();
toggleMobile(mT);
}
As you perhaps already know, this $(window).resize thing makes Webkit and other browsers go a bit crazy, and repeat the function as long as the user resizes the window.
This is good or bad depending on your take on it.
I personally don't want this to happen, so i use this function i found on the forums:
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
}
})();
My resize event looks like this:
$(window).resize(function() {
waitForFinalEvent(function() {
var mT = whatMedia();
toggleMobile(mT);
}, 500, '1');
}
This certainly does delay the calculation of the browser window on resize but i can't make the function inside it work.
I don't know what the problem is :(
Th function gets triggered two or more times, and even when the viewport is recognized as desktopor tablet.

In the togglemobile function, you just register the click event but nothing else, if you want to trigger it you could do
$('.toggleMobile').click(function() {
var hideableContent = $(this).parent().find('.hideable');
hideableContent.slideToggle('medium');
}).trigger('click');
this would trigger the click event and run the code, alternatively you could hide the element immediately instead.
EDIT: I'll revise my answer a bit.
First we register the click event for the element that while slideToggle the content:
$('.toggleMobile').click(function() {
if(whatMedia() === "mobile") {
var hideableContent = $(this).parent().find('.hideable');
hideableContent.slideToggle('medium');
}
});
then in the toggleMobile(mt); function we now hide the content if the size goes over to mobile media
function toggleMobile(mediaType) {
if ( mediaType === 'mobile' ) {
var hideableContent = $(".toggleMobile").parent().find('.hideable');
hideableContent.slideToggle('medium');
}
}
this is if i understand, what you want?
I see that this is probably what #sje397 meant.