I have to create an html page for use on a CD. The navigation is an HTML map with co-ordinates set. When the user rolls over a co-ordinate, I want an image popup to appear beside it. There's 8 map links, and 8 corresponding image popups.
I could do this easily through jQuery, but the CD will be used on IE mainly. IE doesn't allow javascript to be run locally (without user interaction, which isn't acceptable).
Through jQuery I absolutely positioned the rollover images, but I can't set them visible through CSS with a hover. What's the best method to approach this?
You could always try some serious styling effects based on the Pseudo-class of :hover.
Without knowing your markup I would tackle along these lines...
HTML Markup
<div id="mapWrapper">
<ul id="map">
<li id="location-01"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
<li id="location-02"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
<li id="location-03"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
....
</ul>
</div>
CSS Code
#mapWrapper {position:relative;} /* include width, height and any bg imagery */
ul#map, #map li {margin:0;padding:0;list-style-type:none} /* just to reset the list to be standard in different browsers */
#location-01 {position:absolute;} /* include with, height and position top-left items as required */
#location-02 {position:absolute;} /* include with, height and position top-left items as required */
etc...
#map li .item {display:none; } /* hide the pop up text, include defaults for position based on the location of the li */
#map li:hover .item {display:block;} /* show the pop up text on hover of the LI*/
/* Note: If you need to position each pop item uniquely you could use something like... If you do, remember to move the :hover effect to be the last item in your style sheet */
#map li#location-01 .item {display:none; }
Hope that helps you out, I have had to a similar map online (not with a CD) but wanted to do it without JS and that was the easiest way to do so.
Note: If you need to offer IE6 support, you would probably be best changing the hover to be based on an ahref instead.
eg: Map Text Additional Pop Up Text
Related
I have a div element nested buttons
<div class="nav">
<button>Home
<button>Market
<button>Profile
</div>
Ignoring the fact that I haven't closed the button tags in the source code is there any way to detect using CSS only whether all of the buttons are not visible so that I can restyle the div to fit the scenario (hide the div as it is useless in this case)
Edit
By not visible I mean made invisible using styles like display:none; or visibility: hidden;
I'm working on a Bootstrap project, the first task is to use Bootstrap navbar to build a navigation in the header. I want to use collapse functionality of Bootstrap to create a dropdown-menu div, when users hover or active a nav item, it will be visible. I want to make this dropdown-menu div 100% width of the screen.
Here's the sample code:
<ul class="nav navbar-nav">
<li class="dropdown">
<a ...>ABOUT</a>
<div class="dropdown-menu">
</li>
</ul>
The question is: the position property of dropdown-menu is absolute, which makes this div positioned based on the closest positioned ancestor. In the sample code is "li" tag, because in Bootstrap there's a rule:
.nav>li{
position: relative;
}
When I add a rule, which could make this "li" tag position static:
.navbar-nav>li {
position: inherit;
}
This rule is ignored by browser, I found this from Chrome inspect. When I uncheck the nav>li rule, my rule works. I want to know how does browser choose which of the css property value to render when it gets two rules on the same element and same property?
Thanks.
In short, specificity. The more specific the selector is, the higher priority it will be given.
For more details, look here... https://developer.mozilla.org/en/docs/Web/CSS/Specificity
Having said that, your rule appears to be wrong, as you need a dot to indicate a class...
.navbar-nav>li {
position: inherit;
}
Using trick from here: Making the clickable area of in-line links bigger without affecting the layout, I set positive padding and negative margin on an anchor element, with the goal of extending the clickable region into some text beyond the element.
It works, but only if opacity is some value below 1! Firefox and Chrome exhibit the same behavior.
Compact demo: http://jsfiddle.net/zGsZK/8/
CSS:
a { margin-right:-250px; padding-right:250px }
.nowork { opacity:1 }
.works { opacity:0.999999 }
HTML:
<body>
<a href=# class=nowork>?</a> this black text is not clickable :(
<p>
<a href=# class=works>!</a> this black text is clickable, as it should be
</body>
Is this how it's supposed to work? Why? Is there a way to make it work when opacity==1?
I'm really not sure why this works, but if you add position:relative; to the nowork class, the clickable area will appear above the text similar to the works class. I believe this has something to do with how browsers render CSS, and since the <p> tag is rendered after the anchor, its native CSS (where cursor:normal; rather than cursor:pointer;) takes priority.
i have a ul style menu looking like this:
<ul>
<li>
<span>Hem</span>
</li>
etc.. etc..
</ul>
the li element has an image as background that changes on hover. i do not want to display the text inside the container and therefore it has visibility: hidden.
Fun thing now; you are still able to click the link in IE and FF but in safari only the mouseover works, but you can't click the link. Changing the visibility of the span container does make it possible to click the link.
Question now is how to change the css code so that it behaves like IE and FF?
I don't want to show the text, but i do want to be able to click the menu - duh!
Rather than setting the visibility of the anchor to hidden consider the following:
ul li a
{
display:block;
width:100%;
height:100%;
text-indent: -9999px; // Hide the text
}
Working Example
I'm not sure if I'm using the correct terminology to describe what I'm looking for but it's the best I could come up with.
Essentially I have a list of items that I'm currently displaying in DIVs. I'm using the jQuery UI plug-ins and hooking up styles to toggle when the user hovers over each item. Now I'd like to have a small toolbar-like set of buttons appear in the upper-right corner of each item when the mouse hovers over that item. When the mouse moves up or down to the next item, the toolbar "moves" to that item. Of course, it doesn't really move - I'm assuming that I'm toggling the visibility of a toolbar associated with each item.
The latter point is due to a couple of factors including that the buttons are encoded with the id value for each list item so the command knows which item to work against.
What I need to know is how to create the HTML and CSS so that I can have a DIV with contents that are unaffected by the display of the toolbar. And the markup and style settings to get the toolbar to appear in the upper-right corner of each item, above the existing content.
UPDATE
I basically have a <DIV> wrapper that contains another <DIV> with text and another <DIV> that contains a set of image buttons (images wrapped in anchors). What I need is the HTML and CSS so that the <DIV> (or whatever other element is required to make it work) containing the buttons appears to float in the top-right corner of the parent <DIV> as shown in the picture below:
I can then use jQuery to show and hide the buttons when the item is hovered.
If you ONLY need the HTML/CSS you could do something like this:
CSS
/* this contain both your injected JS and your current content */
.highlight { background:#ddd; position:relative; overflow:auto; padding:15px;}
.highlight * {margin:0; padding:0;}
/* you will place your action buttons here, they seem to be: delete, promote, demote */
.highlight .nav { position:absolute; top:0; right:0; background:#333; list-style-type:none; }
.highlight .nav li {float:left; margin:0 1px; list-style-type:none;}
/* add the styles per each button, they will all look the same for now */
.highlight .nav li a {display:block; height:15px; width:10px; background:red; text-indent:-9999px; cursor:pointer;}
HTML
<div class="highlight">
<ul class="nav">
<li><a>DELETE</a></li>
<li><a>PROMOTE</a></li>
<li><a>DEMOTE</a></li>
</ul>
<p>your current content will be here, could also be a div or anything else, it just needs to be sitting inside the .hightlight div</p>
</div>
EDIT: Updated with the code I posted at http://jsfiddle.net/edCD3/
Good luck,
Leo