I'm going for something similar to the classic iPhone "Swipe to reveal" look using
CSS
the code structure I'm aiming for is something like like
<ul>
<li>Top Content</li>
<li>Bottom Content</li>
</ul>
So that using javascript and css transition I can get the top layer to slide away and reveal the bottom layer. I've tried setting the bottom layer to top: -(height of li) and z-index -1 which sort of works (they do overlap) except there is a large space between the divs due to this (margin 0 padding 0 didn't fix that)
How else could I implement this?
I really think using same list to accomplish this is a terrible idea you should just use two different ul's http://jsfiddle.net/8JYA2/
<ul class="list-1">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<ul class="list-2">
<li>Back One</li>
<li>Back Two</li>
<li>Back Three</li>
<li>Back Four</li>
</ul>
I might be wrong but why are you aiming with that code structure?
I've got a working solution now after a bit of help and experimenting.
The solution was to to make one list, but put two divs per li and layer the divs.
Then using javascript, modify the left and right percentage on the divs so that the top div slides off. The code looks something like this
<ul>
<li><div>Top Content</div></li>
<li><div>Bottom Content</div></li>
</ul>
Combined with what I figured out before regarding setting the z-index higher on the top content it works great.
Related
this is my site.
this is how I finally make it look like
I want to divide the the menu list items into two sub menu say menu left and right. And then wrap them in a div. This is make it easy for me to style them and this way they would stay responsive as well.
Now, I have been trying to achieve this by
jQuery( ".menu-item-580", ".menu-item-583",".menu-item-584",".menu-item-563").wrapAll("<div class='new' />").after(".menubar-brand");
I have trying this in browser console.
I also tried same above code by using appendTo() instead of after()
But, still no luck.
In your code you're basically doing this:
<ul>
<li>
<div class="new">
<li>
<li>
</div>
<li>
</ul>
which is not a valid markup.
The easiest way to goup <li>s would be to assign different additional css classes to different parts of the list:
<ul>
<li class="group1">
<li class="group1">
<li class="group2">
<li class="group2">
</ul>
Also, have a look at this: Is there a way to group `<li>` elements?
I have menu (list of categories), level-0 li has class ".cat_cat_h", level-1 .cat_par_c"
HTML:
<ul class="text-links">
<li class="cat_cat_h level-0">Item 1</li>
<li class="cat_cat_h level-0">Item 2</li>
<li class="cat_cat_h level-0 active">Item 3</li>
<li class="cat_par_c level-1" style="display: none;">Item 4</li>
<li class="cat_par_c level-1" style="display: none;">Item 5</li>
<li class="cat_par_c level-1" style="display: none;">Item 6</li>
<li class="cat_cat_h level-0">Item 7</li>
<li class="cat_cat_h level-0">Item 8</li>
<li class="cat_cat_h level-0">Item 9</li>
<li class="cat_cat_h level-0">Item 2</li>
<li class="cat_par_c level-1" style="display: none;">Item 7</li>
<li class="cat_par_c level-1" style="display: none;">Item 8</li>
<li class="cat_par_c level-1" style="display: none;">Item 9</li>
</ul>
I would like to show() only level-1 elements that go right after .level-0.active (item 4, item 5, item 6).
UPDATE
Final solution:
$(document).ready(function(){
$( ".level-0.active" ).nextUntil( ".level-0" ).show();
});
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
Source
That means the closest() function works in one direction. if you want to go to the parent <ul> and the back to another <li> you have to call the parent() function first, like this:
$(document).ready(function(){
$(".cat_cat_h").parent('ul').find(".cat_par_c").show();
});
edit after your edit:
If you want the previous and the next element of you selected element try this:
$(document).ready(function(){
$( ".level-0.active" ).prev().show();
$( ".level-0.active" ).next().show();
});
To be responsive to Paulchenkiller, I will amplify my answer.
Fluency in any language, spoken (English, Spanish, Italian, French, German, etc) or written (html, css, javascript, c++, pascal, basic, etc) requires the ability to express a certain concept, idea or task in a variety of different ways.
I will attempt to do so with this particular issue in as many ways that this particular noob can think of.
jQuery selectors - this has been nicely expounded on above, and the only comment I might make is the trivial downside in the use of jQuery in terms of its load time (microseconds to milliseconds), and perhaps slightly longer to run than native js (microseconds).
CSS classes - One way to handle this is the use of additional css classes - adding a class, say "li456" that is an "empty" class in the sense that it contains no CSS styling, and is only used to identify a particular line or lines of code. Here is a FIDDLE as an example. It's a bit inefficient in the sense that it can be difficult to follow the code with so many classes attached to a line of html, and needing to look up an additional class in the section or even an attached style sheet.
$(".li456").show();
CSS ids - Even more burdensome, since you can only use an id once on a page, and in this particular case, therefore need three ids. The same applies to ids as to classes, only worse, you have to look up three times the number of ids as classes - since one class can be associated with multiple html lines on a given page. Here is a FIDDLE that shows an example of the use of ids .
$("#li4, #li5, #li6").show();
A variant of CSS is the concept of pseudo classes which are beautifully explained by the experts at CSS-Tricks where they have a nice review of these flexible and powerful methods (http://css-tricks.com/pseudo-class-selectors/). The :lt(x) selects the first x elements of type. Here is the FIDDLE. The :lt() pseudo class is particular to jquery and not a part of the CSS standard.
$(".text-links .cat_par_c:lt(3)").show();
Pure javascript is also a possibility, but in this particular case you would have to add an id to the three elements in question. Here is the FIDDLE.
document.getElementById('li4').style.display='block';
document.getElementById('li5').style.display='block';
document.getElementById('li6').style.display='block';
Pure javascript can be used to select on the class name, and return an array that can be parsed by [n]. This FIDDLE shows an example of a brute-force method. This FIDDLE uses a for loop to go through three elements.
document.getElementsByClassName('cat_par_c')[n].style.display='block';
Then we move to "display" which can be handled with jQuery .show, .css('display', 'block') and javascript .style.display='block'. This FIDDLE demonstrates these methods.
$('.cat_par_c:eq(0)').show();
$('.cat_par_c:eq(1)').css('display', 'block');
document.getElementsByClassName('cat_par_c')[2].style.display='block';
And I'll bet there are many more ways...
I am trying to create a multi level drodown menu with the following code:
<nav role="navigation" class="navigation">
<ul>
<li>Home
</li>
<li>About
<ul>
<li>Company
<ul>
<li>Brands</li>
<li>Stuff</li>
<li>More Stuff</li>
</ul>
</li>
<li>Team
</li>
<li>Goals
</li>
<li>Photos
</li>
</ul>
</li>
<li>Portfolio
<ul>
<li>Chairs
</li>
<li>Beds
</li>
<li>Fireplace
</li>
<li>Onother
</li>
</ul>
</li>
<li>Portfolio
</li>
</ul>
</nav>
With some jQuery I have hidden all the second/third level items and added a class that will show a "+" in the right side via CSS.
Demo: http://jsfiddle.net/ZJug9/1/
This works fine for most users, but when I try to use this with VoiceOver on Mac I just can't simply find a way to navigate. Maybe because I don't know all the things about VoiceOver or I am doing something wrong with HTML and JS
Is there something missing from my code that could improve accessibility for blind people using screen readers. What should I do more and why for this particular example.
Any up to date tools or documentation that will put me up to speed about accessibility. I think that the W3C accessibility website is too cluttered and confusing. I read some things about Aria too, but the documentation is really complicated and some people say that using proper markup is good enough.
Please try to answer for this example
UPDATE
I added visibility hidden to the hidden ul's as the screen reader does not speak invisible elements and I will still be able to use CSS3 for the height transition
Demo 2: http://jsfiddle.net/ZJug9/3/
For a sitemap page I have the ordered text and the associated 'level' of how far the page is in the tree.
Right now we have the most simplistic indented look using CSS margins and we want it to look more funky.
Here is the sample code and a link to a test page:
HTML:
<div class='sitemapItem'>
<a href="#">
<div class='sitemapLevelX'>FOO</div>
</a>
</div>
CSS:
.sitemapLevelX{
margin-left:Ypx;
}
Sample code can be found here:
http://jsfiddle.net/m77TR/1/
I include the following image to get an idea what I'm aiming for:
Is it possible to do relatively simply in CSS? Or do I need to sprinkle some javascript on top?
You could simply achieve this structure using a nested ul:
<ul>
<li>level 1</li>
<li>level 1</li>
<li>level 1 with sub
<ul>
<li>level 2</li>
<li>level 2</li>
</ul>
</li>
</ul>
This way you can easily define this kind of subtree structure in HTML. After this you can change the styling in CSS to fit your needs.
A demo for your desired layout can be seen here: http://jsfiddle.net/N4JH2/ and a tutorial on how to get this done here: http://www.csscody.com/css/css-sitemap-design-tutorial/594/
The closest css property I can think of is 'quotes', which allows you to define different symbols for different levels of quotes.
Let's say that menu has the following structure:
<li class="parent-of-all">Parent
<ul class="sub-menu level-0">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4
<ul class="sub-menu level-1">
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3
<ul class="sub-menu level-2">
<li>Item 2.1</li>
<li>Item 2.2
<ul class="sub-menu level-3">
<li>Item 3.1</li>
<li>Item 3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
And this is how it looks like when styled (please note that nested sub-menus are position: absolute; left: 100%;).
Now the questions is - can I avoid it being pushed off the screen? I'm looking for a solution that Windows7 menus use (they never go off the screen). Is there some simple Javascript check? I think that doing just left: -100%; would work but under what conditions? I just need some idea and I can code that in Javascript :)
As far as i know, there is no way to do this check with CSS only. You will have to use javascript. The most straight forward approach would be binding mouseover/mouseout (or hover if you use jquery) to the items, then comparing the elements x-offset + width with window width.
With a pure CSS solution you could always alternate the position of the submenus. When the first was left positioned to appear right to its parent, the following (third) submenu could be positioned on the left and so on. Maybe you could even use the :nth-child-selector to do so.
Afterwards you can create exceptions for wider screens, just alternating the left position starting off the nth child submenu (using CSS media queries).
No, you need to use JavaScript in order to calculate positions