slideToggle hidden height not zero - javascript

I'm currently grabbing #rightDesc's height in jQuery and using it to decide #rightHistory's height, both of which are divs.
$('#rightHistory').height($('#rightMiddleCenter').innerHeight() - $('#rightDesc').outerHeight() - $('#rightDescToggle').outerHeight());
The layout is below:
<div id="rightMiddleCenter">
<div id="rightDesc">
</div>
<div id="rightDescToggle">
Toggle Descriptions
</div>
<div id="rightHistory">
</div>
</div>
CSS:
#rightMiddleCenter{
float:left;
height:100%;
width:260px;
}
#rightDesc{
padding:0 0 10px;
}
#rightDescToggle{
padding:5px 5px 5px 0;
cursor:pointer;
}
#rightHistory{
}
I've now decided to make #rightDesc toggleable with slideToggle, but when it's hidden jQuery still returns its full height. This results in #rightHistory's height not changing and not taking up the amount of space it should.
Can anyone suggest a solution? Any help would be greatly appreciated.

When you use the visibility:hidden or display:noneway of hiding an element, the height and width of the element aren't changed, it just ain't visible.
edit:
I suggest using custom data attributes for your specific action and use those for your height-width usage. Or just build your calculation a bit different and check if an element is visible or not, that way substituting the height and width with 0.

Related

zero height textarea is not zero pixels high

I'm trying to make collapsible widgets in a side panel on my page. For the most part it works fine. I'm able to set the height of child div's to 0px with a transition, and they disappear.
However, I've found that a textarea will not collapse completely. When I set the height of the textarea to 0px it seems to transition like the other div's, but it still appears to occupy more space then 0px high.
The html is like this:
<div class="container">
<div class="heading" onclick="toggleSiblings(this)">heading</div>
<textarea class="collapsible" placeholder="type in here..."></textarea>
</div>
<div class="container">
<div class="heading" onclick="toggleSiblings(this)">heading</div>
<div class="collapsible"></div>
</div>
toggleSibblings() loops through all the siblings with a class of "collapsible" and toggles the "collapsed" class on them. The "collapsed" class just sets the height to 0px
Here's a jsfiddle to show my problem: http://jsfiddle.net/447n50cy/
Can anyone tell my why the textarea is occupying the extra space?
Putting float:left; or display:block; along with transitioning to padding:0; will cause it to collapse. As an inline-block element it has issues collapsing properly.
Textarea have by default margin and padding:
You could reset the textarea:
textarea {
margin:0;
padding:0;
outline:0;
}
Add this to your fiddle. The problem is that you probably want some padding when people enter something in the textarea. You could easily use jQuery to add and remove classes.

Why does jQuery show() cause a brief but noticeable jerk when unhiding a div?

I'm trying to show a hidden div on a form the first time that a user clicks the submit button. Whilst I have this working using jQuery, if I set any value other than 0 for the show() transition period, the div that is being show "jerks" to the side.
This is using Bootstrap and tested on Safari.
I think the problem may be around margin: 0 auto on the form (it's as if the margins align after jQuery has shown the element).
Here's the JSFiddle that demonstrates the issue.
This is because of jQuery's animation wrappers. jQuery puts an element that is about to be animated in another div helper for the animation.
This wrapper messes up margins on the element being animated (almost) every time.
I changed this rule:
#signup-form .form-group {
margin: 10px 0 10px 0;
}
To this:
#signup-form .form-group {
margin: 0 0 10px 0;
}
removing the top margin.
The jQuery animation adds a wrapper around the element which kills the top margin while the animation is underway. As soon as the animation is over jQuery unwraps the element, and the margin is applied, creating the jump.
Here is an updated JSFiddle demo.
you execute css twice, for that reason the "jerk" occurs
change to the following:
#signup-form {
margin: 10px auto;
}
#signup-form-submit {
width: 200px;
margin: 10px auto;
}
here is the fiddle:http://jsfiddle.net/cqq8x/4/
I got is working by removing this line in the css
#signup-form .form-group {
margin: 10px 0;
}
at least that is a start
It's actually because of the addition of the scrollbar when the new div makes the page too long. This adjusts the width of the page, which does change the alignment as you noted.
Sorry, this only happens on smaller screens. I'm updating with an answer for bigger screens.
Update: It appears the order of functions also impacts things. I moved
$('#signup-form-submit').removeClass('show-hidden-div');
above the show function and it is much cleaner.
Jerking happens when the parent div ".collapse" has padding.
Padding goes on the child div, not the parent. jQuery is animating the height, not the padding.
Example:
<div id="collapseForm" class="container collapse in">
<div class="row">
<div class="col-xs-12 pd">
Padding goes on the child div. Not the parent.
</div>
</div>
</div>
Hope this helps.

