I'm styling a menu that has a toggleClass in there, so far no problem, but when i have the hover function and i do hover then mouse on the menu elements the function executes on all the menu's elements, how do i manage to only affect one at the time?
The menu:
<div id="menu_segundo">
<ul>
<li class="curso av">AV</li>
<li class="curso dc">DC</li>
<li class="curso dp">DP</li>
<li class="curso pa">PA</li>
</ul>
</div>
The Css
#menu_segundo {
margin-top: 20px;
float: right;
background: #58ACFA;
}
.curso {
color: white;
font-family: DIN;
width: 25px;
height: 10px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
}
.expand_menu{
color: white;
font-family: DIN;
width: 150px;
height: 10px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
}
The JS
var segundo = $('#menu_segundo').find('ul').children();
segundo.hover(function(){
$(this).toggleClass('expand_menu');
})
Here is a DEMO of the menu
This does not need JS to function.
Simply change .expand_menu to .curso:hover in your CSS.
Alternatively, to fix your JS use:
$("#menu_segundo").on("hover", ".curso", function(){
$(this).toggleClass('expand_menu');
});
The problem with your JS is that you are toggling the class on all li elements. segundo is set to equal all li elements, not the one being hovered.
UPDATE
There is a problem beyond the initial applying of classes, the CSS/HTML structure is not rendering correctly. The problem is that extending one of the li elements increases the size of the entire ul moving all li elements in the process.
Updating the HTML to this:
<div id="menu_segundo">
<div class="curso av">AV</div>
<div class="curso dc">DC</div>
<div class="curso dp">DP</div>
<div class="curso pa">PA</div>
</div>
And updating the CSS to:
#menu_segundo {
margin-top: 20px;
float: right;
}
.curso {
color: white;
font-family: DIN;
width: 25px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
background: #58ACFA;
float: right;
clear:both;
}
.curso:hover{
width: 150px;
}
Gets the desired behavior. See this Fiddle for an example.
Note
The CSS can also be set to
.expand_menu{
width: 150px;
}
To continue with the JS solution.
Try like
var segundo = $('#menu_segundo li')
segundo.hover(function(){
$(this).toggleClass('expand_menu');
})
Related
i have some setup... where tool tip appears on hover... so i have to put tool tip and anchor tags in same div... tool tips pointer events set to none.. but i cant set pointer events of container div to none because then Hover event is not detected... but i want the underlying element below tool tip to be clickable... please help me out (if possible) without java script... i have set up the dummy scenario below... also including code pen link.... and yeah... positions are not changeable...in my case the underlying div is partially visible as shown in this code below.. and i want it to be clickable/ fire alert function... yeah if there is other way by changing composition of UN-ordered list.. and separating it from that container please let me know... but tool tip should be visible on hover on switch...
<html>
<head>
<style>
.menudescription{
float: left;
width: 150px;
height: 30px;
text-align: center;
background-color: #A1BA94;
margin: 20px 0px 0px 12px;
font-size: 20px;
line-height: 25px;
font-family: 'Kaushan Script', cursive;
color: white;
border: solid white 2px;
opacity: 0;
pointer-events: none;
}
ul li {
list-style-type:none
}
#menulist{
clear: both;
width: 230px;
height: 342px;
position: fixed;
right: 0;
top: 5%;
z-index: 1000;
}
.menulistitem{
clear: both;
height: 60px;
width: 60px;
float: right;
position: relative;
text-align: center;
vertical-align: middle;
background-color: #A1BA94;
margin: 2px;
padding-top: 4px;
}
.menulistitem:hover + .menudescription{
opacity: 1;
}
.underlyingdiv{
height:200px;
width:50px;
background-color:red;
position:relative;
float:right;
margin:20px 40px;
display:block;
}
</style>
</head>
<body>
<div id="navbar">
<ul id="menulist">
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li></ul>
</div>
<div class="underlyingdiv" onClick="myfunction()"></div>
<script>
function myfunction(){
alert("hello");
}
</script>
</body>
</html>
below is the code pen link...
http://codepen.io/theprash/pen/MKwWoN
Check this out
The red container is clickable and the tooltip is visible on hover.
Things I do:
Added position:relative to li.
Removed floats to divs inside lis added below css to .menudescription
position: absolute;
right: 100%;
top: 0;
This will help to position the tooltip relative to li
Override the width of #menulist to 60px and remove padding-left for the same. This will make sure that the red container is clickable.
Working Code pen
I have a list of blocks, when I append an image to any element of the list others go down
here is HTML:
<ul class="small_slides">
<li>
<img src="../images/icons/add_2.png" class="open_popup" status="off">
</li>
<li>
<img src="../images/icons/add_2.png" class="open_popup">
</li>
...................
</ul>
here is js code:
function some_event() {
var index = $(this).parent().parent().parent().attr("index");
var small_slides_child = $(".small_slides li:nth-child("+index+")");
$("#main_slide, .small_slides li:nth-child("+index+")").append("<img src='"+src+"' class='img_slide'>");
small_slides_child.css({"border":"1px solid #000000", "box-shadow":"0px 0px 0px 2px #696969"});
small_slides_child.append("<img src='../images/icons/add_2.png' class='add_2'>");
}
and the css code:
.small_slides li {
display: inline-block;
width: 125px;
height: 75px;
border: 3px dashed #808080;
background:#F5F5F5;
text-align: center;
margin-left: 40px;
margin-top: 20px;
cursor: pointer;
}
here it is...
I really can't understand why does it happen, thank you for your help and advices!
Try this:
.small_slides li {
vertical-align:top;
.....
}
I tried to use a menu-bar example I found at webdesign.tutsplus.com.
(http://webdesign.tutsplus.com/articles/create-a-quick-sticky-menu--webdesign-12120)
My problem is, that my popup is loaded directly after the page is loaded - but I just want this to happen when I click on one of my menu-items.
I thought removing $(document).ready would do the trick - but it did not...
The Popup:
<div class="popup">
<div class="arrow"></div>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
Javascript:
<script type="text/javascript">
$(document).ready(
function(){
$("#support").click(function () {
$(".popup").fadeToggle(150);
return false;
});
});
</script>
CSS
div.popup{
display: none;
float: right;
position: relative;
left: 5%;
background-color: #2C3E50;
-webkit-border-radius: .2em;
-moz-border-radius: .2em;
border-radius: .2em;
}
div.popup ul li a{
position: relative;
display: inline-block;
font-size: .85em;
color: #fff;
padding: 0 2em 0 2em;
margin: .4em;
text-align: center;
text-decoration: none;
transition: all 0.1s ease-in-out;
-webkit-border-radius: .2em;
-moz-border-radius: .2em;
border-radius: .2em;
}
div.popup ul li a:hover{
background-color: #1ABC9C;
}
Thank you,
Chris
The only guess I can make from your code is you might have missed some CSS rules. Please check the following, Did you hide the popup element in your css.
STEP-8 of tutorial
div.popup{
display: none;
/* Other styles */
}
This might fix your problem.
EDIT
Here is a fiddle demonstrating your Code. Your code has no errors but some allignment issues. Everything is working fine. Did you add the JQuery library. Check this fiddle.
http://jsfiddle.net/9Gfbb/
To make sure, you can do this to your code.
$(document).ready(function(){
$(".popup").hide(); // hide the popup in the case, that it wasn't hidden.
$("#support").click(function () {
$(".popup").fadeToggle(150);
return false;
});
});
Not sure if what i am trying to do is going to work, but i want to insert inside a li two div that will run some script for some links that are inside them. A bit confusing, i know, i cant explain it in a better way.
Take a look at my code:
Inside the body of HTML
<ul>
<li> TEST </li>
<li> TEST 2
<ul>
<li>
<div id="dock2" class="dock">
<div class="dock-container2" style="left: 760px; width: 400px;">
<ul>
<li><a class="dock-item2" href="#" style="width: 40px; left: 0px;"><span style="display: none;">Home</span><img alt="home" src="Inc/Images/dock/home.png"/></a> </li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 40px;"><span style="display: none;">Contact</span><img alt="contact" src="Inc/Images/dock/email.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 80px;"><span style="display: none;">Portfolio</span><img alt="portfolio" src="Inc/Images/dock/portfolio.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 120px;"><span style="display: none;">Music</span><img alt="music" src="Inc/Images/dock/music.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 160px;"><span style="display: none;">Video</span><img alt="video" src="Inc/Images/dock/video.png"/></a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li> TEST 3 </li>
</ul>
The script that is running inside the div, also in the body of HTML
<script type="text/javascript">
$(document).ready(function(){
$('#dock2').Fisheye({
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
And finally the CSS
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background:url(Inc/Images/dock/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: absolute;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background:url(Inc/Images/dock/dock-bg.gif);
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
So what i am actually trying to do, is put inside a list a dock that acts like OS X, moving the mouse over the icons making them to zoom, though with the above code the zoom doesn't work.
If i move the part of the dock outside the list and put it somewhere in the body, everything works as it should, but inside the list no animation.
I am not sure at all if this is possible, having an animation running inside a li, any help is really appreciated.
P.S I also have an another CSS that is about the li style, but i thing its irrelevant to the question so i didn't include it.
Edit: Added it on jsfiddle. Link: http://jsfiddle.net/UTw84/3/
The dock i am trying to make is this one: http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html
Note: on jsfiddle it doesn't show the icons, probably because there is no path for them.
Edit 2: The problem was/is with CSS. i made some changes and its working better now. http://jsfiddle.net/UTw84/7/
http://jsfiddle.net/UTw84/4/
Is this what you want ?
I just added something to your CSS selector :
#main-list ul li > ul {
display: none;
position: absolute;
text-align: center;
}
The last CSS selector was overriding the :hover selector.
EDIT :
I see.
http://jsfiddle.net/UTw84/5/
It works here but when you want to put a "left" property to the main-dock, it breaks everything.
Disclaimer: I'm relatively new to jQuery and JavaScript. The openStatement() function below executes whenever it is determined that the #statementTab is not already open. If the code below isn't enough information, simply check out the source below.
Basically, the UL containing the various tabs flickers and disappears whenever the user opens the #statementTab. I'd like to fix this.
Source: http://www.cameronhermens.com/dbunkr/brochure.html
// The openStatement function opens the statement tab when the user clicks
<a id="openIt"> (if the statement tab isn't already open).
function openStatement() {
$('#explore').animate({width: '70%'}, '200');
$('#statementTab').animate({width: '213px'}, '1000');
};
// Here's the DIV.
<div id="explore" class="brochure">
<ul id="brochureTab">
<li><a href="welcome.html" >welcome</a></li>
<li>our mission</li>
<li>what is dBunkr</li>
</ul>
</div>
<div id="statementTab">
<a id="openIt">
<img class="opaque left-5" src="images/rightArrow.jpg" height="10" width="6" alt="Expand the Statement tab">
<span class="statementBar">Statements</span>
</a>
</div>
The UL#brochureTab is being hidden during animation because as #explore is animating, the jQuery is applying a style of overflow: hidden to it. This style is then removed upon completion of the animation.
A quick solution (i.e. without addressing the way that you have styled the rest of your elements) would be to add the style overflow: visible !important; to #explore.
You have the ul#brochureTab outside the div#explore by using the CSS top: -45px;.
Whenever you animate the div#explore with jQuery .animate(), the ul#brochureTab gets "flashed" because the jQuery .animate() automatic switches to overflow:"hidden" while performing the animation.
The solution is to use a DIV to serve as a wrapper to the div#explore, and have it with the visual look you've got on the div#explore:
CSS
#wrapper {
background-color: #FFFFFF;
border: 3px solid #CCCCCC;
border-radius: 7px 7px 7px 7px;
box-shadow: 3px 3px 3px #CCCCCC;
float: left;
height: inherit;
padding: 5px;
}
THE MARKUP WOULD BE:
<div id="wrapper">
<div id="explorer">
<ul id="brochureTab">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<div id="ui-tabs-3">...</div>
<div id="ui-tabs-10">...</div>
<div id="ui-tabs-12">...</div>
</div>
<div id="statementTab">...</div>
</div>
AND TO PREVENT THE FLASHING:
#brochureTab {
float: left;
left: 10px;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
/* top: -45px; remove this line */
}
.ui-tabs-panel {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
float: left;
left: 30px;
margin: 0 auto 30px;
min-height: 410px;
padding: 10px;
position: relative;
/* top: -20px; remove this line */
width: 90%;
z-index: 1;
}
To your current animation method, no changes need to be made.
To your new CSS for the wrapper, may require some "tunning".