Im basicly trying to get my span to show on mouseover and that works as intended. What I want to do is get the spans to the correct images, because I plan on filling that list with more stuff.
This is how it looks like now: http://jsfiddle.net/uc8jc/539/
Heres my code:
<ul class="frontpagephotos">
<li>
<img src="http://www.myrtlebeachproduce.com/wp-content/uploads/2013/01/Banana-300x300.jpg" alt="Jogginglarms armband" />
<span>Jogginglarms armband</span>
</li>
<li>
<img src="http://www.myrtlebeachproduce.com/wp-content/uploads/2013/01/Banana-300x300.jpg" alt="Jogginglarms armband" />
<span>Jogginglarms armband</span>
</li>
</ul>
$(document).ready(function(){
$("span").hide();
$(".frontpagephotos").on("mouseenter", "li", togglePhotos);
$(".frontpagephotos").on("mouseleave", "li", togglePhotos);
function togglePhotos() {
$(this).find("span").slideToggle("fast");
}
});
and the css:
ul.frontpagephotos li{
display: inline;
}
ul.frontpagephotos li img{
border: 2px solid black;
position: relative;
}
ul.frontpagephotos span{
position: absolute;
color: rgb(255, 255, 255);
background-color: rgb(0,0,0);
opacity: 0.5;
width: 18em;
margin-top: -2.5em;
padding: 0.5em;
display: block;
text-align: center;
}
Appreciate any answers, cheers!
Your span has the position: absolute property, so it's positoned relative inside the next parent with position: relative. It should be positioned relative inside the li, but actually the next parent with position: relative is the body (or window?).
The simple solution: Change your CSS code to this:
ul.frontpagephotos li {
display: inline-block;
position: relative;
}
When the li has position: relative, the span is positioned relative inside the li. You also need block or inline-block in order to be able to set position: relative.
That's it! Working fiddle: http://jsfiddle.net/uc8jc/545/
You could use hover instead, and just pass $(this) into the functions for on and off states:
$(document).ready(function(){
$('span').hide();
$("img").hover(function(){
togglePhotos($(this));
},
function(){
togglePhotos($(this));
});
function togglePhotos(obj) {
obj.next().slideToggle();
}
});
http://jsfiddle.net/uc8jc/544/
Related
I searched a bit and was unable to find an answer that suited my question. Albeit using z-index and absolute positioning would seem to work, it doesn't.
What I am trying to do is have a menu that slides to the left on mouseover, displaying the underlying link... I've been trying to get it to work without much success. I tried using absolute positioning on the cloned element to place it behind its parent, but that didn't work. I used z-index to make sure the clone was behind its parent as well.
My code is as follows:
<ul id="nav">
<li>aaa</li>
<li>bbb</li
</ul>
(function ($) {
$.fn.doIt = function () {
this.find('li')
.css({
overflow : 'auto'
})
.hover(
function(){
$(this).find('a:first').animate({
marginLeft : "-150px"
}, 'fast')
},
function(){
$(this).find('a:first').animate({
marginLeft : "0px"
}, 'fast')
})
this.find('a')
.each(function(){
var slideText = $(this).data('slideText');
$(this)
.clone()
.text(slideText)
.appendTo($(this).parent())
.addClass('slideClass')
});
};
})(jQuery);
The CSS used is:
#nav li{
list-style: none;
float: left;
width: 150px;
height: 20px;
color: #CCCCCC;
height: 60px;
line-height: 30px;
text-align: center;
}
#nav a{
position: relative;
display: block;
width: 150px;
z-index: 1;
background: #777777;
}
.slideClass{
position: absolute;
left: 0;
top: 0;
display: block;
background: #000000;
color: #6699dd;
z-index: 3;
}
You can see a live example at:
jQuery slide menu
I have modified your CSS in a working fiddle
The key changes I've made are to your css:
#nav li {
display: inline-block;
overflow: hidden !important;
white-space: nowrap;
}
I also removed your height: declarations for #nav li and position: related declarations for .slideClass. Finally, I've changed #nav a to be display: inline-block; as well.
Not 100% sure if this was what you were looking for: http://jsfiddle.net/t4ag1tby/
Changed the li a to absolute
#nav a{
position: absolute;
top: 0;
...
}
And the hover action to animate the position instead of margin.
.hover(
function(){
$(this).find('a:first').animate({
left : "-150px"
}, 'fast')
},
function(){
$(this).find('a:first').animate({
left : "0px"
}, 'fast')
})
I'm coding an image overlay w/ jQuery, and I got it working (somewhat). If you hover over the first image, it successfully appears; however, if you hover over the second one, it doesn't even work. I don't even know what the problem is! I think it has to do with unique IDs or whatever. I tried classes, and it didn't work.
Here is the fiddle :: http://jsfiddle.net/PFWcz/7/
$(document).ready(function () {
$('.overlay-link').mouseover(function () {
$(this).find('.overlay').fadeIn(200);
}).mouseleave(function () {
$(this).find('.overlay').fadeOut(200);
});
});
There are a few issues. As esqew pointed out, you're using the same IDs, which must be unique.
Addressing that, you'll still see the "same" overlay in your fiddle (http://jsfiddle.net/PFWcz/7/), but it's actually not - you're just now seeing a positioning issue.
Take a look at this fiddle:
http://jsfiddle.net/PFWcz/10/
You'll notice that when you hover over the first image, the red overlay is "1", and when you hover over the second image, the overlay is "2".
Previously (with the "helloooooo" text), the red overlays appeared the same (because of the content and positioning)...
Address the ID and position issues, and it should work.
Here's a fiddle demonstrating fixed position and ID:
http://jsfiddle.net/PFWcz/16/
The main changes is giving the container (<div>) positioning:
div {
float: left;
margin: 30px;
position: relative;
}
Also, I removed offsets (left, top) and floats, applying those to the parent container. A quick, simple fix.
You need to make your overlay-link elements your containers from which child elements inherit positions.
<a class="overlay-link">
<img src="https://d13yacurqjgara.cloudfront.net/users/67256/screenshots/1191507/shooot.png"/>
<span class="overlay"><i>hellllllllooooooo</i></span>
</a>
Your overlay-link class needs to have position: relative and will define the position and size of it and its children:
.overlay-link {
position: relative;
display: block;
width: 292px;
height: 219px;
margin: 30px;
}
Any child inside needs to have position: absolute and its width and height set to 100% of the container:
img {
position: absolute;
border-radius: 2px;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.overlay {
background-color: rgba(223, 71, 71,0.70);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 2px;
display: none;
text-align:center;
}
Now when you hover over an element, it will create the overlay over that element and not the other one as you were experiencing earlier.
Jsfiddle: http://jsfiddle.net/PFWcz/14/
You're using the same id, which must be unique. Use the class attribute.
As some of the answered already said there is issue with the id's, I don't want to repeat. Since you have a multiple place where you want to show some text on rollover, using class would be a better solution/way to go ahead with.
Here is the change I did in the fiddle:
.overlay-link { /*This class is added. Since an absolute positioned element places itself relative to its parent who is either a relative positioned element or an absolute positioned element. I made the parent of the .overlay div relative.*/
position: relative;
background-color: #ff0;
}
.overlay {
position: absolute;
background-color: rgba(223, 71, 71,0.70);
left: -322px; /*Positioning the .overlay element based on its parents left*/
width: 292px;
height: 219px;
border-radius: 2px;
top: 30px;
display: none;
text-align:center;
}
.overlay i { /*There is no .shot element in the DOM. I replaced it by .overlay*/
background-color: #df4747;
border-radius: 999px;
padding: 10px;
width: 60px;
height: 60px;
color: #fff;
font-size: 30px;
top: 80px;
left: 116px;
position: absolute;
display: block;
}
This is based on my understanding. Let me know if it works.
Here, this is what you want
Fiddle: http://jsfiddle.net/D33Yk/
$(window).on('load',function () {
$('.overlay-link').mouseover(function(){
var overlay = $(this).children('.overlay');
var img = $(this).children('img');
$(overlay).css('left',$(img).offset().left);
$(overlay).css('top',$(img).offset().top);
$(overlay).css('width',$(img).width());
$(overlay).css('height',$(img).height());
$(overlay).fadeIn(200);
}).mouseleave(function(){
$(this).children('.overlay').fadeOut(200);
});
});
Because you had the overlay positioned absolutely in CSS, both overlays always covered the first image. I now set the left, top, width and height in JS, so the overlays cover their respective image.
I also changed this in CSS:
.overlay {
display: none;
position: absolute;
background-color: rgba(223, 71, 71,0.70);
border-radius: 2px;
text-align:center;
}
removed the top, left, width, height
...and this in HTML (I changed both, but I only show one since they are identical):
<div>
<a class="overlay-link">
<img src="https://d13yacurqjgara.cloudfront.net/users/67256/screenshots/1191507/shooot.png"/>
<span class="overlay"><i>hellllllllooooooo</i></span>
</a>
</div>
changed all the id's to classes, and removed id where it was not necessary
I am using Bootstrap 3 dropdown-menu inside a dynamically generated container. The dropdown-menu appears behind the newly generated elements. See image reference.
container item position: relative; z-index: 1;
dropdown-menu position: absolute; z-index: 10000;
I also did test btn-group with a higher z-index and it did not work.
Here is a working fiddle http://jsfiddle.net/sGem8/
You don't need to add z-index property.. Simply remove it and it will work..
i.e.
#container > li {
display: block;
border-radius: 3px;
position: relative;
padding: 15px;
background: #ecf0f1;
margin-bottom: 15px;
}
Working Fiddle
I have faced the same issue.
Inside the main container which had all the nav-items, I had every outermost div items as position: relative
Only the dropdown menu had position: absolute
To make the dropdown appear above all items, add
.dropdown{
position: absolute;
z-index : 999; //some high value
}
and other items in the container have
.outer-divs{
position: relative;
z-index: 1; //some low value
}
If you still find your dropdown to behave not as expected,
try setting the div item that opens the dropdown when clicked to
.dropdown-container{
position :static;
}
Most people will find the last trick to be the most valuable.
Hope this helps.
Modify the below css in your styles
#container > li {
display: block;
border-radius: 3px;
position: relative;
/* z-index: 0; */
padding: 15px;
background: #ecf0f1;
margin-bottom: 15px;
}
I'm using superfish menu for the WordPress. I want to add some margin between the menu parent item and its dropdown and want to add an icon on the top of the drop down, so that it looks like following image:
The menu markup is automatically generated by the WordPress so it cannot be changed. I'm trying following CSS but it does not seem to work:
ul > li ul.subs{
margin-top: 10px;
}
ul > li ul.subs:before{
content: " ";
display: block;
height: 10px;
width: 20px;
position: absolute;
top: 0;
background: url('http://i.imgur.com/NL4Rq2S.png') no-repeat center bottom;
}
Problems:
When I hover, the sub menu disappears
The arrow icon does not appear.
Demo:
http://jsfiddle.net/y9Rk9/
The solution for the problem 2 is change the :before position to relative
The solution for the problem 1 is to make the menu height higher
ul > li ul.subs{
padding-top: 10px;
}
ul > li ul.subs::before{
content: " ";
display: block;
height: 10px;
width: 20px;
position: relative;
top: 0;
background: url('http://i.imgur.com/NL4Rq2S.png') no-repeat center bottom;
}
http://jsfiddle.net/y9Rk9/11/
Use ul > li ul.subs {padding-top: 10px;} instead margin-top: 10px;
A fiddle.
I am very new to javascript and ajax/jquery and have been working on trying to get a script to open and close the drop menu on click rather that hover.
The menu in question is found on http://www.gamefriction.com/Coded/ and is the dark menu on the right side under the header. I would like it to open and close like the other menu that is further below it (it is light gray and is in the "Select Division" module).
The gray menu is part of a menu and the language menu is not.
I have a jquery import as well which can be found in the view source of the above link.
My Javascript Code:
<script type="text/javascript">
/* Language Selector */
$(function() {
$("#lang-selector li").hover(function() {
$('ul:first',this).css('display', 'block');
}, function() {
$('ul:first',this).css('display', 'none');
});
});
$(document).ready(function(){
/* Navigation */
$('.subnav-game').hide();
$('.subnav-game:eq(0)').show();
$('.preorder-type').hide();
$('.preorder-type:eq(3)').show();
});
</script>
My CSS:
#lang-selector
{
font-size: 11px;
height: 21px;
margin: 7px auto 17px auto;
width: 186px;
}
#lang-selector span
{
color: #999;
float: left;
margin: 4px 0 0 87px;
padding-right: 4px;
text-align: right;
}
#lang-selector ul
{
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#lang-selector ul li a
{
padding: 3px 10px 1px 10px;
}
#lang-selector ul, #lang-selector a
{
width: 186px;
}
#lang-selector ul ul
{
display: none;
position: absolute;
}
#lang-selector ul ul li
{
border-top: 1px solid #666;
float: left;
position: relative;
}
#lang-selector a
{
background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat;
color: #666;
display: block;
font-size: 10px;
height: 17px;
padding: 4px 10px 0 10px;
text-align: left;
text-decoration: none;
width: 166px;
}
#lang-selector ul ul li a
{
background: #333;
color: #999;
}
#lang-selector ul ul li a:hover
{
background: #c4262c;
color: #fff;
}
My HTML:
<div id="lang-selector">
<ul>
<li>
Choose a Language
<ul>
<li>English</li>
<li>Deutsch</li>
<li>Español</li>
<li>Français</li>
<li>Italiano</li>
</ul>
</li>
</ul>
</div>
Thanks!
$(function() {
$("#lang-selector li:first").click(function(){
$('ul:first',this).toggle();
})
});
Using toggle will require you to click to open then reclick to close
I would do something like this...
$(function() {
$("#lang-selector > li").click(function() {
$('ul:first',this).toggleClass('active');
});
});
And, then, in the CSS add this:
.active { display: block; }
<< EDIT: Removed "ul" from ".active" class for CSS rendering efficiency >>
Also make sure that the sub-nav <ul> has "display: none;" on it by default in your CSS.
This will make it so that clicking an <li> tag in #lang-selector, but not in any sub-nav <ul> tags will either open or close the sub-nav, depending on it's current state.
If you're worried about the accessibility of having "display: none" on the sub-nav by default, you can do something like this...
$(function() {
$("#lang-selector li ul").addClass("hidden");
$("#lang-selector li").click(function(e) {
e.preventDefault();
$('ul:first',$(this)).toggleClass('hidden active');
});
});
<< EDIT: Altered selectors to match example provided, turned "this" into jQuery object. >>
And then also add this to the CSS
.hidden { display: none; }
In this scenario, you have the <ul> showing by default, then when the document loads, jQuery adds the "hidden" class to all of them to hide them, then on the click of the <li> it will toggle the hidden and active classes, displaying them or hiding them.
You'll also need to remove your current "display: none" from your #lang-selector ul ul in CSS, otherwise it takes priority over the hidden / active classes.
search this $("#lang-selector li").hover and replace with
$("#lang-selector li").click
.hover, .click, .something, are all triggers, view this link:
Jquery Events
to learn more about events in Jquery!
Ps: sushil bharwani (vote it), is right, just change your .hover by the .click
if you need two functions for a click event, try .toggle
i'm using this:
$('.triggerlist').toggle(function(e) {
e.preventDefault();
$(this).find('ul').fadeIn();
},function() {
$(this).find('ul').fadeOut();
});
Which allows me to do more stuff on the 2 functions than just the .click with its 1 function.