I have an overlay which should be on top of everything. The problem is that the overlay is inside a content-wrapper that has a z-index defined. This can't be changed. The logo has a z-index defined as well. This too, can't be changed.
I've made a Fiddle which shows the issue. Can this be done with pure CSS? My other idea is to move the overlay with Javascript, but all the CSS is currently also nested, so I need to change lots of CSS if I do so.
Do something like this, when you click on 'btn' toggle some class to '.overlay', like this\
$("button").on("click", function() {
$(".overlay").toggle();
$('.content').toggleClass('z-1000');
});
in your CSS:
.content.z-1000{
z-index:1000;
}
hope this works for you. working fiddle
Related
[Highcharts]
Hello, is there a way to display the tooltip outside the tags? Like to make it "float" outside the container so that it doesn't get cutoff like below.
Thanks in advance.
Here's an example jsFiddle you can use to reproduce the issue. (Try hovering over the boxplot)
http://jsfiddle.net/af3g18mo/ Code
In your fiddle i can figure out the Problem:
If you go up one cascade in your stylesheet you can see that your paths and stuff is within a tag.
The tag has the fix height of 65px and no overflow attributes - but one path before there is the overflow:hidden. This is why the highchart tooltips and everything is just cut off.
You can change your height dynamically to for example 40% what doesn't really fix the problem if you have longer contents in your tooltip. but you can give a "overflow:visible;" to your <svg> and overwrite the "overflow:hidden" in your ".highcharts-container" with visible - so all the contents like your tooltips that have more than 65 px height are displayed.
You can see the solution here:
be careful changing these things, but in your example i couldn't see any bad reactions to this change. In case you have to give your css the whole path to not change it globally.
http://jsfiddle.net/af3g18mo/2/
So the concrete fixing for your css could be:
svg{
overflow:visible;
}
.highcharts-container{
overflow:visible !important;
}
I'm starting in CSS3, I'm trying to make a menu like this:
http://codecanyon.net/item/metro-navigation-menu/full_screen_preview/4573382
The idea is when you click the button, it hides the parent div and open the div daughter with the other buttons.
I saw this post CSS3 onclick activate another DIV's animation that points to the example http://jsfiddle.net/kevinPHPkevin/K8Hax/, code:
CSS:
#box1 {
display:none;
}
#box1:target {
display:block;
}
HTML:
Click Me
<div id="box1">test test</div>
that clicking on the link, it opens the div. But I want to click the link, hide the div, open the other and then do the reverse.
I would use only CSS3
tks to help
If you do want to use only css3 to do this you can use the Checkbox hack (http://css-tricks.com/the-checkbox-hack/).
It is far from ideal css usage however setting the boxes as radio boxes will do that quite well as each one deactivates the others. (ie you set "width:0px" by default, change to "width:200px" on check combined with "transition: width 0.5s;-webkit-transition: width 0.5s;" for a bit of animation).
In all honesty however you are better using jquery/javascript as the fallbacks for the checkbox hack are not ideal and it is not the stuff that css is really built to control.
Hope that helps,
Dan
This has been already answered you can check out:
CSS3 onclick activate another DIV's animation
This is a very simple technique using the '+' symbol only.Hope you find this useful.
I have a div content that has CSS:
height:700;
overflow:hidden;
What i want to do is i want to create a button that says: expand
so once expand is clicked i want the css for that div to change from:
overflow:hidden TO overflow:visible
so know the div will expand to the height spcified in the css and it would be great if the expand button turns into collapse and does the vise versa when clicked
jQuery is your friend. It is the perfect library for constructing basic DOM events like you've described. Your code might look like the following:
$('#expand-button').click(function(e) {
$('.my_div').css('overflow', 'visible');
});
You can use the jQuery .css function to modify the value of a CSS Property. http://api.jquery.com/css/.
You can also Use jQuery to replace on piece of HTML with another, eg. To change the button.
http://api.jquery.com/css/
I need a little help with CSS animations. How can I make this http://jsfiddle.net/nmsdvid/TdnVs/ just with CSS. So, when I hover over the krab div a css animation will start and going to switch images (vws02.png than vws01.png than vws02.png) while I'm on hover.
The example of krab you have given is done with the css only. On image hover they have just changed the image form http://nmsdvid.com/images/vws01.png to http://nmsdvid.com/images/gif.gif. If you see the second image is already a .gif image(animated image).
here you check
#krab {
width:335px;
height:345px;
background-image:url(https://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
}
#krab:hover {
background-image:url(https://image.winudf.com/v2/image/Y29tLnp6d3BuZXcudGlnZXIzRF9zY3JlZW5zaG90c18wX2NhZWNhNzYz/screen-0.jpg?h=355&fakeurl=1&type=.jpg);
}
demo: http://jsfiddle.net/TdnVs/4/
I give my links a background color to make it stand out, the problem is that it will also apply to links which have images as child instead of text. The result is that the image has a small background at the bottom. (see: http://blog.cmstutorials.org/reviews/general/featured-tutorial-of-the-week-05-feb-2011 )
How do i removed the background of links when it has an img as a child? I though that someting like this would work:
.featured_tutorial img < a
CSS does not support a parent selector.
You have to use classes like a.this_link_contanis_img{ /*override background*/ }
Or maybe you could set a new property to the img. This could hide the link's background.
.featured_tutorial img{ /*override background*/ }
Edit: Ok, that wont work in your case..
Cascading Style Sheets don't allow accessing elements "backwards". You can only access children of an element, not its parents.
It has background leaking at the bottom because images are inline level elements by default and are positioned at the baseline of the text line they are placed on thus there is gap between baseline and descent line that gets the color leak. You can get rid of it in two ways. Set css for:
a img { display: block; }
or if you want the to stay displayed as inline
a img { vertical-align: bottom }
this should fix your problem as it will align the image to the descent line of the text line the image is placed on when in inline mode.
Hope it helps,
T.
As mentioned there is no CSS fix but as you're already using jQuery this is the only way i can think of doing it
http://jsfiddle.net/vrqCV/
jQuery(document).ready(function() {
jQuery("a:not(:has(img))").addClass("bg");
});
As has already been pointed out, CSS doesn't have a way of looking "up" the DOM tree. It basically comes down to performance considerations. (Here's one explanation.)
But if you're not averse to the sometimes necessary evil of tacking this sort of thing on with Javascript, jQuery has a :parent selector.