So, my problem is that I can't seem to find the next() sibling down to the following nested ul li. when set to hide. I can find it when it's not set to hide easily by:
This works when I comment out the JS and nothing is hidden:
//$(".vertNavigation li ul a").hide();
Add this to click function:
$(this).next().css("background", "yellow").slideToggle("normal");
Goal is to do the reverse, click on BUTTON ONE and slideDown nested ul and so on. What is it that I'm missing here?
HTML CODE:
</head>
<body>
<div class = "vertNavigation">
<ul>
<li>BUTTON ONE
<ul>
<li>sub menu 1
<li>sub menu 2
<li>sub menu 3
<li>sub menu 4
</ul>
</li>
<li>BUTTON TWO
<ul>
<li>sub menu 1
<li>sub menu 2
<li>sub menu 3
<li>sub menu 4
</ul>
</li>
<li>BUTTON THREE
<ul>
<li>sub menu 1
<li>sub menu 2
<li>sub menu 3
<li>sub menu 4
</ul>
</li>
<li>BUTTON FOUR
<ul>
<li>sub menu 1
<li>sub menu 2
<li>sub menu 3
<li>sub menu 4
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS CODE:
.vertNavigation ul {
list-style-type: none;
padding-left: 0;
margin-lef: 0;
}
.vertNavigation li {
display: inline;
}
.vertNavigation a { /*main menu*/
display: block;
width: 100px;
text-decoration: none;
margin: 2px 0px 2px 0px;
padding: 6px 15px 3px 15px;
background-color: #EAEAEA;
color: #333;
font-size: .8em;
}
.vertNavigation li ul a { /*sub menu*/
text-decoration: none;
border-bottom: solid 1px #333;
border-length: 50px;
margin: 2px 0px 2px 0px;
background-color: #FFF;
color: #333;
}
JS CODE:
google.load("jquery", "1.6.2");
google.setOnLoadCallback(function(){
$(".vertNavigation li ul a").hide();
$(".vertNavigation ul li a").click(function()
{
//$(this).next().slideToggle("normal");
$(this).next().slideDown("normal");
return false;
});
});
Try this:
$(".vertNavigation > ul > li > ul").hide();
$(".vertNavigation > ul > li > a").click(function(e){
e.preventDefault();
$(this).next('ul').slideToggle();
});
Check the live working solution
Related
I have a ionic app that has a page.html which im tryng to apply this sass code to my flexbox table but cant compile. I have this css to style bg color
.Rtable-cell--light {
background-color: white;
border-color: mix(white,$tableColour,80%);
}
Which i call inside my Rtable-cell with include
.Rtable-cell {
box-sizing: border-box;
flex-grow: 1;
width: 100%; // Default to full width
padding: 0.8em 1.2em;
overflow: hidden; // Or flex might break
list-style: none;
border: solid $bw white;
background: fade(slategrey,20%);
> h1, > h2, > h3, > h4, > h5, > h6 { margin: 0; }
margin: -$bw 0 0 -$bw; //border collapse offset
#include Rtable-cell--light;
}
Why do i getting the error?
My flexbox table looks like this
<div class="Rtable Rtable--4cols">
<div class="Rtable-cell"><h3>Eddard Stark</h3></div>
<div class="Rtable-cell">Has a sword named Ice</div>
<div class="Rtable-cell">No direwolf</div>
<div class="Rtable-cell"><strong>Lord of Winterfell</strong></div>
<div class="Rtable-cell"><h3>Jon Snow</h3></div>
<div class="Rtable-cell">Has a sword named Longclaw</div>
<div class="Rtable-cell">Direwolf: Ghost</div>
<div class="Rtable-cell"><strong>Knows nothing</strong></div>
<div class="Rtable-cell"><h3>Arya Stark</h3></div>
<div class="Rtable-cell">Has a sword named Needle</div>
<div class="Rtable-cell">Direwolf: Nymeria</div>
<div class="Rtable-cell"><strong>No one</strong></div>
</div>
</div>
You are using wrong keyword.
.Rtable-cell--light is not a mixin, but rather a selector, so instead of #include, you should use #extend, like:
#extend .Rtable-cell--light;
Doc link: http://sass-lang.com/guide#topic-7
For some reason I cannot get the text in my middle column (of three columns) to respond to any classes or styles I apply to it. I'm just trying to slide the text in the middle column over to the right a little bit.
CSS (stylesheet):
#footer-address {
font-size:20px;
padding-left:20px;
}
#nav-foot{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0px;
text-align:left;
font-size:12px;
}
#nav-foot li{
display:inline;
}
#nav-foot a{
display:inline-block;
padding:20px 0 20px 0;
}
#nav-social {
border:1px solid #ccc;
border-width:1px 0;
display:inline;
list-style:none;
margin:0;
padding:0px;
float: left;
}
#nav-social li{
display:inline;
}
#nav-social a{
display:inline-block;
padding:20px 0 20px 0;
}
HTML:
<div style="width:30%; float:left; margin: 10px 0 10px 0; position:relative;">
<ul id="nav-foot">
<li>About Us</li>
<li>Jobs</li>
<li>Contact Us</li>
</ul>
</div>
<div id="footer-address" style="width:30%; float:left; margin: 10px 20px 10px 20px; position:relative;">
375 6th St. </br>
Atlanta, GA 30308 </br>
Phone: 404-981-3934 </br>
Email: admin#perimetermaids.com
</div>
<div style="width:30%; float:left; margin: 10px 0 10px 0; position:relative;">
<ul id="nav-social">
</i>
<li></i></li>
<li></i></li>
<li></i></li>
<li></i></li>
</ul>
</div>
Sorry if the code is sloppy or the formatting of my question, however, I'm really scratching my head as to why this won't work.
My URL is http://perimetermaids.com/test if anybody needs that as well. This is for the black footer area. Thanks for the help, and hope you all have an awesome weekend!
How do I get text-overflow to dynamically adjust when a mobile phone's orientation changes? This is how it should look:
Portrait mode
[] This is a very long ... |
[] Super long title is ... |
[] Hello |
[] Lorem ipsum |
Landscape mode
[] This is a very long title, right? |
[] Super long title is so long that ... |
[] Hello |
[] Lorem ipsum |
I've only been able to successfully see the ellipsis when text-overflow is applied to the immediate element, and this element has a hardcoded width. Now you see the problem: since mobile phones have a dynamic width based off of their orientation, this won't work. If you hardcode the width to make it look right in portrait mode, for example, it won't take advantage of the extra space in landscape mode. I already know a Javascript solution, but I wanted to see if anyone knew a clean CSS solution.
HTML
<ol>
<li>
<img src="foo.jpg" />
<p>This is a ver long title, right</p>
</li>
<li>
<img src="bar.jpg" />
<p>Super long title is so long that it can't fit</p>
</li>
</ol>
CSS
li {
}
li img {
float: left;
width: 4em;
height: 4em;
}
li p {
margin: 0 0 0 5em;
white-space: nowrap;
width: 16em;
text-overflow: ellipsis;
}
How about controlling the width for the ol?
CSS:
ol {
width: 100%;
}
li img {
float: left;
width: 4em;
height: 4em;
}
li p {
margin: 0 0 0 5em;
white-space: nowrap;
/* width: 16em; */
text-overflow: ellipsis;
overflow: hidden;
}
.clear {
clear: both;
}
HTML:
<ol>
<li>
<img src="http://www.codefromjames.com/dogquiz/images/dog.png" />
<p>This is a ver long title, right</p>
<div class="clear"></div>
</li>
<li>
<img src="http://www.codefromjames.com/dogquiz/images/dog.png" />
<p>Super long title is so long that it can't fit.
Super long title is so long that it can't fit. </p>
<div class="clear"></div>
</li>
</ol>
Here's a jsfidder demo for this, note that I added an extra <div> at the end of each <li> with clear:both style: http://jsfiddle.net/akuXJ/1/
What if you instead did width: 90%?
Add overflow: hidden to the list items, see this demo fiddle.
HTML:
<ol>
<li>
<img src="foo.jpg" />This is a ver long title, right
</li>
<li>
<img src="bar.jpg" />Super long title is so long that it can't fit
</li>
</ol>
CSS:
li img {
width: 4em;
height: 4em;
vertical-align: middle;
}
li {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: middle;
}
Or, with the images within paragraph's.
Or, with the images outside paragraph's.
Have you tried display table? If it's supported by the device, it might have the effect of assigning a width to the text by treating it as a table cell.
Something like...
ol { display: table; width:100%; }
li { display: table-row; }
li img { display: table-cell; width: 4em; height: 4em; }
li p { display: table-cell; padding-left:5em; white-space: nowrap; text-overflow: ellipsis; }
If that doesn't work, another option might be display: inline-block
I'm just trying to print back to better understand how to move around the tree traversal using console.log.
When I click on a parent I'd like to print back it's children. I thought it would be easy as
console.log($(event.target).children());
I've tried to use
console.log($(event.target).children("ul li a"));
It gives me []. I'm looking to print out the child's ID.
HTM:
<body>
<div class = "testButton">
<ul>
<li>
Parent One
<ul>
<li> P1 child </li>
</ul>
Parent Two
<ul>
<li> P2 child </li>
</ul>
Parent Three
<ul>
<li> P3 child </li>
</ul>
Parent Four
<ul>
<li> P4 child </li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
.testButton ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.testButton li {
display: inline;
}
.testButton a {
display: block;
width: 6em;
text-align: center;
text-decoration: none;
margin: 0em auto .14em;
padding: .1em .5em .1em .5em;
font-size: 2.5em;
}
.upButton {
background-color: #ccc;
color: #000;
}
.overButton {
background-color: #222;
color: #fff;
}
.outButton {
background-color: #ccc;
color: #000;
}
.clickButton {
background-color: #F90;
color: #222;
}
JS:
google.load('jquery', '1.6.2');
google.setOnLoadCallback(function(){
$(".testButton a").addClass("upButton");
$(".testButton a").mouseover(function(event){
$(event.target).removeClass("outButton").addClass("overButton");
});
$(".testButton a").mouseout(function(event){
$(event.target).addClass("outButton");
});
$(".testButton a").click(function(event){
$(".testButton a").removeClass("clickButton");
$(event.target).addClass("clickButton");
$(this).blur();
console.log($(event.target));
console.log($(event.target).children());
console.log($(event.target).parent().children());
console.log($(event.target).siblings());
});
});
This should do the trick for the structure of your ul/li/a tags.
DEMO
For the demo I have just simply alerted the ids for you. You can change these to console.log if you like. So now what I did...
$('.button').click(function() {
$(this).next('ul').children().each(function() {
alert($(this).children('a').attr('id'));
});
});
I added a class 'button' to each of your parents just to make it clear. So now when any item with a class 'button' is clicked, we get the next 'ul' in your html structure - (next() gets the next element at the same hierachy level of your code). Then for each child within that 'ul' I have alerted the id of each anchor within each child (as your structure is <li><a id="..."></li>).
I have a menu very similar to the menu here on StackOverflow. The problem is that my menu looks right in every browser I've tested it on EXCEPT for my iPhone.
Here is a screenshot of the iPhone
Now obviously the "Add Event" button is supposed to be the same size as the rest.
Here's my Markup
<div id="menucontainer">
<div class="floatleft">
<ul class="menu">
<li><%: Html.NavigationLink("Now", "Index", "Events")%></li>
<li><%: Html.NavigationLink("Coming", "Coming", "Events")%></li>
<li><%: Html.NavigationLink("Hot", "Hot", "Events")%></li>
<li><%: Html.NavigationLink("Tags", "Index", "Tags")%></li>
<li><%: Html.NavigationLink("Users", "Index", "Users")%></li>
</ul>
</div>
<div class="floatright">
<ul class="menu">
<li><%: Html.NavigationLink("Add Event", "AddEvent", "Events")%></li>
</ul>
</div>
</div>
And here's my CSS
#menucontainer{position:relative; width:675px; float:right;}
ul.menu
{
padding: 0 0 2px;
position: relative;
margin: 0;
}
ul.menu li
{
display: inline;
list-style: none;
}
ul.menu li a
{
padding: 8px 18px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #666;
color: #fff;
border: 1px solid black;
text-shadow:#000 0px 1px 1px;
}
ul.menu li a.youarehere
{
background-color:#brand_color;
color: #fff;
}
ul.menu li a:hover
{
background-color:#brand_color;
text-decoration: none;
}
ul.menu li a:active
{
background-color:#brand_color;
text-decoration: none;
}
ul.menu li.selected a
{
background-color:#brand_color;
color: #000;
}
.floatright
{
float: right;
}
.floatleft
{
float: left;
}
Unfortunately I can't figure this one out. Thanks in advance for any direction.
EDIT:
This is the final output being sent to the browser
<div id="menucontainer">
<div class="floatleft">
<ul class="menu">
<li><a class="youarehere" href="/">Now</a></li>
<li>Coming</li>
<li>Hot</li>
<li>Tags</li>
<li>Users</li>
</ul>
</div>
<div class="floatright">
<ul class="menu">
<li>Add Event</li>
</ul>
</div>
</div>
EDIT:
Reproduction on jsbin
http://jsbin.com/akadi3/2 (note: obviously you need the iOS browser to see the problem)
Ok, so after a LOT of fiddling around, it appears as though if I add a height attribute to the menucontainer, then I'm all good.
#menucontainer
{
position:relative;
width:675px;
height:40px; /* this fixed the problem */
float:right;
font-size:80%;
}