I know, this thing has been asked like 2 trillion times, but i cannot still get done. the iframes are generated dynamically inside the source which I get from external feed.
my jquery is:
$(function(){
$('iframe').each(
function(index, elem) {
elem.setAttribute("width","250");
}
);
});
this code is not being able to set the width of iframe.
and one more thing: I inspected the iframe attributes, and there are NOT editable in browser unlike other css style - which means, my jquery cannot also set it after DOM is ready
what the heck? is there any workaround for this?
$('iframe').each(function(){
$(this).width(250);
});
Docs: http://api.jquery.com/each/ and http://api.jquery.com/width/#width-value
Use .attr, not .setAttribute.
Works for me with
$('iframe').each(function(){
$(this).width( w );
});
http://jsfiddle.net/8e1gz475/
There is a very simple way of assigning "width or height" to any element at run-time, and that's using ".width() and .height()" method of jQuery.
Refer:
http://api.jquery.com/width/
http://api.jquery.com/height/
Here is an example:
<script type="text/javascript">
$(document).ready(function () {
$("iframe").width(500);
$("iframe").height(500);
});
</script>
Example : Regular iframe without updating height and width at run-time.
Example: When you update height and width at run-time.
Here is another stackoverflow question for iframe width where you can find good explanation in the answer if you are using multiple iframes :
Change iframe width and height using jQuery?
try:
$(function(){
$('iframe').each(
function(index, elem) {
elem.css({ "width":"250px !important" });
}
);
});
Related
I wonder why my resizable() jQuery UI function doesn't work on my img.
http://impress-builder.herokuapp.com/home
here is the code: https://github.com/lipenco/impress.js-app
function setResizable(){
$( ".resizable" ).resizable();
}
$(document).on('click', 'img', function(event){
$(this).addClass('resizable');
$(this).css("position" ,"absolute")
setResizable();
return false;
});
Are you sure that you can resize an image directly ? I suggest wrapping it in a div.
http://jsfiddle.net/8VY52/
You can create a div on the fly. Ho, also, you must set the div style="display:inline-block"
I cannot be able to find error in it. but if you can provide me the exact reference as to where is the exact code written on to the page as I cannot be able to explore code on the webpage you referenced. Please elaborate more for help.
Example : $(document).find('.resizable').resizable();
Or directly on to the page through browser Console.
Here's a jsfiddle code with static element : http://jsfiddle.net/coolshivster/eUKhA/
Try Resolving it by placing your jQuery-ui file on to the head or before img.js
I've got a form which contains some hidden fields that are only shown depending on the answer to a Yes/No radio button question.
This form is used on multiple external website using an iframe, therefore are on a different domain.
How can I change the height of the iframe depending on if these hidden field are shown or not. The way they are shown/hidden is using jquery show/hide in a separate scripts.js file. E.g
$('#show').click(function(){
$('#additional_fields').show('fast');
});
$('#hide').click(function(){
$('#additional_fields').hide('fast');
});
<div id="additional_fields" style="display:none;"> hidden fields here
</div>
iframe that contains the above:
<iframe id="idIframe" src="http://websites.com/form.php" scrolling="no" height="1000" width="950" border="0"/>
UPDATE
Ive managed to get it to work using the following
$("#idIframe", top.document).css({ height: 1750 });
however, this only works when using the same domain.
you will need to use the context option in order to call up to the frameset.
$('#show').click(function () {
$('#additional_fields').show('fast');
$("iframe",window.document).height(150);
});
$('#hide').click(function () {
$('#additional_fields').hide('fast');
$("iframe",window.document).height(0);
});
The reason for this is by default Jquerys context is set to the document of the current frame, so you need to set the context manually.
Give an ID to your iframe and use the jQuery height function:
$('#show').click(function(){
var newHeight = $("#idIframe").height() + 50;
$("#idIframe").height(newHeight);
$('#additional_fields').show('fast');
});
$('#hide').click(function(){
var newHeight = $("#idIframe").height() - 50;
$("#idIframe").height(newHeight);
$('#additional_fields').hide('fast');
});
Demonstrating how to change the height of the iframe:
http://jsfiddle.net/aZxRn/
$('#show').click(function () {
$('#additional_fields').show('fast');
$("#idIframe").height($("body").height());
});
$('#hide').click(function () {
$('#additional_fields').hide('fast');
$("#idIframe").height(0);
});
The only way, I believe, is to use postMessage (https://developer.mozilla.org/en-US/docs/DOM/window.postMessage) to send the height of the content to the parent window.
The thing is that the parent page would need to listen to the message, so this will work only if you have some control over it.
I've written an example that resizes an iframe while animating it's content. I think you should find your solution in my code:
http://algorhythm.de/tools/resizeable-iframe/
My solution is also only working if you are using the same domain for parent and iframe. It's because of the same origin policy: http://en.wikipedia.org/wiki/Same_origin_policy
I understand there has been a lot of discussion on this but I have yet to find a solution to fix my needs. Basically I need to autogrow a text area not when you type but on load. I am pulling in content from a database and dependant on the user's settings an overlay is produced over the text area, but upon doing this the text areas are not scrollable therefore I need to autosize these to show all the text.
I have tried scrollHeight but this is not working great as there are multiple text boxes on the screen
Thanks
Try this
$("textarea").height( $("textarea")[0].scrollHeight );
DEMO
UPDATE
As a hack to make it work in older IE-s just add a really short delay before executing it
window.setTimeout( function() {
$("textarea").height( $("textarea")[0].scrollHeight );
}, 1);
DEMO
UPDATE FOR MULTIPLE TEXTAREAS
$("textarea").each(function(textarea) {
$(this).height( $(this)[0].scrollHeight );
});
This worked for me; it loops through all "textarea" elements on page Ready, and set their height.
$(function () {
$("textarea").each(function () {
this.style.height = (this.scrollHeight+10)+'px';
});
});
You can also combine it with an auto-expand function, to make it fully dynamic while writing as well:
function autoresize(textarea) {
textarea.style.height = '0px'; //Reset height, so that it not only grows but also shrinks
textarea.style.height = (textarea.scrollHeight+10) + 'px'; //Set new height
}
and call that from an "keyup" event or through jQuery:
$('.autosize').keyup(function () {
autoresize(this);
});
Note how I am adding 10px to the scroll height: here you can adjust the amount of space you would like the bottom of the text area to give the user.
Hope that helps someone. :)
Edit: Changed answer according to #Mariannes comment.
you can use this. It works for me.
$('#content').on('change keyup keydown paste cut', 'textarea', function () {
$(this).height(0).height(this.scrollHeight);
}).find('textarea').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<textarea>How about it</textarea><br />
<textarea>111111
222222
333333
444444
555555
666666</textarea>
</div>
You mentioned there are multiple textboxes. This code will set the height of each textarea according to its own contents.
$(document).ready( function( ) {
$("textarea").each( function( i, el ) {
$(el).height( el.scrollHeight );
});
});
Fiddle here
Alternatively, you could use an editable div in HTML 5.
Reference : http://www.w3.org/TR/2011/WD-html5-20110525/editing.html#contenteditable
This is an workaround.. and maybe an alternative solution:
$('textarea').each(function(){
var height = $('<div style="display:none; white-space:pre" id="my-hidden-div"></div>')
.html($(this).val())
.appendTo('body')
.height();
$(this).css('height',height + 'px');
$('#my-hidden-div').remove();
});
You can see a demo here http://jsfiddle.net/gZ2cC/
The solution of Tormod Haugene worked for me.
But my textareas where in an accordion and apparently it only worked if the textarea was visible on page load. The accordion items are triggered by clicking on elements with the class "title".
So I adapted the code Tormod Haugene to work inside accordion contents, that are set to display: none on page load.
Maybe this is useful for someone else in this situation:
jQuery(document).on('click', '.title', function () {
jQuery("textarea").each(function () {
this.style.height = (this.scrollHeight+10)+'px';
});
});
I am in need a cross-browser jQuery solution for revealing elements on a HTML page with jQuery, the elements are loaded on page load, however i want to have the ability to scroll the page to "fadein" elements.
Is there an existing plugin with this functionality ?
NOTE: loading of the data is not required, and google has failed me thus far.
$(window).scroll(function(){
if ($(document).height() - $(window).height() < 20)
{
var content = 'hi'; //you can use a AJAX call to get content
$('#DivToAppendContentTo').append('content');
}
});
I've used this in the past. Read over and see if it works for you. There is a Demo at the bottom and you'll need to modify the code slightly to add your fade in. Be sure to give your element a CSS style of Hidden so that it is first not seen on the page. The jQuery fade in function will take display it.
Ariel Flesler's ScrollTo:
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Here you go, a plugin can do that easily!
http://scrollrevealjs.org/
I have a div that I want to scale. I am using the jQuery-UI resizable option for this, but it isnt resizing the children, why?
This is the code I use to instantiate it:
$(this).resizable({
alsoResize: $(this).find('*'),
});
The code is deep inside an app so I created a fiddle that should contain the important parts:
http://jsfiddle.net/EnK4R/6/
This works with the image tag: http://jsfiddle.net/EnK4R/12/ I just cant figure out why the '*' selector wont work
here you go. this doesnt seem to resize whole document, checkout the fiddle at bottom
var init = function(){
$(this).resizable({
alsoResize: '#'+$(this).attr('id')+' *'
});
}
init.call($('#window'));
this keeps the code almost as short as yours, and it will work with what ever gets chucked into the init call. enjoy :)
http://jsfiddle.net/EnK4R/4/
first of all fix the window class selector: change it from .window to #window. And use selector string for alsoResize option:
$('#window').resizable({
alsoResize: '#window *'
});
fiddle: http://jsfiddle.net/1stein/EnK4R/