issue with resize() function, when growing widths - javascript

i have a fixed div on the right of window, what i want to do is when the user resize the window, i want this fixed div not to overlap with the other div by changing it's positioning, i managed to do that when resizing to smaller, but what i want, is when the user also resize the window for higher widths, i want that div to go back to the initial "fixed" state.
Here is the code sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function(){
var pos = $("#div").offset();
var fix = $("#fix").offset();
if(fix.left<950){
$('#fix').css('position','relative');
$('#fix').css('left',fix.left);
$('#fix').css('top',-fix.top);
var available = true;
}
var pos = $("div").offset();
var fix = $("fix").offset();
if(fix.left>950){
$('#fix').css('position','fixed');
$('#fix').css('right','100px');
$('#fix').css('top',fix.top);
}
});
});
</script>
</head>
<body style="margin:0;">
<div id="div" style="width:600px; height:200px; background-color:red; margin-left:300px;"></div>
<div id="fix" style="position:fixed; right:100px; height:100px; width:100px; background-color:yellow; top:100px;"></div>
</body>
</html>
Thanks every one in advance !

As I can see that the action takes place when your window is resized to less that a fixed value or resized to greater than the same value hence
I would Suggest you to use CSS3 Media Queries rather than Script for the Responsive/ Adaptive Web page design.
Please have a look at this
These do not process a lot, hence Light weight and most modern browsers and Devices support CSS3 hence a convenient and reliable Option.
Besides if you target old browsers and need to show rounded corners or other css3 properties not supported by old browsers you may have a look at the CSS3 PIE on the link: css3pie.com

Related

How to find page width in Opera 12 (for Desktop Windows)?

I want to access full page width & height in Opera. Note I am not asking about Viewport's height or width, I want page's/document's width & height. I am using Opera 12.12
I have tried the following:
document.body.scrollWidth/Height
document.body.offsetWidth/Height
window.innerWidth/Height
document.body.clientWidth/Height
And all of them gives viewport's width/height.
Please use the following link:
http://jsfiddle.net/RQhYR/
Or use the following HTML Page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div style="width:2000px;height:2000px;background-color: blue;"></div>
</body>
<script type="text/javascript">
alert(window.outerWidth + "," + window.outerHeight);
</script>
</html>
I'm getting the correct values from body.offsetWidth/Height, body.scrollWidth/Height and body.clientWidth/Height (using the same build as you). Only window.innerWidth/Height is supposed to return browser window viewport.
Maybe you've got some odd CSS that sets the dimensions of the body to the viewport and puts the scrollbar on an element somewhere inside. In your case, I'm getting the expected values of 2000 x 2000 px from the scrollWidth/Height of the <html>, see demo.
Try these on for size:
window.outerHeight;
window.outerWidth;
Thanks to Bergi I got the answer of my question. I have been doing some investigation about Page & Viewport sizes in different browsers and this is what I have found: Google Doc Spreadsheet

Relation between div position and DOCTYPE's effects

I have a div element that I'm trying, basically, to move wherever the user clicks on a canvas element.
I have a CSS style for the div setting the position to absolute, with an initial position (top,left).
I have javascript that captures the user's click event, and sets the div element's left and top to the location of the click, and set the text of the div.
My problem is that this worked fine before I set a DOCTYPE on the html file. Now the div stays in the same place, while displaying the new text, and I'm assuming the position issue is something to do with how I'm using CSS.
What's the right way to set the position of a div element? The html goes more or less like this:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#myDiv{
position:absolute;
top:100px;
left:835px;
}
</style>
</head>
<body><canvas id='canv'></canvas>
<div id='myDiv'>-</div>
</body>
</html>
Here's what the javascript looks like, which locates the div for me:
var theDiv = document.getElementById('myDiv');
theDiv.style.left = selShp.pinx; // selShp.pinx is the position of a shape object I've created, which is how I position the shape on the canvas
theDiv.style.top = selShp.piny; // piny is just the y position
Before setting a DOCTYPE, this worked beautifully on Chrome, Firefox, Safari mobile, and Opera. With it set, I can render to the canvas in IE9, but then the positioning of the div in all the browser stops working - just stays in the initial position.
I figured out my problem. My javascript for setting the new position went like this:
var theDiv = getElementByID(...)
theDiv.style.left = selShp.pinx; // selShp is the selected shape object, and pinx is x location (numeric) on canvas
theDiv.style.top = selShp.piny; // piny is y location on canvas (numeric)
This worked fine before I was using the doctype, because apparently the browser was fine with me just giving a number, but I had to change the code to this, and it works:
var theDiv = getElementByID(...)
theDiv.style.left = selShp.pinx.toString() + 'px';
theDiv.style.top = selShp.piny.toString() + 'px';
Stupid, rookie mistake, I guess. My understanding of the solution is, standard HTML requires you to set the left and top as strings, with units specified.
The real problem begins with not using a doctype. A doctype is required of all modern web pages to keep the browser out of 'quirks mode'. In that case, the box model is different than it should be using current web standards. You should read about quirks on Wikipedia or Google for it.

