Develop Reference

How to redirect to another page at a breakpoint?

I have to redirect to another webpage at a breakpoint of 800px
I have tried the below code and tried in incorporate at a breakpoint, but it was always redirecting even at the above breakpoints
<meta http-equiv="refresh"
content="2;
url=http://redirectedSite.com/">
needed to make the page to be redirected to another page at a breakpoint using HTMl or JS

You can do this with plain javascript. Add an Event Listener for browser resize and check for browser window width and redirect.
window.addEventListener('resize', screen_resize);
function screen_resize() {
var h = parseInt(window.innerHeight);
var w = parseInt(window.innerWidth);
if(w <= 800) {
window.location.replace("http://redirectedSite.com/");
}
}

Not tested but I think this javascript code should work:
<script type="text/javascript">
if (screen.width > 800) {
window.location.replace("http://redirectedSite.com");
}
</script>
Please note that this redirecting is bad practice.
If this is for getting a different screen layout you should just change your layout using css.
You could use #media (min-width: 800px) { your css } to only effect users using larger devices.

How to include external javascript on mobile devices

I have a javascript ad code that I only want to show on lets say devices 600px and smaller. For bigger screens I have an iframe ad. I've read so much and can't find a similar example.
Here's the javascript I need for smaller screens
<script type="text/javascript">
ad_idzone = "39483984";
ad_width = "300";
ad_height = "100";
</script>
<script type="text/javascript" src="https://ads.exoclick.com/ads.js"></script>
<noscript><img src="https://syndication.exoclick.com/ads-iframe-display.php?idzone=39483984&output=img&type=300x100" width="300" height="100"></noscript>
I've read about all types of ways like this but it's not going to work obviously and I'm not very experienced. Any suggestions?
<script type="text/javascript">
if (screen.width<500){
//if screen width less than 500px it's probably a mobile device
// so do this code...
}
else{
// screen wider than 500 pixels
// then do this code
}
</script>

You can try to append the javascript file for your ad on smaller screens using javascript.
<script>
if (screen.width < 500) {
var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
myScript.setAttribute('src', 'https://ads.exoclick.com/ads.js');
document.getElementsByTagName('head').item(0).appendChild(myScript);
} else {
showMyIframeAd();
}
</script>

Block javascript activation in mobile devices

In this post What is the best way to detect a mobile device in jQuery? I found this code:
function detectmob() {
if(window.innerWidth <= 800 && window.innerHeight <= 600) {
return true;
} else {
return false;
}
}
I have a web site that passes Googles test for "mobile friendly" with out any pop ups for my newsletter / e-courses.
I tried the above script and it will run the scitps, however do to the size of the pop up blocks the form is too large.
I would like to block the script to keep the pop up from displaying, I tried to resize the block but when I do that it become unreadable for a device with a screen size smaller than 400 pixels.
Any help would be greatly appreciated.
CSS:
#mobile-only{
display:none;
}
HTML:
<div id="mobile-only">
<script async type="text/javascript" src="http://forms.aweber.com/form/19/37402019.js"></script>
</div>
The java script is a form that will display after 10 second delay, the form is 800x800 pixels, this is very large for most mobile devices, the reader can not scroll the form to the right to touch the 'x' to close the form.
After testing the CSS and the HTML the script still runs.

Please see the below code and attempt it.
$(document).ready(function(){
var x = $(window).width();
if(x >= 400)
{
$('#mobile-only').append('<script async type="text/javascript" src="http://forms.aweber.com/form/19/37402019.js"></script>');
};
});
Things To Consider
Now if you want to worry about what to do if the user resizes the window on his desktop, you can either handle these events using the following items for help:
onresize
.resize()
Media Queries
I hope this helps!

Using the above code by A.Sharma I modified it like this:
<script>
$(document).ready(function(){
var x = $(window).width();
if(x >= 400)
{
$('#desktop-only').append('async type="text/javascript" src="http://forms.aweber.com/form/19/37402019.js"');
}
)};
</script>
Where '#desktop-only' is the CSS container for any desktop content that either will not fit on a mobile device (tables, large hi res images, etc.) or will fill the screen past the accepable limitations of the device.
This code does not run, however it looks like the best way to block javascript from running.
Any suggesitons for modification to make it run?
Thanks!

reload web page only when size of page change

I have problem with reloading page, iam writing a site using RWD and media queries for desktop and tablet/mobile layout. And i have one page where i use google maps. My client want me to refresh page if he resize window from desktop size to mobile (i tried to tell him this is rather dumb idea but he didnt listen). Desktop displays all map with markers, but for tablets and mobile layout is different, i use accordion/list to display list of countries. when you click on one element form accordion he expands showing info from google maps windowinfobox. and the problem is when i use only media query ofcourse it change layout but all elements on the accordion are expanded, but it must be hide and only if you click then they expand, if i refresh page everyting is ok, problem is with resize page. i tried use window.resize(function(){location reload}); and its work perfectly with resize, but on mobile devices every touch couses relouding. so i want to write a function that reload page only when window size change from xxx to yyy if they cross the border 1024px., because then my accordion will display perfectly.

I am assuming this is what you want.
$(function(){
var width = $(window).width();
var screen = "";
if(width < 1024 && width >640){
screen = "small";
} else if(width>1024) { screen = "big"; }
$(window).resize(function(){
var cur_width = $(window).width();
if(cur_width<1024 && cur_width>640 && screen == "big"){
location.reload();
} else if(cur_width >1024 && screen == "small"){
location.reload();
}
}
}

Detect if mobile - if yes use java01.js , if not mobile use java02.js

Complete beginner (hobbyist) here so this is probably a total noob question.
I have two javascripts. One is for mobile users, other is for desktop users.
Right now I have in my html:
<script type="text/javascript"
src="../java_file.js">
</script>
It works wonderfully but I want to have a different js file run when screen width is less than 480.
I want to do something along these lines:
<script type="text/javascript"
if (screen.width < 480) {
src=".../java_file_mobile.js">
}
else {
src=".../java_file.js">
}
</script>
This is my first time building a site and I'm learning the code as I go. Any assistance would be great. Thanks!

If you only care about the screen width the simplest approach is to use JavaScript offsetWidth.
var w = document.body.offsetWidth;
if ( 480 > w ) {
//append mobile script
} else {
//append desktop script
}
Beaver though, a small offsetWidth could also just mean a narrow browser window on a desktop screen. Or a watch. Or a fridge. You get the idea...