Using this code to toggle the width of <div class="artists"></div> will freeze the browser on an iPad. Is there a work around for this? I use the latest jQuery
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script>
$("a:nth-child(4)").click(function () {
$(".artists").animate({width:'toggle'},0);
$('.blur').toggleClass('blurbody');
});
</script>
It works correctly on a normal computer browser, just not on an iPad (Chrome or Safari). You can view the site at saint57records.com and click on the artists icon on the left.
You can use the following jquery function after your selection:
$("#targetElement").toggle();
Since you wish to change between invisible and 100% width, this should work !
To toggle the width you should so something like this:
<script>
$("a:nth-child(4)").click(function () {
var targetWidth = (someBoolean) ? '100px' : '300px';
$(".artists").animate({width:targetWidth},0);
$('.blur').toggleClass('blurbody');
});
</script>
On my magento homepage, I have a section where I have 3 image collages stacked on top of each other.
I'd like it so that each "collage"/div dynamically resizes its height to that of the browser you opened it in, so that as you scroll down, each one fits the window perfectly.
I tried:
<script type="text/javascript">
$(window).resize(function() {
$('#universe1').height($(window).height() - 46);
});
$(window).trigger('resize');
</script>
and make each div id'd "universe1" but that didn't seem to do the trick.
Any ideas?
Use jquery's .on() method to attach your event handler.
<!-- HTML -->
<div class="universe">1</div>
<div class="universe">2</div>
<div class="universe">3</div>
// jQuery
$(window).on('resize', function() {
$('.universe').height($(window).height() - 46);
});
$(window).trigger('resize');
Working example: http://jsbin.com/IFEPEkaY/1/
Also make sure you're using classes as in the example above, NOT ids like in your code. If you use ids, only the first one will go full screen. If you MUST use ids (this is ugly) the simplest thing is to do this:
<!-- HTML -->
<div id="universe1">1</div>
<div id="universe2">2</div>
<div id="universe3">3</div>
// jQuery
$(window).on('resize', function() {
$('#universe1').height($(window).height() - 46);
$('#universe2').height($(window).height() - 46);
$('#universe3').height($(window).height() - 46);
});
$(window).trigger('resize');
Working example: http://jsbin.com/eboXAXEq/1
I set the javascript window.onresize event to run other functions that fit div's size with the body's size. The problem is that when the screen is resized by adding a comment (using disqus), the divs whose sizes are supposed to fit with the new body's size, don't fit. I mean onresize function isn't being ran.
As you can see, the right side div doesn't grow as comments are being added (see the border). Do you have any idea about how make onresize event work?
PS: When I open developer tools on firefox, the div is resized, I don't know why, but the onresize event is ran. Only in this situation.
Edit: Tried to run this jquery script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>
$(document).resize(function(){
tamanho_barra();
});
</script>
But, isn't working yet. I've tried to change the "document" to a random div and see if something would happen, but nothing. I have no idea about what is the problem. Could you help me please?
Edit2: Working now with rcabral's help. He told me to add a background image to the content which is a black point of 1px and repeat it until the bottom of the page.
#content { background:url('<?php bloginfo('template_directory'); ?>/images/gray_dot.gif') 634px 0px repeat-y; }
Your script isn't run automatically. You must include it inside a function that is run when the DOM is ready: $(document).ready(function() { here }); or $(function() { here });
For example:
<script>
$(function() {
$(window).resize(function(){
$("#barra").tamanho_barra();
});
});
</script>
And your code has a few errors:
1. You are using two opening parentheses after "resize" instead of just one.
2. And you should select window instead of document for the resize function.
I hope that helps.
There's a jQuery plugin that will let you target the container element that Disqus is running in.
Here's a demo: http://jsfiddle.net/hansvedo/S3R7w/
Here's the plugin: http://benalman.com/projects/jquery-resize-plugin/
And here's the syntax:
$('div#disqus-container').bind('resize', function(){
// your code
});
How can scroll be prevented after scrollTop reaches certain value say 150.
$(window).scroll(function() {
if($(window).scrollTop() >=50)) {
return false; // basically don't scroll
}
});
the .scrollTop set the scrollHeight using scrollTo function. It doesn't scroll from x to y, It just goes to y.
So basically you cannot stop the scroll as your event will be called after it is set to y. You can probably set the desired scrollHeight inside the handler after comparing the height.
if($(window).scrollTop() >=50)
{
$(window).scrollTop(0);
}
Note: using it on an element is bearable, but on window object will be annoying to the user. Above is just to show how it works.
Try scrolling in >> http://jsfiddle.net/KwgMj << and see how annoying it can be.
$(window).scroll(function(e) {
if($(window).scrollTop() >=50)) {
$(window).scrollTop(50)
}
});
Apart from the obvious question; why would you want this?
I would suggest another approach.
Have a wrapper which fills the entire window, have a certain height and use overflow-x: hidden in css.
This may and may not be what you're after though.
If you wish to make a continuing site that allows you to keep scrolling for the next step, I'd suggest you to simply .slideDown() relevant content.
The scroll is a really basic function which shouldn't be modified with for no good reason.
EDIT:
For a ipad specific solution, use a wrapper:
<? if (strpos($_SERVER['HTTP_USER_AGENT'],'iPad')): ?>
<!-- If iPad, add style -->
<style type="text/css">
div#wrapper {
height: 100%;
overflow: hidden;
}
</style>
<? endif; ?>
<body>
<div id="wrapper">
<!-- Content here -->
</div>
</body>
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);
}