Develop Reference

orientation change VS jquery events

The website: http://negativgraffiti.hu/uj/
If you jumps from one page to another, every page has a different height, but they are all in one div, just they are not visible all the time.
I'm resizing the parent div everytime to the current page's height (not the full code, just a sample):
var magassag = jQuery("#post-5");
var egymagas = jQuery(".elsofo").height();
if (i == 1) {
magassag.animate({
height: egymagas
}, 100 );
}
it's working fine, but when i test it on tablet/mobile the height is ruins when i change the orientation, and i don't know why.

Use $(window).on('resize', fn) to detect window resizing.
$(window).on('resize', function() {
// re-animate the height for the current page
});
Although this works fine for tablet resizing, it will be very inefficient for desktop users who are resizing the window with their mouse. It is good to throttle the resize callback for that reason.
// Use `throttle` from any of the various throttle libraries available.
$(window).on('resize', throttle(function() {
// re-animate the height for the current page
}));

How to run vbscript code at certain browser width

I'm turning a clients website into a responsive site and they have lots of vbscript in the content of their home page. At mobile widths they've stripped out a lot of content which means there's lots of code that's being executed but not displayed thanks to display:none
Is there a way to run vbscript code when you hit a minimum width of 768px?
I thought about using javascript to get the screen width and store it as a cookie and use vbscript to get the cookie to obtain the screen width:
<SCRIPT LANGUAGE="javascript">
var width = screen.width;
document.cookie = 'YourDomain=ScreenWidthB='+width;
</SCRIPT>
<%Dim ScreenWidth%>
<%ScreenWidth=request.cookies("YourDomain")("ScreenWidthB")%>
but I feel there may be a better solution out there. Also the code above gives me the width of my monitor I believe, not the width of the browser

This isn't something you would do with any server side language.
You can either use Bootstrap Grid System for this, which has a built-in grid system to handle responsive sizing.
or you can simply use CSS to define your styles for elements with-in a certain viewport size, using the CSS #media tag:
Your CSS would look like this example:
div {width:100px;}
#media (min-width:768px) {
div { width: 50px; }
}
What this does is makes all div's at 100px width, but when the browser is 768px or larger it changes the div sizing to 50px, as defined with-in the #media tag.
Therefore, you can use VBScript to generate the CSS script in the page, without having to write any javascript code. But Bootstrap may be your best bet to help build a responsive design easily/seamlessly. You may want to check it out.
EDIT: Since OP has clarified not to even load the content
You can make a cookie in javascript, and read it in your VBScript to check the viewport.
You can use jQuery for this:
$(window).resize(function(e){
var w = $(this).width();
if(w>768) document.cookie = "viewport=768;";
else document.cookie = "viewport=;";
});
This will bind an event listener on any time the user resizes the window, to check it's size, and if above 768px, it will write the cookie or empty if not.
Then check for the viewport cookie using Request.Cookies("viewport")
Or better yet since you're concerned about performance, you can use Ajax to build your page when a certain viewport size is hit.
Again, you can use jQuery for this and bind to the window resize event.
contentloaded = false;
$(window).resize(function(e){
var w = $(this).width();
if(w>768 && !contentloaded) {
$.get(url,function(data){
$("div").html(data);
contentloaded = true;
});
}
});
I would use ajax to do this, since I'd want to show the content without the user having to refresh the screen as you would have to by using the cookie solution.

Reloading google map

i have 3 different google maps on my site, one for when viewing on desktop, tablet and mobile, when i resize my browser which people might do the new map pointer that has now resized isn't in the right place until i refresh the page, i want to just reload the iframe, im very new to javascript and tried this but its nots working
<script type="text/javascript">
if( $(window).width() == 985){
document.getElementById('map-desk').contentWindow.location.reload(true);
}
if( $(window).width() == 975){
document.getElementById('map-tab').contentWindow.location.reload(true);
}
if( $(window).width() == 765){
document.getElementById('map-mob').contentWindow.location.reload(true);
}
</script>
so like when the screen equals a certain width the iframe with that id reloads or refreshes

There's no actual event handler so it'll only fire once, when the browser loads (which is obviously not what you want). As you're using jQuery, wrap your code in:
$(window).resize(function() {
// code goes here...
});
... which will run the code inside every single time there's even a minute change to the browser size. Though you're going to come across the issue that $(window).width() is very rarely going to hit that exact pixel value. I'm not certain of the best solution, but something involving checking the condition +/- 30 pixels either way or so might work.

I think you are looking for the following event in jQuery
window.onresize = function(event) {
//your code to resize and reload here
}

Google maps reloads itself if the mapdiv is resized. Give 100% width to mapdiv. It will fit the size of the window. If you want to change the contents of maps (layers, markers, routes...), you should use google map events. Events, options and methods are listed here:https://developers.google.com/maps/documentation/javascript/reference

Limit the browser windows height can not less than 200 px using Jquery?

I would like the user can not drag the surrounding line of browser and resize the browser when the window size is less than 200 px;
//if ($(window).height > 200){
$(window).resize(function() {
after_resize(function(){
Book.zoom_auto();
Book.book_position();
Book.dragdrop_init();
calculate_zoom_factor();
if ($(".viewportBinder").length){
$("#view").css('height',$(window).height());
$("#view").css('width',$(window).width());
content = element.viewport('update');
}
}, 300);
});
//}
This if statement can order not to do anything if the size is less than 200px , however, is it possible to not allow the user drag the screen? (The current situation is user can still drag to the height less than 200px, but it will do nothing) Thanks

There's no way to control whether the user can resize or move the browser window from Javascript.
..imagine the problems you'd have with popups and spam ads if you could (!)

If the browser lets you do window.resizeTo(w,h), than you can set it. BUT modern day browsers normally disable that method by default.

It's seems that medium is doing it:
https://medium.com

Loading jQuery function only when window width > 940px whether by page load or resize

I want a function to load only when the browser window width is greater than 940px.
I can do this on initial page load with:
if ( $(window).width() > 940) {
// my function
}
However, doing it the above way won't work on browser resize. I've been able to somewhat get it working on browser resize with the following:
$(window).resize(function() {
if ($(window).width() < 940) {
return;
}
else {
// my function
}
});
The problem with this, however, is once the function is loaded, it stays loaded whether the browser window is resized smaller or not. I need to clear the function out or un-load it whenever the window is smaller.
Is there a way to only load a function if the window is larger than 940px and completely remove it if the window is smaller than 940?
Any help would be much appreciated.

Do what you need in the first branch where you have return.
http://jsfiddle.net/KQSNE/

Take a look at Managing JavaScript on Responsive Websites.