Window -> IFRAME -> DIV
I have a window, that has an iframe, that has a div. The div has the ability to scroll the content within but not having full control of the parent window, I have to decide how large the div needs to be from within the iframe.
To do this, I have the following code JavaScript (please pardon the mix of jQuery/straight JavaScript):
$(window.parent).resize(function () {
var frameHeight = parent.document.getElementById('IFRAME_banner').offsetHeight - 52;
$("div.ajax__tab_body").height(frameHeight);
});
This code works fine as long as you resize the window by dragging one of the corners. If you vertically resize by dragging the bottom of the window, it does not fire this event and the div does not properly resize.
I use the iframe as a reference since it seems to automagically resize itself because of something the parent window does. (This is all in MS CRM Dyanamics...so who knows what is happening behind the scenes)
Does anyone know why this would be? And what I would have to do to work around this?
Hackish is ok in this instance. The whole thing is a big hack.
Hack answer: You could create a timer that fires once every second or so and checks the dimensions. If they aren't what you expect, call the event function manually.
The resize event fires differently on different browsers. FF fires repeatedly and IE fires only after the resize is complete. You can't count on it. Use a timer and poll the current size.
Related
so I have a set of images that on a big screen are not using the image slider. And when the screen goes below a certain width, the image slider is initiated.
At the moment, when I resize the window manually and play around dragging the size around it works well.
But, if I resize the window to a small size and hit F5 then what should happen is that the page automatically recognises that it needs to initiate the image slider. What does happen is that the images load like this below and not an interactive image slider.
So the problem is that if the page is already under 939 then the bxSlider functionality doesn't work. It will put the images into a bullet-pointed list as below without actually adding the interactivity. It will also not deactivate the bxSlider when the screen is resized to above 939.
It sounds like you're using the resize event to trigger your code. The reason that doesn't work when you refresh at a small size is that after the page loads, you don't resize it again, so the resize event doesn't fire.
Resizing only triggers when you manually grow/shrink the browser, without refreshing the page.
To fix it, just trigger your current function on first page load (I can't see the code here, but presumably it checks the current browser dimensions and updates the page accordingly? If so, entirely safe and sensible to run at the start of page load).
try changing this
$(window).resize(checkWidth);
to
$window.on('resize', function() {
checkWidth();
});
I have a container element that has an <img> tag in it. The width of the image is 100%, and the height is auto. Overflow on the container is set to hidden and it also has a max-height and min-height. The idea is to have the image determine the height of the container, within the max and min breakpoints.
So, the container has a relative height. In order to have a fluid transition, I reset the height on the resize event (for a complicated reason, the img itself does not set the height, rather it is calculated and then changed via javascript). This works fine, and when I resize the window, it all works right.
But some of the logic that is in the resize event I want to run on the load event as well. So, I thought I would just call resize within load, like so:
$(window).load(function(){
$(window).resize();
});
But, this did not work. With this code, if I manually resize the window even just one pixel, the containing element will scale properly (it's about a 200px difference from the height calculated on load to the reset, properly scaled height).
Apparently, my understanding of how this works is wrong. I have called other events before like this to fire the event and trigger something else. How can I accomplish what I want?
Still wondering what's actually being achieved by re-sizing the window but another way to trigger resize would be :
$(window).load(function() {
$(this).trigger('resize');
});
Try .ready instead of .load
$(window).ready(function);
Here's a jsfiddle
I do not know what the problem was. I changed my approach and found a different solution that does not need the resize event to be called on load.
I have created a small KineticJS animation, which you can see at this address:
http://sandbox-ben.kimbiaservices.com/kineticjs/index.html
I would like to find a way for this animation to always be set to 100% of the window width. (It will be a "background" area for another element.)
I can do the initial set by setting the width to $(window).width() from jQuery (there are probably other ways of doing this, but jQuery will already be used), but I can't figure out how to redraw/reset the stage on resize or orientationchange.
So, is there a way to do any of the following to accomplish this:
Can I set the stage to a variable width somehow (100%)? (I'm assuming the answer is no, but even if it was yes, I'm not sure that the animation would be able to scale relatively anyway.)
Can I just clear the animation and recreate it on resize or orientationchange? This doesn't sound like it'd be terribly efficient, and when I tried to use layer.remove() on resize and orientationchange, it nearly hung the browser.
Or is there an easy way to convert this image to an SVG file and then use jQuery SVG instead to accomplish the same thing? (Provided that everything still works on resize and orientationchange.)
Or is there something else I'm not thinking of?
I think I found the solution. The problem with trying to detect .on('resize') is that the act of resizing a window causes the event to fire a zillion times, which drags the browser down.
Inspired by this answer: Detect when a window is resized using JavaScript ? -- I was able to create a jQuery event that detects (more or less) when the resize is completed. Once that's done, I empty the container element and refire the initial draw script. The code below does the trick:
$(window).on('resize',function(){
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function(){
$(this).trigger('resizeEnd');
},500);
});
$(window).on('resizeEnd orientationchange',function(){
$('#container').empty();
RunHeaderAnim();
});
How can I keep the browser from scrolling, or how can I make the browser continually scroll to a fixed posistion?
I am working on a library for the Nintendo 3DS browser. I made the page fit perfectly within the browser, but the up arrow makes it scroll because the bottom screen is the only window recognized as the visible area.
I want to make it so the div #bottomScreen is the only thing in the bottom screen, and disabling scrolling is the only thing I can think that would work.
I have figured out how to scroll it to a said position via
document.body.scrollTop = 220;
How can I make it continually go to this position?
Making a repeating timer with setTimeout and putting the above code in it won't work. I believe it is because this only works prior to the page loading.
Any advice on how to enforce it?
It should work even after page load. Here's the code, although i'm not sure what the intent of the code is, might be annoying to the user.
setInterval( function(){ document.body.scrollTop = 200 }, 500 ); // set your time
A more elegant solution would be to disable scrolling when that method is called (to scroll to the position of 220 from top or whatever), and re-enable it whenever the appropriate action has been taken by the user etc... jQuery example:
$('body').css('overflow', 'hidden'); // removes scrollbars entirely
$('body').css('overflow', 'auto'); // re-enable scrolling
Otherwise use setInterval() with a very short interval like 10ms to repeatedly fire your scroll function. If you are going to do this it would be wise to add some logic to see if the window is already scrolled to approximately the right position (allow for +/- 10px or something) so it isn't extremely jarring for the user.
The best way I've seen on some sites (like twitter I think or facebook when an image pops up) which is to set the overflow property to hidden on the body element. This prevents any scrolling so all you need to worry about is the position of content when you do that.
I guess you would need to wrap the content in some sort of container element and when you change the overflow of the body element you also set the y-coordinate of the container to reveal the specific area of the page being looked at.
This is by far the best thing I have seen to achieve that effect because it doesn't require timers etc.
You could add a event listener for the scroll event, and then set the position then.
I have a div in which there is a link. When a user takes the mouse pointer over the link, I call the basic_nav_mouseover() function which changes the background-image of the parent div. I have also added the function basic_nav_mouseout to the ommouseout attribute of the parent which should set the background-image of the parent div to none when the mouse pointer leaves the div. However, strangely, the function basic_nav_mouseout() is getting called as soon as the mouse pointer in leaving the link in the parent div. Here is a test page : http://spats.in/test/. Look at the links 'about' ,'people','connect' on the top right corner.
Where am I going wrong?
There's a really good explanation of the limitations of the mouseover and mouseout events in the jQuery docs (about half way down that page).
Mouseover and mouseout events trigger when you move the mouse over the bound element, as expected, but they also fire a separate event when you mouse over any inner elements within the parent element - this is obviously undesirable in most circumstances.
Basically, to fix your problem, use the mouseenter and mouseleave events instead.
From a user experience point of view, I'd encourage you to bind both events to the link, so that the special background colour actually indicates that the link is active - I think I'd find the effect you are trying to achieve quite misleading, because the highlighted background would make me think that I can still click the link, even though I cannot..
If you want to keep the visual effect you've current got (with a tall coloured area behind each link), make the link take up the whole box - i.e. 100% of the height and width of the div.
If onmouseover is set on the link, onmouseout should be set on the same element.
onmouseout gets triggered every time a child node is hovered over, you need to check the calling target.
http://www.quirksmode.org/js/events_mouse.html is a good resource.
I'm no javascript expert, but shouldn't you wait with binding the function to the event until the page is fully loaded? So:
window.onload = function(){
$('.item1').bind('mouseleave',basic_nav_mouseout);
};
Also (correct me if I'm wrong) I don't think you have to give the object as an argument in 'basic_nav_mouseout('.item1','red')', you can just use the 'this' keyword. So:
function basic_nav_mouseout(){
this.css('background-image',"none");
}
I don't know anything about the JQuery library though, my only (little) experience is with the Prototype library.