I'm trying to create an onClick function which only works below resolution of 768px. The function works on other resolutions such as 992px and above, but for some reason the function still works on resolution 768px itself.
following is my code:
$(document).on('click','.active-tab', function(e){
if ($(window).width() < 768) {
if($(this).hasClass('active')) {
$(this).removeClass("active");
$(this).siblings().slideUp("fast");
} else {
$(this).addClass('active');
$(this).parent().find('li').slideDown("fast");
}
}
e.preventDefault();
});
.active-tabs {
ul {
display: flex;
flex-wrap: wrap;
flex-direction: column;
list-style: none;
li {
display: none;
}
li:first-child {
display: block;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="tabs">
<ul>
<li class="active-tab">ALL</li>
<li>TAB ONE</li>
<li>TAB TWO</li>
<li>TAB THREE</li>
<li>TAB FOUR</li>
</ul>
</div>
I'm trying to achieve something like this:
for when resolution is above 768
for when resolution is below 768
the onClick function whenever below 768
Is it the syntax where I am mistaken? or perhaps I'm forgetting something?
Appreciate the help guys, thanks.
Your main problem in your post seems to unfounded, but I did notice that there were some logic errors that would cause the first click not to work properly. If you need a reference to prove your check is working, click here (becuase you can't resize a SO snippet).
A different way of achieving a similar effect
I'd first recommend fixing your anchor tag. You could add javascript:void(0) into it or simply put #.
<li class="active-tab">ALL</li>
If you are only using this code to toggle visibility
However, there is one way to further simplify your code. You can use toggle to get around one of your if structures:
$(document).on('click','.active-tab', function(e){
if ($(window).width() < 768) {
$(this).siblings().toggle("fast");
}
e.preventDefault();
});
If you need more options
Here's a version of your code that uses toggleClass.
if ($(this).hasClass('active')) {
$(this).siblings().slideUp("fast");
} else {
$(this).siblings().slideDown("fast");
}
$(this).toggleClass('active');
Please use this code
HTML
<div class="tabs">
<ul>
<li><a class="active-tab" href="">ALL</a></li>
<li>TAB ONE</li>
<li>TAB TWO</li>
<li>TAB THREE</li>
<li>TAB FOUR</li>
</ul>
</div>
css
.tabs li{
display:inline-block;
vertical-align:top;
}
.tabs li a.active-tab{
color:red;
}
#media screen and (max-width: 767px) {
.tabs li{
display:block;
}
.tabs li:not(:first-child){
display:none;
}
}
jQuery
$('.tabs').on('click','a', function(e){
if ($(window).width() < 768) {
$(this).parent('li').siblings().slideToggle("fast");
} else {
$('.tabs a').removeClass('active-tab');
$(this).addClass('active-tab');
}
e.preventDefault();
});
$(window).on('load resize', function () {
$('.tabs li').removeAttr('style');
});
In a page with some navigation links,I want the link of the current page are hightlighted,just like this:
The link "HTML Attributes" is highlighted(bolded) since this link will take one to the current page.
I know this can be implemented manually(just hightlighted the according link,but is there some smart way? highlight the right link dynamically and automatically?
CSS:
.topmenu ul li.active a, .topmenu ul li a:hover {
text-decoration:none;
color:#fff;
background:url(../images/menu_a.jpg) no-repeat center top;
}
JavaScript:
<script src="JavaScript/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// this will get the full URL at the address bar
var url = window.location.href;
// passes on every "a" tag
$(".topmenu a").each(function() {
// checks if its the same on the address bar
if (url == (this.href)) {
$(this).closest("li").addClass("active");
//for making parent of submenu active
$(this).closest("li").parent().parent().addClass("active");
}
});
});
</script>
Html Code:
<div class="topmenu">
<ul>
<li>Home</li>
<li>Newsletter</li>
<li>Forms</li>
<li>Mail</li>
<li>Service</li>
<li style="border:none;">HSE</li>
<li>MainMenu2
<ul>
<li>submenu1</li>
<li>submenu2</li>
<li>submenu3</li>
</ul>
</li>
</ul>
</div>
You can set the id of the body of the page to some value that represents the current page. Then for each element in the menu you set a class specific to that menu item. And within your CSS you can set up a rule that will highlight the menu item specifically...
That probably didn't make much sense, so here's an example:
<body id="index">
<div id="menu">
<ul>
<li class="index" >Index page</li>
<li class="page1" >Page 1</li>
</ul>
</div> <!-- menu -->
</body>
In the page1.html, you would set the id of the body to: id="page1".
Finally in your CSS you have something like the following:
#index #menu .index, #page1 #menu .page1 {
font-weight: bold;
}
You would need to alter the ID for each page, but the CSS remains the same, which is important as the CSS is often cached and can require a forced refresh to update.
It's not dynamic, but it's one method that's simple to do, and you can just include the menu html from a template file using PHP or similar.
It seems to me that you need current code as this ".menu-current css", I am asking the same code that works like a charm, You could try something like this might still be some configuration
a:link, a:active {
color: blue;
text-decoration: none;
}
a:visited {
color: darkblue;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
div.menuv {
float: left;
width: 10em;
padding: 1em;
font-size: small;
}
div.menuv ul, div.menuv li, div.menuv .menuv-current li {
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 5px;
font-weight: normal;
}
div.menuv ul ul {
padding-left: 12px;
}
div.menuv a:link, div.menuv a:visited, div.menuv a:active, div.menuv a:hover {
display: block;
text-decoration: none;
padding: 2px 2px 2px 3px;
border-bottom: 1px dotted #999999;
}
div.menuv a:hover, div.menuv .menuv-current li a:hover {
padding: 2px 0px 2px 1px;
border-left: 2px solid green;
border-right: 2px solid green;
}
div.menuv .menuv-current {
font-weight: bold;
}
div.menuv .menuv-current a:hover {
padding: 2px 2px 2px 3px;
border-left: none;
border-right: none;
border-bottom: 1px dotted #999999;
color: darkblue;
}
<script id="add-active-to-current-page-nav-link" type="text/javascript">
function setSelectedPageNav() {
var pathName = document.location.pathname;
if ($("nav ul li a") != null) {
var currentLink = $("nav ul li a[href='" + pathName + "']");
currentLink.addClass("active");
}
}
setSelectedPageNav();
</script>
Css classes are here
<style type="text/css">
.mymenu
{
background-color: blue;
color: white;
}
.newmenu
{
background-color: red;
color: white;
}
</style>
Make your HTML like this, Set url as id
<div class="my_menu" id="index-url">Index</div>
<div class="my_menu" id="contact-url">Contac</div>
Here write javascript, put this javascript after the HTML code.
function menuHighlight() {
var url = window.location.href;
$('#'+tabst).addClass('new_current');
}
menuHighlight();
I would normally handle this on the server-side of things (meaning PHP, ASP.NET, etc). The idea is that when the page is loaded, the server-side controls the mechanism (perhaps by setting a CSS value) that is reflected in the resulting HTML the client sees.
You can use Javascript to parse your DOM, and highlight the link with the same label than the first h1 tags. But I think it is overkill =)
It would be better to set a var wich contain the title of your page, and use it to add a class at the corresponding link.
I usually use a class to achieve this. It's very simple to implement to anything, navigation links, hyperlinks and etc.
In your CSS document insert:
.current,
nav li a:hover {
/* styles go here */
color: #e00122;
background-color: #fffff;
}
This will make the hover state of the list items have red text and a white background. Attach that class of current to any link on the "current" page and it will display the same styles.
Im your HTML insert:
<nav>
<ul>
<li class="current">Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</nav>
Please Look at the following:
Here is what's working:
1.) top menu buttons are visible and highlight correctly
2.) sub menu buttons are not visible until top menu is clicked
Here is what needs work:
1.) when sub menu is clicked, looking for new page to keep the selected sub menu open (i will highlight the selected sub menu button for further clarification on navigation)
Please see code here:
http://jsbin.com/ePawaju/1/edit
or here:
http://www.ceramictilepro.com/_6testingonly.php#
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
Do I need to put this script in the head section? Where is the best place?
<div class="left">
<nav class="vmenu">
<ul class="vnavmenu">
<li data-ref="Top1"><a class="hiLite navBarButton2" href="#">Home</a>
</li>
</ul>
<ul class="Top1 navBarTextSize">
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub1</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub2</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub3</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub4</a>
</li>
</ul>
<ul class="vnavmenu">
<li data-ref="Top2"><a class="hiLite navBarButton2" href="#">Repairs</a>
</li>
</ul>
<ul class="Top2 navBarTextSize">
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">1sub1</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">2sub2</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">3sub3</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">4sub4</a>
</li>
</ul>
</nav>
JQuery is new to me, any help would greatly be appreciated :)
var submenu;
$('.vnavmenu li').click(function () {
var elems = $('.vmenu ul:not(.vnavmenu)').length;
var $refClass = $('.' + $(this).attr('data-ref'));
var visible = $refClass.is(':visible');
$('.vmenu ul:not(.vnavmenu)').slideUp(100, function () {
if (elems == 1) {
if (!visible) $refClass.slideDown('fast');
}
elems--;
});
if (visible) $('#breadcrumbs-pc').animate({
'margin-top': '0rem'
}, 100);
else $('#breadcrumbs-pc').animate({
'margin-top': '5rem'
}, 100);
});
JavaScript:
<script type="text/javascript">
$(function() {
var url = window.location;
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().parent().parent().addClass('active');
});
</script>
CSS:
.active{
color: #fff;
background-color: #080808;
}
HTML:
<ul class="nav navbar-nav">
<li class="dropdown">
<i class="glyphicon glyphicon-user icon-white"></i> MY ACCOUNT <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<?php echo anchor('myaccount', 'HOME', 'title="HOME"'); ?>
</li>
<li>
<?php echo anchor('myaccount/credithistory', 'CREDIT HISTORY', 'title="CREDIT HISTORY"'); ?>
</li>
</ul>
</li>
</ul>
I prefer to keep code as short and plain as possible, and avoid using any external files (jquery included).
So here is what I've ended up with for myself after researching several topics - using plain Javascript and CSS, no need for jquery.
Put javascript code right after the menu finishes (after closing ul, div, whatever) - code from a snippet should be between <script>Copy code here</script>
That would allow for a script to execute right after menu will be loaded.
If you want to call it as a function on page load, then link will change only after all elements (including images) are loaded – place this code in a function, call it on page load, the code itself put before the closing tag like so:
<script>
function highlightCurrentURL() {
var a = document.getElementById("navig").getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
if (a[i].href.split("#")[0] == document.location.href.split("#")[0]) {
a[i].className = "current";
}
}
}
//
window.onload = function() {
highlightCurrentURL();
}
</script>
// restrict search to a parent with specific ID (main), rather than search in the whole document
var a = document.getElementById("navig").getElementsByTagName("a");
console.log("Current URL: ", document.location.href.split("#")[0]);
console.log("Links found in HTML: ");
for (var i = 0; i < a.length; i++) {
// for debugging you can check all found URLs in console (accessible in development mode) and delete next line after debugging
console.log(a[i].href);
// strip off any local (withing page) anchors (symbol "#" and what follows after)
if (a[i].href.split("#")[0] == document.location.href.split("#")[0]) {
// add a class to the matched link (<a>), define it in CSS
a[i].className = "current";
}
}
nav#navig a.current {
color: red;
}
<nav id="navig">
<ul>
<li>url1 name</li>
<li>url2 name</li>
<li>url3 name</li>
<li>Test link matching current URL</li>
</ul>
</nav>
You can Implement this in various ways usinh PHP or Jquery. Here is how I have implemented it in my Projects.
<?php
//set a default value when the page is not an active page
$dashboard_active=$profile_active=$home_active='inactive_page';
//get the Name of the current page;
//in simple php set the NAME of the php file similar to the link variable
//example set page name as home if you are going to print the variable $home/$home_active
$page = pathinfo($_SERVER['PHP_SELF'], PATHINFO_FILENAME);
//OR
//in Laravel
$page=Route::currentRouteName();
//OR
//send page value from the controller
${$page."_active"} = 'active_page';
//the above method will change the value of the current active page variable
?>
In html print the php data
<ul class="nav navbar-nav ">
<li ><span class=" <?php echo $dashboard_active ?> "> Dashboard</span></li>
<li ><span class=" <?php echo $profile_active ?>"> Profile</span></li>
<li ><span class=" <?php echo $home_active ?>">Home</span></li>
</ul>
YOu can also do this with Jquery
<script>
//with jquery
$(function(){
//works when your href is an absolute href instead of relative href
$('a').each(function(){
if ($(this).prop('href') == window.location.href) {
$(this).children('span').addClass('active_page');
//to make the link only active
$(this).addClass('active_page');
//to make the list active
$(this).panrent('li').addClass('active_page');
}
});
});
</script>
IN the CSS you need to add this
<style>
.active_page:hover,.inactive_page:hover
{
background-color: rgb(218, 119, 5)!important;
color: white;
}
.active_page
{
background-color: green!important;
color: white!important;
}
.inactive_page
{
color:#fff;
}
</style>
I am relatively new to jquery and I am seeking help. The aim is to click on a list item attached to a ul and have it appear whilst any other list items disappear. Only the active one is viewable
The Issue I am having is that when I click on another list item the active one disappears (as intended), but it doesn't reveal the other one, it remains hidden. I am looking for a way to reveal the list, while hiding the ones that are in-active.
I have uploaded my problem: http://jsfiddle.net/CbU4d/
html:
<div id="secondary-nav"><!--secondary-nav-->
<ul>
<li>Current Article
<ul>
<li>Example 1</li>
</ul>
</li>
<li class="active">Past Articles
<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>
</li>
</ul>
</div><!--/secondary-nav-->
css:
#secondary-nav {
float:left;
height:auto;
width:23%; /*210px*/
border-right:2px solid #000;
position:relative;
}
/*heading styles*/
#secondary-nav ul li {
padding: 0 10px;
list-style-type: none;
}
#secondary-nav ul li a {
font-family:TrajanPro;
font-size:1em;
line-height: 32px;
color:#000;
}
/*links*/
#secondary-nav ul ul li a {
display: block;
font-family:TrajanPro;
font-size:0.9em;
line-height: 27px;
text-decoration: none;
color:#000;
transition: all 0.15s;
}
#secondary-nav ul li a:hover {
display:block;
color:#af2931;
text-decoration:underline;
}
#secondary-nav ul ul {
display: none;
}
#secondary-nav li.active ul {
display: block;
}
/css
jquery using 1.7.1
$(document).ready(function(){
$("#secondary-nav ul").click(function(){
//slide up all the link lists
$("#secondary-nav ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
Try with
$("#secondary-nav ul ul").slideToggle();
Demo
I got it to work (I think) by making two changes:
Change the selector on line 2 to this:
"#secondary-nav ul li"
This means the event will be attached to the list item you click, not the entire list.
Remove the if statement on line 6. Since we're hiding all of the second level uls in the previous line, we don't need to check if it's visible; we know it isn't.
Change line 6 to this:
$(this).children('ul').slideDown();
This is because the ul you want to unfold is a child of the li you're clicking, not a sibling.
Here's my fixed jsFiddle.
Edit: If you want to stop it from hiding and re-showing when you click the one that's already expanded, just chuck this at the top of the handler:
if ($(this).children('ul').is(':visible')){
return
}
How do I show the first <ul> inside a <li>, when I hover on the <li>?
HTML:
<ul>
<li class="firstLevel">
<ul></ul>
</li>
<li class="firstLevel"></li>
<li class="firstLevel"></li>
</ul>
JS:
$('li.firstLevel').hover(function(){
$(this).find('ul:first').show();
},
function(){
$(this).find('ul:first').hide();
});
Note: this is only necessary for browsers that do not support hover on lis (IE6)
$("ul.menu>li").hover(
function() {
$(this).children("ul:first").show();
},
function() {
$(this).children("ul:first").hide();
}
);
Just to advocate CSS. If you are not supporting IE6 and don't require a special effect, I suggest doing this with CSS:
ul.menu li > ul {
display: none;
}
ul.menu li:hover > ul {
display: block;
}
I am looking for a click based single select list. Instead of the normal drop down list, I want an overlay menu (similar to how we see on facebook when we change privacy settings, the single select list that appears). Is that CSS based or any code examples to creating a similar list? All the lists i found of the net are hover lists not same as we see on f/b.
Thanks.
Something like this:
It is just a menu that pops up where use can pick an option.
If you were using jQuery it would be something like this plug-in
http://plugins.jquery.com/project/selectbox
I can't find a non JS-solution (and for JS I'm using jQuery to assign focus to an arbitrary element that would keep the sub-menu open (on the plus side, I'm pretty darn sure that Facebook will be using JavaScript, of some sort, to achieve their implementation too).
However, I've put together a couple of examples, these are, much like Facebook, simply dropdown lists, with a JavaScript handler to assign focus to the clicked element (to keep the sub-menu open regardless of mouse position on the page, until the user clicks elsewhere).
With that in mind, I've used the standard css dropdown-style mark-up:
<ul>
<li>Symbol
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</li>
<li>Symbol
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</li>
<li>Symbol
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</li>
</ul>
With the css:
ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
}
ul li {
display: inline-block;
position: relative;
width: 100px;
border-bottom: 1px solid #ccc;
}
ul li ul {
display: none;
width: 100%;
position: absolute;
top: 1em;
left: 0;
}
ul li a:hover + ul,
ul li a:active + ul,
ul li a:focus + ul {
display: block;
}
ul li ul li {
border: 0 none transparent;
}
And the jQuery:
$(document).ready(
function() {
$('li a').click(
function(){
$(this).focus();
});
}
);
Demo at JS Bin
Notice that I've used a elements, since focus is more easily assigned to anchors than plain, in this case, li elements. However a second version, with the same end result is achieved with the following jQuery:
$(document).ready(
function() {
$('li').click(
function(){
$('li').not(this).removeAttr('tabindex');
$(this).attr('tabindex','-1').focus();
});
}
);
Demo at JS Bin.
Addenda
Stu Nicholls, of CSS Play seems to have achieved a pure-css solution for this (with a gallery), but I haven't worked my way through his CSS to see how he did it.