I have a large reveal.js presentation that I'd like to add some chapter control feature too. Naturally this sort of control needs to exist outside of the slides themselves and appear opposite of the normal arrow controls.
When adding this feature, I create a DIV with an inside of it. It is placed as the first element inside of the <div class="reveal"> tag.
For the sake of demo purposes:
<aside id="linkage">Expand</aside>
Through CSS I've gotten this to display exactly where I want it. All is well.
However it seems that Reveal does something to disable this link. It is not clickable at all, although an inspection of the DOM at runtime appears to suggest that the tag has been left intact.
By what means is Reveal disabling this link, and what should I do to circumvent this problem?
The cause of this is the .state-background DIV that appears to overlay the entire window in conjunction with position:absolute;
I have resolved this issue by enforcing a z-index on the .state-background div to have it render below my set of controls.
Related
If we have a single page website with different divs (sections) and a header at the top with different links pointing to different anchors (divs) on the page, or of course by scrolling. How can I display a little indicator on the link that represents the anchor the user is currently on, and example is this website.
I'd use the :hover CSS selector (http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes). You can also use a title attribute on the link to create a tooltip.
UPDATE:
I have to assume by your comment that you are referring to the "Page Indicator" in the lower right of the linked website.
To mimic that, simply change the CSS of the targeted indicator when you change the active div. Here's a simple example: http://jsfiddle.net/N39Gf/1/
Mind you, if you're willing to consider using jQuery or a similar library, animations get super simple, as does class-switching and many other operations needed to mimic this effect.
I'm pulling an event list calendar in to my site from a third party provider. It's pulled in using a simple javascript call, and has been placed inside a div on my site. When hovering over an event, you get a tooltip popup that shows more information about it (all driven by javascript). I'm using CSS to put an image as the background for the div, but the tooltip popups are appearing behind the CSS sourced image. I've attempted to set a z-index of 0 for the main div that pulls the background image, and then nest a second div for my javascript with a z-index of 1, but it's not doing anything.
I don't have access to edit any of the javascript for the third party calendar system, so the fix has to be accomplished with whatever I can do on my own site. Unfortunately I wouldn't consider myself a pro at web development, so there may well be a very simply answer I'm not finding, but right now I'm stumped.
Any suggestions? Thanks!
It looks like you're trying to set a z-index for an element whose parent element already has z-index. That's not possible. If you want to set a different z-index on the tooltip element it has to be outside of the first div.
It would be really helpful if you could show us some code.
The main reason why z-index doesn't work could be that you forgot to set position. Z-index only works on positioned elements (position: absolute, position: relative or position: fixed).
The second reason could be the one that #kremalicious mentioned. Setting higher z-index to the child element.
So, I am developing the first serious web site. I want to implement the following scenario, but I need guidance and advice. There is a button <input type="submit"> on my web page. When the user clicks it, I want it to open some HTML content which will be shown on top of all page content (and positioned centrally, but I don't care about that detail at the moment). It should act very similar to the way the photos are viewed on Facebook. When the user clicks the photo thumbnail, the photo opens on top of and across all page content.
Now, I've implemented this already, but I think that my approach is not recommendable, as it looks a bit clumsy to me, especially when I think about the maintenance of the site:
I added a <div> as the last element to the <body>; it is positioned absolutely and collapsed and serves as a container. When the button is clicked, that <div> is filled with the content and the state is changed from collapsed to visible.
I would very much appreciate if someone would like to share the standard methods used to achieve this effect and opinions . I am guessing that AJAX and jQuery should be used heavily for this (I used pure JavaScript in my design described previously). I am looking for some code samples and resources. Thank you so much.
What you are looking for is a modal dialog and not a pop-up. Pop-ups are new windows, while modals are HTML elements that block the page behind it for emphasis on forward content.
One way is to have a <div> appended to the body, usually to the end of the body and have it positioned absolute. That div will have top, bottom, left and right zero to stretch to fit the viewport. Within that div is another div that is also positioned absolute, relative to the parent, viewport-fitting div. Positioning is up to you, but usually it's centered using a formula:
center = (total length - modal length)/2
Content is up to you. You can have the content already loaded and hidden in the DOM which you can just display later. Or load the content via AJAX if you wish.
jQuery already has a modal plugin in the jQueryUI suite which you can use that packs a lot of methods to add and customize.
There are a lot of approaches out there. You could use jQuery UI (http://jqueryui.com). But I like the approach Twitter's Bootstrap is taking: http://twitter.github.com/bootstrap/javascript.html#modals
This is a very clean setup and you can load the content via AJAX with a little selfwritten function. You don't need to write everything yourself because there are plenty of plugins out there. And the bootstrap modal plugin is standalone so you can just use this one.
I like to use it and generate the content div with an AJAX request.
You can position: absolute; the popup box and set it where on the screen you want it. Then use z-index to put it over the content.
Here is a demo: http://jsfiddle.net/e6BEu/
I believe what you're looking for might be Lightbox-like? It could give you some ideas at the very least.
Edit: Or this one which supports text and such.
A requirement for a current project of mine involves "highlighting" an HTML element in the context of a page. That is, I need to provide some sort of visual effect that decreases the brightness of the surrounding page while leaving the element at full brightness.
To achieve this, I'm trying the following approach:
Determining the highest z-index value of any element on the page (using JavaScript).
Creating an element to function as a "backdrop" on top of the page. This is just a <div> with a translucent gray background image, sized to 100% of the width and height of the <body> element, with position: fixed. I set its z-index to 1 greater than the highest z-index I've found on the page, with the intent that it will overlay every other element on the page.
Change the z-index of the "highlighted" element to 1 greater than the backdrop. The intent is to allow it to sit on top of the backdrop, which in turn sits on top of the rest of the page.
I got it working on a quick test page:
http://troy.onespot.com/static/stack_overflow/z_index_test.html
but when I tried to set it up on a few actual Web pages, it didn't work in all cases. For example:
http://troy.onespot.com/static/stack_overflow/z_index.html
Here, I've inserted two "dummy" elements on a copy of a Jacksonville.com article page, both with a class of test (if you're looking at the page source, they're at lines 169 & 859).
I also added some JavaScript (using jQuery) at the very end of the page that functions as I've described above.
The first <div class="test"> does function as I'd expect it to. However, the second one does not - it seems to still be stuck beneath the "backdrop" element, despite having a higher z-index.
I think this may have something to do with stacking contexts, but after reading through the relevant W3C docs (http://www.w3.org/TR/CSS21/visuren.html#z-index & http://www.w3.org/TR/CSS21/zindex.html), I still can't fathom why this is happening. I'd appreciate anyone more familiar with z-index and stacking order than I to take a look at my examples and let me know if anything looks suspicious.
Please note that I've only tested these examples in Firefox v3.6.
Thanks very much for any help!
The problem is that the second test div is inside a bunch of other HTML elements, one of which must be creating a new stacking context (it may be the #wl-wrapper-tier-1 div). Basically, a new stacking context is created whenever an element is positioned and has a z-index other than auto, see this MDC article for more info on stacking contexts.
Ultimately this means you can't achieve your desired effect reliably with this method. I think you're probably better off composing 4 divs to surround the target element.
If the element that you're highlighting is inside a different element (stacking context) with a z-index lower than the backdrop, it will not appear higher than the backdrop, since the element's z-index only controls stacking order within that parent.
The only good solution is to clone the highlighted element and add the clone to the <body> tag.
Beware of inherited CSS styles, which would be lost.
Want to know How to create modal dialog/pop up without title bar using javascript which will work on both IE and FF.
Thanks.
You're going to have to make a div that sits--absolutely positioned--in the middle of the viewport (or wherever you want it) above all the other elements--using z-index. This is where your content goes. Now, I recommend a film to go behind it, but above everything else--again using z-index. Then place a handler on that film that places focus back on the "modal" div. Also, you might want to place a focus handler all the other elements (not the "modal" div), using event delegation, that places focus back on your "modal" div--just to be sure.
You also might want to look at how jQuery UI does it. You'd only need to remove the title bar from. In fact, you probably could just use that one and mess with the CSS to hide the title bar.
I do this with two divs. I lay one div over the whole screen and make it semi-transparent, then I lay my "popup" div in the center of the screen with a higher z-index. The popup div can then contain whatever content you want.