CSS position for sliding upward div - css

I would like to position a dynamically generated div directly above a button (higher in the page, not Z-index). When the button is clicked, I want to reveal the div with a reverse jQuery slideToggle().
I have set up an example in the fiddle: http://jsfiddle.net/sablefoste/YWnJE/30/
I am close, but I can't seem to position the reveal to appear directly above the button. I am able to get it to slide upward with by using my CSS position:absolute; left:0;bottom:0; following the first example in http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/.
If I change the left:0; bottom:0; to something else, I can position it correctly until the browser window is resized.
Is there a way to do this without brute force (specifically, identifying the top of the #storiesbutton, and jQuery to reposition the bottom of the #storylist)?
I appreciate any ideas! Thank you!

I'm going on pure guesswork here, but my thing is that you want the menu to appear above the button. I've tried it using
var list = $('#storylist'),
button = $('#storiesbutton'),
speed = 500;
list.hide().css('bottom', button.css('top'))
.css('margin-top', list.outerHeight() * -1);
So the position of the stories is set on load based on the position of the button and the height of the list.
Fiddle: http://jsfiddle.net/qt3LE/
Like I said though, I'm not 100% on what you are after. This may help with the positioning.
Also I used $.toggle(function(){}, function(){}) rather that toggleSlide as you have more control over the individual toggles.

So when you put position: absolute on that element, what you are doing it is positioning it as a fixed set of pixels according it's first non-static ancestor. In most cases and this case, that would be the body itself, which is why it was stuck at the bottom. What you want to do is constrain that absolutely positioned element inside another div so that it does not get positioned at the bottom of the page, but instead where you want it. So you would just wrap that element:
<div id="wrapper">
<div id="storylist" style="display:none;">
<ul>
<li>
Title 1 goes here.
</li>
<li>
Title 2 goes here.
</li>
<li>
Maybe a Title 3 goes here, but it is dynamically generated.
</li>
</ul>
</div>
</div>
inside another div, and give that new div
#wrapper{
position: relative;
}
Here's the example in a fiddle.

I am not sure but if you're looking for the information to be above the button you might try removing position:absolute
Like this
http://jsfiddle.net/cjds/AnpzK/

Put the buttonbar and the storyline in a container like this:
<div id="container">
<div id="storylist">
<ul>
<li>
Title 1 goes here.
</li>
<li>
Title 2 goes here.
</li>
<li>
Maybe a Title 3 goes here, but it is dynamically generated.
</li>
</ul>
</div>
<div class= "buttonbar">
<div>
<span class="navbutton" id="librarybutton" >
<a href ="#" title="Information">
Information
</a>
</span>
<span class="navbutton" id="storiesbutton" >
<a href ="#">
Stories
</a>
</span>
</div>
</div>
​
and here are the css for them:
#container {
position:relative;
background:#efefef;
}
#storylist{
height:60px;
position:absolute;
left:0;
bottom:0;
}
.buttonbar{
margin:20px 50px 20px 0;
text-align:center;
width:100%;
position:absolute;
bottom:-60px;
}
I have absolute positioned the button bar AND the storyline so you could get that desired "upward sliding" action. Hope this is what you want. Here's fiddle of what i did. http://jsfiddle.net/YWnJE/41/

Related

ol within ul and make certain list items extend to the width of parent element

