We Keep Coding

Hide link if href is blank, and then display a different button?

I have a link and div within each of my list items. If the link HAS an href then I want to make sure the div is hidden within its list item and the link appear just normal.
However if the link DOES NOT have a href (e.g. href=""), then I want to add the class .show to the div so I can show it. I also want to hide the link at the same time.
Or is there a better way to do this? Thanks
<style>
.nolinkdiv { display:none; }
.show { display:block!important; }
</style>
<ul>
<li>
Register
<div class="nolinkdiv">Register Coming Soon</div>
</li>
<li>
Register
<div class="nolinkdiv">Register Coming Soon</div>
</li>
</ul>

You don't need JavaScript for this:
.nolinkdiv { display:none; }
ul li a[href=""] {
display: none;
}
ul li a[href=""] + div {
display: block;
}

This is actually the proper way of doing it to hide via CSS only:
ul li a {
display: none;
}
ul li a[href^="https:"],
ul li a[href^="http:"] {
display: block; //This can be anything else rather than block, such as grid etc.
}

$( document ).ready(function() {
$('ul li').each(function(idx, li) {
var LI = $(this);
var hrefValue = LI.find("a").attr('href');
if(hrefValue) {
LI.find("div").hide()
} else {
LI.find("a").hide()
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Register
<div class="">Register Coming Soon</div>
</li>
<li>
Register
<div class="">Register Coming Soon</div>
</li>
</ul>

Adding an active class to a ul list in nav

I am trying to add a position indicator to my nav bar using the snippet below (i.e. a border should appear when a list item is selected). I currently have the rest of my css code nested using scss in the form nav{ li{/*code here */} a{/code here/}} and so on. When I add this active tag, nothing happens. Should I be formatting this differently with the active tag? Is there an easier way to do this? Why dosen't the active tag work? Thanks!!
HTML
<nav class="navbar navbar-main">
<ul class="top-menu">
<li id="home">HOME</li>
<li id="about">ABOUT</li>
<li id="info">MEDIA</li>
<li id="social">SOCIAL</li>
</ul>
</nav>
CSS
#nav ul li .active {
border-bottom:3px #FFF solid;
}
JS
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("#nav ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})

For starters the css is not targeting the element correctly. Your css is looking for an element with an id of nav, which doesn't exist.
The nav element has two classes (navbar and navbar-main), so you can use either to start off the selection. Because the jquery is adding a class of active to a matching link, the css rule would need to include a. To actually see the border, you'd also need to set a display property. One that is used quite often is block e.g:
.navbar ul li a.active {
display:block;
border-bottom:3px #FFF solid;
}
In the example I've provided below, I've updated the jquery to target a specific link, just for illustration purposes.
$(document).ready(function() {
var pgurl = "#about"; //Using a static value for illustration purposes.
$(".navbar ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' ) {
console.log($(this).attr("href"));
$(this).addClass("active");
}
});
});
Fiddle example

Below code will find all <a> tag whose href attribute contains the current pathname.
$(function () {
$("a[href*='" + location.pathname + "']").addClass("active");
})

This will work for you. That's how I use mine.
$(document).ready(function () {
$(".top-menu > li > a[href*='" + location.pathname + "']").addClass('active'); //the .top-menu is your ul class
});(jQuery);

jQuery navigation-items with nested submenus should open on click

I need to add a second level of submenus here.
Is there a dynamic solution, so only one submenu is opened, when clicking on the link?
And when clicking a link to a submenu (in the first submenu), then open this one?
And so on…
I already changed the jsfiddle a little, to have one level of sublevels more: http://jsfiddle.net/cRsZE/363/
Working example with one level of submenus: JSFiddle Demo
HTML:
<ul id="nav">
<li>Home</li>
<li class="parent">About
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li>Contact</li>
</ul>
CSS:
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
jQuery:
$(document).ready(function() {
$('.parent').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
Source: Creating Drop Down Menu on click CSS

Try,
CSS:
.hidden {
display: none;
}
JS:
$('ul ul').addClass('hidden');
$(document).ready(function () {
$('.parent').click(function (e) {
e.stopPropagation();
$(this).find('ul').first().toggleClass('hidden');
});
});
DEMO

CSS to set the background color of dropdownlist on mouse hover

In my MVC Razor layout view I am trying to set the background color of my dropdown list on mouse hover:
The list looks like this:
<li class="dropdown">
Partner <b class="caret"></b>
<ul class="dropdown-menu" style="background-color:#080808">
<li class="marv-main-li">#Html.ActionLink("Test1", "Action1", "Partner")</li>
<li class="marv-main-li">#Html.ActionLink("Test2","Action2","Partner")</li>
<li class="marv-main-li">#Html.ActionLink("Test3","Action3","Partner")</li>
<li class="marv-main-li">#Html.ActionLink("Test4","Action4","Partner")</li>
</ul>
</li>}
I tried this css which didnt work:
.dropdown .dropdown-menu .li a:hover {
background-color: #06fa12;
}
How can I change the background color of the text in the dropdown list on mouse hover event?
I am using Twitter bootsrtap 3

Since <li> is not a class, you should remove the dot before the li in your stylesheet.
Something like this
.dropdown .dropdown-menu li a:hover {
background-color: #06fa12;
}

It is impossible to change a parent element by hovering on a child element. Here is a javascript solution with jQuery.
http://jsbin.com/uWupAtE/1/
$(function() {
var ul = $('.Parent'),
li = $('.Child');
li.mouseover(function() {
ul.addClass('hovered');
});
li.mouseout(function() {
ul.removeClass('hovered');
});
});

iOS click is activating parent anchor of dropdown menu

Iv run out of solutions that I can think of or find for this problem. I'm working on a fixed to the top of the page. The left side has a anchor that takes you to the top of the page, if hovered over it will show other external links. The right side is a list of page sections with anchors to scroll you to them.
this all works fine on desktop as hover and click are separate events, but on an ipad they are they same. On an iPad you should be able to touch the "Product List" list item and have the drop down menu appear. If touched again it will take you back to the top. Right now when you touch it will take you back to the top and display the hover.
Here is a jsfiddle recreating the code and issue. http://jsfiddle.net/hyaTV/5/
HTML
<ul class="one">
<li><a class="intrapage" href="#stage">Product Title</a>
<ul>
<li>other product</li> <!-- link that goes to different page -->
<li>other product</li> <!-- link that goes to different page -->
</ul>
</li>
</ul>
<ul class="two">
<li><a class="intrapage" href="#section_one">birds</a></li> <!-- goes to Birds section -->
<li><a class="intrapage" href="#section_two">bees</a></li> <!-- goes to bees section -->
</ul>
CSS
ul.one{float:left;list-style:none;}
ul.one ul{display:none;}
ul.one > li:hover ul{display:block;}
/* styling for right side nav */
ul.two{float:right;list-style:none;}
ul.two li{display:inline-block;}
JS
// scrolls window to element id with easing
$(".intrapage").click(function(event) {
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 850);
return false;
});

You could use iOS :hover issue to your advantage. I believe by changing your CSS to
ul.one > li ul { display: none; }
ul.one > li:hover ul { display: block; }
That said, above problem doesn't exist on other mobile OS. there're no way to mouse out on iOS.
It's better to detect if user is on mobile device and add .mobile with javascript to <body> then toggle the sub-menu on click events.
CSS
ul.one > li:hover ul, ul.one > li.hover ul { display: block; }
JS
$('body.mobile ul.one > li').click(function(e) {
$(this).toggleClass('hover');
});

I came up with a solution which appears to work. It will require your page to include the Modernizr JS to check if touch is supported or not.
JS
if (document.addEventListener) {
document.addEventListener("touchstart", function(){}, true);
}
if($('html').hasClass('touch')){
$('.one > li').click(function(e){
if($(this).hasClass('hover')){
// $(this).removeClass('hover');
} else {
$(this).toggleClass('hover');
}
});
$('html').bind('touchstart', function(){
if($('.one > li').is(':hover')){
// do nothing
} else {
$('.one > li.hover').removeClass('hover');
}
});
$('.one a.intrapage').click(function(event){
if($('.one > li').hasClass('hover')){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 850);
return false;
} else {
event.preventDefault();
}
});
$(".two .intrapage").click(function(event) {
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 850);
return false;
});
} else {
$(".intrapage").click(function(event) {
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top - 50}, 850);
return false;
});
}