Put the bar of the scroll bar on the bottom

I want a css attribute or sort of thing that puts the bar of a scroll bar on the bottom, euh, a div with fix height and width, shows a text, but the text is too big and wrapped into this div, so a scroll bar appears but the bar is in the top, I want it to appears on the bottom, did you understand me? if so, please just say how.
Regards.
If you can use Javascript, I found this handy little snippet: http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html So, you'd have a div object somewhere on your page and have it call your scroll to bottom function onload:
<html>
<head>
...
<script>
function scroll_to_bottom(){
var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;
}
</script>
...
</head>
<body>
...
<div id="divExample" onload="scroll_to_bottom();"></div>
...
</body>
</html>
Now, I'm not sure if that is browser specific or not, but give it a shot and see what happens. Let me know if it works or if you have problems.
UPDATE: It looks like all browsers support scrollTop, and all but the earlier versions of IE support scrollHeight. http://www.quirksmode.org/dom/w3c_cssom.html#elementview

Safari inserts an odd object into the DOM when shrinking window that messes up jQuery's position() results

in developing a more complicated script I am having a rather odd problem with Safari. I use 5.0.5 Win if it matters. I rely on jQuery's position().left when the browser window gets resized to reposition a position:fixed element. Depending on wether the window is being enlarged or shrinked I get different results for position().left though because of some odd element being rendered by Safari at that moment (and only at that very moment).
I wrote a demo page that shows the problem.
Load the source below in Safari in windowed mode and shrink the window a bit. The alert will make things freeze so that you will see the the odd element that troubles me in the top left corner of the document.
What on earth is that, where does it come from and how do I get around it?
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<style type="text/css">
#test{
width:500px;
height:2000px;
margin: 0 auto;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
// <![CDATA[
function resizeWindow( e ) {
alert($('#test2').position().left);
};
$(window).bind("resize", resizeWindow);
// ]]>
</script>
</head>
<body>
<div id="test"><div id="test2">Something
</div></div>
</body></html>
I figured out what to do to make this stop: Explicitly setting the body's width to 100% by css does it. What the odd element is and why it is injected without this in the first place, I still have no idea though.
body {
width:100%;
}
This solution inevitably adds a horizontal scroll bar. So I added a class
body.safariFix
{
width:100%;
}
and assign that by JS before getting the values I need and afterwards I remove it again.
if ($.browser.webkit) $('body').addClass('safariFix');
...
if ($.browser.webkit) $('body').removeClass('safariFix');
The browser detection part was added because doing this caused an infinite loop in MSIE. This is inside the resize event handler after all and removing / adding the class lets MSIE fire the resize event.
I'm not using feature detection because I don't know which feature to detect for spotting this. Detecting the odd display object would be nice but I did not look into that further.

