How to set Browser's window using jquery? - javascript

I want to change my browser's width and height using JavaScript and/or jQuery, is this possible?

http://cybertext.com.au/tips_HTML_window_size.htm
In the head section:
<script>
function changeScreenSize(w,h){
window.resizeTo( w,h )
}
</script>
In the body tag
<body onload="changeScreenSize(500,300)">

It's not that simple as you think. You should not generally try to resize user window, FF has an option to disable Javascript from resizing the browser window. Resizing the browser is not a good thing to do.
If you need a window of a specific size, open one of that size with the options to window.open().
Still if you need to do it, use window.resizeTo().
Hope this helps.

You can use:
window.resizeTo(800, 600);
For more information: https://developer.mozilla.org/en/DOM/window.resizeTo

Related

Remove rel attribute using jquery based on screensize?

I am using lightbox for a group of images on 3 seperate pages. I have just made the website responsive for mobile but need to disable the lightbox on mobile.
I believe the best way for this is to remove the rel attribute for smaller screens.
The rel attribute is: rel="lightbox[page-name]" and these are in the anchors within unordered lists with classes of brandingsamples, marketingsamples and webdesignsamples.
I havent got a clue where to start with this so any help appreciated.
Instead of removing the attribute I would rather execute the lightbox script (and load all necessary assets) only if your page is not viewed on a mobile context. This would allows you to save precious bandwidth and make your page faster to load.
You could use a light script/assets loader like yepnope that loads the lightbox assets only if a given condition is satisfied (e.g. you may look at screen resolution, or your screen dpi value)
A simple example could be
<script src="/assets/yepnope.min.js"></script>
<script>
yepnope([{
test: (screen.width > 1024), // if we're on a large screen
yep: ["/css/lighbox.css", "/assets/lightbox.js"]
}]);
</script>
to simply remove an attribute you can try this:
$('selecter').attr('attrname', 'valueifany');
In your case it would be:
$('body').attr('rel[lightbox]', '');
Or a simple one:
$('body').removeAttr('rel[lightbox]');
To give the condition you can apply the screen-width condition as:
if($(window).width() >= 'value' && $(window).height() >= 'value') {
// write the code here..
}
http://api.jquery.com/removeattr/
Detect mobile device and then remove attribute in it.Use:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('selector').removeAttr('rel');
}
You could try
<script type="text/javascript>
$(document).ready(function(){
if(screen.width<600){
$('a').removeAttr('rel[lightbox]');
}
});
</script>

Scroll down on page load

I need to scroll down about 50px when the page is loaded. This is what I'm using:
$(window).load(function(){
$("html,body").scrollTop(55);
});
I've also tried:
scrollTo(0,55)
This works fine in Firefox and IE, however in Chrome, Safari and Opera it scrolls down to the proper position and then jumps back up to the top(or the last scroll position).
I've also tried using an element id to scroll down, but the browser still overwrites it. I tried like this:
htttp://website.com#element
I think your problem is that you are using $(window).load and some browsers are having problem as things havnt fully rendered yet. Try swapping to
$(document).ready(function(){
$("html,body").scrollTop(55);
});
Seems to work fine in all browsers here http://jsfiddle.net/7jwRk/1/
Info
$(document).ready
executes when HTML-Document is loaded and DOM is ready
$(window).load
executes when complete page is fully loaded, including all frames, objects and images
<script type="text/javascript">
$(document).ready(function(){
var divLoc = $('#123').offset();
$('html, body').animate({scrollTop: divLoc.top}, "slow");
});
</script>
Add id="123" to any <div> it will automatically scroll it down when page loads.
Here's an another script if the previous one wont work !
<script>
window.setInterval(function() {
var elem = document.getElementById('fixed');
elem.scrollTop = elem.scrollHeight; }, 3000);
</script>
Add id="fixed" to any <div> it will automatically scroll it down when page loads.
You can use the scrollIntoView() function. This is supported accross most browsers (even IE6).
document.getElementById('header').scrollIntoView()
After messing with scrollIntoView(), and observing it scroll correctly at page paint time, then snap to the top for no reason, I went with this:
http://website.com/#target
and
<a name="target">
Then the browser understands exactly what I need and does it. But I can only do this because we control the URI, so it naturally also won't work in all situations.
Alternatively, just fire this at the end of your body:
...
<script type="text/javascript">
$("html,body").scrollTop(55);
</script>
</body>
</html>
If you are using 2 monitors, be sure that when you open the window of your browser with the page for which the script is implemented, you don't move that window to the other monitor, with a different screen resolution. Shortly: don't cross the windows of the browser to a different monitor, just open a new window of the browser for each monitor/ screen resolution.

