I am stuck on the CSS part, am helping a friend to implement one thing on her webpage. Its a dropdown menu and i got everything working the way i want it to. My problem is that it moves itself to the beginning of the row?
http://gazet.se/TestPages/Test.aspx
How do i get it to be centered?
(I have removed the code that has been solved to reduce the size)
The menu has an id called #jsddm
#jsddm {
float:left;
margin:0;
padding:0;
}
Remove float left - that is first step. Second thing you should put the menu all in one list with sublevels as nested lists and get rid of img separators - they can be added as background images trough css. I suggest you create a new structure for your menu. Heres a nice article explaining it http://www.alistapart.com/articles/dropdowns/
Basically all you have to do is add additional <li> elements to #jsdm and move all menu links inside it.
The menu is floated block element, while the element around it are inline elements, which basicly can't mix. You need to either have all elements in #header_menu to also float, or let the menu be inline, too. (However I'm not sure, the latter would work).
Related
I try to modify some CSS layout and I stuck. I have an unordered list of elements which span 100% of the width and are floated to the left:
Now each of these list elements contains a (on default hidden) container with more details to this element. These details should be visible (only one at a time) if you click on the element. And now there is my problem. These details should be displayed below the row in which the clicked element is located and all other elements should be pushed down. Like so:
Now I'm stuck. I got it working by using position:absolute on the details element and assigning a margin-bottom using JavaScript on all the elements in the same row. This works, but I would prefer a solution where the clicked element does not need to modify all the other elements, just itself.
Is this possible? Using JavaScript is possible, IE9+ should be supported.
Here is a fiddle of my current solution.
Why I don't want to do it that way?
Unfortunately this should be responsive and therefor I don't want to manipulate all elements in a row (as the rows can change anytime).
Thanks! I hope it's clear what I try to do?
jsFiddle (Just an example to give you the idea of problem)
I am stuck at this stupid thing and would really appreciate any help I can get. I have an un-ordered list of fixed width with multiple list items inside. These list items are dynamically populated.
Due to users actions on the page some of these elements might be set to display:none to hide from view. Currently I am applying margin-right to elements except for every 4th element using li:not(:nth-child(4n)){} selector. Now the issue is that when some of these elements are hidden by setting display: none, the nth-child selector still considers the elements that are hidden, as they are still in the markup. This causes the styling to mess up a bit.
Increasing the width of the ul will not work as shown in the fiddle. Is there any way I can achieve what I want without having to remove those list items from the list.
Regards
Though it may be better to just iterate over the elements, here's an interesting approach:
function reMargin(){
$("li").css("margin-right", 10);
$("li:visible").filter(":odd:odd").css("margin-right", 0);
}
jQuery(document).ready(function(){
jQuery('#set-display').on('click', function(){
jQuery('#set-this').addClass('display-none');
reMargin();
});
reMargin();
});
http://jsfiddle.net/PrgTQ/2/
:odd:odd actually returns every 4th element.
I have a "menu bar" (for lack of a better term) which is basically a fixed width ul at 980px. The li elements are populated on page load, and contain an image, a span, and a divider (for the next li).
If there are too many li elements, they overflow onto the next line. I want to prepare for such an event by running some JS/jquery after the list is populated to move all of the overflow elements into another div, which will essentially be a css hover menu with the elements inside it (it will say '...view more' or similar).
My initial approach has been to check, after populating the menu, if the menu's total width exceeds a certain number, and if so, to append the last element to the new div for overflow. This function would either loop with a variable checking the width of the menu, or call itself recursively, whichever. I got the basic functionality working with an if statement, but it was a single iteration to test - the last element got moved to the div successfully. Unfortunately, when I tried to iterate it (loop or recursive) the browser seemed to go into an endless loop in the js and never loaded the page properly.
A version of my current attempt looks like this:
/**code for populating etc happens here ... then calls trimList(); */
function trimList(){
var menuWidth = $('#menu').width();
if(menuWidth > 700){
$('#menu li:last-child').appendTo('#overflowList');
trimList();
}
}
With this version or with a while loop the browser eventually crashes, but I'm not sure why. I'm sure it's something obvious.
I'd like to either fix my current implementation, or do it some other way (perhaps - if width is longer, grab ALL elements that push beyond that width, and throw them in the div. All at once, rather than iterating. But I'm not sure what the best way to grab the first offending (boundary pushing) element would be.)
I'm sure this is something simple, I'm just struggling to figure out what's causing the issue now.
Thanks
edit: see below - fixed my issue
Fixed it!
The issue was that the 'overflow' div was inside the menu div and my CSS selectors targeted all descendants. So, after the first iteration, every subsequent .appendTo targeted the one which had already been appended. The stopping condition would never be reached, and it iterated endlessly..stack overflow.
For clarification, my answer involved changing $('#menu li:last-child') to $('#menu > li:last-child). Works great now.
I'm toying around with jQuery/jQuery-ui, and I'd like to do something : say we have a word, when I hover the first letter, I'd like to see a few letters slide in (and out when the mouse goes somewhere else) between the first letter and the rest of the word. So FSecond would become FirstSecond, with "irst" sliding.
I'm almost there, but there's a slight problem : the sliding letters are sliding below the word, and once the sliding is done, they are at the right place. Same thing for the sliding out : the animation itself is not taking place between the first letter and the rest of the word.
Here is the code, quite short : http://pastebin.com/FdTtmV7k. I checked the jquery-ui doc and there's a mention of an options hash to give to the toggle function, but I can't seem to find any doc on this one and what to put in it.
I also noticed a few similar questions left unanswered (see jQuery slideToggle() applies display:block while sliding and https://stackoverflow.com/questions/4090796/jquery-ui-show-moves-elements-during-animation).
Thanks for your time !
This demo should do what you require. The problem exists as jQuery assigns display:block to an element when animating it, which causes your <span> to be rendered as a block-level element.
This happens because the <span> containing the "irst" text will have the CSS display property changed to block when the sliding begins, while the other 2 <span> elements used for "F" and "Second" will keep their default, which is inline.
You can solve this by changing the <span> elements to <div> elements (these are block elements) and additionally apply float: left; CSS style to them.
The new HTML code:
<h3>
<div id="initial">F</div><div id="middle" style="display: none">irst</div><div id="name">Second</div>
</h3>
And the new CSS code:
#initial, #middle, #name { float: left; }
Adding this CSS fixed it for me. The reasoning is that jQuery wraps your span in a div while animating it, and that div has display:block by default. We take advantage of the fact that they did not set an inline display style on the element and set the class to have display:inline-block.
.ui-effects-wrapper {
display:inline-block;
}
EDIT: Something was messing up my span tags, no margin modifications are needed.
I am trying to create a grid like system with div's with content floated left. The problem is that the height of each div is not static since the content is different in each one. Since the height is different.. things get outta whack if one is taller then another in one row.
Is there some sort of css way or js (prefer javascript) way to get around this. I really want to avoid setting large heights on the divs to get them to line up.
You can see the example here: http://www.foreclosurejournalinc.com/index.php?option=com_hotproperty&view=type&id=1
First off - it is not correct to use a table in this situation: The table structure defines a relationship between data in the same row, and data in the same column. Since the second column is the same type of data as the first, there's no table relationship here.
You shouldn't use a table because you're defining your layout in markup, so you can only ever have two columns. For example, if the client decides they want three columns, or you want to show a single-column list for a mobile view or print stylesheet, you need to change the markup (or even have several sets of markup for different purposes).
Flexible markup
OK - let's look at your markup. At the moment, you have almost got a table structure, because you're wrapping each row in a DIV. Again, this means you can't ever have a single column or 3 or 4 columns side-by-side.
A more flexible solution is to markup your data as a list. Because it's sorted, an ordered list is the right choice:
<ol id="list_properties">
<li class="property">
<h3 class="propertyTitle">08-CA-001731</h3>
<dl class="details">
<dt>Plantiff</dt>
<dd>Bob's Mortgages</dd>
<dt>Defendant</dt>
<dd>Harry Skinflint</dd>
</dl>
</li>
<li class="property">
<h3 class="propertyTitle">08-CA-001731</h3>
<dl class="details">
<dt>Plantiff</dt>
<dd>Bob's Mortgages</dd>
<dt>Defendant</dt>
<dd>Harry Skinflint</dd>
</dl>
</li>
</ol>
You'll have one <li class="property"> per item in your 'grid'. I've suggested some nicer markup for the details, too - help yourself to that if you like.
Now to finish it off: Sadly, this can't be done in a cross browser fashion without a bit of final tweaking with Javascript. That said, the JS is unobtrusive, so it really only acts as a bit of polish at the end.
Base styling
Your base styles will look like:
#list_properties {
list-style:none;
margin:0;
padding:0;
width:960px;
float:left;
}
#list_properties li.property{
width:430px;
float:left;
margin:0 50px 50px 0;
min-height:16em; /* For FF, Safari, Opera, IE8 */
_height:16em; /* For IE6 */
*height:16em; /* For IE7 */
}
That recreates the columns - at this stage, if all of the boxes had a height less than 16em, this would be all you need.
Javascript polish
To make sure everything is rock solid, I'd use the equal heights plugin for jQuery: http://www.cssnewbie.com/equalheights-jquery-plugin/ Basically, you pass it your container (#list_properties) and it scans each of the children (li.property), and sets the height of each one to the height of the tallest item.
So, for instance, one item has extra information and needs 18ems of height, all of the other items are set to 18em too.
The linked site has documentation for getting it going, but once you've got jquery and the plugin ready, you need only do:
$(function(){
$('#list_properties').equalHeights();
});
Once you get it set up this way, you can modify the number of items in the column just by changing the width of the li.property.
A last thought...
I'm just thinking, what is the advantage of displaying this list in columns, anyway? After all, the user can sort the list - wouldn't a single-column list be easier to scan? I'm assuming the user will be looking for a particular item, rather than just browsing through semi-randomly.
Floating <div> elements are tricky to work with, especially if you're aiming at multiple browsers.
If it's important that they line up in a grid format, I'd use a <table> instead; <div>s are meant for dynamic content that may or may not line up with everything else, and it seems like a misuse to expect them to line up perfectly, especially if their sizes are unspecified.
Also, since the float CSS property modifies how block-level elements interact with other floating and non-floating elements, I'd float the <table> element and give it a set width.
Check CSS display: table; for layout:
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
I think if you add a cleared element after every two entries that would help.
<div style="clear:both"></div>
That is, you have hp_prop twice then insert the cleared div.
The
<br class="clearboth">
is not having any effect in the position that you have them.
You might want to look into some of the grid-oriented CSS layout "frameworks" out there. The general idea is to have a bunch of classes that are applied to blocks of content so that you're not dropping little numbers all over the place. There are various different approaches; a google search for "CSS grid framework" should get you started.
Here's another idea: do you know how many tables are in a row? Well, can you not wrap each row of <div> boxes in another "row" <div>, with that one set to overflow: hidden so that it stretches out around the floated boxes inside it? The outer <div> elements would not need to float at all (though they could, if need be). That would have the effect of making each row as big as the biggest cell in it.
There are two options:
Mark the end of each "row" with a <div>or <hr> which "clears" both sides by using the css "clear" attribute. You can learn more about hit here: http://www.w3schools.com/Css/pr_class_clear.asp
Do what Pointy said and use a CSS framework. I would specifically recommend 960 Grid (http://960.gs) and/or BluePrint CSS (http://code.google.com/p/blueprintcss/). Both are simple, small, and easy to use. They basically use the above technique to achieve the result as well as offering you a bunch of other nice features (easy to create symmetrical and nicely proportioned layouts).