I am trying to resize the page based on the size of the window. I need the size of the window on the page load and when the window is being resized.
I've looked online and I found a way to do this with javascript. The problem with this is that javascript gets fired after the page_load. I know it's not possible to get javascript values before the page load, so how am I able to use the values from javascript in my code? Can I use another page that with javascript determines the size of the window, and pass it to my main page?
I hope this is clear. Thank you!
No. you cann't get window size from the server side. However, here is what you can do in javascript assuming you are using jQuery:
var width = $(windows).width(),
height = $(window).height();
After getting these values, pass them through an Ajax call to the server:
$.ajax({
method:'POST',
data: { w : width, h: height},
// complete your ajax
});
You won't get page or windows size at server side i.e on page load function, but you will get it using client side script i.e jquery or javascript
<script type="text/javascript">
$(document).ready(function()
{
var w = $(window).width();
var h = $(window).height();
});
</script>
And later on you can do your functionality when resize the window by using following function
window.onresize = function(event)
{
var height=$(window).height();
var width=$(window).width();
//your functionality
}
Related
I have some swf embedded in iframe but only if the page is refreshed the iframe is resized, then if I select other one then will show as all swf not only the animation the background as well. This is what I am using
if ( 'resizeIframe' === $('#onPlayAction').val() ) {
var ifrEl = $('div.player-container iframe.page-iframe')[0];
$(ifrEl).show();
ifrEl.src = htmlPageBrowserUri;
ifrEl.onload = function() {
ifrEl.width = ifrEl.contentWindow.document.body.scrollWidth;
ifrEl.height = ifrEl.contentWindow.document.body.scrollHeight;
}
}
There are three ways to do this.
You can change the size on every window resize
$(window).on('resize', function (){
ifrEl.width = ... ;
ifrEl.height = ... ;
})
You can use some jQuery plugins like iFrame Resizer
You can use some nifty css tricks. Go search for responsive iframes using css and you will find a ton of good answers.
I hope this all helps you.
I suspect the issue with your code might be thses two lines :
ifrEl.src = htmlPageBrowserUri;
ifrEl.onload = function() {
The problem being that the first line set s the frame address, but second line sets the onload event immediately, probably before the page has loaded ? So when the page does load, the line setting onload event has already run & so doens't get set.
I don't quite understand the text in your question (sorry!) but the code below successfully resizes an iframe - it's run 'onload' in the frame's page:
<body onload="setParent()">
In case it's relevant, the iframe itself has attributes:
<iframe id="neckfinishframe" style="width:100%;overflow-x:hidden" src=".. etc">
In my case I'm only concerned about height. Width is 100%.
In the iFrame page, this code runs from the onload event to amend the iframe height to be whatever the height of the page is, plus a bit. This is intended to avoid showing a set of scroll bars within the iframe.
function setParent() {
// runs onload in iframe page
// in my case I have to run it from the frame page because I need to know the page rendered height in order to set the iframe height
var f;
try {f = parent.getElementById("neckfinishframe")} catch (e) {};
if (f != null) f.style.height=(this.document.body.scrollHeight+30)+"px";
}
Note - I haven't tried this cross- browser but I know it works in IE.
I am trying to use jQuery ajax to call in a project page.
Assume the xhr variable contains the correct string to the webpage (target page). I have prevented the page as mobile viewport will not load the ajax request.
$('a.project__block').on('click', function(e){
var $el = $(this),
viewportWidth = $(window).width();
if (viewportWidth >= 768){
e.preventDefault();
var xhr = $.get($(e.currentTarget).data('href'));
xhr
.done(open_overlay)
.fail(function(){
alert('Could Not Connect, please report to admin!');
});
}
});
function open_overlay(data){
close_overlay_window();
$('body').addClass('active--overlay').append(data);
supporting_code();
}
function close_overlay_window(){
$('#bravedogers').remove();
$('body').removeClass('active--overlay');
}
function supporting_code(){
$('.ajax__close__link').on('click', close_overlay_window);
}
function remove__active__classes(){
// Is the overlay active? If not dont close!
if (viewportWidth < 768 && $('body').hasClass('active--overlay')){
close_overlay_window();
}
}
I want to target the specific id which remains constant in all the project pages, e.g:
<div id="wrapper__container"></div>
At present I am getting this error:
Ideally can in addition see modernizr being loaded in which causes my page to crash.
Any ideas?
Is this what you're trying to do? Append just the wrapper?
function open_overlay(data){
close_overlay_window();
var container = $(data).find('#wrapper__container');
$('body').addClass('active--overlay').append(container);
supporting_code();
}
I would see if that makes your warning go away. Just looking at the warning, it looks like Google Maps isn't happy about something.
So I am trying to find the height of my images then add a top margin this enables me to impose a a vertical center.
I'm running this code, and on an F5 refresh I get correct height but on CTRL+F5 refresh it gives me a much smaller height. I kind of assume this is a loading/delay thing, but I am using document ready so not really sure whats going on. I tried using a php function but it slows the site down amazingly so have to stick with jquery.
you can see it working here. www.mzillustration.com
jQuery(document).ready(function() {
if (jQuery('.imagedisplay').length != 0) {
jQuery('.imagedisplay').each(function(){
var imgheight = jQuery(this).find('img').height();
var topmarg = ((240 - imgheight) / 2) ;
jQuery(this).find('img').css({'margin-top':topmarg+'px'});
});
});
any ideas/help/explanation much appreciated.
thanks
There is a difference between onload and onready.
ready will wait until the actual DOM-tree is done, while onload will wait until ALL of the content displayed on the page is finnished loading. So an explanation would be that when clearing the cache and refreshing, the dom tree finishes much faster than the images, hence giving the wrong heigh.
Try using the onload-event instead and see if you get a different result.
You need to insure the image has loaded before asking the browser for its height. If that image path is living in the html you will unfortunately need a jquery pluggin to handle this in a cross browser manner.
https://github.com/alexanderdickson/waitForImages
http://desandro.github.com/imagesloaded/
Or you will have to wait for the window.onload event which in jquery looks like this:
$(window).on('load', function(){....
However if you use the window load event, it will wait until ALL resources have loaded and depending on your site that can be a serious delay when compared to measuring just the image itself.
Or if you are comfortable with loading the image from javascript, simply ordering your code properly will handle this:
var loadTester = new Image(),
imgH;
$(loadTest).on('load',function(){
imgH = $('#image').attr('src',loadTester.src).height();
}
loadTester.src = "paht/to/image.jpg";
The reason you are seeing a difference in the manner you reload the page, is that a simple refresh does not clear the cache, so the image is already loaded. When you hit ctrl+f5 it clears the cache and so the image is not yet loaded when you ask the browser for the height.
For cache control durring development consider getting the firefox web-developer toolbar.
Try this approach:
jQuery(function() {
jQuery('.imagedisplay img').each(function() {
var $this = jQuery(this),
height = $this.height();
if (height) {
$this.css('margin-top', ((240 - height) / 2) + 'px');
} else {
$this.on('load', function() {
$this.css('margin-top', ((240 - $this.height()) / 2) + 'px');
});
}
});
});
images are/can be cached/loaded separately from the actual page content. the document being ready can (and in my experience usually) occurs before everything is loaded.
try adding an event listener to the actual element being loaded.
You need to make sure the image has loaded before extracting a height. You can easily check this using the complete property on the image. Try this:
var setH = function() {
$(this).css('margin-top', (240 - this.height) / 2);
}
$('.imagedisplay img').each(function() {
if( this.complete ) {
setH.call(this); // apply height straight away
return;
}
$(this).load(setH); // apply height when the image has loaded
});
I want to enable a lazy loading for the contents of my website.
Just like Jquery Image loading http://www.appelsiini.net/projects/lazyload that is valid only for images.
I want to do it for the content (DIV's).
Suppose we have a long page then i want to download the div as they becomes visible.
I will download the content using JSON or PageMethods. But i want the code that will execute the function for loading contents.
So whether we can somehow find this that div is visible only scrolling down.
Means i need to use some scroll events but dont know how.
Any help is appreciated.
I was looking for this to load advertising from my openX server only when the advertising should be visible. I'm using the iFrame version of openX which is loaded in a div. The answer here put me on my way to solving this problem, but the posted solution is a bit too simple. First of all, when the page is not loaded from the top (in case the user enters the page by clicking 'back') none of the divs are loaded. So you'll need something like this:
$(document).ready(function(){
$(window).scroll(lazyload);
lazyload();
});
Also, you'll need to know what defines a visible div. That can be a div that's fully visible or partially visible. If the bottom of the object is greater or equal to the top of the window AND the top of the object is smaller or equal to the bottom of the window, it should be visible (or in this case: loaded). Your function lazyload() might look like this:
function lazyload(){
var wt = $(window).scrollTop(); //* top of the window
var wb = wt + $(window).height(); //* bottom of the window
$(".ads").each(function(){
var ot = $(this).offset().top; //* top of object (i.e. advertising div)
var ob = ot + $(this).height(); //* bottom of object
if(!$(this).attr("loaded") && wt<=ob && wb >= ot){
$(this).html("here goes the iframe definition");
$(this).attr("loaded",true);
}
});
}
I tested this on all major browsers and even on my iPhone. It works like a charm!!
The code below does not cover cases where the user scrolls up from the bottom (read patrick's comment below). Also, it allows multiple event executions because of several concurrent onscroll events (in most browsers you won't see this, most of the time).
$(document).ready(function(){
$(window).scroll(function() {
//check if your div is visible to user
// CODE ONLY CHECKS VISIBILITY FROM TOP OF THE PAGE
if ($(window).scrollTop() + $(window).height() >= $('#your_element').offset().top) {
if(!$('#your_element').attr('loaded')) {
//not in ajax.success due to multiple sroll events
$('#your_element').attr('loaded', true);
//ajax goes here
//in theory, this code still may be called several times
}
}
});
});
Proper solution, that takes into consideration scrolling from bottom here.
You may consider way point library :)
http://imakewebthings.com/waypoints/api/waypoint/
Its use cases and api's are defined in above link
It is of 9 kb when compressed. It will add an additional -100 ms- 50ms timelag while loading page on 3g/ 4g
Edit :-
It can be used standalone and it also supports all major frameworks.
Here is a solution that lazy loads images when they come within 500px of view. It can be adapted to load other types of content. The images themselves have an attribute data-lazy="http://..." with the image url in it, and then we just put a dummy transparent image for the src attribute.
var pixelLoadOffset = 500;
var debouncedScroll = debounce(function () {
var els = app.getSelector(el, 'img[data-lazy]');
if (!els.length) {
$(window).unbind('scroll', debouncedScroll);
return;
}
var wt = $(window).scrollTop(); //* top of the window
var wb = wt + $(window).height(); //* bottom of the window
els.each(function () {
var $this = $(this);
var ot = $this.offset().top; //* top of object
var ob = ot + $this.height(); //* bottom of object
if (wt <= ob + pixelLoadOffset && wb >= ot - pixelLoadOffset) {
$this.attr('src', $this.attr('data-lazy')).removeAttr('data-lazy');
}
});
}, 100);
$(window).bind('scroll', debouncedScroll);
The debounce function I'm using is as follows:
function debounce(func, wait, immediate) {
var timeout;
return function () {
var context = this, args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function () {
timeout = null;
if (!immediate) func.apply(context, args);
}, wait);
if (immediate && !timeout) func.apply(context, args);
};
}
You need to keep in mind that this isn't very effective on iOS, as the scroll event doesn't fire until after the user has finished scrolling, by which time they will already have seen the blank content.
In an HTML page, how can I know when a externally loaded Javascript object is defined and ready for methods to be called on it?
Problem specifics:
I'm using the uservoice feedback web application including their Javascript widget and their SSO (Single-SignOn) option.
Everything works fine. There is a prominent Feedback tab stuck on the left of the window. And I can use the following anchor for additional links to open their popup feedback widget:
feedback
But... I'm having trouble trying to support a extra workflow - on one particular page (e.g. the feedback page) I want the uservoice feedback form to automatically popup when the user goes to the page without being initiated via a click event.
I tried putting the following at the bottom of the page:
<script type="text/javascript">
function _autoPopupUserVoice() {
UserVoice.Popin.show(uservoiceOptions);
}
_loadSuper = window.onload;
window.onload = (typeof window.onload != 'function') ? _autoPopupUserVoice : function() { _loadSuper(); _autoPopupUserVoice(); };
</script>
But Firebug shows a error:
"UserVoice is not defined".
So I guess the uservoice Javascript hasn't been executed by the time _autoPopupUserVoice() is called.
I've tried a few other things but haven't managed to get it working. How can know when the Uservoice Javascript object is loaded and ready for methods to be called on it?
For reference the Uservoice object is loaded via the following Javascript at the end of the page:
<script type="text/javascript">
function _loadUserVoice() {
var s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.setAttribute('src', ("https:" == document.location.protocol ? "https://" : "http://") + "cdn.uservoice.com/javascripts/widgets/tab.js");
document.getElementsByTagName('head')[0].appendChild(s);
}
_loadSuper = window.onload;
window.onload = (typeof window.onload != 'function') ? _loadUserVoice : function() { _loadSuper(); _loadUserVoice(); };
I came up with the following javascript which I put at the bottom of the page, under the Uservoice widget code. It loops round every 100ms and tests whether the Uservoice object is defined. Once it is defined, it calls the Popin method to popup the widget:
<script type="text/javascript">
// Show the Uservoice feedback widget
function _autoPopupUserVoice() {
UserVoice.Popin.show(uservoiceOptions);
}
// Wait for the uservoice JS object to load, fire _autoPopupUserVoice when it is finished.
if ((typeof window['UserVoice'] == 'undefined')) {
var timer = setInterval(function () {
ok = false;
try { ok = (typeof window['UserVoice'] != 'undefined');} catch (e) {}
if (ok) {
clearInterval(timer);
_autoPopupUserVoice();
}
}, 100);
}
</script>
I'm sure there's a better way to do this. Perhaps there is even a callback function that I'm unaware of?
Update (8/Dec/09):
This method is semi-approved by Uservoice:
Thanks for contacting UserVoice
support. That method looks perfectly
reasonable. We don't have any in built
methods for doing this (currently, we
are looking at this type of
functionality) but the code described even though quite hacky, should do the trick.
This will done by using jquery. Instead of calling the page you can call the particular section on page load using Javascript.
$(document).ready(function() {
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});