I would like to know, if it is possible to use flexnav without it's fixed width buttons.
It would be great if all nav - items only use the width they need to display their text + their padding. At the Moment I've to divide 100% with the number of nav items we have. This value is set with .flexnav li{}
<div id="wrapper">
<h1>Flexnav - Content Width Test</h1>
<div class="menu-button">Show Menu</div>
<div class="nav-container container">
<div class="nav">
<ul class="flexnav" data-breakpoint="800">
<li>Startpage</li>
<li>About Us
<li>Products
<ul>
<li>Product Category 1</li>
<li>Products</li>
<li>Large Product Category</li>
<li>Small one</li>
<li>PPPPProducts</li>
</ul>
</li>
<li>Media</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
<p>The red space is needed for a search and some Icons</p>
</div>
I've made a codepen, so that you can see the working nav. I hope someone hopefully could give me a hint how to solve this problem:
http://codepen.io/anon/pen/aCjGq
Thanks!
'At the Moment I've to divide 100% with the number of nav items we have.'- no need to do that. Just give the container div of the menu a width and use the flexnav plugin in the following way :
$(".flexnav").flexNav({
'calcItemWidths': true , // dynamically calcs top level nav item widths
});
The question is old, but this might help someone. You can add this to the CSS:
.flexnav > li {
width: auto;
}
.flexnav > li.has-subitems {
padding-right: 30px;/*to account for the menu dropdown icon*/
}
.flexnav li ul{
padding-left: 0 !important;
min-width: 210px;/*or whatever you want*/
}
Related
so im working on a mobile menu and what i want to have happen is for the user to click on a list item and have that item move to the top of the list, then when the user clicks another item it moves the first item back to its original position and the second item up into the first position.
so im stuck on the second part and im not sure how to execute it. i've tried storing the list in an array and adding and removing items with splice, but i couldn't get it to work properly, any help would be great thanks.
$(".article-featured__navigation-menu-mobile li").click(function(){
var item = $(this).addClass('active-state');
$(".article-featured__navigation-menu-mobile").prepend(item);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu-item active-state"><a href="#" class="tax-filter" >0</a></li>
<li class="menu-item">1 </li>
<li class="menu-item">2 </li>
<li class="menu-item">3 </li>
<li class="menu-item">4 </li>
</ul>
You can do it with the Flexbox and take advantage of the order property which specifies the layout order of flex-items inside flex-containers. In other words, you can manipulate element's order regardless of the their position in the DOM.
I've also made some corrections to jQuery to give you the desired result:
$("ul li").click(function(){
$(this).addClass('active-state').siblings().removeClass('active-state');
});
ul {
display: flex; /* displays flex-items (children) inline */
flex-direction: column; /* stacks them vertically (assuming the mobile menu layout) */
list-style: none;
}
.active-state {
order: -1; /* the initial value of the order property is set to 0, i gave it -1 because of the changed direction, otherwise it would have been 1, i.e. place it above the others because of the higher value */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu-item"><a href="#" class="tax-filter" >Link 0</a></li>
<li class="menu-item">Link 1 </li>
<li class="menu-item">Link 2 </li>
<li class="menu-item">Link 3 </li>
<li class="menu-item">Link 4 </li>
</ul>
I have a logo which is displaying properly and I want to have the Google Translate drop down display right below it then beside it with 20 pixels of space have my menu on the same line. Then below these two items display a horizontal divider. The main text shall display below the divider.
However, I am having trouble getting the Google Translate to display under the logo and the menu display next to it with some space between them:
The horizontal line is showing above these two items instead of below
them.
Could not get the space between Google Translate and menu
The Google Translate is overwritten the main text
I have created a fiddle to show the issue.
The main problem is with these two CSS item I believe but I have tried many variations and just couldn't get it to align properly.
/* PROBLEM IN THE FOLLOWING TWO CSS */
#google-translate {
left:10px;
position:relative;
top:0px;
float:left;
}
#header_right {
position:relative;
display:inline;
padding-left:20px;
}
Your assistance is greatly appreciated. Thank you.
EDITED:
Expected outcome would look like:
LOGO
Google Translate + 20px + Menu
Horizontal line
Main Text
Google Translate and the menu should sit on top of the horizontal line.
Here is the link of js fiddle , look into it
<div id="header_holder">
Logo
<div id="header_right">
<div id="google-translate">
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
<div id="left20">
<ul class="dropdown dropdown-horizontal">
<li><span class="dir">Menu A</span>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li><span class="dir">Menu B</span>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li>Menu C</li>
<li>Menu D</li>
</ul>
</div>
</div>
<div id="rule">
</div>
<div>
MAIN BODY TEXT 1
<BR /> MAIN BODY TEXT 2
<BR /> MAIN BODY TEXT 3
<BR /> MAIN BODY TEXT 4
<BR /> MAIN BODY TEXT 5
<BR /> MAIN BODY TEXT 6
<BR />
</div>
</div>
https://jsfiddle.net/eacnn958/
Check the above link
Do this change only in css
#rule {
border-top: 1px solid #000000;
margin-top:25px;
}
ul.dropdown {
font-weight: normal;
font-family: arial, verdana, sans-serif;
font-size: 12px;
padding-left:20px;
}
here is the https://jsfiddle.net/cfhu1hvy/ check i have made change only in css
Managed to make it work by:
Remove the position:relative; on #google-translate
Change the display to "inline-block" instead of "inline" on #header_right
Add "margin-top:15px;" to #rule
I am trying to accomplish some different thing which is something similar to the feature of news ticker. Before I ask this I tried to get it work using different different news ticker jquery plugins. But still no Luck.
This is markup I am using and let me to explain my requirement through it.
<div class="container">
<ul class="feeds" id="feeds">
<li class="category">category 01</li>
<li class="category-item">Sub category 01</li>
<li class="category-item">Sub category 02</li>
<li class="category-item">Sub category 03</li>
<li class="category-item">Sub category 04</li>
<li class="category">category 02</li>
<li class="category-item">Sub category 01</li>
<li class="category-item">Sub category 02</li>
<li class="category-item">Sub category 03</li>
<li class="category-item">Sub category 04</li>
</ul>
</div>
I need to display these list item like a news stick in a horizontal bar. How I need to display it is one category item with following two subcategory items in a row. If particular category have more than two subcategory then I need to display next two subcategory items and like wise. When displaying subcategory secondly the main category name should be still display in the row.
Finally I tried with Jquery Advance News Ticker plugin. It was close but not 100%
$('#feeds').newsTicker({
row_height: 40,
max_rows: 1,
duration: 3000,
pauseOnHover: 0
});
So anybody can tell me how to accomplish this with javascript or can I know is there any jquery pluging to do this.
UPDATE : CSS -
> .container {
background: #1e1e1e;
height: 40px;
.feeds {
list-style: none;
float: left;
margin: 0;
padding: 0;
display: table;
> li {
display: inline-block;
color: #FFFFFF;
display: inline-block;
padding-right: 50px;
//display: table-cell;
vertical-align: middle;
padding-top: 5px;
}
> li.category {
background: #a11041;
margin: 7px 30px 0;
padding: 3px 10px;
}
}
}
Hope somebody will help me out regarding this.
Any idea would be greatly appreciated.
Thank you.
I can't find an existing solution for what you want, but if you are planning on writing your own solution this may help.
It uses a somewhat different HTML structure, but I think this is what you're trying to achieve.
HTML:
<div id="feed">
<ul>
<li>
Category 1
<ul>
<li>Subcategory 1</li>
<li>Subcategory 2</li>
<li>Subcategory 3</li>
</ul>
</li>
<li>
Category 2
<ul>
<li>Subcategory 1</li>
<li>Subcategory 2</li>
<li>Subcategory 3</li>
<li>Subcategory 4</li>
<li>Subcategory 5</li>
<li>Subcategory 6</li>
<li>Subcategory 7</li>
<li>Subcategory 8</li>
</ul>
</li>
</ul>
</div>
With CSS you make sure that the viewport (#feed) only shows one category name and two subcategories. Then, with JavaScript, you allow the user to go to the next two subcategories by changing the top or margin-top of the sub-ul-element. If the user reached the bottom of subcategories, it goes to the next category. If the user reached the last category, it goes to the first category again.
Working example: http://jsfiddle.net/Ln73X/1/
I never get why people like to use plugins so much, it just uses a lot of space (size vise)!
anyways I had to do this a while ago, I didn't use a plugin, just pure css and jQuery. this example provides an always animating news sticker. if you want an example like the one you provided you can easily implement it, or if it is too difficult for you let me know and I'll provide you one.
first you have to set the overflow of the container to hidden in css and then put the ul inside another div (let's call it #box).
and as for your jQuery:
$('#box ul li:first-child').animate({marginTop:'-110px',paddingTop:'0px'},4980,'linear');
setTimeout(function(){
$('#box ul li:first-child').finish().appendTo('#box ul').css('margin-top','0px').css('padding-top','10px');
},5000);
setInterval(function(){
$('#box ul li:first-child').animate({marginTop:'-110px',paddingTop:'0px'},4980,'linear');
setTimeout(function(){
$('#box ul li:first-child').finish().appendTo('#box ul').css('margin-top','0px').css('padding-top','10px');
},5000);
},5020);
the marginTop in the animation should be the negative of the height of your li. (in this example it is -110px)
here is the demo:
http://codepen.io/anon/pen/ClzLy
I am trying to position charts on a page. Here is screenshot for you to have a look.
I want it so that only one element (chart) is visible at a time. I know margin and padding stuff. But i do not think that will work for all resolutions.
What you suggest?
How about this:
FIDDLE
<ul>
<li id="one">onetwothree</li>
<li id="two">onetwothree</li>
<li id="three">onetwothree</li>
</ul>
(Relevant) CSS
li
{
width: 100vw; /* 100% of viewport width */
height: 100vh; /* 100% of viewport height*/
}
Another way is to use jQuery tabs.
For this FIDDLE I copied the code directly from jQuery UI site and modified it.
HTML
<div class='charts'>
<ul>
<li>Daily Use</li>
<li>Monthly Use</li>
<li>Annual Use</li>
</ul>
<div id="tabs-1">
<div class='chart1'>This is your daily use of electricity</div>
</div>
<div id="tabs-2">
<div class='chart2'>This is your monthly use of electricity</div>
</div>
<div id="tabs-3">
<div class='chart3'>This is your annual use of electricity</div>
</div>
</div>
You can use the display property (references are available in MDN and W3C) to make one of the charts invisible when you show the other. For example:
CSS
.visible {
display: block;
}
.invisible {
display: none;
}
HTML
<div class="visible">This text is visible.</div>
<div class="invisible">But this one isn't.</div>
<div class="invisible">Neither is this one.</div>
<div class="visible">But this is. :)</div>
Take a look in the demo JSFiddle.
Whenever I hover over the second button in the menu, a "submenu" appears. When it appears, it partially covers the images in a div "container".
The styling of the submenu is such that it is semi-transparent so the images inside the div "container" also appear in the background of the menu, which doesnt look that good.
I know that the simple solution would be to change the location of the div but then the images would not be centered so that is not an option. I was wondering if it is possible that whenever I hover over the buttons that have a submenu, the div "container" hide and appear again when I move my mouse away from the menu. The div "container" should not hide when hovering over first Home button since it does not have a submenu and images should remain hidden as long as the menu is open. Is it possible in javascript or jQuery or CSS3??
HTML Code:
<div id="menu">
<ul class="menu" id="tempMenu">
<li class="Home">Home</li>
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
<ul class="submenu">
<li>
<a id="one" href="">One</a>
</li></br>
<li>
<a id="two" href="">two</a>
</li>
<li>
<a id="three" href="">three</a>
</li>
<li>
<a id="four" href="">four</a>
</li>
<li>
<a id="five" href="">five</a>
</li>
<li>
<a id="six" href="">six</a>
</li>
<li>
<a id="seven" href="">seven</a>
</li>
<li>
<a id="eight" href="">eight</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div id="container">
<div id="box1" class="box">Image1<img src="images/image1.png"></div>
<div id="box2" class="box">Image2<img src="images/image2.png"></div>
</div>
CSS Code:
ul.menu .submenu{
display: none;
position: absolute;
}
ul.menu li:hover .submenu{
display: block;
}
$('.submenu').hover(function() {
$('#container').hide()
}, function() {
$('#container').show()
});
You basically want to detect on the hover event whenever the current menu item (one of the .menu > a elements) contains a submenu (.submenu).
What about :
$('.menu > a').hover(function(){
if ($(this).find('.submenu').length != 0) {
$('#container').hide();
}
}, function(){
$('#container').show();
});
Also, some of your html closing tags have issues, you should ensure that they are all closing in a correct order to prevent unexpected glitches.
firstly give that div 2 class names like-class1,class2
in Css :
.class1{
display: none;
position: absolute;
}
.class2{
display : block;
}
in jquery :
//this would track mouse pointer in/out events
$("#menu").hover( function(event){ $("#div").attr("class","class1"); },
function(event){ $("#div").attr("class","class1"); } );
You forgot to close this
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
to
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a></li><div>
for the Jquery i think this will help
$('.submenu').mouseenter(function() {
$('#container').hide()
}).mouseleave(function(){
$('#container').show()
});