What I'm looking for is quite simply, a way to automatically redirect the user to a different URL when the screen or window width is less then 950px.
I don't want to use "refresh" as it's not recommended, and I don't do want to use "User Agent" either as it seams to me less reliable in the long term and I don't want to be concerned with updating this.
This is the Script I see suggested everywhere for this purpose but for some reason it doesn't do anything:
<script type="text/javascript">
<!--
if (screen.width <= 950) {
window.location = "https://www.google.com/";
}
//-->
</script>
I've also tried it with all this variants with no success:
window.location
document.location
window.location.href
document.location.href
I've also tried placing it as the first thing after Head tag and even before Doctype. Nothing happens...
I'm answering my own question as I have recently found a more satisfying solution then the one provided by #Finduilas.
This solution not only redirects you in normal circumstances, it will also redirect you back and forth as you resize your window.
Even better! It will redirect you back and forth in mobile devices as you switch from landscape to portrait and vice-versa.
<script type="text/javascript">
$(window).on('load resize',function(){
if($(window).width() < 950){
window.location = "https://www.google.com"
}
});
</script>
If you have to use Javascript, try the following:
<script type="text/javascript">
function redirect() {
if (screen.width <= 950) {
window.location = "https://www.google.com/";
}
and in your body add :
<body onload="setTimeout('redirect()', 300)">
This will redirect the user after 300 ms when the page is loaded, this way you are making sure that the width of the screen is available.
You can better use JQUERY for this...
// Returns width of browser viewport
$( window ).width();
See: http://api.jquery.com/width/
Example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
if($(window).width() <= 950) {
window.location = "https://www.google.com/";
}
});
</script>
</head>
<body>
<p>Website</p>
</body>
</html>
<script type="text/javascript">
<!--
if (screen.width <= 950) {
window.location = "https://www.google.com/";
}
//-->
</script>
<!-- you forgot to add window.location.replace("https://www.google.com/"); and yours is a little wrong-->
<script type="text/javascript">
<!--
if (screen.width <= 950) {
window.location.replace("https://www.google.com/");
}
//-->
</script>
None of these scripts work. I have tried them all.
USE THIS ON TOP OF THE HEAD TAG
<script >
window.addEventListener('resize', function() {
if (window.innerWidth <= "Your desired screen width") {
window.location.href = "redirect loacation";
}
});
</script>
</head>
<body >
Related
I have 2 jquery scripts, but they aren't cooperating, and i dont know why.
My first script "scrolltop.js:
$(function() {
$("a").click(function(){
alert("test");
var target = $(this).attr('href');
var strip = target.slice(1);
if(this.hash && strip=="wall_menu"){
$("html, body").animate({
scrollTop: $("#wall_menu").offset().top
}, 1200);
return false;
}
}); });
It works fine... but stops while i add this script "changecolor.js":
$(document).ready(function() {
var $changeBtn1 = $("#content_0 div.button1");
var strNewString = $('body').html().replace(/\is/g,'<spon>is</spon>');
$('body').html(strNewString);
$(".button1").click(function(){
$('spon').css("color", "red");
setTimeout(function(){
$('spon').css("color", "");
},3000);
}); });
When i add both scripts, works only "changecolor.js", even alert "test" from first script doesnt work :(
This is my head from .html file:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type='text/javascript' src="scripts/scrolltop.js"></script>
<script type='text/javascript' src="scripts/changecolor.js"></script>
My web browser console, does not say where the problem is.
This is probably because you're replacing the whole body ($('body').html(strNewString);) in changecolor.js, and therefore the events registered (click()) will no longer be bound to a DOM element.
I have code:
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".koncecki-web-design").addClass("konecki-scroll");
$(".top-nav").addClass("show");
$("#work").addClass("work-margin");
} else {
$(".koncecki-web-design").removeClass("konecki-scroll");
$(".top-nav").removeClass("show");
$("#work").removeClass("work-margin");
}
if (scroll >= 200) {
$(".top-text").addClass("top-text-scroll");
} else {
$(".top-text").removeClass("top-text-scroll");
}
});
I have this in my index file but i want to have in control.js
<script type="text/javascript" src="js/control.js"></script>
When i paste this code to control.js script does not work.
What could be wrong?
Thanks!
Silon
Be sure to have jQuery included before control.js. So
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/control.js"></script>
instead of
<script type="text/javascript" src="js/control.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
You need to:
Check if you including control.js before jquery.js then it would not work move your jquery file to top.
DOM is not ready to be worked on so move all your code to $(document).ready()
Or include your control.js just before closing body tag, it will take care of above two points.
i got the correct codes which could solved my problem, in previously posted questions : How do I get an image to fade in and out on a scroll using jQuery?
var divs = $('.banner');
$(window).scroll(function(){
if($(window).scrollTop()<10){
divs.stop(true, true).fadeIn(5000);
} else {
divs.stop(true, true).fadeOut(5000);}
});
now I can't understand how to implement this code in blogger.
First include the jQuery in your <head> if you don't have it (this is compulsory, else you won't be able to use any jQuery code).
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' type='text/javascript'></script>
Then paste this code in your <body> between the <script> tag
<script type="text/javascript">
var divs = $('.banner');
$(window).scroll(function(){
if($(window).scrollTop()<10){
divs.stop(true, true).fadeIn(5000);
} else {
divs.stop(true, true).fadeOut(5000);}
});
</script>
I am trying to get an alert to show if a user scrolls within 100 pixels of the bottom of the page. I'm getting /friends to load into div class = social, but I am having trouble with the scroll part. Any advice on what I can fix?
<!--Load friends module -->
<script>
$(document).ready(function (){
$('.social').load("/friends");
});
</script>
<!--Load more videos if scroll within 100 pixels of bottom -->
<script type="text/javascript">
counter = 2;
$(document).ready(function (){
function loadMore() {
console.log("More loaded");
alert("test");
$('.more_videos').load("/more_videos/"+counter);
$(window).bind('scroll', bindScroll);
}
function bindScroll(){
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(window).unbind('scroll');
loadMore();
}
}
$(window).scroll(bindScroll);
});
counter = counter+1;
</script>
There is an invisible character after this line
$(window).scroll(bindScroll);
You can see it here. It is the little red dot at the end of line 20
I have the below code in a HTML page on my site. The url parameter is loading fine on a pixel fire right above it but for some reason the redirect doesn't want to fire. Anyone have any ideas? It might be an IE issue but not sure.
<script type="text/javascript">
$(document).ready(function() {
setInterval("window.location = '{{$url}}'", 4000);
});
</script>
<script type="text/javascript">
var url = '...';
$(document).ready(function() {
setInterval(function() {
window.location.href = url;
}, 4000);
});
</script>