I want to make horizontal list of divs that is clickable.
I got something like this:
<div id="header">
<ul id="list">
<li id="column1">
<div></div>
</li>
<li id="column2">
<div></div>
</li>
</ul>
</div>
Styles:
#header
{
height: 200px;
width:500px;
}
a{
display: block;
width: 100%;
height: 100%;
}
The problem is,an "a" element not in the same place as list, and I want the list to be cliackable.
If you want anything to be clickable on your page use javascript event listeners not anchor tags.
When you want an element to be clickable just add an event listener to click action on your client code and define the behaviour of your object.
Use anchor tags only if your object's behaviour is to link to another place.
This will make your code cleaner and easier to read, it will also be easier to place every object where you want it to be.
Related
I have navigation bar, filter and collection in one of my layouts in SPA - following in exact that order. Nav bar, filter and collection header must stay on top when scrolling, only collection items must be scrollable. I managed to make the whole collection scrollable, but it's not quite what I want.
<div class="navbar-fixed">
<nav>...</nav>
</div>
<div class="row">...this is filter...</div>
<div id="collection-wrapper">
<ul class="collection">
<li class="collection-item"></li> <!-- serves as header -->
<li class="collection-item"></li> <!-- shows data -->
</ul>
</div>
Using perfect-scrollbar on #collection-wrapper: https://github.com/noraesae/perfect-scrollbar
If you set the max-height of the collection list to specific value that will allow the list to scroll. Setting the position of the first collection-item to fixed will prevent that item from scrolling with the rest of the list.
ul.collection {
max-height: 100px;
overflow: scroll;
list-style-type: none; /* not sure if you need this. Hides bullet list dots */
}
li.collection-item:first-child {
background-color: white; /* should be the same as the background color behind the list */
position: fixed;
}
My page has a fixed header.
When a user does not pass form validation on form submission I display a list of errors above the form each with a link to the form element that produced the error.
However when I click the link to the anchor the element is hidden by the fixed header.
I have seen a number of css solutions that use pseudo class :before to fix this problem, however this cannot be applied to an input element.
Is there an alternative css based solution or am I forced to create a JS work around?
Thanks in advance
The container that has all the error messages you can set the padding-top equal to the height of your header. Then it will off-set the list. You will have to play around with the px to get it to look properly. It's not a perfect solution but it's an easy one.
Here's a quick example as you don't have any of your code provided:
HTML
<div id="header">
Fixed Header
</div>
<div id="error">
<ul>
<li>Error One</li>
<li>Error Two</li>
<li>Error Three</li>
</ul>
</div>
CSS
#header {
background-color: #ccc;
position: fixed;
height: 50px;
width: 100%;
}
#error {
padding-top: 50px;
}
Here it is in jsfiddle form. Hopefully I understood the problem correctly.
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%;
}
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/
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..!!!!