I have found the following code for resizing the textareas to extend according to the content.
$(document).ready(function() {
$(".content").on("keyup",function(){
var h = $(this).height();
$(this).css("height","0px");
var sh = $(this).prop("scrollHeight");
var minh = $(this).css("min-height").replace("px", "");
$(this).css("height",Math.max(sh,minh)+"px");
});
});
The code works well, but the textareas extend only after selecting them and making a change.
I would like them to extend on the page load already.... Any ideas?
Thank you!
Try this:
$(document).ready(function() {
var $content = $('.content');
$.each($content, resize);
$content.on("keyup", resize);
function resize(){
var h = $(this).height();
$(this).css("height","0px");
var sh = $(this).prop("scrollHeight");
var minh = $(this).css("min-height").replace("px", "");
$(this).css("height",Math.max(sh,minh)+"px");
}
});
Related
i'm new to Jquery and it doesn't look efficient copying the same code in two functions.
Is it possible to make this function more efficient?
By efficient i mean shrinking the code.
What it does is, changing the size of an ID element when it will be resized.
Why i need copy it twice? When i leave the code inside .resize and remove the other inside .ready, the elements will have unset sizes.
It works like i would have it working, but the problem is it doesn't look "clean".
I'm using latest Jquery.
$(document).ready( function() {
var files = ["home.html","test.html","random.html","noob.html"];
var a = 0;
var wh = $(window).height();
var ww = $(window).width();
var btn_n = $("#btn_nav button");
btn_n.height(ww*0.05);
btn_n.width(ww*0.12);
$(window).resize(function() {
var wh = $(window).height();
var ww = $(window).width();
var btn_n = $("#btn_nav button");
btn_n.height(ww*0.05);
btn_n.width(ww*0.12);
});
});
Just move the code you want to run in multiple places into a function, then call it on document ready, and on resize events.
$(document).ready( function() {
var files = ["home.html","test.html","random.html","noob.html"];
var a = 0;
function layout() {
var wh = $(window).height();
var ww = $(window).width();
var btn_n = $("#btn_nav button");
btn_n.height(ww*0.05);
btn_n.width(ww*0.12);
}
layout();
$(window).resize(layout);
});
Put the logic into a named function - then call it on page load and then again on window resize.
$(document).ready( function() {
updateSizes();
var files = ["home.html","test.html","random.html","noob.html"];
var a = 0;
$(window).resize(updateSizes)
function updateSizes(){
var wh = $(window).height();
var ww = $(window).width();
var btn_n = $("#btn_nav button");
btn_n.height(ww*0.05);
btn_n.width(ww*0.12);
}
});
I am building a wordpress site which has a modal overlay for a particular button.
I have the following code for the modal
HTML
<div class="lightbox" id="send-contact-det">
(Content here)
</div>
Javascript
jQuery('.open-lightbox').click(function() {
var link = jQuery(this).attr('href');
jQuery('.overlay').fadeIn();
jQuery(link).fadeIn();
return false;
})
jQuery('.lightbox .close, .overlay').click(function() {
jQuery('.overlay').fadeOut();
jQuery('.lightbox').fadeOut();
})
jQuery('.lightbox').each(function() {
var lW = $(this).outerWidth();
var mrgL = lW / 2;
var lH = $(this).outerHeight();
var mrgT = lH / 2;
jQuery(this).css({'margin-left': -mrgL, 'margin-top': -mrgT})
})
Now this works perfectly on all my pages, except on the Search Page - where the content is being loaded dynamically.
I have tried the .live() and .on() functions, but in vain. Have been at this for a few hours now.
Any help is much appreciated.
I fixed it by using the following workaround. It is working right now.
If anyone has a better way, let me know.
$(document).on('click', '.open-lightbox', function()
{
var link = jQuery(this).attr('href');
jQuery('.overlay').fadeIn();
jQuery(link).fadeIn();
return false;
});
$(' .lightbox .close, .overlay').click(function() {
jQuery('.overlay').fadeOut();
jQuery('.lightbox').fadeOut();
})
$('.lightbox').each(function() {
var lW = jQuery(this).outerWidth();
var mrgL = lW / 2;
var lH = jQuery(this).outerHeight();
var mrgT = lH / 2;
jQuery(this).css({'margin-left': -mrgL, 'margin-top': -mrgT})
})
Fixed it just perfect! :)
I've been wondering how I could get this code for custom tumblr photoset sizes to work with infinite scrolling
<script type="text/javascript">
/* Photoset Resize Code by Kevin - EXCOLO.TUMBLR.COM */
$(document).ready(function() {
function photosetResize() {
$('iframe.photoset').each(function(){
var newSize = 200;
var newSrc = $(this).attr('src').replace('500',newSize);
$(this).attr('src', newSrc).width(newSize);
var high = $(this).css('height');
var calculate = parseInt(high, 10)* newSize/500;
$(this).css('height', calculate);
});
}
photosetResize();
});
</script>
I think you would need to modify it to accept a jQuery object / collection:
$(document).ready(function() {
var $iframes = $('iframe.photoset');
function photosetResize($iframes) {
$iframes.each(function(){
var newSize = 200;
var newSrc = $(this).attr('src').replace('500',newSize);
$(this).attr('src', newSrc).width(newSize);
var high = $(this).css('height');
var calculate = parseInt(high, 10)* newSize/500;
$(this).css('height', calculate);
});
}
photosetResize( $iframes );
});
You will need to find the new photosets when infinite scroll has completed via its callback.
var $newIframes = $(arrayOfNewElems).find($iframes.selector);
Hope that helps!
When i resize the window, the window.innerwidth doesn't update. I dont want to use jQuery.
var page = window.innerWidth;
var content = document.getElementById("content");
content.style.width = page - 300 + "px";
i tried:
window.addEvent("resize", function() {
console.log(window.getCoordinates().width);
});
with no avail​
Edit: But that still doesn't fix the window.innerwidth not changing on resize
It should rather be:
window.addEventListener("resize", function() {
console.log(window.innerWidth);
});
This code works in my browser:
<script>
window.onresize = function() {
var widthWin = window.document.body.clientWidth;
console.log(widthWin);
}
</script>
window.onresize = function(event) {
console.log(window.innerWidth);
};
But it will be called only after resizing is completed.
I have this in the footer, so when all content loads. The alert gives the correct result but when I apply that same var to the height of the #'container doens't work.
$(document).ready(function() {
var original_height = $("#container").height();
var newDistance = $(".detta .content").outerHeight(true);
var total = original_height + newDistance;
alert(total);
$(".detta .box").animate({top: newDistance});
$("#container").height(total);
});
container doens't have any set height in the css.
What am I doing wrong?
Instead this :
$("#container").height(total);
try this :
$("#container").css("height",total);
Good- Luck !
$(function() {
var original_height = $("#container").height();
var newDistance = $(".detta .content").outerHeight(true);
var total = original_height + newDistance;
$(".detta .box").animate({top: newDistance}, function(){
$("#container").height(total);
});
});
bingo! the new container height had to be triggered, so i just apply it after box animation happens