I am kind of new to css and trying to create a layout that presents a list of books. Therefore I want to display a cover image (represented by a fixed width div in the fiddle) at the left side of a two column layout. To the right of the cover I want to present information about the book: The title and an ordered list which has property-value items.
These items should fill the remaining part of the width. The property and its corresponding value should be placed on the same line.
One of the property value items also contains a button, which is just represented by a span here. The button should be placed in the same line right after the property.
I have run into several problems, which I couldn't sort out so far:
The property list is not formatted correctly. I guess that is because I haven't been able to configure the containing list item to extend to the full width. In the end a property value item should be displayed on the same line.
The Title is underlined and I would like to see that underline extend to the full width of the body. Currently it is truncated and I haven't been able to figure out a way to make that happen.
I have created a fiddle, which should show the problems: http://jsfiddle.net/7Xeb7/3/
This is my basic html structure:
<body>
<ul class="book">
<li>
<div class="cover"></div>
</li>
<li class="bookdetail">
<div class="title">Title</div>
<ol class="attributes">
<li>
<span class="property">property <span>btn</span></span>
<span class="value">value</span>
</li>
<li>
<span class="property">property</span>
<span class="value">value</span>
</li>
</ol>
</li>
</ul>
</body>
Short Answer
Your HTML is somewhat more complicated than necessary and makes unorthodox use of list elements for things that aren't really lists. Simplifying it would make styling the page easier. I have done so in this jsFiddle, where I think your problems have been taken care of by absolutely positioning .cover and adding appropriate padding to .bookdetails: http://jsfiddle.net/7Xeb7/10/. (Edit: new jsfiddle reflects comments)
Long Answer
As much as possible, the HTML tags you use should be semantically-related to the content they represent. So use ul or ol for lists of things, use img for images, and use heading tags (h1, h2, etc.) for headings. There's no need to use tables here (which are generally frowned upon for layout since they violate this semantic logic). Here I've preserved your structure and CSS classes but used more logical tags:
<div class="book">
<img class="cover" src="" alt="Book Title Here" />
<div class="bookdetail">
<h2 class="title">Title</h2>
<ol class="attributes">
<li>
<span class="property">property</span> <!-- this span wasn't closed before! -->
<span class="button">btn</span></span>
<span class="value">value</span>
</li>
<li>
<span class="property">property</span>
<span class="value">value</span>
</li>
</ol>
</div><!-- /.bookdetail -->
</div><!-- /.book -->
Once the HTML has been cleaned up you can more easily make the necessary CSS changes. Your main issue is getting .bookdetail in the right place. It's hard at the moment because you're trying to balance a fixed-width element (.cover) with a variable-width element (.bookdetail) that you want to take up the whole of its container - except for the fixed-width element.
This can be solved fairly easily by absolutely positioning .cover, so it no longer has any effect on the positioning of other elements in .book. Then you can just set the padding of .bookdetail to 0 0 0 140px - which is automatically relative to the most recent parent element with a specified position, which I've made .book. So .bookdetail expands to fill book like you want, but the right padding (or margin, if you prefer) means that it doesn't overlap with the cover image.
I've also made a few other CSS changes, visible in the jsFiddle, to make .title display better and to accommodate my HTML changes, but they're not directly relevant to solving your main issue so I'll leave them there.
I have changed your layout accordingly using div and tables
<div class="leftColumn">
</div>
<div class="rightColumn">
<div class="header">
Title
</div>
<div class="content">
<table width="100%">
<tr><td>Property1<td><td>Value</td>
<tr><td>Property2<td><td>Value</td>
<tr><td>Property3<td><td>Value</td>
<div>
</div>
and css
.leftColumn
{
float:left;
width:30%;
height:250px;
background-color:red;
}
.rightColumn
{
float:right;
width:70%;
height:250px;
background-color:green;
}
.header
{
font-size:25px;
padding:15px;
height:30px;
verticle-align:middle;
border-bottom:1px solid #ccc;
}
have a look here
you are missing width attribute for dimensions but not sure if this is how you want to see it:
http://jsfiddle.net/Riskbreaker/7Xeb7/4/
I added width: 100% on you bookdetail class
.bookdetail {
vertical-align:top;
display: inline-block;
width: 100%;
}

Display a div when hovering on another div using CSS

I need to show an image once I hover over the navigation tabs. From the ruby code below you can see I am giving an id to each navigation (I could give a class too if needed):
<div class="top-container">
<nav class="navbar">
<ul>
<% Placement.all.each do |placement| %>
<li class=<%= "highlightedTopNav" if placement.id==params[:id].to_i %>> <%= link_to placement.placementname, placement_path(placement.id), :id => placement.placementname %> </li>
<%end%>
</ul>
</nav>
</div>
<div class="container">
<div style="background-image:url('images/pointingup.png');">
<img src="images/...">
</div>
</div>
Now I need to show a different image withing the 'container'div above for each of the navigation
I tried many solutions online but none work for me.
Alot could depend on the overall design of what you're trying to achieve here, but in css there needs to be some parent/sibling relationship with the element you are hovering and the element you want to effect.
For instance:
<li>
<div>Hello</div>
</li>
In your stylesheet you could: li:hover div { background: red; }
Since the div is a child of the LI element that would work, in your example the div you are effecting has no relationship in the dom with the element you are hovering. Meaning you most likely have to do this in javascript.
Alternatively you could place an empty element within the li element, <i> is generally popular for this sort of 'icon' technique and set your styles and background image on that, similar to whats going on in the product finder drop down here: http://www.havells-sylvania.com/
Like Barking Tiger mentioned, the displaying <div> would need to be a child of the one you are hovering to be able to use only css.
If you want to use Javascript or jQuery though, you could try something like this:
$("#navid").hover(
function () {
$(this).show(IMAGE);
},
function () {
$(this).hide(IMAGE);
}
);
EDIT: If you don't mind having a child image, you would probably do something like this:
If your HTML ended up like this:
You would do something along these lines to change the image on hover.
#navid
{
}
#navid:hover .hidden
{
display:block;
}
.hidden
{
display:none;
position:absolute;
z-index:999;
top:10;
left:10px;
}
Note the absolute positioning and z-index, that will keep your image in front of the nav. Without a code sample of your CSS it's hard to tell exactly how you want it styled, so just adjust it from there.

CSS: icon for each <li> that floats in the middle of the line

