I am trying to create a navigation bar following is my code:
html:
This is Navigation baar
<div class="cat-set">
<div class="icon-wrap">
<div class="icons active" id="mobiles"><div class="bgimg mobiles"></div></div>
<div class="icons" id="laptops"><div class="bgimg laptops"></div></div>
</div>
</div>
on hover of each '.icons' class a division will be shown, so there are two boxes to show and hide, this is the code for this:
<div class="cat-demo" id="mobiles">
<p>This is for mobiles, if mouse is on .mobiles then this will be shown</p>
</div>
<div class="cat-demo" id="tablets">
<p>This is for tablets, if mouse is on .mobiles then this will be shown</p>
</div>
this is Jquery code for this:
$('.icons').hover(function(){
$('.icons').each(function(){$(this).removeClass("active");});
$(this).addClass("active");
var position = $(this).position();
$('.cat-demo').css({'left':(position.left-4)+'px'});
var showThis=$(this).attr("id")
$(".cat-demo:visible").hide()
$("'#"+showThis+".cat-demo'").show();
});
So till here everything is working fine, but problem is I want to hide the '.cat-demo'
if mouse pointer is out of out of '.icons' and if pointer is on .cat-demo then it should not hide this. please help me... If you want to change the html layout please go ahead.
this is the fiddle link for this http://jsfiddle.net/ndevJ/
Is it so necessary to use js for such types of menus?
If your menu has simple behavior, then use only CSS for show/hide menu's sub items.
For example:
<ul class="cat-set">
<li>
mobile
<p>
This is for mobiles, if mouse is on .mobiles then this will be shown
</p>
</li>
<li>
laptops
<p>
his is for tablets, if mouse is on .mobiles then this will be shown
</p>
</li>
</ul>
And CSS:
ul.cat-set > li {display: inline-block; margin: 10px;}
ul.cat-set > li p {display: none; position: absolute;}
ul.cat-set > li:hover p {display: block;}
Related
I'm trying to change the sub-menu behavior of a site. The original sub-menu appears as a drop-down, and instead I'd like it to appear in a separate full horizontal div.
So far I've done this:
jQuery(document).ready(function( $ ){
$(".header").append("<div class='subber'><div class='sub-menu'></div></div>");
$(".main-navigation ul li.menu-item-has-children").mouseover( function() {
var a = $(this).find(".sub-menu").html();
$(".subber .sub-menu").html(a);
});
});
... with some css, and it works well. the original sub-menu HTML is copied to the subber sub-menu.
I'd like each subber sub-menu to be positioned relatively to the original menu item, even though they occur in separate areas of the HTML. Can I somehow bind the two?
My HTML code:
<div class="header">
<div id="navigation">
<div class="site-navigation">
<nav class="main-navigation">
<ul class="menu-main-menu">
<li class="menu-item">
some text
</li>
<li class="menu-item menu-item-has-children">
some text
<ul class="sub-menu">
<li class="menu=item">
sub item text
</li>
</ul>
</li>
<li class="menu-item">
some text
</li>
</ul>
</nav>
</div>
</div>
<div class="subber">
<div class="sub-menu"></div>
</div>
</div>
Since there's no actual parent-child relationship in the HTML structure, there's no CSS-way of positioning your new sub-menu relative to a top-level menu item.
Instead, you'll have to manually position the new sub-menu with JS, using the coordinates of the original menu item.
Keep in mind this basic positioning won't create a "stickyness" between the two, so if your main menu moves (e.g. a sliding menu bar with up/down toggle states), you'll have to trigger an update to the sub-menu positioning using a listener and function.
Codepen
$("#menuItem1").mouseover( function() {
/* get original menu */
var origMenu = $(this);
/* grab content out of original sub-menu */
var myContent = origMenu.find(".sub-menu").html();
/* copy content over to new sub-menu outside of navigation */
$(".subber .sub-menu").html(myContent);
/* get the coordinates of the original menu item */
var subberLeftOffset = origMenu.offset().left;
var subberTopOffset = origMenu.offset().top + origMenu.innerHeight(true);
/* re-position the new sub-menu so it appears below the original menu */
$(".subber").offset({top: subberTopOffset, left: subberLeftOffset});;
});
#origNavigation .sub-menu {
visibility: hidden;
height: 0px;
}
#menuItem1 {
margin-top: 8em;
margin-left: 8em;
padding: 1em;
width: 200px;
border: 1px solid black;
}
<div id="origNavigation">
<div id="menuItem1">
Hello
<div class="sub-menu">Sub-menu</div>
</div>
</div>
<div class="subber">
<div class="sub-menu"></div>
</div>
I have this dropdown menu and it has a gap between parent and child selector. which is causing it to close fast.
Fiddle
render() {
return (
<div class="dropdown-wrapper">
<div class="image">Image</div>
<ul class="dropdown-container">
<li class="dropdown-list">Nothing</li>
<li class="dropdown-list">Help</li>
<li class="dropdown-list">Settings</li>
<li class="dropdown-list">Logout</li>
</ul>
</div>
);
}
I tried few things.
using react onMoverOver and onMouseOut, which results in same behaviour
Changing css
Tried using jquery
How can I solve this problem. Any indication what i am doing wrong?
margin-top: 0; on .dropdown-container -- Because you have a margin on the .dropdown-container div, as soon as you move off the .image div you are no longer hovering over it... so the dropdown closes.
Fiddle update
If you want space.. add it to the .image class...
.dropdown-wrapper > .image { padding-bottom: 15px; }
Fiddle Update
I am creating an accordion using bootstrap 3. What I want is the accordion's height is always fixed no matter how its content is. If the content of an element is too large then a vertical scrollbar should appear inside that element. Also, when user click an element's header that element should take the rest of the height of the wrapper (and display scrollbar if the rest of height is not enough).
I change flex-grow:1 when user click on the panel-header. However, when clicking "Collection 2" the scrollbar didnt appear inside the content-body of "Collection 2" as I expected and the accordion is pushed outside of the wrapper div. Could you please help? I prefer a css only solution if possible. Thanks.
The template is:
<body ng-app="accordion" ng-controller="ctrler as ctrl">
<div id="wrapper" class="full-height wrapper">
<div class="panel-border panel-group column-flex full-height" id="accordion">
<div ng-repeat='key in [1,2,3]' class='panel panel-default'>
<div class="list-group-item">
<a class="panel-title" data-toggle="collapse" data-target="#{{key}}" data-parent="#accordion" ng-click='onClick($event)'>Collection {{key}}</a>
</div>
<div class="panel-collapse collapse content-body" id="{{key}}">
<div class="panel-body">
<ul class="list-unstyled">
<li ng-repeat="item in data1">
<div>{{item}}</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
The styling is :
.column-flex{
display : flex;
flex-direction: column;
}
.wrapper {
height: 500px;
border-style: solid;
}
The code to add flex-grow is:
if($(e.target).parents('.panel').css('flex-grow')==1){
$element.find(".panel").css('flex-grow',0);
}else{
$element.find(".panel").css('flex-grow',0);
$(e.target).parents('.panel').css('flex-grow',1);
}
You can check the example here : https://plnkr.co/edit/iqrHG80GXj8teiRGeBU8?p=preview.
Add this to your code:
.panel {
display: flex;
flex-direction: column;
}
.collapse.in {
overflow-y: auto;
}
revised plunkr
If you want a scrollbar to appear when the height of .wrapper is exceeded, add overflow: scroll; to .wrapper. But that will show a scrollbar for .wrapper, not individual panels in the accordion. If you want a scrollbar to appear for the individual panel in the accordion, apply a height and overflow: scroll; to each .panel-collapse where you want the scrollbar to appear.
I have a simple menu and from it, i am using jQuery to toggle visibility of few DIV's.
Code is pretty straightforward, like bellow, and if i am not asking too much, i could use some help with additional functionalities.
<div id="one" class="navLinks"> content 1 </div>
<div id="two" class="navLinks"> content 2 </div>
<div id="three" class="navLinks"> content 3 </div>
<div class="nav">
<nav>
1
2
3
Normal Link
</nav>
</div>
$('nav a').click(function() {
$('.navLinks').hide();
$(this.getAttribute('href')).slideToggle('slow')
});
So, currently, if the user click on the link, a div will slide from the top, but except that, i would need 2 more things.
If user opens, lets say link no.2, and after that, he wants to close it by clicking on the same link, div should slide up (instead of down like it currently does).
Similiar to this, if the user opens link no2, and after that wants to open link no1, after the click, that div would need to slide up and be shown.
I know i am asking too much, but any help would be greately appreciated.
FIDDLE http://jsfiddle.net/4rfYB/38/
I suggest using jQuery's not() to exclude the requested element from those being hidden.
That way, you can hide all content areas that are not the requested one.
I've also used slideUp('slow') instead of hide(), purely for stylistic reasons.
$('nav a').click(function() {
var $requested = $(this.getAttribute('href'));
$('.navLinks').not($requested).slideUp('slow');
$requested.slideToggle('slow')
});
.navLinks {
display: none;
color: white;
}
div#one {
background: red;
height: 100px;
}
div#two {
background: blue;
height: 80px;
}
div#three {
background: black;
height: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<nav>
1
2
3
</nav>
</div>
<div id="one" class="navLinks">content 1</div>
<div id="two" class="navLinks">content 2</div>
<div id="three" class="navLinks">content 3</div>
You can do something like this:
$('nav a').click(function() {
$(this.getAttribute('href')).toggleClass('open').slideToggle('slow',function() {
$(this).siblings('.open').slideToggle('slow').toggleClass('open');
});
});
http://jsfiddle.net/4rfYB/39/
G'day!
I have a page which has Horizontally Scroll feature going on there.
I have a side bar and a content box
In side bar I have 5 links, say LINK1 - LINK5
In the content box, I have 3500px of width which contains 5 sections of divs of 700px each.
So the page initially loads in the first 700px div. So if I click on Link 3, it will smoothly scrolling to 3rd div section.
However, I would like to load the page in the 2nd div.
I was able to do this using scrollLeft()
<script>$("div.content1").scrollLeft(700);</script>
But the horizontal scrolling will be messed up. The second div will act as first div, which means when I click LINK1, it won't be scrolled back.
Help?
*I think this code is needed
<script>
function goto(id, t){
//animate to the div id
$(".contentbox-wrapper").stop().animate({"left": -($(id).position().left)}, 1200);
}
</script>
This is sample of HTML code
<div id="sidebar1">
<span class="upper">Foods</span><br />
<span class="lower">Rice, Noodles & Pasta</span><br />
<span class="lower">Snacks & Tidbits</span><br />
<span class="lower">Canned & Ready to Eat</span><br />
<span class="lower">Breakfast Cereal</span><br />
<br />
This is sample of my content box
<div class="content1">
<div class="contentbox-wrapper">
<div id="rice" class="contentbox" align="center">
<h2>
Rice, Noodles & Pasta
</h2>
<section id="product">
<ul class="clear">
<li data-id="1">
<div href="#">
<img src="images/products/f1/_DSC4640.jpg" width="200" height="200" />
<h3>Maggi Curry Flavour</h3>
<p>(5 + 1) x 79 G</p>
<h2>Price:$2.40</h2>
</div>
</li>
I've created an example based a little on your markup. I hope, that it is, what you're looking for. I also made some minor changes on your JavaScript. See the explanation below.
HTML
<nav>
<a>Item 1</a>
<a>Item 2</a>
</nav>
<div class="contentbox-wrapper">
<div>
<h2>Item 1</h2>
</div>
<div>
<h2>Item 2</h2>
</div>
</div>
If you can apply a markup like this, where the index of each link corresponds with the index of each content container, then you can get rid of all the ids that you need in the JavaScript part.
CSS
div.contentbox-wrapper {
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
overflow-x: scroll;
font-size: 0;
line-height: 0;
white-space: nowrap;
}
div.contentbox-wrapper > div {
display: inline-block;
width: 400px;
height: 200px;
text-align: center;
}
div.contentbox-wrapper > div:last-child {
margin-right: 0;
}
JavaScript
var container = $('div.contentbox-wrapper');
var boxes = container.children();
$('nav > a').click(function() {
container.stop().animate({
scrollLeft: boxes.eq($(this).index()).get(0).offsetLeft
}, 350);
});
Try to store selectors that you use multiple times in variables. The advantage is, that you don't need to re-query them again. This JavaScript does nothing else, then getting the offset of the box that corresponds with the clicked link, using .index() and .eq(). This value is then used in the .animate()-function to scroll to this position.
Demo
Try before buy
A few notes
If you have an ampersand within normal content like "Rice, Noodles & Pasta" you must escape it like: &.
Don't use align="center". It is deprecated since HTML4. Use CSS for this purpose.