Fancybox - Modify javascript to add options

I have the following Fancybox declarations in my page:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox().hover(function() {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave( function() {
$("#fancybox-overlay").click();
});
});
</script>
I need to reduce the size of the image used by the modal box and I believe I can do that by setting the "autoDimensions", "width", and "height" options available with Fancybox, I just don't know how to integrate that with the hover function, since there isn't an option in Fancybox to specify a function for a hover event. (I hope this is making sense.)
Anyhow, does anyone know how I can modify the above javascript to control the width and height?
Thanks!
Sorry but images in fancybox don't use "autoDimensions", "width", and "height" API options. Those options are for ajax, iframe or inline content only.
Images in fancybox are displayed either, re-sized to fit into the viewport (when autoScale is set to true) or in their original size (when autoScale is set to false). If the original size is bigger than the height of the viewport, then you have to scroll down the parent page to see the whole image.
The only way you can re-size images in fancybox other than above is using jQuery css() API (which, I wouldn't advise ... it produces an odd behavior). You can call it using fancybox's callback option onComplete like:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
'onComplete': function(){
$("#fancybox-outer, #fancybox-content").css({'width':300,'height':150});
}
}).hover(function() {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave( function() {
$("#fancybox-overlay").click();
});
});
</script>
Note that options mentioned above are for fancybox v1.3.x.
Use it at your own risk.
you can always add code to document.ready to trigger every time. so just check for the event and resize.
or since the elements are hidden at first, you can get the event trigger using the show event
Check for the event onstart. onstart will be called right before attempting to load the content, and you can add your resize operations there.

Conflict between onload loadbar and prototype scrollbar

I'm trying to understand this conflict between
My loadingbarscript that hides my content until the page is loaded (Removed the tags from the top)
function showContent(){
//hide loading status...
document.getElementById("loading").style.display='none';
//show content
document.getElementById("content").style.display='block';
}
window.onload = function() {
showContent(); }
</head>
<body>
<script type="text/javascript">
document.write('<div id="loading"><img src="ajax-loader.gif"></div>');
</script>
<div id="content">
<script type="text/javascript">
//hide content
document.getElementById("content").style.display='none';
</script>
And 2. My livepipe scrollbar using prototype 1.6.1
Where the call is this:
<script type="text/javascript">
document.observe('dom:loaded',function(){
var scrollbar = new Control.ScrollBar('cases_tekst','scrollbar_track');
});
</script>
For some reason either one works or they other depending on the order. I had several other windows.onload functions that work with the prototype scrollbar but not this one.
Hope to understand better what is turning wrong. No errors show up with firebug.
The mistake must have something to do with the onload call because when i resize my browser window the scrollbar works.
Hope someone can explain the cause of the conflict.
Instead of using window.onload to call showContents, use prototype's Event.observe function. Like this:
Event.observe(window, "load", showContent);
For more info on this function: http://www.prototypejs.org/api/event/observe
For more info on why not to use the window.load event model, check out this site: http://www.quirksmode.org/js/introevents.html
In general, quirksmode.org is a great site for understanding this kind of thing and how they behave in various browsers. That's one of the reasons to use libraries such as prototype or jquery as it standardizes much of the browser's behavior.
I just solved a similar problem with the livepipe scrollbar. The scrollbar wouldn't appear until I resized my browser window in all browsers except firefox. It turned out it was caused by the nature of the content in the scrolling div. I had many irregularly sized images in there. When I replaced them with text or squared them all up it worked fine.

How do I programatically scroll down the page?

When the page loads, I want to use Javascript/Jquery to automatically take the user to the 500px downwards. But it has to seem natural.
How can that be done?
Just Javascript: window.scrollBy(0,500);
You can use the jquery scrollto plugin. It's very easy.
http://plugins.jquery.com/scrollTo/
Is there a lighter version? Just using javascript?
You could consider calling window.location.hash during onload. Have an element with an ID at about 500px down and just do
window.onload = function() {
window.location.hash = '#foo';
}
Oh, the # is mandatory for IE compatibility ;)
use the jquery one Jourkey suggested. Cross platform easy to use etc. There is pure JavaScript one you can try, though YMMV on browsers other than IE
"scrollTo Method
Scrolls the window to the specified x- and y-offset. "
http://msdn.microsoft.com/en-us/library/ms536731(VS.85).aspx
$().scrollTop(500);
What about navigating to some predefined link inside the page. Foe example see URL pointing to the location inside the page http://en.wikipedia.org/wiki/Uniform_Resource_Locator#cite_note-0

Categories