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')
})
Related
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/
I've created a sub navigation and when I click on it (using my jquery code), it scrolls down and i can hover over the links but they dont appear at all.
I tried looking into what could be causing the problem such as the color or background but I can't find out where i went wrong. I was messing around with the visibility and display of the element but I don't think theres a problem there, although I'm unsure.
To isolate where the problem of the code may lie, here is the sub navigation code:
ul {
padding: 0;
position: absolute;
top: 33px; right: 16px;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
#include transition('all .2s ease-in-out');
li {
display: block;
width: 100%;
a {
width: 100%;
display: block;
background: lighten(#27344C, 10);
color: #FFF;
padding: 0;
padding-right: 14px;
#include transition('all .2s ease-in-out');
}
}
li:hover {
a { background: lighten(#27344C, 5); }
}
}
I think the problem may actually be the javascript on this line when i edit the css styles:
$('#profileToggle').on('click', function() {
$('#profileList').slideToggle().css({'visibility': 'visible', 'display': 'block'});
$(this).addClass('active');
});
Here is the JSFiddle: http://jsfiddle.net/8xat4v97/1/
(starts line 112 of the scss code)
As with what #BillyNate had said,
the opacity is set to 0 for some reason in my sub navigations.
Removing this line fixed the issue! Thanks :)
I have a few problems with trying to make a sticky menu that shows/hides with a click button, which is why I'm thinking about getting rid off the whole show/hide option completely and probably rewriting it from scratch in the future.
I can identify 2 major problems:
How to make the show/hide button move along with the sticky menu but to make it in such a way so that it does not disappear with it when the hide button is clicked?
I tried quite a few options on how to animate the menu so that it toggles from right to left (and vice versa) but somehow each time there was something wrong (either with my code or the option I found). How do I do it properly? If I manage to animate it so that 90% of the div hides there will still be place for a hide/show button (and this will also solve problem #1).
Here is my code so far:
http://jsfiddle.net/ohkegetn/
(edit: correct jsfiddle link added)
HTML:
<div class="menuWrapper">
<div id="menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</div>
<div id="toggle">Show/Hide</div>
CSS:
body {
background: black;
font-family: Open Sans;
font-size: 180%;
line-height: 200%;
height: 100%;
color: white;
}
a{
color: white;
text-decoration: none;
}
.menuWrapper {
position: absolute;
top: 225px;
text-align: center;
width: 300px;
left: 0;
}
#toggle {
top: 450px;
position: absolute;
}
#menu {
width: 150px;
background: #0E586D;
color: white;
position: relative;
top: 0;
}
li {
color: #e5e5e5;
transition: 1s;
padding: 0 0 0 10px;
text-align: left;
display: block;
}
#menu ul a li:hover {
transition: 0.3s;
color: white;
background-color: #0f6a84;
}
p {margin: 200px}
JS/jQuery:
// Toggle - show/hide
$(document).ready(function(){
$("#toggle").click(function(){
$(".menuWrapper").fadeToggle("slide");
});
});
// Sticky Menu
var sticky_offset;
$(document).ready(function() {
var original_position_offset = $('#menu').position();
sticky_offset = original_position_offset.top;
$('#menu').css('position', 'relative');
});
$(window).scroll(function () {
var sticky_height = $('#menu').outerHeight();
var where_scroll = $(window).scrollTop();
var window_height = $(window).height();
if((where_scroll) > sticky_offset) {
$('#menu').css('position', 'fixed');
}
if((where_scroll) < (sticky_offset + sticky_height)) {
$('#menu').css('position', 'relative');
}
});
Final notes:
The html/css code is probably a bit of a mess, sorry for that but its just a test version. They are not that relevant anyway. The jQuery part is.
Also I would like to stick to Javascript/jQuery without plugins if possible.
Big thanks for any help!
I solve your problem
but this solution is as you think or not i donot know
see this link
$(".scroll").mouseover(function() {
var pos = $(this).offset();
var width = $(this).outerWidth();
$("#toggle").css({
position: "absolute",
top: pos.top + "px",
left: (pos.left+width) + "px"
})
});
Check this jsFiddle.
The orange bar is serving as a progress bar where the value under the circle is how high the progress bar should be.
Any idea why the overflow:hidden; is beeing disregarded and how do one solve this problem? Oblviously nothing should go outside the circle.
Also is there a better solution for this?
Modified your fiddle a little bit. Here is the link
Modifications:
Changed .outerContainer css to display:block from display:table and addedmargin-top:30px to p css
Check if this works for you.
position: absolute and overflow: hidden don't appear to be playing nicely with display: table/table-cell. Removing the table stuff you had in there to vertically center the text fixes the problem. In Firefox, at least.
I think it's the browser thing...
This is the CSS3 version...
.progressBar {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #ec6730;
transition: height 1s;
}
.innerContainer:hover > .progressBar {
height: 300px;
}
http://jsfiddle.net/ZyhgT/2/
It no longer flashing 'cause browser handle the job (not js loop animation...). But still it shows the edge on animation finish!!! This could be the browser things... Could be a bug...
This is not related to jQuery or any javascript. In fact, if you delete all your javascript and manipulate the height of your .progressBar using css on li:hover, you will notice the bug anyway.
It appears to be a browser issue as reported on: https://code.google.com/p/chromium/issues/detail?id=157218
As a workaround try adding an imperceptible css transform to the mask element:
.outerContainer {
-webkit-transform: rotate(0.000001deg);
}
You just need to change your .outerContainer class and it works just fine!
.outerContainer {
position: relative;
display: block;
height: 96px;
width: 96px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Put the level class inside the outerContainer div and style the span inside the level class to be relatively positioned. In the JavaScript, to calculate the level, divide by 10 instead of 100 for the perfect circular hover effect.
Here is a fiddle.
HTML
<div class="outerContainer">
<div class="innerContainer">
<p>Circle 3</p>
<span class="progressBar"></span>
</div>
<div class="level"><span>75</span>
</div>
</div>
CSS
body {
background: blue;
}
#circles {
text-align: center;
margin: 100px 0;
}
li {
display: inline-block;
margin: 0 10px;
position: relative;
}
.outerContainer {
position: relative;
display: block;
height: 96px;
width: 96px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.innerContainer {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
text-align: center;
}
p {
color: #000;
width: 96px;
position: relative;
z-index: 2;
}
.progressBar {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #ec6730;
}
.level span{
position:relative;
}
JS
$(function() {
$("#circles li").hover(function(){
var thisElement = $(this);
var level = $(this).find(".level").text();
var elementHeight = $(this).find(".outerContainer").height();
level = (level/10)*elementHeight;
$(thisElement).find(".progressBar").stop().animate({
height: level
}, 300);
}, function() {
var thisElement = $(this);
$(".progressBar").stop().animate({
height: 0
}, 300);
});
});
display: table doesn't work that good with CSS positioning;
you should avoid using that, and find some other way to vertically center your labels.
If your circles have a known height, like your code seems to indicate (height:96px ecc), then just use a fixed top position for an absolutely positioned <p> element:
http://jsfiddle.net/ZyhgT/5/
Note that you don't even need jQuery for this, it is all achievable with just CSS3 (unless you are targeting old browsers)
I have the following jQuery which I need adapting:
$(document).ready(function(){
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
});
});
CSS:
.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;
}
div.rss-popup em {
background: url(../images/rssbuttonbubble.png) no-repeat;
width: 100px;
height: 49px;
position: absolute;
top: -70px;
left: -0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
#rss-icon {
width: 42px;
height: 42px;
background: url(../images/rssbutton.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}
The HTML:
<div class="rss-popup">
RSS Feed
<em>Subscribe to our RSS Feed</em>
</div>
I want to make the rssbuttonbubble.png appear underneath rather then from above, can any make any suggestions as to how I can achieve this?
Just adjust your top values in the animation and css to be the distance you want:
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "70"}, "fast");
});
And in CSS change top: -70px; to:
top: 70px;
This will make it appear below, then just decrease those values if you want it higher, increase if you want it lower.
Nick's answer is correct. You will want to attempt to do this via CSS but just in case you can't you could also achieve something similiar via Jquery. There is an offset() function that returns the onscreen position of a matched element. Once you have that you can then set the position of another element to this position and add the source elements height to the Y coordinate.
See the jQuery documentation here.