1

I write more about Media Queries, but I need another plan.

My website is a full screen video background 100% site - I make animations in Adobe After Effects and render to VP8 & VP9 codec.

All looks very nice in 1080 x 1920 but if I scale my browser down to 1366 x 768 (Laptop) the site looks bad because the movies are cropped too much.

And you know I make in another folder a special html file + special render video in 480p. And this is looks very nice. But i can't redirect this if the user is scaling my site in the browser in real time.

I need a script that in controls the width of the browser in real time, and redirects to special dedicated site. Because my movies in webm. .mp4 .ogv must refresh from 720p to 480p and I can't make it in Media Queries.

I use html:

<link href="css.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-2.0.1.js"></script>
<script type="text/javascript" src="js/redirect.js"></script>
<body>
<div id="big"><video preload="auto" autoplay loop muted="muted" volume="0">
<source src="video/of.webm" type='video/webm; codecs="vp9"'></video></div>
<div id="menu"><a href="intro.html" class="ex2-fadeout" >In</a> <a href="cut.html" class="ex2-fadeout">Ofe</a> <a href="portfolio.html" class="ex2-fadeout">Pf</a> <a href="kontacy.html" class="ex2-fadeout">Contact</a></div>
</body></html>

in redirect.js i use

$(window).resize(function () { 
    /* call some function */
});

var width = $(window).width();
var height = $(window).height();

$(document).ready(function(){
    //this is called only once
    r($(window).height());
});

$(window).resize(function () { 
    //this is called everytime when you resize window
    r($(window).height());
});

function r(h) {
    if (h > 1024) window.location.replace("http://google.com"); //this is edited
    return 0;
}

What i make bad?

user3124998
  • 33
  • 6
  • Please try to search, "detect user resolution javascript", and "redirect javascript". (If I got the problem right). – Kyslik May 17 '14 at 16:07
  • Thanks for information but if i use: This is not working in real time. You know sometimes you have got resolution 1920x1080 but your browser isn't must have got a full screen, sometimes people using 3/4 or 2/4 of 1920x1080. How to detect browser width in real time to redirect? I will be use Media Queries but i can't change video movies in html file. – user3124998 May 17 '14 at 16:17
  • possible duplicate of [how to get web page size, browser window size, screen size in a cross-browser way?](http://stackoverflow.com/questions/3437786/how-to-get-web-page-size-browser-window-size-screen-size-in-a-cross-browser-wa) – rds May 18 '14 at 15:28
  • Maybe but in this topic i don't understand how to make it. :) Kyslik show better and clear how to make this effect and he create very good content! For new webdeveloper. :) – user3124998 May 19 '14 at 16:27

1 Answers1

2

From the comment above I can see that you use jQuery already so lets get in to it. There is a DOM event onResize() and jQuery makes it easier this way:

$(window).resize(function () { 
    /* call some function */
});

So now you need to get actual width and height of window, which you already know how to do:

var width = $(window).width();
var height = $(window).height();

to wrap it up copy code from here

$(document).ready(function(){
    //this is called only once
    r($(window).height());
});

$(window).resize(function () { 
    //this is called everytime when you resize window
    r($(window).height());
});

function r(h) {
    if (h > 1024) window.location.replace("http://google.com"); //this is edited
    return 0;
}

to here

See fiddle.

also there is difference between document and window size

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

More info here.

Community
  • 1
  • 1
Kyslik
  • 8,217
  • 5
  • 54
  • 87
  • Thank you so much, but i copy and paste your code from to wrap it up in redirect.js i add jQuerry v 2.0.1 and add but site dosn't redirect if i scaling browser. why? ;) – user3124998 May 17 '14 at 16:48
  • 1
    Because of redirect function, see my edit. Simply grab the code again and paste it where you want. – Kyslik May 17 '14 at 17:08
  • Thanks a lot, but if i scalnig my browser in website i can't redirect. Could you see in my edited question? Mabye i make this bad i don't know ;) – user3124998 May 17 '14 at 17:43
  • 1
    Copy only code between "to wrap it up" and the section dividing line. See my edit. – Kyslik May 17 '14 at 18:01
  • ok thanks i copy this but if i scaling browser i can't go to google :< I really I don't know why. – user3124998 May 17 '14 at 18:17
  • 1
    please show us head of your html i think you are not using jQuery at all (including it) – Kyslik May 17 '14 at 18:19
  • i make demo site http://nucowork.tk/trata/ Could you see what i make bad? – user3124998 May 17 '14 at 18:22
  • ok i removed return 0; but this is not working too. Mabe jQuery version 2.0.1 it's bad you think its better use for example 1.7? – user3124998 May 17 '14 at 18:34
  • Please try to remove return 0; from the function r(h). This is really odd everything works as is on my machine (not on your website but on my local server). No, please upgrade jQuery to 2.1.0 (I use). Now I am setting up example on my server so you can see. – Kyslik May 17 '14 at 18:34
  • ok i change to jquery 2.1.0 – user3124998 May 17 '14 at 18:37
  • 1
    See my example [here](http://hoskie.net/stackoverflow). Obviously it is going to redirect asap to the google.com but resize window and you can explore the code in google chrome by clicking right click (anywhere on the page) and selecting "inspect element" option. You can download the project [here](http://hoskie.net/stackoverflow.zip). I can see you already make it work. Bravo! :) – Kyslik May 17 '14 at 18:47
  • ok i see if i click ctrl - in your site i go to google, but if I minimalize browser and changing size of this browser this is don't work in my computer ;p – user3124998 May 17 '14 at 18:50
  • 1
    Your website nucwork.tk/trata redirects correctly on my machine... I have huge screen size (32"). If I change size of the window it redirects (I am using Chrome and Firefox for tests). I start with really small windows size whenever I make height > 1024 it redirects to the google.com, same on my server as same on yours. – Kyslik May 17 '14 at 18:54
  • Oh ok thank you its working! :D I'm work in 1920w x 1080h and i cant make it but if i change h to 700 all working good because i can make 700 :P Ahhh thank you so much. You are the best! :) – user3124998 May 17 '14 at 19:02
  • 1
    Its because you have "tabs" and scrollbars and windows taskbar and all together is about 100-200px so you do not even have 1024 height. And no problem. – Kyslik May 17 '14 at 19:04
  • Really thank you if I finish my website I'll give you link :) I make more work in After Effects and you save my live! :D – user3124998 May 17 '14 at 19:09
  • No problem, I did some AE [work](https://www.youtube.com/watch?v=wR2yOM9W9KQ) myself, I remember that [videocopilot](http://www.videocopilot.net/tutorials/) is the best for learning AE. – Kyslik May 17 '14 at 19:13