I'm Designing a website which involves slideDown.
Initially i have set up a template which looks like the image below
When i hover over each black blocks a ul list will be displayed... But a problem arises when i hover... All the content below the block moves down (This is illustrated in the following figure)
I cant give the position to be absolute because all the content above and below are floating (They Don't have a fixed height). So what else can be done to get a slideDown by holding the rest of content there and by displaying the hover content over the text?
To achieve what you want you should slideDown() an inner submenu element instead of the block itself.
Consider this sample markup:
<div class="item" id="mybox">floating box
<ul class="submenu" style="display: none;">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</div>
<p>More content... Just to illustrate</p>
<p>More content... Just to illustrate</p>
The CSS would be something like:
.item {
position: relative; /* to hold absolutely positioned submenu inside */
background: #2684b7;
color: #fff;
padding: 10px;
float: left;
}
.item .submenu {
position: absolute; /* the menu would go on top of everything */
background: #2684b7;
width: 100%;
left: 0;
}
p {
clear: both;
}
And finally the JavaScript is simple, just don't forget to bulletproof your animation:
$('#mybox').hover(
function() { /* mouseover */
$(this).find('.submenu').slideDown();
},
function() { /* mouseout */
$(this).find('.submenu').slideUp();
}
);
Here's the example on jsFiddle: http://jsfiddle.net/zxrvC/
Good luck.
Make a div with position: relative and z-index:55 and inside that div add a new div with position: absolute and also give width. Hope this will solve.
Regards
iijb
Related
Is it possible to trigger changes to CSS of an element that is completely unrelated to the hovered div?
I have a CSS hover effect on a dropdown menu, that I also want to trigger the opacity of a div right at the bottom of the page to create a background overlay effect.
This is the CSS I'm using:
#overlay {
background:rgba(0,0,0,0.5);
position:absolute;
top:120px;
left:0;
z-index:0;
height:120%;
width:100%;
visibility:hidden;
opacity:0;
}
#menu-main-menu li.menu-parent-item:hover ul.sub-menu,
#menu-main-menu li.menu-parent-item:hover #overlay {
visibility:visible;
opacity:1;
}
The hover of the sub menu works fine, but the div #overlay is right at the bottom of the page, and doesn't get called when it's hovered.
I've tried all kinds of alternatives such as :hover > #overlay, :hover + #overlay, but nothing seems to trigger it. I also can't seem to find a definitive answer to the question.
Is it possible?
Yes. You can load this style in a php file and then use jQuery to apply the css when your div has been hovered on.
No there is no way to select parent element in css and that means that you cannot move up in hierarchy.
<ul class="hover-parent">
<li></li>
</ul>
<div>Something here</div>
<div class="target"></div>
From this point :
.hover-parent li:hover you cannot go up (to ul or div).
Selectors which you tried to use are "next":
A>B - This will select only direct B children of A
A+B This will select B immediately preceded by A
Here you can find W3C documentation of CSS selector
http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
And demos:
http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
Notice that it will be really confusing for user that different part off app/page is changing when he is hovering something else. Bad UX idea.
You're going to have to use JavaScript to do this.
Your posted selector #menu-main-menu li.menu-parent-item:hover #overlay is looking for #overlay somewhere inside of an ancestor element of li.menu-parent-item that is somewhere inside of an ancestor element with an id of #menu-main-menu.
Using the child selector > will not work as the overlay element is not a child of the list element you're hovering in your menu from what you have described and from comment responses.
As #Paulie_D has pointed out the two target elements, the element to be hovered and the overlay element, need to adjacent siblings to use the sibling selector +. From what you have described and the comment responses they are not adjacent siblings.
I have setup a basic example for you using jQuery. This example displays the overlay as long as you are hovering any element in the .main-menu element.
HTML
<ul class="main-menu">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
</ul>
</li>
</ul>
<main>
Content here.
</main>
<footer>
<div class="overlay">This is my overlay.</div>
</footer>
CSS
body {
margin: 25px auto;
width: 500px;
}
ul,
li {
margin: 0;
padding: 0;
}
main {
min-height: 300px;
}
footer,
.overlay {
height: 50px;
}
footer {
position: realative;
background-color: yellow;
}
.main-menu {
list-style: none;
height: 50px;
}
.main-menu > li {
float: left;
padding: 0 10px;
position: relative;
}
.main-menu > li:hover .sub-menu {
display: block;
}
.sub-menu {
display: none;
list-style: none;
position: absolute;
left: 10px;
width: 150px;
}
.overlay {
display: none;
text-align: center;
}
jQuery
$overlay = $('.overlay');
$('.main-menu > li').hover(
// when hovered
function() {
$overlay.css('display','block');
},
// when NOT hovered
function() {
$overlay.css('display','none');
}
);
jsFiddle: http://jsfiddle.net/ednf2pzq/
Edit
You could simplify the jQuery hover selector to .main-menu.
jQuery
$('.main-menu > li').hover(
// same code as before
);
jsFiddle: http://jsfiddle.net/ednf2pzq/1/
I'm having a hell of a time trying to understand and then implement a working scrolling method.
Goal:
Create a big picture viewer/gallery. Users click on arrow keys or on thumbnails in a toggled menu to navigate through images. The gallery and menu should keep track of which thumbnail the users are viewing.
Situation:
I have a position:absolute #menu that slides to become visible when your mouse hovers over the right edge of the window. This #menu has a child #galleryMenu whose overflow:scroll. The result is scrollable menu that is navigated using the scroll wheel.
Problem:
Everytime the mouse hovers off the #menu, you lose your place. I don't know how to get the #menu to stay where the user left off.
Sample Website Link: http://bahaha.ga/?view=0
I've also tried a few plugins, but they cancel #galleryMenu's overflow:scroll and it ruins the overall #menu.
Any help would be appreciated.
Below is a simpler/cleaned up code to help communicate my goal/problem.
HTML
<div id="resolution">
<div id="main">
<img />
</div>
<div id="menu">
<div id="galleryMenu">
<ul id="galleryThumbnail">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
CSS
#resolution{
position: absolute;
margin:0;
padding:0;
width: 100%;
height: 100%;
}
#main{
position: absolute;
width: 100%;
height: 100%;
}
#menu{
position: absolute;
display: block;
cursor: pointer;
right: 0;
width: 10px;
}
#galleryMenu{
position: absolute;
display: none;
width: 350px;
right: 0;
overflow: scroll;
}
#galleryThumbnail{
list-style-type: none;
padding: 20px 0 20px 0;
margin: 0;
}
#galleryThumbnail li{
padding: 0;
margin: 0;
}
JQUERY
//Show and Hide Gallery Menu
$("#menu").hover(function(){
$("#galleryMenu").show('slide', {direction: 'right'}, 500);} , function(){
$("#galleryMenu").hide('slide', {direction: 'right'}, 500);}
);
//Set Window Height as Menu Heights
$("#menu").height($(window).height());
$("#galleryMenu").height($(window).height());
// Scroll to Current Thumbnail on Menu
$("#galleryMenu").animate({
scrollTop: $(document).height()-$(window).height()},
1400,
"easeOutQuint"
);
you need this .
var tempScrollTop=0;
$(document).on( 'scroll', '#galleryMenu', function(){
tempScrollTop = $(#galleryMenu).scrollTop();
});
$(document).on( 'hover', '#galleryMenu', function(){
$(#galleryMenu).scrollTop(tempScrollTop);
});
Hope it helps
I managed to find a workaround. Using Jquery's slideUp() and slideDown() kept resetting the location of the #menu (instantly as soon as your mouse hovered off #menu).
Instead of using slideUp() and slideDown(), I ended up using .animate() to move #menu off the screen to the right. This made keeping track of the scroll position on #menu easier as user's hovered away temporarily.
Khaleel, thanks for the code, but it did not work for me. However, I managed to get a working code up:
//Menu : Scroll to Thumbnail
$("#galleryMenu").animate(
{scrollTop: $("li:nth-child(<?php echo $currentImage ?>)").offset().top-()},
500
);
Using the the UL's LI elements and a little bit of PHP, I was able to grab the nth-child of the li element that contained the thumbnail of the currently viewed image in order to center it onto #menu.
Thanks everyone!
This page has some divs that jQuery makes into menus.
Here is the jsfiddle.
<div class="span-24 last">
<div class="span-5 last menu_button">
<ul id="item_menu" class="ui-menu">
<li class="ui-menu-item">Select Item Here
<ul id="item_menu_list" class="ui-menu" style="display:block; position:relative;"></ul>
</li>
</ul>
</div>
With these parameters:
$( "#item_menu" ).menu("collapseAll", null, true );
The menus are cleared and reset:
$('#item_menu').html("");
$('#item_menu').append("<li class=\"ui-menu-item\">Item Menu<ul id=\"item_menu_list\" class=\"ui-menu\" style=\"display:block; position:relative;\"></ul></li>");
then populated through a series of calls like this:
$('#item_menu_list').append("<li class=\"ui-menu-item\"><a class=\"ui-corner-all\" id=\"item_menu_list_item1\" href=\"#item1\">Item 1</a></li>");
.menu_button has the following .css:
div
{
color:#3079D9;
/* background:#4334ff; */
border-image-width:0px;
}
#menu
{
height:32px;
/* background:#00ccff; */
padding-top:10px;
padding-bottom:10px;
border-bottom: 1px solid #3079D9;
position: relative;
z-index:5000;
}
#menu div
{
position: relative;
vertical-align:middle;
z-index: inherit;
}
.menu_button {
/* padding:10px; */
position: relative;
vertical-align:middle;
/*z-index: inherit;*/
margin-top:0px;
color:#F2F2F2;
background: #5A86BF;
text-align:center;
border: 1px solid #3079D9;
border-image-width:0px;
}
The rest of the .css is drawn from Blueprints css or the jQuery-ui css.
I am using v.1.10.3 of the jQuery UI, and v1.10.2 of jQuery.
Whenever I mouse over the dropdown menus, a white space drops down, just like it should, but the text for the menu-items appears a full menu's-width to the right of the menu. Until a few days ago it was working just like it should. But when I switched from jQuery v.1.9.1 because my jQuery tooltips weren't working, my menus broke. Does anyone have any idea what's making this happen?
Let me know if you need any other information.
Modifications made to your fiddle
Added #item_menu_list {
width:188px; } to your CSS - (To make your menu links the same size as the menu.. You can modify it as you see fit.)
Removed all the classes from your appended li elements. When the menu activates it automatically adds these classes for you. There were some conflicts which were causing your issue.
Removed the class and style attributes from your item_menu_list element. <ul id="item_menu_list"></ul> the classes and style and automatically added by menu just like your appended elements.
Added a position attribute to your menu. $('#item_menu').menu({ position: { my: "bottom", at: "right-95 top-3" } }); This lets you adjust where the menu opens I made it so that it opens right below but you can experiment with it. $('#item_menu').menu(); defaults to the menu opening to the right.
Here is the fiddle.
http://jsfiddle.net/QP4BC/31/
Hope this helps you out.
http://jsfiddle.net/2hxmB/1/ - it's your question in jsfiddle.net, maybe someone help you. I'm didn't understand objective.
html:
<div class="span-5 last menu_button">
<ul id="world_menu" class="ui-menu">
<li class="ui-menu-item">Select World Here
<ul id="world_menu_list" class="ui-menu" style="display:block; position:relative;">
</ul>
</li>
</ul>
</div>
js:
$( "#world_menu" ).menu("collapseAll", null, true );
$( '#' + menuId ).append( "<li class=\"ui-menu-item\">" + defaultValue + "<ul id=\"world_menu_list\" class=\"ui-menu\" style=\"display:block; position:relative;\"></ul></li>" );
css:
body{background-color: #999;} .menu_button {/* padding:10px; */ position: relative; vertical-align:middle; /*z-index: inherit;*/ margin-top:0px;color:#F2F2F2;background: #5A86BF;text-align:center;border: 1px solid #3079D9;border-image-width:0px;}
This is a hard one to explain so bear with me (or just skip straight to the jsfiddle)
I have a Div with a max-height defined and overlow-x set to scroll. Within this Div there are a bunch of list items (in this instance, addresses). Naturally there can be many of these and they can overflow, which works fine. What I want is a 'cover' div that indicates that this panel is disabled. I have done this by putting an absolutely positioned div within the main div, like so.
<div style="max-height:150px;overflow:auto;position:relative">
<ul>
<li>Church Walk, Access To Foxholes Farm, DT2 9HG
</li>
<li>Garden Cottage, Access To Foxholes Farm, DT2 9HG
</li>
<li>Little Bride, Access To Foxholes Farm, DT2 9HG
</li>
...etc
</ul>
<div id="overlayDiv" style="display:none;background-color:white;position:absolute;top:0px;opacity:0.8;height:100%;width:100% ">
<p style="margin-top:50px;text-align:center;font-size:18px;">Searching...</p>
</div>
</div>
This then appears when the user does something, overlaying the content and making it appear disabled. Great! The problem occurs when my list items overflow. When the overlay div appears it only covers the current visible portion of the parent div, meaning that if I scroll down the div it appears 'uncovered' as the cover div only spans the height of the parent, not including its overflow.
This is really hard to explain so please go to my jsfiddle and click one of the addresses. You'll see that the div gets covered. If you then scroll down that div you will see that the items at the bottom of the list are uncovered.
This also works in reverse so if you click the 'Hide the overlay div' button to get rid of the cover and then click one of the addresses at the bottom of the list, you'll see that the 'cover' still only covers the top part of the div.
Any ideas on how you go about making that cover div extend the entire height of its parent, including the overflow? Other alternative solutions are welcomed and encouraged. Bear in mind that I don't necessarily need the 'Searching' text that gets overlaid on top, just the 'cover' would be enough.
3 divs instead of 2 works well:
http://jsfiddle.net/JhGCn/2/
html:
<div id="geogPickerAddressResultContainer" style="max-height:150px;overflow:auto;position:relative">
<div id="insideDiv">
<ul ...
</ul>
<div id="overlayDiv" style="display:none;">
<p style="margin-top:50px;text-align:center;font-size:18px;">Searching...</p>
</div>
</div>
</div>
css:
#insideDiv {
width: 100%;
height: 100%;
position: relative;
}
#overlayDiv {
background-color: white;
position: absolute;
top: 0px;
opacity: 0.8;
height: 100%;
width: 100%;
}
this works fine too:
http://jsfiddle.net/JhGCn/3/
var height = $('#addressPicker li').height();
$.each($('#addressPicker li'), function (i, addr) {
height += $(this).height();
$('#overlayDiv').css("height", height + "px");
etc..
I would take the overlay out of the parent, set a z-index and position it over the address picker with negative margin.
http://jsfiddle.net/JhGCn/1/
#overlayDiv{
background-color: white;
opacity: 0.8;
height: 100%;
width:100%;
position:absolute;
z-index:9999;
margin-top:-150px;
height:150px;
}
This a pattern I've seen before as well: http://jsfiddle.net/6oa6grn9/
#overlayDiv {
background-color: white;
opacity: 0.8;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
I am trying to create a carousel, where clicking on any element will slide it leftwards, simultaneously sliding the right element into viewport. For that, I need to have the divs stacked side by side. I am trying it out as a float based layout (see Fiddle ).
Problem is that here clicking the red colored div slides it leftward alright, but not the green element leftwards. This is probably due to the fact that they are actually lying below another, as visible when the overflow: hidden is removed from #cont's style. How elese to stack them side by side so that sliding one leftward automatically slides the next one leftwards as well? (Creating the to-be-next element on the fly while clicking and animating it into viewport is a no-no, the element should be present in the DOM!)
I'd suggest you use a plugin, as there is more to this than you may realize. There are many plugins out there for this, here's a list to get you started: http://www.tripwiremagazine.com/2012/12/jquery-carousel.html
I modified your Javascript, HTML, and CSS to get you pointed in the right direction:
http://jsfiddle.net/nf5Dh/2/
You need a container contContent, positioned absolutely, and that container gets moved within the container div. You just float the elements in contContent to get them next to each other.
HTML:
<div id='cont'>
<div id="contContent">
<div id='i1'></div>
<div id='i2'></div>
<div id='i3'></div>
</div>
</div>
CSS:
#cont {
width: 50px;
padding-top: 10px;
background: blue;
height: 50px;
overflow: hidden;
position: relative;
}
#contContent {
height: 50px;
width: 150px;
position: absolute;
top: 0;
left: 0;
}
#contContent > div {
float: left;
display: inline-block;
height: 50px;
width: 50px;
}
#i1 { background: red; }
#i2 { background: green; }
#i3 { background: yellow; }
And the JS:
$("#contContent > div").click(function(){
$("#contContent").animate({left: "-=50px"},1000);
});
You'd probably be better off using an ul instead of all divs, this is at least more semantically correct, though not technically necessary.
<div id="carousel">
<ul id="carouselContent">
<li id="slide1"></li>
<li id="slide2"></li>
<li id="slide3"></li>
</ul>
</div>
This:
#cont {
white-space:nowrap;
overflow: hidden;
}
.pane { // or whatever the slide divs are called. get rid of the float.
float: none;
display: inline-block;
*zoom:1;
*display:inline;
}
You can use that carousel where you can generate javascript for the carousel http://caroufredsel.dev7studios.com/configuration-robot.php
I've used http://sorgalla.com/jcarousel/ for things like this in the past, that's based on postion: relative and left/right offsets. Probably easier than messing with floats.
You can try using a list item instead, and display them inline.