There is a button table and list. Click on table items are displayed in a table. If you click on list - items are displayed in a list.
Сondition (list or table) is remembered using cookies
But when the cookie is empty, the default active button list, and the product is displayed in the table.
I need to display the products table and, by default, set the active button table.
And I do not understand where is the value active for the button list
To make the button value table active by default using js and only for first press.
erb:
<ul class="ctf--b-view-nav">
<li class="<%= 'active' if cookies['filter-product-views'] != 'buble' %>">
<a class="ctf--b-view-nav-list" href="">item</a>
</li>
<li class="<%= 'active' if cookies['filter-product-views'] == 'buble' %>">
<a class="ctf--b-view-nav-cols" href="">table</a>
</li>
</ul>
<!-- container with items -->
<div class="infinite-table">
<ul class="ctf--b-product-list <%= 'ctf--b-product-list-buble' unless cookies['filter-product-views'] == 'buble' %>">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
js:
$(document).ready(function(event){
$('.ctf--b-view-nav a').click(function() {
if (!($(this).parent().hasClass('active')))
{
$('.ctf--b-view-nav li').removeClass('active');
$(this).parent().addClass('active');
if ($(this).hasClass('ctf--b-view-nav-cols'))
{
$.cookie('filter-product-views', 'buble');
$('.ctf--b-product-list').addClass('ctf--b-product-list-buble');
}
else{
$('.ctf--b-product-list').removeClass('ctf--b-product-list-buble');
$.cookie('filter-product-views', 'non-buble');
}
return false;
}
else {
return false;
}
});
});
css: (for buttons use a sprite)
.ctf--b-view-nav { list-style:none; vertical-align:top; right:0; top:-50px; position:absolute; }
.ctf--b-view-nav li { float: left; padding:0 0 0 10px; }
.ctf--b-view-nav a { width:18px; height:18px; font-size:2em; line-height:0; display:block; }
.ctf--b-view-nav .active .ctf--b-view-nav-list { background-position:0 bottom; }
.ctf--b-view-nav .ctf--b-view-nav-cols { background-position:right 0; }
.ctf--b-view-nav .active .ctf--b-view-nav-cols { background-position:right bottom; }
Related
Following is my code. I am trying for a simple drop down when clicking on to li and slideup when clicking li back again. But it's not working. I don't know whats wrong. Can anyone comment on this? On top, I am trying to click on the body to get the menu slide back up again. But not when clicking inside the actual menu box (in green).
$(document).ready(function(){
let list = $('ul li');
let mega = $('.megamenu');
list.click(function(e){
e.preventDefault();
mega.slideDown(400);
if((e.target) == list){
mega.slideUp(400);
}
})
});
li{
list-style:none;
display:inline-block;
padding-right: 5rem;
}
.megamenu{
background:green;
padding:5rem;
color:white;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li>Page 1
<div class ='megamenu'><h1>Mega menu</h1></div>
</li>
<li>Page 2
<div class ='megamenu'><h1>Mega menu</h1></div>
</li>
</ul>
</div>
Could you change like this for click to li to dropdown and click li slideup again
$(document).ready(function(){
let list = $('.menu');
let mega = $('.submenu');
list.click(function(e){
e.preventDefault();
var menuDisplay = mega.css('display');
if(menuDisplay == 'block') {
mega.slideUp(400);
} else {
mega.slideDown(400);
}
})
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li class='menu'>Page 1
<div class ='submenu'><h1>Mega menu</h1></div>
</li>
<li class='menu'>Page 2
<div class ='submenu'><h1>Mega menu</h1></div>
</li>
</ul>
</div>
CSS
.menu{
list-style:none;
display:inline-block;
padding-right: 5rem;
}
.submenu{
background:green;
padding:5rem;
color:white;
display:none;
}
And click Page1 or Page2 to see slideUp and slideDown
I'm building a dropdown menu and checking for classes etc. I'm having an issue where a condition is false, but it's being treated as true.
With the below code snippet, follow these instructions:
Click on "item 1"
Click on the plus icon above "more"
Click on "item 1" again
You'll notice that if you try to reopen the menu by clicking on "item 1" the menu does not open. Why? Those list items do NOT have a class of "show"... so those should open, irregardless of the second submenu, correct?
I'm not understanding what's wrong with my logic. I don't think this is a syntax error because there are no errors in console.
See below:
$(function() {
// main expansion element
$(".expander").click(function() {
var subShown = $("ul > li", this).hasClass("show");
if (!subShown) {
$(".indented", this).slideDown('100').addClass("show");
$(".caret", this).addClass("reversedCaret");
} else {
$(".indented", this).slideUp('100').removeClass("show");
$(".caret", this).removeClass("reversedCaret");
}
});
// sub expansion element
$(".sub-expander").click(function() {
var subSelectText = $(".more-or-less").text();
if (subSelectText != "More") {
$(".indented--sub").slideUp('100').removeClass("show");
$(".sub-caret").removeClass("reversedCaret");
$(".more-or-less").text("More");
} else {
$(".indented--sub").slideDown('100').addClass("show");
$(".sub-caret").addClass("reversedCaret");
$(".more-or-less").text("Show Less");
}
});
// stop propagation on the link element within .expander class
$(".indented").click(function(event) {
event.stopPropagation();
});
});
.expander:hover {
cursor: pointer;
}
.sub-expander--indented {
padding: 0 0 0 23px;
}
.sub-caret {
margin-right: 75px;
}
.indented,
.indented--sub {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="expander">
<span class="caret downCaret right visibleCaret">+</span>
<ul>
<li class="category">Item 1
</li>
<li class="indented">Item 2</li>
<li class="indented">Item 3
<ul class="sub-expander more" style="padding-top:
0px;">
<li class="indented--sub">Chapter 5</li>
<li class="indented--sub">Chapter 6</li>
<li class="indented--sub">Chapter 7</li>
<span class="sub-caret moreCaret visibleLessCaret right">+</span>
<li class="more-or-less less sub-expander--
indented">More</li>
</ul>
</li>
</ul>
</div>
https://jsfiddle.net/3z0zo2gn/
} else {
$(".indented", this).slideUp('100').removeClass("show");
$(".caret", this).removeClass("reversedCaret");
$(".indented--sub").slideUp('100').removeClass("show");
$(".sub-caret").removeClass("reversedCaret");
$(".more-or-less").text("More");
}
As stated in the above comment, you need to remove the show class from indented--sub when removing it from indented.
Your code don't work because you didn't remove class show in li with class indented--sub
Here is my fiddle:
http://jsfiddle.net/d3su54rt/2/
I have used accordion to implement a menu with sub-menus. What I am looking to do is that everytime an outer menu item is clicked, I want the first item (first child) to highlight to red even if it isnt clicked. And when I click on any other menu item, then it should highlight only the one clicked. And then when I open an outer menu item again, by default the first one should highlight again. I am trying to add a class innerMenuItemOnClick based on specific accordion open tab.
Here is my html:
<div id="accordion">
<h3 class="outerMenuItem">OuterItem1</h3>
<ul id="statusId">
<li><a class="innerMenuItem" href="#!">Inner Item 1</a></li>
<li><a class="innerMenuItem" href="#!">Inner Item 2</a></li>
<li><a class="innerMenuItem" href="#!">Inner Item 3</a></li>
</ul>
<h3 class="outerMenuItem">OuterItem2</h3>
<ul id="networkId">
<li><a class="innerMenuItem" href="#!">Inner Item 1</a></li>
<li><a class="innerMenuItem" href="#!">Inner Item 2</a></li>
</ul>
Here is my jquery:
$("#accordion").accordion({collapsible:true, active:0, heightStyle: "content"});
$(document).on("click",".outerMenuItem",function(){
var currentlyActive=$( "#accordion" ).accordion( "option", "active" );
console.log("Current tab no. "+currentlyActive);
if(currentlyActive===0){
console.log($("#statusId li:first-child").text());
$("#statusId li:first-child").addClass("innerMenuItemOnClick");
}
else if(currentlyActive===1){
$("#networkId li:first-child").addClass("innerMenuItemOnClick");
}
else {
$("#protocolParameters").load("/404.html .someError");
}
});
$(document).on("click",".innerMenuItem",function () {
$(".innerMenuItem").removeClass("innerMenuItemOnClick");
$(this).addClass("innerMenuItemOnClick");
});
Here is the underlying css:
#accordion .ui-icon{
display:none;
}
#accordion .ui-accordion-header{
height:30px;
position: relative;
z-index: 3;
width:200px;
}
#accordion .ui-accordion-header:hover{
color:#eb5e13;
}
#accordion .ui-accordion-header .ui-state-active{
color:#eb5e13;
}
#accordion .ui-accordion-content {
position: relative;
z-index: 6;
width:180px;
color:#eb5e13;
}
#accordion .ui-accordion-header:active{
color:#eb5e13;
}
a{
color: #3f3f4e;
font-weight: bold;
padding-left:15px;
}
a.innerMenuItem{
color: #363545;
}
a.innerMenuItemOnClick{
color:#eb5e13 !important;
}
You are adding the innerMenuItemOnClick class to the li tag, but your CSS is for a.innerMenuItemOnClick, which means it will only apply to an a tag with that class.
To be consistent with your use of this class on the a tag for the click handler on your innerMenuItem links, you should add "a" to your CSS selector, adding the class to the a tag directly:
$("#statusId li:first-child a").addClass("innerMenuItemOnClick");
This requires a change to the outerMenuItem handler to remove the style on a previously clicked innerMenuItem. I simply added this to the top of that handler:
$(".innerMenuItem").removeClass("innerMenuItemOnClick");
Here is an update to your fiddle this two line change:
https://jsfiddle.net/5rhnyyfe/
I am trying to create a menu system where when a list anchor is clicked, a div below the ul list is shown. but the system is not working and i can't control if the user is over the displayed div.
Here below is the code where
I created UL list to create tabs
I created DIVs as pages to be displayed
I created jquery mouseenter event to display the div with same class as of the link's ID
I used mouseleave function to hide the displayed div.
<style>
.tabs_button ul {list-style:none; margin:0px; padding:0px;}
.tabs_button ul li {float:left; display:inline; margin-right:50px;}
.tabs_button ul li a{color:#FFF; text-decoration:none;}
.tabs_button ul li a:hover{color:#FFC222;}
.tab_pages{clear:both; position:absolute; }
.tab_pages div{display:none;width:200px; height:200px; background- color:#CCC;margin-top:30px;}
</style>
<script>
$(document).ready(function(e) {
$(".tabs_button a").mouseenter(function(e) {
var tid=this.id;
$(".tab_pages div").hide();
$(".tab_pages ."+tid).show();
});
$(".tabs_button a").mouseleave(function(e) {
var tid=this.id;
$(".tab_pages ."+tid).hide();
});
});
</script>
<div class="tabs_button">
<ul>
<li>Cars</li>
<li>Price & Offers</li>
<li>Chevy Experience</li>
<li>Service</li>
<li>Contact Us</li>
</ul>
</div>
<div class="tab_pages">
<div class="page1">
Cars Display Page
</div>
<div class="page2">
Offers Display Page
</div>
<div class="page3">
Chevy Exp Page
</div>
<div class="page4">
Service Display Page
</div>
<div class="page5">
Contact us Display Page
</div>
</div>
Here the main part i am having problem is to keep div showing if the user is hovering over the div.
Edit: Fiddle
I have created complete code bin for above issue on http://codebins.com/bin/4ldqpam
So, Try on it.
To Solve this follow below steps:
1) Include latest jQuery.js javascript file on html header tag first.
2) HTML (Little bit Changes)
<div class="tabs_button">
<ul>
<li id="page1">
<a href="#">
Cars
</a>
</li>
<li id="page2">
<a href="#">
Price & Offers
</a>
</li>
<li id="page3">
<a href="#">
Chevy Experience
</a>
</li>
<li id="page4">
<a href="#">
Service
</a>
</li>
<li id="page5">
<a href="#">
Contact Us
</a>
</li>
</ul>
</div>
<div class="tab_pages">
<div class="page1">
Cars Display Page
</div>
<div class="page2">
Offers Display Page
</div>
<div class="page3">
Chevy Exp Page
</div>
<div class="page4">
Service Display Page
</div>
<div class="page5">
Contact us Display Page
</div>
</div>
3) CSS (Add Few More Styles):
body{
background-color:#000;
}
.tabs_button{
width:950px;
}
.tabs_button ul {
list-style:none;
margin:0px;
padding:0px;
}
.tabs_button ul li {
width:120px;
float:left;
display:inline;
margin-left:10px;
margin-right:10px;
text-align:center:
}
.tabs_button ul li:hover a{
color:#FFC222;
}
.tabs_button ul li:hover{
background-color:#445566;
}
.tabs_button ul li a{
color:#FFF;
text-decoration:none;
}
.tabs_button ul li a:hover{
color:#FFC222;
}
.tabs_button ul li.selected a{
color:#FFC222;
}
.tabs_button ul li.selected{
background-color:#445566;
}
.tab_pages{
clear:both;
position:absolute;
}
.tab_pages div{
display:none;
width:120px;
height:200px;
color:#fff;
background-color:#445566;
margin-top:27px;
position:absolute;
}
4) JQuery for Menu Navigation:
$(".tabs_button li,.tab_pages div").mouseenter(function() {
var className = $(this).attr('id');
$(".tabs_button #" + className).removeClass("selected");
if (typeof(className) == "undefined" || className == null) {
className = $(this).attr('class');
$(".tabs_button li").removeClass("selected");
$(".tabs_button #" + className).addClass("selected");
}
$(".tab_pages div").hide();
var offset = $(".tabs_button li#" + className).offset();
$(".tab_pages ." + className).css({
'left': offset.left - 8
});
$(".tab_pages ." + className).show();
});
Try using the mousover event instead, like:
$(".tabs_button a,.tab_pages").mouseover(function() {
});
Remove the (".tab_pages div").hide(); from your mouseenter() event. Also, in the .tab_pages style, change position:absolute to float:left. If you were to use absolute positioning, you would need to specify either a top or bottom position and a left or right position, for example - top:0px; left:0px. But since you are specifying a top-margin of 30px, use float - absolutely positioned divs cannot have margins added to them. Lastly, in your .tabs_button ul li style, the display:inline does not do anything - calling float:left changes the li to a block element - which is what you want. I have copied the code with the changes below - should work for you.
<style>
.tabs_button ul {list-style:none; margin:0px; padding:0px;}
.tabs_button ul li {float:left; margin-right:50px;}
.tabs_button ul li a{color:#FFF; text-decoration:none;}
.tabs_button ul li a:hover{color:#FFC222;}
.tab_pages{clear: both; float: left; }
.tab_pages div{display:none;width:200px; height:200px; background-color:#CCC;margin-top:30px;}
</style>
<script>
$(document).ready(function(e) {
$(".tabs_button a").mouseover(function(e) {
var tid=this.id;
$(".tab_pages ."+tid).stop().show();
});
$(".tabs_button a").mouseout(function(e) {
var tid=this.id;
$(".tab_pages ."+tid).stop().hide();
});
});
</script>
<body>
<div class="tabs_button">
<ul>
<li>Cars</li>
<li>Price & Offers</li>
<li>Chevy Experience</li>
<li>Service</li>
<li>Contact Us</li>
</ul>
</div>
<div class="tab_pages">
<div class="page1">
Cars Display Page
</div>
<div class="page2">
Offers Display Page
</div>
<div class="page3">
Chevy Exp Page
</div>
<div class="page4">
Service Display Page
</div>
<div class="page5">
Contact us Display Page
</div>
</div>
demo for reference: http://greg-j.com/static-content/accordian/
When viewed in any other browser, the toggler works as you would expect it to. However, in IE (I'm using 8), you can only contract the currently expanded sub menu, and then you get undesired results once it is closed.
Example html:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<link type="text/css" rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body{margin: 50px; font-family: arial; font-size: 12px}
div{width: 172px; margin: 0 auto;}
a{text-decoration: none; color: #006ecf}
.gMenu{
background: #fafbfc;
border-left: solid 1px #abc1d6;
border-right: solid 1px #abc1d6;
padding: 5px 0;
}
.gMenu ul{
background: white;
border-top: solid 1px #dbe6f0;
border-bottom: solid 1px #dbe6f0;
position: relative;
top: 4px;
}
.gMenu li{
line-height: 16px;
padding: 4px 0;
position: relative;
}
.gMenu li li{
padding-left: 10px;
font-size: 11px;
}
.gMenu a{
padding: 0 4px;
}
.gMenu ul a{
padding: 0;
}
.gMenu a:hover{
color: #000;
text-decoration: underline;
}
.gMenu em{
color: #abc1d6;
}
</style>
</head>
<body>
<div>
<ul class="gMenu">
<li class="gm-active">Bodywork
<ul>
<li>Fairing Bolt Kits <em>(23)</em></li>
<li>Fairing Brackets <em>(2)</em></li>
<li>Fairings <em>(17)</em></li>
<li>Fender Eliminator Kits <em>(6)</em></li>
<li>Front Fenders <em>(5)</em></li>
<li>Graphics Kits <em>(223)</em></li>
<li>Huggers <em>(40)</em></li>
<li>Under Trays <em>(7)</em></li>
<li>Windscreens <em>(3)</em></li>
</ul>
</li>
<li>Books
<ul>
<li>Service Manuals</li>
</ul>
</li>
<li>Brakes
<ul>
<li>Brake Hardware</li>
<li>Brake Lines</li>
<li>Brake Pads</li>
<li>Brake Rotors</li>
</ul>
</li>
<li>Controls
<ul>
<li>Bar Ends</li>
<li>Cables</li>
<li>Handlebars</li>
<li>Levers</li>
<li>Mirrors</li>
<li>Pedals</li>
<li>Quick Shift Kits</li>
<li>Rearsets</li>
<li>Stabilizers</li>
<li>Throttles</li>
<li>Triple Clamps</li>
</ul>
</li>
<li>Caps, Covers, Guards
<ul>
<li>Axle Covers</li>
<li>Chain Guards</li>
<li>Heel Guards</li>
<li>Mirror & Signal Block Offs</li>
<li>Oil Caps and Dipsticks</li>
<li>Reservoir Covers</li>
</ul>
</li>
<li>Drive
<ul>
<li>Chain and Sprocket Kits</li>
<li>Front Countershaft Sprockets</li>
<li>O-Ring Chains</li>
<li>Rear Drive Sprockets</li>
<li>Roller Chains</li>
</ul>
</li>
<li>Electrical
<ul>
<li>Accessory Lighting</li>
<li>Alarms</li>
<li>Batteries</li>
<li>Gauges</li>
<li>Marker Lights</li>
<li>Radar Detectors</li>
<li>Spark Plugs</li>
<li>Taillights</li>
<li>Turn Signals</li>
</ul>
</li>
<li>Engine
<ul>
<li>Clutch Discs</li>
<li>Clutch Kits</li>
<li>Clutch Springs</li>
<li>Oil Filters</li>
</ul>
</li>
<li>Exhaust
<ul>
<li>Complete Exhaust Systems</li>
<li>Heat Shields</li>
<li>Slip-On Mufflers</li>
</ul>
</li>
<li>Frame & Swingarm
<ul>
<li>Frame Sliders</li>
<li>Kickstands</li>
<li>License Plate Kits</li>
<li>Stand Adapters</li>
<li>Swingarm Extensions</li>
<li>Swingarm Spools</li>
</ul>
</li>
<li>Fuel Systems
<ul>
<li>Fuel Injection Mapping</li>
</ul>
</li>
<li>Suspension
<ul>
<li>Fork Seals</li>
<li>Rear Lowering Kits</li>
<li>Shock Absorbers</li>
</ul>
</li>
<li>Tanks
<ul>
<li>Gas Caps</li>
<li>Tank Bras</li>
<li>Tank Protectors</li>
<li>Traction Pads</li>
</ul>
</li>
<li>Intake
<ul>
<li>Air Filters</li>
<li>Velocity Stacks</li>
</ul>
</li>
<li>Tires
<ul>
<li>Front Tires</li>
<li>Rear Tires</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Example JS:
(function($){
$.fn.gMenu = function(options) {
var o = $.extend({
speed: "fast"
}, options);
return this.each(function() {
var $ul = $('ul', this), // Get this ul's decendant ul's
$li = $(this).children('li'); // Get only the first decendant li's in this ul
$ul.not('.gm-active ul').hide();
// Create toggler elements for the first decendant li's only
$li.children('a').after(
$('<span>', { html: "toggle", 'class': "gm-toggler"}).hide()
);
var $toggler = $li.find('.gm-toggler');
// Only show the toggler when a collapsed menu item is hovered
$li.hover(function(){
$('.gm-toggler', this).toggle();
});
// Only show one child menu at a time. Never collapse them all
$toggler.click(function(){
// get this togglers parent ul
var $current = $(this).parent().find('ul');
// slide all other child menu up and remove its .active class
$($ul).not($current).slideUp(o.speed)
.parent().removeClass('gm-active');
// Stop sliding this togglers menu if it is animating and slide it the other direction
$current.stop(false,true).slideToggle(o.speed);
// If this togglers menu is active ...
$(this).parent('li').toggleClass('gm-active');
});
});
};
})(jQuery);
$(document).ready(function(){
$('.gMenu').gMenu({
speed: 200
});
});
Maybe this can point you in the right direction.
You don't need a return this.each(function() {}); since you are already passing the DOM element in the plug-in aka "gMenu" you just work from there on.
For brevity I left out a lot of code and minimized it to the features that matter.
Also you don't want to hide other opened menu items, since it breaks common patterns in UI design.
(function($){
$.fn.gMenu = function(options) {
var o = $.extend({
speed: "fast"
}, options);
$('ul', this).not('.gm-active ul').hide();
$('a', this).click(function(){
$(this).next().slideToggle(o.speed);
});
return this;
};
})(jQuery);
Solution found.
The issue was that I wasn't specifically cycling through each list element found. I reworked the jQuery a bit to put everything inside an $.each() function and now all seems well. I'm not sure if this is the most efficient way of doing it now though, so if anyone see's any room for improvement, please let me know.
http://jsbin.com/edago3/8/
(function($){
$.fn.extend({
gMenu: function (options) {
var o = $.extend({
speed: "fast"
}, options);
// Get this ul's decendant ul's
var $ul = $('ul', this);
// Hide decendant ul's that are not active
$ul.not('.gm-active ul').hide();
// loop through this lists list elements
$.each($(this).children('li'), function(){
// Create toggler elements for the first decendant li's only
$(this).children('a').after(
$('<span>', { html: "toggle", 'class': "gm-toggler"})
);
// find the togglers and hide them
var $toggler = $(this).find('.gm-toggler').hide();
// Only show the toggler when a menu item is hovered
$(this).hover(function(){
$('.gm-toggler', this).toggle();
});
// Only show one child menu at a time. Never collapse them all
$($toggler, this).click(function(){
// get this togglers parent ul
var $current = $(this).parent().find('ul');
// slide all other child menu up and remove its .active class
$($ul).not($current).slideUp(o.speed)
.parent().removeClass('gm-active');
// Stop sliding this togglers menu if it is animating and slide it the other direction
$current.stop(false,true).slideToggle(o.speed);
// If this togglers menu is active ...
$(this).parent('li').toggleClass('gm-active');
});
});
}
});
})(jQuery);