How to auto-size an iFrame? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Resizing an iframe based on content
I'm loading an iFrame and want the parent to automatically change the height based upon the height of the iFrame's content.
To simply things, all pages belong to the same domain, so I shouldn't run into cross-site scripting issues.
On any other element, I would use the scrollHeight of the DOM object and set the height accordingly. I don't know if this would work on an iframe (because they're a bit kooky about everything) but it's certainly worth a try.
Edit: Having had a look around, the popular consensus is setting the height from within the iframe using the offsetHeight:
function setHeight() {
parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}
And attach that to run with the iframe-body's onLoad event.
Try:
jquery-iframe-auto-height
iframe-resizer
I just happened to come by your question and i have a solution. But its in jquery. Its too simple.
$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );
There you go!
Cheers! :)
Edit: If you have a Rich Text Editor based on the iframe method and not the div method and want it to expand every new line then this code will do the needful.
Here is a dead simple solution that works on every browser and with cross domains:
First, this works on the concept that if the html page containing the iframe is set to a height of 100% and the iframe is styled using css to have a height of 100%, then css will automatically size everything to fit.
Here is the code:
<head>
<style type="text/css">
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>
<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.externaldomain.com/" style="width:100%;height:100%"></iframe>
</body>
This solution worked best for me. It uses jQuery and the iframe's ".load" event.
In IE 5.5+, you can use the contentWindow property:
iframe.height = iframe.contentWindow.document.scrollHeight;
In Netscape 6 (assuming firefox as well), contentDocument property:
iframe.height = iframe.contentDocument.scrollHeight
I found the solution by #ShripadK most helpful, but it does not
work, if there is more than one iframe. My fix is:
function autoResizeIFrame() {
$('iframe').height(
function() {
return $(this).contents().find('body').height() + 20;
}
)
}
$('iframe').contents().find('body').css(
{"min-height": "100", "overflow" : "hidden"});
setTimeout(autoResizeIFrame, 2000);
setTimeout(autoResizeIFrame, 10000);
$('iframe').height($('iframe').contents().find('body').height() + 20) would set
the height of every frame to the same value, namely the height of the content of the first frame.
So I am using jquery's height() with a function instead of a value. That way the individual
heights are calculated
+ 20 is a hack to work around iframe scrollbar problems. The number must be bigger than the size of a scrollbar. The hack can probably
be avoided but disabling the scrollbars for the iframe.
I use setTimeout instead of setInterval(..., 1) to reduce CPU load in my case
My solution, (using jquery):
<iframe id="Iframe1" class="tabFrame" width="100%" height="100%" scrolling="no" src="http://samedomain" frameborder="0" >
</iframe>
<script type="text/javascript">
$(function () {
$('.tabFrame').load(function () {
var iframeContentWindow = this.contentWindow;
var height = iframeContentWindow.$(document).height();
this.style.height = height + 'px';
});
});
</script>
Oli has a solution that will work for me. For the record, the page inside my iFrame is rendered by javascript, so I'll need an infinitesimal delay before reporting back the offsetHeight. It looks like something along these lines:
$(document).ready(function(){
setTimeout(setHeight);
});
function setHeight() {
alert(document['body'].offsetHeight);
}
This is the easiest method i have found using prototype:
Main.html:
<html>
<head>
<script src="prototype.js"></script>
<script>
function init() {
var iframe = $(document.getElementById("iframe"));
var iframe_content = $(iframe.contentWindow.document.getElementById("iframe_content"));
var cy = iframe_content.getDimensions().height;
iframe.style.height = cy + "px";
}
</script>
</head>
<body onload="init()">
<iframe src="./content.html" id="iframe" frameBorder="0" scroll="no"></iframe>
<br>
this is the next line
</body>
</html>
content.html:
<html>
<head>
<script src="prototype.js"></script>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="iframe_content" style="max-height:200px;">
Sub content<br>
Sub content<br>
...
...
...
</div>
</body>
</html>
This seems to work (so far) in all the major browsers.
My workaround is to set the iframe the height/width well over any anticipated source page size in CSS & the background property to transparent.
In the iframe set allow-transparency to true and scrolling to no.
The only thing visible will be whatever source file you use. It works in IE8, Firefox 3, & Safari.
Actually - Patrick's code sort of worked for me as well. The correct way to do it would be along the lines of this:
Note: there's a bit of jquery ahead:
if ($.browser.msie == false) {
var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}

Categories