How to reduce width of div using JQuery, CSS so that the left section is reduced and not the right?

This sounds like a stupid question but I cannot figure an easy way of doing it. Let us say that I have a fixed-width Div with the string ABCDEFGHIJ as its content. If I reduce the width it will stop showing HIJ or whatever from the right side. I want the visibility of the content from the left side getting impacted. So, let's say that the div has a width of 100px, then
$(div).css('width':'50px');
should not impact the display of EFGHIJ, for example.
Yes, I could have an inner div and shift its position to the left, for example, by the amount of width reduced. Is there a shorter way of doing this?
Thanks
To Hide the beginning letters but not the last letters, you need to change the direction of the letters using css direction: rtl.
and also to hide the letters, you should mention overflow: hidden and some width to the container.
Working Fiddle
One solution is to use a wrapper and CSS positioning:
jsFiddle example
<div id="outer">
<div id="inner">ABCDEFGHIJ</div>
</div>
#outer {
position:relative;
overflow:hidden;
border:1px solid #999;
width:50px;
height:20px;
}
#inner {
position:absolute;
right:0;
}

Centered content with header from left to center

I didn't know what would be the best title for my question...
Well, I'll show what I want to do with a simple picture:
The issue:
I have my content centered, lets say it's 980px width.
Now, my header will have a logo and a menu.
BUT, I want my header to
use only a left side of the top, like 50% of the content width and
then stretch to the left side of the viewport. I know this is
possible using javascript and calculate the left offset of the
content and set the dynamic width div with it's left offset.
Is it the best way? I believe there should be another way, but I can't think of one. Hope you guys have a better idea than mine, since mine slows down the perfomance of the site when I resize the window.
Maybe have 2 divs; one in the background and one to contain the logo?
http://jsfiddle.net/kUKyp/1/
I believe what you are after is margin:auto in CSS. It's very simple:
Put your content div on the page, with a fixed width of say 980px as you wanted and set margin:auto.
Put your logo and menu div inside content.
Here is a good example of this in action:
http://bluerobot.com/web/css/center1.html
The CSS code from the above page:
body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}
#Content {
width:500px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
And the markup:
<body>
<div id="Content"></div>
</body>
Using twitter bootstraps fluid layouts
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span6"> (6 for half of the width, number can be changed 1-12) your logo and menu
</div>
your content
</div>
</div>

Learning javascript/jQuery: how to place a number of elements in available window space

Using javascript/jQuery:
I have an array with images and I need to display them in my web. The number of images will vary.
Depending on the width and height available due to screen resolution I will display x rows and y columns in order to fill the space.
All images are width=115px and height=120px
When the rows of images go out of view (the vertical scroll shows) I need to place them in a new div (id='slide'). This new div I will use to create a slide and show a second/third .. set of images by the clicking of an arrow.
I'm calculating the dimensions of the space available using:
function Resize(){
var docheight = jQuery('.main_insidem').height();
var docwidth = jQuery('.main_insidem').width();
jQuery('.main_insidem').html(docheight+' '+docwidth);
}
And everything is contained in
<div id="slidesContainer"></div>
I need to end up with something like:
<div id='slide'><img src='image1.jpg'><img src='image2.jpg'><img src='image3.jpg'><img src='image4.jpg'><img src='image5.jpg'>..</div>
<div id='slide'><img src='imagex+1.jpg'><img src='imagex+2.jpg'><img src='imagex+3.jpg'><img src='imagex+4.jpg'><img src='imagex+5.jpg'>..</div>
<div id='slide'><img src='imagey+1.jpg'><img src='imagey+2.jpg'><img src='imagey+3.jpg'><img src='imagey+4.jpg'><img src='imagey+5.jpg'>..</div>
.
.
Any ideas on how to proceed?
Thanks a lot!
Images load within a container. As you resize window, images will adjust accordingly. No need to do any width or height calculations.
jQuery
$("img").each(function(index) {
$(this).delay(400 * index).fadeIn(300);
});
CSS
.wrap{
height:400px;
border:1px solid red;
}
img{
display:none;
margin:5px 5px 0 0;
float:left;
}
HTML
<div class="wrap">
<img ...>
<img ...>
..
</div>
Check working example at http://jsfiddle.net/38D6f/1/
Well i would use CSS for this
Float: left; on the images and they will automatically adjust to the width.
overflow: hidden; on the slides container
$("#SliderContainer").resize(Resize());
Source

Categories

Resources