I want to make the screen pretty dark via CSS beside one DOM element and it's children
How do I do that?
EDIT: I want to do something similar to chrome's dev tools 'inspect element' UI
Create a div layer on top of the whole viewport. Give it some transparency or simply a solid background colour. Raise the element you want to be on top of that layer using CSS z-index.
As #jfriend00 pointed out, you first need to change position of your element to absolute or relative. Then, you have to position the element again using left and top (for example).
Related
I have this page where I tried to create a on page pop-up for an image using JS/JQuery, following this example (http://www.jqueryscript.net/lightbox/Simple-jQuery-Plugin-For-Opening-A-Popup-Window-On-Page-load.html).
Although I succeeded on it, when I try to implement it on my customer page, some divs are on front of my pop-up, no matter how high I configure the "z-index" for it. Also, these divs seem to be dinamically generated, as they have the "wrap" id div around that I can't find on my .php file for this page.
So, no matter what I do, these images are on front of my pop-up (except if I remove them using the "Inspect element" tool or change the z-index on them with Inspect Element, changing the inline style for this automatically generated "wrap" div).
This is the page without any changes on "Inspect Element", the white image boxes with the red arrows are the problem here (they belong to the page under the pop-up and I need them to be under the pop-up): http://imgur.com/waB1igo
This is what happens if I change the z-index of the automatically generated div "wrap" that I can find searching the code with "Inspect element" for one of the boxes (the first one): imgur.com/lDk1eRA
So, any of you guys have a tip for me on how to solve this problem?
I've already tried to create new css rules for this div or the img's tags, using the "!important" and these kind of things, without result.
Thanks very much in advance and sorry for english errors,
Matheus Barreto.
You might want to try setting the position property of the overlay to absolute. Images that have their positions set to absolute will get on top of everything that is not set to position absolute or fixed which can be very annoying. You might need to work around a bit with centering it or other issues that come from setting its position to absolute but this should work.
Try to make sure your overlay DIVs are outside wrappers, inside the </body> tag, before closing scripts... If the DIV is inside another that has a lower z-index, it won't "pop out" of it.
Also, you may try really high z-index, such as 8000 or higher. You should be able to use up to 65535 (higher depending on the browser's implementation).
It's worth noting that you should have a plan for z indexes of fixed/absolutely positioned items.
I've came across wunderlist.com site and just fell in love with the zoom-like pop-up they have on the image just beneath the header "Learn more about Wunderlist".
I'd love to implement something like this on my site.
Can somebody tell me how this is done? I tried to reverse-engineer, but with no luck :)
I'm not hoping for the whole ready code, but maybe some guidelines on how to achieve this with CSS/jQuery.
Or maybe you know some jQuery plugin that I could use?
They are using all CSS. Pretty simple really.. I would code a full js fiddle example for you but I don't have the time, so instead I will list out the different elements you need and how they interact.
First the large image is just a div with a background image with set
dimensions.
The circular images themselves are generated from one large image containing all of the circles in one spot, this is called a sprite. The circles are just div's with background images and background positioning to position the correct circle inside the box from the sprite image.
The text boxes themselves are also div's with a standard H2 and P tags for the text.
Everything is absolute positioned in order to achieve the proper layout.
The small circles are div's with :hover states that are absolute positioned over their respective targeted areas.
The animation on :hover is achieved by the use of css3 transition and css3 transforms.
This should get you started.
Comment if you have questions.
Had some time to have some fun: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/
Try looking at two main aspects:
Open up your inspector tool of choice and look at what happens to body.login .feature
...more specifically, look at what happens to its transform: scale and opacity values upon :hover.
Hint: the transition is mainly on them.
Still in your inspector, change the scale to (1) and the opacity to 1. How it smoothly gets from one state to the other is dictated by the transition property.
This isn't meant to tell you exactly how to achieve it, but to get you on your way :)
It's not that hard actually. The Wunderlist team has even made it easier. They have a large sprite image with the zoomed images cropped and ready with rounded corners, borders and shadows. You can see it here: https://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png
What you do is on mouseover you show a half transparent black background (can be position: fixed with full width and height). Then you create a element with the sprite as the background image (even better, have a class ready in your css and append it to your newly created element). Set position to the position of the hovered element.
When added to the dom animate the transform scale of the element (starting with something like scale(.24) as they do).
Well since you tried reverse engineering. I'll try and guide you along that path.
There is only one div with id overlay which is changes it's place & content, on hover of any div with class feature. Work your way further from their app js, it's not minified.
The content of the popup in this case is an image moved to different positions.
Here's a JS fiddle of what I am talking about:
http://jsfiddle.net/r77K8/98/
My overlay gives the appearance of having disabled the link, but the link still remains clickable. I looked through some examples of modal dialog windows in hopes of finding a solution. As far as I can tell I need to use absolute positioning.
I am hesitant to do so because in reality my content is dynamically populated. It seems like a lot of added work to try and keep the overlay the correct dimensions -- I really like how it looks right now, I just would like to make the controls unclickable while the overlay is the parent. Is this possible?
In your example, it looks like you have the contents that you are trying to disable INSIDE the overlay div. In order for this to work, you need to put the overlay div OVER the contents, so place it after your contents. That way it covers up your content div.
And yes, your overlay should have absolute positioning so that you place it at the top-right corner of the parent container and give it 100% width and height, so that it covers the entire parent container.
See this jsfiddle for an example.
EDIT:
Try this example instead. Put both the contents and the overlay in a container. That way, the overlay will only take up that part of the page.
Notice that the container divs (divLink1 and divLink2) must have position:relative for this to work. According to the absolute description in this link, "The element is positioned relative to its first positioned (not static) ancestor element." So you have to set the containers to position:relative, but don't actually move them.
I am trying to do something similar to expose from jQuery toolkit.
http://flowplayer.org/tools/demos/toolbox/expose/index.html
Except I am trying to use an image as a background and have the overlay over it and reveal only a portion of the image as 100% visible (kind of like a reverse highlight).
My current solution is:
I make an overlay on a image background div and make the z-index of the visible section div higher than that of the overlay. But since the background of the visible section div is transparent the div just shows the overlay. The way the plugins I have seen get around this is by setting the background of the visible section div to a color allowing that whole div to set above the overlay since I am using a pretty big image, I don't have the option to use a colored background on the div. I also don't want to show a cloned copy of the original image because these background images are huge.
I couldn't find any documentation of how to do this online. I'd appreciate any feedback I could get.
My suggestion would be to absolutize the element, set it to a relatively high z-index, then sit your faded layer below that, but still higher than any other content. It would give the appearance of the effect you want.
I want to write a jQuery plugin with some visual effect for selected divs.
Integrating a plugin would look like so:
$('.myclass').mypluginfunction();
Visually it would be a transparent div over the whole element, with moving background.
Is it possible to dynamically add divs without destroying e.g floated divs?
I know that the solution would be adding an absolute position to div with bigger z-index.
You don't even need to tinker with the z-index. An element lower in the source will overlay content before it. Set your elements to position: relative and append an absolutely positioned div with width and height set to 100% - this will effectively overlay it.
Get yourself Chrome (or Firebug) and play with $.append() in the console:
$('*').css('position', 'relative').append('<div style="position:absolute; width:100%; height:100%; background: #F00; opacity:0.5;"></div>');
This will position every element on your site relatively, then append an absolutely positioned div with a red background. You should see every single element on your site being overlayed by it.
Of course this is going to explode, a little, but it gives you an idea of how easy to use this technique is.