At the get-go, here's the fiddle.
I want a <ul> in which each <li> has a <p> and then an icon floating on the rhs. The paragraph may take 1-4 lines, and I want the icon to sit nicely in the middle of the line no matter what. The double wrapping <p> is necessary, trust me :)
The width of the <p> has to be 100% less whatever space is necessary for the icon. Basically, I want the icon to sit halfway up the space left by the right-margin of the <p>.
The solution here uses background-image, but that's no good for me because the image has to serve as a draggable handle for mobile devices. (I'm using this approach to modify a jQuery sortable desktop site for touch screen.)
The fiddle uses a placeholder <img> because of the demands of jsfiddle, but I'll actually use an <a> with an image off a sprite.
I want to avoid having a negative top margin, because the margin will move into the preceding line and could mess up the dragging (i.e., you could inadvertently drag the wrong line).
Thanks.
Based on this answer by bfrohs,
DEMO here
HTML
<ul>
<li class="absoluteCenterWrapper">
<p class="text">This is some text that flows over multiple lines and I want it to have the icon on the rhs that stays in the middle of the line no matter how many lines of text (and I'd really like not to use a negative top margin on the image).</p>
<img class="icon" src="http://placekitten.com/g/20/20">
</li>
</ul>
CSS
.text {
margin-right:35px;
}
.absoluteCenterWrapper {
position:relative;
}
.icon {
margin:auto;
position:absolute;
max-height:100%;
max-width:100%;
top:0;
bottom:0;
right:0;
}
Change the position of the li element to be absolute and that of the img also absolute. Consider adding this code instead of using your css.
.icon{
margin:40% 5%;
float:right;position:absolute;
}
​
See this fiddle.
http://jsfiddle.net/NXWPE/47/

ui tabs and position relative

I am using ui tabs a lot.In my last project i add an icon just before tabs and the tab links start a strange behavior, you can not click to change the tabs if you are above tab name BUT only when you are outside tab name.
Here is the code
<div style="float:left;display:inline;width:718px;padding:5px;border:1px solid #ececec">
<!--ICON just before TABs-->
<div style="z-index:1;position:relative;top:30px;left:5px">
<img src="../graphics/icons/add.gif" onclick="AddTab();" href="javascript:void(0);" id="addNewTab"/>
</div>
<div id="tabs" >
<ul >
<li >
<img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" />
<span id="tabContent-1"><span class="tabText" >TAB1</span></span>
</li>
<li >
<img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" />
<span id="tabContent-2"><span class="tabText" >TAB2</span></span>
</li>
</ul>
<div id="tab-1" >
contents
</div>
<div id="tab-2" >
contents
</div>
</div><!--tabs-->
I know that ui.css has position relative for tabs
.ui-tabs .ui-tabs-nav {
list-style:none outside none;
padding:0.2em 0.2em 0;
position:relative;
}
and i dont know if meshing up with my icon.
If i remove the position:relative from the icon (add.gif) everything works fine
Any help is appreciated
From the code you've posted, and if I've understood your problem correctly, the "top: 30px" in your icon div is interfering with your tabs. The icon image height is not declared but I'm assuming it's less than 30px. Therefore, given that your icon has a z-index of 1, it would appear on top of the tabs.
If the icon is intended to appear on the same line as the tabs, this may still occur as no width is declared for the icon's parent div. This means it may take up the entire row.
There are several ways to fix this, but I think you're in the best position to come up with right solution, depending on the exact effect you're going for. The culprit seems to be "top: 30px" which pushes the div down by 30px. If you remove that, you can likely also remove the "position: relative" from the same div.
Hope that helps.
It is most likely the IE hasLayout bug and the image is not forcing the height of the tab to change as expected. This can be fixed by adding zoom:1 to any position:relative elements.
Also you might want to add a padding with 4 specifications like so...
.ui-tabs .ui-tabs-nav {
list-style:none outside none;
padding:0.2em 0 0.2em 0;
position:relative;
zoom:1; }
Hope that helps!

Increasing height of a div while dynamically loading content

I have a div which contains an unordered list... After some user actions i load the div with a longer list i.e. containing more list items than the previous one. I use jquery's higher level ajax functions to do this.
The problem is when i load it through ajax the list elements overflow the div's bottom portion and some of them get's displayed out of the div.
I haven't set any heights for the containing div assuming that it will expand to accomodate any future longer lists.
I'll post the code below and will be extremely grateful if someone figures this out....
#sidebar1 {
float: left;
width: 15%; /* since this element is floated, a width must be given */
background: #FFE8BF; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div */
text-align:center;
}
<div id="sidebar1">
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li>
<a href="#" id="loadHotel" >
HOTEL
</a>
</li>
<li>
<a href="#" id="loadCountry">
COUNTRY
</a>
</li>
<li>
<a href="#" id="loadCity">
CITY
</a>
</li>
</ul>
</div>
</div> <!-- end #sidebar1 -->
I load the list elements into the <ul id = "sidebarmenu1">
Hope i'm clear...
Thanks a lot in advance....
have you tried:
$('ul#sidebarmenu1').removeClass('class here').AddClass('class here');
that should work
Figured out a workaround for the curvy corner problem...!!!
after i load the menu items with ajax, i use jquery to increase the height of the div and then call curvy corners to round the edges...!
Voila..!!!!

Resources