I currently have a fadein/out of a hidden div when a checkmark is checked. I would like to also increase the appropriate div height as well and then remove the same height after the check mark is unchecked. This some snippets of my current code:
<script type="text/javascript">
$('.checkTax').change(function() {
if ($(this).attr("checked")) {
$('.prorateTax').fadeIn();
return;
}
$('.prorateTax').fadeOut();
});
</script>
The div whos height needs to be adjusted is: .article.prorate . I've tried a few suggestions online and so far nothing is working. If other information is needed to provide a adequate response please let me know.
Edit:
After the various answers I modified the code according to a couple of suggestions and ended up with (which worked perfectly):
<script type="text/javascript">
$('.checkTax').change(function() {
if ($(this).attr("checked")) {
$('.prorateTax').fadeIn();
$('article.prorate').css( "height", "+=100px" );
}
else
{
$('.prorateTax').fadeOut();
$('article.prorate').css( "height", "-=100px" );
}
});
</script>
I appreciate everyones help and if I could select more than one green checkmark, I would. Several suggestions given would have worked. I cannot also upvote/downvote as I do not have enough reputation.
To increase height by getting current height of the element you can do this way:
$(selector).css( "height", "+=20px" );
$(selector).height( $(selector).height() + 20 );
You can also use the more simpler jQuery method .height();
<script type="text/javascript">
$('.checkTax').change(function() {
if ($(this).attr("checked")) {
$('.prorateTax').fadeIn().height(20);
return;
}
$('.prorateTax').fadeOut().height(0);
});
I see You are using jQuery . For manipulating height use :
$('selector').css('height', your_value);
Related
I was following this tutorial, trying to get my sites navigation bar to stick to the top of the page when it reaches the top of the page. I couldn't get it to work with the way they had it set up, so I tried to set it up in a different way and still can't get it to work. I put this code at the end of my body tag to try and make this work (the navigation bar has a css id of "navbar"):
jQuery
if ($document).scrolltop() > 132){
$("#navbar").css("position", "fixed");
$("#navbar").css("top", "132px");
}
else{
$("navbar").css("position","static");
}
Is there something I am missing?
Thanks in advance,
Bradon
Edit:
I want to thank everyone for the quick replies, and apologize as I am both new to javascript and stackoverflow. I have tried to implement some of the solutions suggested and here is what I have now:
<script type="text/javascript">
var navbar = $("#navbar");
navbar.on("scroll", function(e){
if (navbar.scrollTop() <= 0){
navbar.css("position", "fixed");
navbar.css("top", "0px");
}
else{
navbar.css("position","static");
}
});
</script>
I still can't get it to work properly.
Edit 2:
I would like to thank everybody for their help, I couldn't have figured it out without you guys. Here is the code I used if anybody should ever need it:
<script type="text/javascript">
var navbar = jQuery("#navbar");
jQuery(document).on("scroll", function(e){
if (jQuery(document).scrollTop() > 280){
navbar.css("position", "fixed");
navbar.css("top", "0px");
}
else{
navbar.css("position","static");
navbar.css("top", "auto");
}
});
</script>
this script assumes the thing you want stuck to the top has a class of "navbar". My problem was that wordpress wasn't accepting $ in jquery so I replaced it with jQuery. Thank-you once again everybody!
There is a bigger issue in that your scrolltop check is happening only once, while the page is loading. In the original tutorial, the code that checks the scrolltop is set to execute everytime a scroll event occurs:
wrap = $('#wrap');
wrap.on("scroll", function(e) {
if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}
});
The "wrap.on('scroll')" part is very critical because this will cause the "scrolltop" value check to be triggered whenever the div is scrolled.
I believe the syntax is wrong. Missing parenthesis on document.scrollTop and also missing the # sign on navbar.
<script type="text/javascript">
if ( $(document).scrollTop() > 132){
$("#navbar").css("position", "fixed");
$("#navbar").css("top", "132px");
}
else{
$("#navbar").css("position","static");
}
</script>
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" });
}
);
});
I'm having slight problem with my jquery code. I'm new to Jquery, so please help me improve my code. Well I'm trying to hide and show this 4 images. Let me elaborate it a bit:
I created this 4 images (put side by side)
When one clicked it should expand and hides the other
When the expanded click it should return to its normal dimension and shows the other
Then it should be repeated
My code seems to work on the first go, but it messes up on the second run (the images doesn't behave like what i envision them to behave)
Here is my code:
http://codepen.io/sallyiee/pen/onkKs
You can simplify your code with toggleClass and toggle metods:
$(".showcase" ).on("click", "img", function(e) {
$(this).toggleClass("expand");
$(this).siblings().toggle("fast");
});
Demo: http://codepen.io/anon/pen/mlBEI
Try
$(".showcase img" ).click(function(e) {
if( $(this).hasClass('expand')) {
$(this).removeClass("expand").addClass("normal").show("fast");
$(this).siblings().show("fast");
} else {
$(this).addClass("expand").removeClass("normal");
$(this).siblings().hide("fast");
}
});
http://codepen.io/tamilcselvan/pen/HpbiK
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';
});
});
first off i am a beginer in coding so please bear with me. i have several images on a page forming a navigation bar that will be animated. i am trying to move an element based on what element is moused over. all the images have unique ids and share common names, ie the names for the home icons are "home" and "homeShad". the idea is when you mouse over home, homeShad will move and being as i have several links im trying to slim my code down. this has led me to here and what im trying to do
$.reset = function() {
$(this + 'Shad').animate({
left: '+=100'}, 300)
$('#home').mouseenter(function() {
$.reset
})
this doesnt work so i tried this
$.reset = function() {
$('#'+ $(this).attr("id")+" shad").animate({
left: '+=100'}, 300)
and still no joy.
('#home').click(function() {
alert('#'+ this.id + 'shad')
})
this managed to get the alert to show "#homeShad" exactly what im looking for when i tried to animate it there was no joy
hopeing some one can help and i am sorry if i made any mistakes in posting here
Check out this fiddle: http://jsfiddle.net/eVDe3/
Hope this answers your question!
Your code should have been:
$('#home').click(function() {
$('#'+this.id+'Shad').animate({
left: '+=100'
},300);
});
EDIT: If you want to call it by a function, you have to pass $(this).id. Check this updated fiddle here: http://jsfiddle.net/eVDe3/1/
Here's the corresponding code:
function reset(id) {
$('#'+id+'Shad').animate({
left: '+=100'
},300);
}
$('#home').click(function() {
reset($(this).attr('id'));
});
I see that you have set the "homeShad" id for the icon, but you used "shad" at points you have mentioned.
I don't know you are aware of that or not, but ids and classes are case-sensitive,
so you should write like below:
$.reset = function() {
$('#'+ $(this).attr("id")+" Shad").animate({
left: '+=100'}, 300)
};