http://jsfiddle.net/mplungjan/RfkCw/
That's my code, you cannot see the error there but I assume many will know what I mean.
The answers are in order of course and they move slightly down each time like they aren't fully hidden.
How can I rectify this?
When you inspect the page, pay attention to margins, padding, height, and width (before and after the question is hidden). It's possible that your cms is dynamically modifying the styles (with javascript) when it notices a display change.
Related
I´m trying to code blog and i want to synchronise positions of timeline events and it´s posts. I coded it as two different columns and I´m trying to get height of post with jQuery and then count the size of blank space in timeline event. Everything seems to be set OK, console gives me equivalent numbers and so the programmer tools in chrome. You can see the height of the post here and these are heights of elements next to it: element1, element2, element3. Together, it 740px but the main element-post is also 740px.
So, I would like to know, how is this possible? Thank you.
As you can see in the pictures, the margin is not included in the size. So, for instance, while that "G+" icon may be 32x32, with margins, it taking up what looks to be closer to maybe 48x48. And the height of the article is only referring to up to the green line (the padding).
There are probably multiple ways of solving this, but using what you're doing now, if you wrap those margin-spaced elements in divs, then those wrapping divs will have the correct sizing themselves.
I'm trying to replicate jQuery slideDown() in GSAP and I'm having trouble working out how jQuery calculates the height of an item which is currently hidden as if it was set to height:auto.
I've tried trawling the code on GitHub but can't find any code which seems to be doing this in jQuery.fn.slideDown or jQuery.fn.animate which it calls.
There are several similar questions on SO and several solutions proposed, all of which seem to have their own problems:
Clone the element, position it off screen and calculate its height. This won't work if the element or any of its child elements have a height set by CSS styles which require the element to be in its original place in the DOM (e.g. an .accordianItem might only be styled if it's inside its .accordian).
Display the item, remove height:0 and quickly calculate the height before hiding the element again and then stating the animation. This might flash the content quickly while calculating the height.
Use visibility:true to show it in place while calculating the height. This would stop the flash and still keep the element in the same position in the DOM for correct height calculation, but it would still push other items below it down because visibility:false items still have a height.
Calculate the height of an item before it's hidden and store it in a data attribute so we know it when we want to open the item later. This won't work if any dynamic content changes the height of the item whilst it's hidden.
jQuery slideDown() "just works" every time so I'd be really interested to know how it works, but I just can't work out where it's doing this. I'm also surprised that GSAP can't do this out of the box, or that nobody has shared a proper solution to this before.
Any help would really be appreciated.
It turns out that if you use $.height() to get the height of an element with display:none it doesn't return 0 as you would expect, it actually sets visibility:hidden, position:absolute etc. and sets display to block to give you the correct height back. I assume this is what's being used internally when doing a slidedown.
This answer helped me a lot.
jQuery: height()/width() and "display:none"
Just to be clear about how this seems to avoid all the problems in my original question. It's basically doing number (3) but avoiding the problem of pushing lower content down the page because it's also set to position:absolute while the height is being calculated. A very simple elegant solution
I have a wordpress theme that i'm building but i've hit a snag with some code and can't seem to get my div to expand correctly. I've tried clearing the floats at different positions, i've tried overflow: hidden, but nothing seems to work.
What i'm trying to do is have the content slide in from either side based on what header you click. The content is based on a wordpress post for each link. So the client can easilly edit it to any size.
Because of this it isn't viable to use pixels in the sizing of it. And i know that absolute positioning means that pixels are very nearly the only option.
I've messed with everything i can think of in firebug and just cannot get it to expand.
You'll find the site here: http://tinyurl.com/okd5wnf
However i couldn't get this to work either. Maybe that'll give you a clue as to what might be wrong.
I know it's a long winded post, and i apologise. If i have time later, i should be able to make a jsfiddle. However time is short at the moment.
Any help would be appreciated. Thank you very much.
Your problems stems from setting the <div class="box"></div>'s position property to absolute. Give the parent element(<div id="body-wrapper"></div>) overflow-x:hidden; to hide children that are not being displayed, and then use negative margins to position child elements within the viewport (the parent element). This is basically how most sliders work.
Remove position absolute from box class. please also mention what desired layout you need for content. we will suggest you classes for that.
Romove position:absolute from div.box
I guess that's all.
I'm creating a custom select plugin. Everything is going great, but the dropdowns (<ul>-objects) are overlapping on each other :(
I understand, that the overlapping order is set after the elements order on page or when they are created. So my question is: What is the method to make the latest opened/shown object (<ul>) on top of the hierarchy?
I just need the correct method. I'm not going to copy the full code, but a little example:
$('#trigger').click(function () {
new_dropdown.slideDown();
});
(A picture is worth of 1000 words)
So lets say, that I open the green select the last.. How can I make it on top of the yellow one?
EDIT
For easier testing I created jsfiddle. For future references I'll post the link: http://jsfiddle.net/hobobne/uZV5p/1/ This is the live demo of the problem at hand.
What you're looking for is the CSS z-index property (higher values put elements at the front).
You could probably just set them in ascending order (e.g. set green one to 1000, yellow to 1001), but if you really need to bring it to the front when clicked, you can change the z-index with javascript
var zindex=100;
$("#trigger").click( function() {
newdropdown.css('z-index', ++zindex);
});
Here's a demo: http://jsfiddle.net/waitinforatrain/Vf7Hu/ (click the red and blue divs to bring to front).
Edit: gilly3's approach is better, and as was mentioned there may be some issues with older versions of IE.
Two ways:
Set a z-index
Setting a z-index will change the default stacking order. You can have a counter that increments and use that to set the z-index of newly stacked items. You may have issues with IE 7 or earlier, though, and those can be fixed by setting the z-index of other items. https://developer.mozilla.org/en/Understanding_CSS_z-index/Adding_z-index
Use absolute positioning, and append the div to the body
If you use absolute positioning, you can append the div to the body and still have it appear below the element. If you append the div to the body, the one last added should be on top, because of the default stacking order.
Give it a class when it is opened, and remove that class from the previously opened ones:
$(".slidedown_active").removeClass("slidedown_active");
$(this).addClass(".slidedown_active");
Then your users can use z-index in their style definition for that class to ensure the active list is always visible.
The reason I don't recommend setting the z-index directly is because you can mess up your users' layout unnecessarily. These kind of overlap issues can be a real headache for a web developer. For a plugin to try to guess at how to resolve overlap issues, without any knowledge of the code or design, would be virtually impossible. Instead, give your users the tools they need to fix the overlap issues themselves. It may be that your users would never encounter overlap issues, so setting the z-index for them would be pointless at best, and potentially harmful.
Take a look at the this link. Scroll down a bit and you should see a Facebook comments plugin with an embedded Google map right beneath it.
My problem is, there is a ton of white space between the bottom of the comments plugin and the top of the map. Firebug indicates the white space is at the bottom of the comments plugin (as opposed to the top of the map). However, I can't seem to find a way to eliminate it.
I've tried just using relative CSS positioning to move the map up 50 pixels, but then it sits on top of the comments if there happen to be any. Also, if the user has turned FB comments off, it screws the layout as well.
Any ideas on how to get rid of the excessive white space?
UPDATE: While the answers provided here pointed me in the right direction, it ended up being too much trouble. I simply put the Facebook comments beneath the Google map at the bottom of the page which masks the problem somewhat. Apparently this is a bug according to one of the commenters below, so we'll just have to wait for a fix.
EDIT: Been toying with these styles for a while, no luck. I can alter the height of the box initially based on Jason's suggestions, but anything I do screws up the layout (new comments appear BEHIND the map since the comment area stays the same height as its original height, instead of allowing Facebook to dynamically grow the height of its IFRAME element when a comment is added). Any other ideas?
EDIT #2: It seems that the root of the problem is that Facebook automatically assigns a height of 200px to the IFRAME containing the comments box. When comments are added, Facebook dynamically resizes thie IFRAME to the appropriate height. I'd be able to solve my problem if I could find a way to make that default 200px start at 145px. Not sure if this is possible or why Facebook would think that 200 (arbitrary?) was a good height to start at.
EDIT #3: I realize the white space is coming from the IFRAME that Facebook generates and that there's nothing I can do about that, specifically. I started a bounty on this question because:
1) I find it hard to believe that I'm the only person that has an issue with the way this displays.
2) It's possible it's due to the way I configured something?
3) There's some other workaround I'm not thinking of.
Hopefully the bounty will encourage some creative replies!
Don't set the height to auto, set the overflow...
Set height:110px and overflow:auto on the Facebook iframe - then comments will expand the height of the iframe dynamically.
Pop these changes in your $().ready function - this works fine for me.
I had this problem on Mobile browsers. Facebook added this auto detect for mobile devices. It loads a different version of the plug-in that is full of bugs. Just set the mobile flag to false to force it to use the regular version that does not have bugs. This saved me. I hope it helps you.
There are several contributing factors:
.fbFeedbackContent has min-height: 165px
the loaded iframe has height: 200px
there is an empty span tag within the fb:comment tag
Addressing any or all of these should get you started. You may need to use !important to override some of the CSS.
I was suffering from the same problem. The extra white space only shows up when there are no comments yet. So you just simply do the following:
1.) Swap back to the old markup, because step 2) is not supported by HTML5
2.) Make a new div #commentcount, in which you will load the count of comments. You can hide it with display:none;.
3.) Insert the following code to #commentcount: <fb:comments-count href=http://example.com/></fb:comments-count>, where example.com is the exact URL of where you're commenting. In most cases this will be $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"] (PHP), or the appropriate HTTP header variables in other languages.
4.) Store the comment count in a variable in JavaScript. You can reach the count easily, It's inside the #commentcount div in a span element. If you're not sure about this, check chrome dev tools or firebug, it will show you the rendered structure. (as facebook may change it eventually)
5.) Write a nice javascript code to update the facebook comment container div if(commentcount==0). Add a style of: height:110px; overflow:hidden;.
6.) Load the comment count frequently so if someone comments, you can drop the hidden overflow and fixed height, and they can see the new comment. You can do this using setInterval().
It works!
An easier alternative solution: You can set the style="background-color:#f5f5f5;" for the comments box if you have for example a site with F5F5F5 background color. The comments box colour will blend into your site. It looks nice.
Turn off mobile parameter.
For exemple:
<div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="10" mobile="false"></div>
i solved it by setting the height on the . im using the facebook plugin in wordpress. you can find that file under /wp-content/plugins/facebook/social-plugins/comments.php in line 75 or set it to css
#respond{
height: 112px;
}
I am using FbComments plugin for Wordpress and there you can set the customisation options. This solved the problem for me.
Where it asks Comment box style AND Whole comment box style enter the height you want. It should be 72px. So you enter height:72px; in the space provided. Don't forget the ;