In this fiddle you will fill when i hover on "action" a dropdown is showed.
The problem is when we see the last item it goes below the scroll and it is not seen.
in .scrollable class i have used the position:relative;
.scrollable
{
overflow: auto;
height: 300px;
position:relative;
width:100px;
}
and the child class "drop" has the position:absolute;
i dont want to change the position:relative of .scrollable class and i want the .drop element to comeout of the scrollable on hover and .drop should not be shown below the scroll;
here is the fiddle : http://jsfiddle.net/napper7/XPxsx/15/
THanks in advance!!
here is a working code,i added a bit of js to get the current cursor position
$('.navItem').each(function() {
$(this).hover(function(e) {
$(this).find(".drops").css('left',e.pageX-20);
$(this).find(".drops").css('top',e.pageY);
}, function(e) {});
});
http://jsfiddle.net/XPxsx/43/
.scrollable
{
position:relative;
height:300px;
width:100px;
}
I think your best bet is to drop off the overflow behavior. As far as I know, it is not possible to display nested divs outside their parent when it has an overflow value different from visible. Ever other values clip the outside box content of some sort (either by adding a scrollbar or by hiding completely the content)
I edited a jsfiddle that does what you want but without a scrollbar :
http://jsfiddle.net/XPxsx/42/
And here is some documentation on overflow behavior :
http://www.w3.org/TR/CSS21/visufx.html
Anything out of this, will be using js to display the content in a different place DOM wise.
Also, as a more general opinion : it is good to use sass (i guess from css indentation), but even better to order your selectors in a meaning order, that would be from the most general to the most specific (such as html, then body, then div.. in your case .scrollable, then .actionTools, then .navItem..)
hope that helps
Related
I have a div, and inside that div I have a variety of elements (p, strong, a, etc.) - by default this parent div is going to be at 200px height. When I click a read more button (last child element of the parent div) - I want the div to expand to it's natural height.
I'm using CSS max-height and overflow:hidden to accomplish the effect of a smaller than natural div and hiding the overflowing elements.
I need to accomplish this with javascript and jquery - and no external libraries unless someone can explain to me how to properly reference them in my wordpress site.
I was using this tutorials solution and it works fantastically, except that because I have multiple P tags inside the parent div, it won't expand to the full height of said parent div - thus my question.
EDIT: After some more time working at it, here's a really good solution, that also includes animation. Fiddle.
$('.career-readMore').on('click', function(event) {
var container = $(this).parent();
$(container).toggleClass('expanded');
$(container).css('max-height', '3000px');
https://jsfiddle.net/smo5vz67/
Assuming the structure presented in the fiddle, the solution is as simple as:
$( document ).ready(function() {
$('.read-more').click(function(){
$(this).parent().toggleClass('expanded');
});
});
plus some CSS
.container{
overflow: hidden;
max-height:200px;
position: relative;
border:1px solid #999;
}
.container.expanded{
max-height:none;
}
.read-more{
position: absolute;
right:0;
bottom:0;
}
try something like this
$('#btnExpand').click(function(){
$('#target').css('height', 'inherit');
});
https://jsfiddle.net/aznpqud0/
I've been searching for hours trying to fix this issue, but it doesn't seem like anyone else has had this problem.
I have two divs, one normal (and inline-block) on the left, and one floated nicely to the right of it. When I use .toggle() on them to hide/show, the floated one reappears below its original position.
Even with all my other code stripped away, this problem persists:
//Html
<div class="tableWrapper">
<div class="redDiv"></div>
<div class="greenDiv"></div>
</div>
//Css stuff here:
.tableWrapper{width:100%}
.redDiv, .greenDiv{width:49%; height:150px;}
.redDiv{
display:inline-block;
background-color:red;
}
.greenDiv{
float:right;
background-color:green;
}
//My two measly jquery calls...
$(" .redDiv").toggle();
$(" .greenDiv").toggle();
Or here on JSFiddle: http://jsfiddle.net/0hxc8rr4/
Note: I tried swapping out "style.display = stuff" calls for the jQuery, and that didn't seem to help.
jQuery will redefine the display property once you toggle. You can simply add float:left to the red block class and it should fix it. Or as mentioned, redefine it after each call. But if you're already floating one element, it'd make sense to float the other.
http://jsfiddle.net/0hxc8rr4/2/
It is simple. jQuery shows the element using display:block which then needs a row instead of a cell.
You can manually toggle it yourself to inline-block
change slideToggle() behaviour to display:inline-block instead of display:block?
(jQuery) Toggle div style "display:none" to "display:inline"
In your case you should just use float:left on the first div.
http://jsfiddle.net/v1etme23/1/
.redDiv{
display:inline-block;
background-color:red;
float:left;
}
Only get the above problem on Mac Chrome (not Safari or Firefox). The below gets it to work on Chrome too;
.redDiv{
position: relative;
background-color:red;
float: left;
}
.greenDiv{
position: relative;
background-color:green;
float: right;
}
So i've got wall of text with links, when hovering over the href it should display a image on the exact same line and always on the left of the full text, so not next to the link itself (meaning background image won't do the trick :( ). I've been tinkering around a bit, but without succes, so hoping you guys can help me out with this one :)
As seen in the second screenshot, "kalender" and "menssana#home" are hrefs and need the same image next to the text. Wether it's javascript or css, any help is appreciated!
Html-example can be found here: http://www.menssanahealth.be/diensten/particulieren/
I would nest a hidden image in the link and create a CSS rule on hover to show the image.
Basically this:
A IMG {
display:none;
}
A:hover IMG {
display:inline;
}
But here is a more fleshed out example using absolute positioning for the image so that it doesn't affect the layout of the link but instead shows up to the left of it.
http://jsfiddle.net/HLKQ3/
You can use CSS :before for this like so
.link:before{
content:'';
width:50px;
height:20px;
background:url('urlToYourFeatherThing.png') no-repeat top left;
position:absolute;
top:0;
left:-20px; // width of image
display:none;
}
.link:hover .link:before{
display:block;
}
Oh, and you may need your .link to be position:relative; so that the leaf is positioned absolutely to the parent.
This has not been tested, if you encounter any problems please let me know.
Good Luck.
#Connor
If you have an span with classname 'leaf' with in the a tag you can write code like below in jquery,
HTML should be like this,
<span class='leaf'> </span><strong>Sauna</strong>
Jquery should be like this,
$("#dienst-content a").hover(
function () {
$(this).find('span.leaf').show();
},
function () {
$(this).find('span.leaf').hide();
}
);
and the CSS,
span.leaf
{
width:50px;
height:20px;
background:url('url-to-leaf-image.png') no-repeat top left;
display: none;
}
Off topic, I have a couple of observations:
the page seems to contain a list of services so using a <ul><li> ... would seem more appropriate markup than <p>-
Some list items have links, others don't it would be more user
friendly to differentiate a list item with a link from a list item
without link -- e.g. use bold text, different color, add an arrow or underline etc
Back on topic:
Using a background image is totally feasible by using a combination of left padding and left negative margin. However if you really don't want to that direction then I would add an extra span within the <a>, and hide it unti the link is hovered.
I've found a solution with jquery :)
You can see it in action here
i've added the following script
<script>
$('<img src="<?php echo get_template_directory_uri(); ?>/images/bloemblaadje.png" class="bloemblaadje"/>').prependTo("#dienst-wrapper a");
</script>
And the css
#dienst-content{
position:relative;
}
.bloemblaadje {
display:none;
position:absolute;
left:0;
margin-left:-60px;
text-align: center;
}
#dienst-content a:hover .bloemblaadje{
display: inline;
}
It might be heavy on a page with alot of links, but this seems the best solution for this design.
Thanks for the many suggestions!
This is the first time i'm trying out Nivo Slider, so bear with me here --
I'm trying to position my controlNav thumbnails INSIDE the slider (I want it in the center, 15px from the bottom of the slider), but so far using position:absolute and left and top attributes just make the entire positioning of the thumbnails position around the body instead of the slider.
Am I doing something wrong? I'm looking online for solutions but I just can't find any. Maybe I'm searching for the wrong keywords?
The site I'm testing it out with is [link removed]. I've reset the thumbnails to the original centered below slider layout, if you want to fiddle with it inside the console it'll be easier.
If when you say "thumbnails", you mean the small pager icons then you can change the css to:
#front-showcase .nivo-controlNav {
z-index: 10;
position: relative;
bottom: 40px;
}
Here I removed display:block and you can adjust the 40px to what ever will suit your layout needs.
In your CSS, set the positioning properties on .nivo-control instead of nivo-controlNAV.
This worked for me by adding to your <head>:
<style type="text/css">
.nivo-control {
position:relative;
top:-45px;
}
</style>
Ah, looks like i've found the answer with help from #aditya and #mToce's answers.
Seems that I forgot about positioning the #front-showcase as a relative element, thus making the controlNav position itself with the body element instead of the slider element.
For more information, read this :
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I've solved the thing by entering position:relative; inside my #front-showcase, and entering position:absolute; inside .controlNav.
Hope this helps!
The question might be a little bit confusing.
I have an inline div and the first one is meant to be a close/delete button. I'm trying to fadeIn the close button on hover, although when it's faded out the rest div's move to the left.
How would you prevent this?
Here is a fiddle: http://jsfiddle.net/x2SEv/
Hover on top of 'Some text goes here'
jQuery functions .show() and .hide(), use the CSS attribute display.
When attribute display is set to none, the space filled by HTML element which is hidden is remove. So your second div move to left.
You have to use the CSS attribute visibility. It does the same thing that display, but it keeps the space filled by HTML.
Let's try :
In your JS :
$(".todo").mouseover(function() {
$('.closebtn').css("visibility", "visible");
});
$(".todo").mouseout(function() {
$('.closebtn').css("visibility", "hidden");
});
And your CSS :
.closebtn, .actions{visibility:hidden;}
You'll have to absolutely position the element that you're fading, and move your text in a bit: http://jsfiddle.net/x2SEv/1/ .
.parent {
position: relative;
padding-left: 40px;
}
.div-to-fade {
display:none;
position: absolute;
left:0; top:0;
}