I have created CSS onHover popup as given here. but problem is, User should be able to click the Register link in the example. here, Popup disappears as I move the mouse aware form the link.
Can anyone tell how it could be achieved ?
HTML:
<div class="how f-left">
<h7>How does this work?</h7>
<div class="how-works bubble-outer">
<div class="navigation-up-arrow"></div>
<div class="body">
<h4>How It Works</h4>
<ol class="bubble-inner">
<li>Tell Us What's Wrong </li>
<li class=""> Register to Get Quotes from Local Shopshere </li>
<li class=" bold-txt ">Call Shop / Get Vehicle Serviced </li>
<li>Get Cash Back </li>
</ol>
</div>
</div>
</div>
Below CSS is used for onHover PopUp:
.how h7:hover + .how-works {
display: block;
}
You can make it display on hovering the parent (.how), not just its preceding sibling. Hovering the parent happens when you are hovering any of its descendants (the link, .how-works, any of the children of .how-works).
To do this, change:
.how h7:hover + .how-works {
display: block;
}
to:
.how:hover .how-works {
display: block;
}
DEMO
Also, if you want to make it work for touchscreens (no hover there), you could adjust a bit your HTML. Change
<h7>How does this work?</h7>
to
<a class="how-it-works" href="#" tabindex="1"><h7>How does this work?</h7></a>
and add this to the CSS as well:
.how-it-works:focus + .how-works {
display: block;
}
DEMO
Add this to your CSS:
.how-works:hover {
display: block;
}
Modified version of your demo: little link.
Here is a working example link.
Put
.how:hover .how-works {
display: block;
}
instead of
.how h7:hover + .how-works {
display: block;
}
and add position: relative; top: 0px; css properties to .how .how-works.bubble-outer{ ... }
Related
I have a modal that, when opened, makes everything disappear via display-none except for itself. Or, at least, that's what I want it to do, but it doesn't. I don't know much about child selectors, but I think this should work since .fixed#myNav is a direct child of .fixed#all-body. Does anybody know what could be wrong?
#all-body {
display: block;
}
#myNav {
display: none;
}
.fixed#all-body >:not(.fixed#myNav),
.fixed#all-body >:not(.fixed#myNav) * {
display: none !important;
}
<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button>
<!-- Other menu content-->
</div>
<!-- Other page content-->
</body>
function toggleMobileMenu() {
var element = document.getElementById("myNav");
element.classList.toggle("fixed");
var element = document.getElementById("all-body");
element.classList.toggle("fixed");
}
More context, if anybody's wondering: When the button to open the modal is clicked, the .fixed class is added to both #all-body and #myNav, and I want their respective display values to switch. However, since #myNav is a child of #all-body, this doesn't work. I'm hoping to use the code above to basically say "everything except for #myNav is at display: none."
function toggleMobileMenu() {
var element = document.getElementById("all-body");
element.classList.toggle("fixed");
}
#all-body {
display: block;
}
#myNav {
display: none;
}
.fixed #myNav{
display:block;
}
.fixed#all-body >:not(#myNav) {
display: none !important;
}
<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button>
menu
</div>
<p>page content</p>
</body>
.fixed class is set for body only.
Added display:block for nav when .fixed is parent.
Content should be wrapped in a tag for this to work.
I found it easier to follow what was going on if there was just one class, showMenu, introduced rather than trying to use fixed twice.
What this snippet does is toggle showMenu on the body. It also ensures the 'other content' on the page is wrapped in an element so that it too can respond when the showMenu class is added to body.
Then it does what you were basically doing, set all child elements of body to display none when the showMenu class is set and then it sets the menu to block so it alone shows.
function toggleMobileMenu() {
var element = document.getElementById("all-body");
element.classList.toggle("showMenu");
}
#myNav {
display: none;
}
/* stop showing every element below body (but not body itself) */
.showMenu>:not(#myNav) {
display: none;
}
/* override the above setting for just the menu */
.showMenu #myNav {
display: block;
}
<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button> Other menu content
</div>
<div>
Other page content
</div>
I couldn't see how to do it without making sure the other content is in its own element - if it isn't it will stay visible which I believe you don't want.
I have the following fiddle - here I am trying to align the 'click' and <h3> in the same line
I am facing 2 issues here -
when the h3 content is too long it is pushing 'click' -
and on click when it shows the content it is moving sideways. Any ideas on how to acheive this - new to CSS.
Tried giving display:inline to <h3> but that did not help in this scenario.
http://jsfiddle.net/92spd439/
$('#ttt a#iimarrow').css({
cursor: "pointer"
}).on('click', function() {
$(this).next('ul').toggle();
});
ul {
display: none;
}
#ttt {
float: right;
}
a#iimarrow {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3><a> tdhfkjshdfhsdfsdflkshdlflskfjl</a><h3>
<span id="ttt">
<a id="iimarrow">click</a>
<ul>
<li>12</li>
<li>13</li>
</ul>
</span>
The problem here is actually the h3 element which defaults to a display: block;. So if you just remove a#iimarrow{display:inline-block;} (since a tags default to display: inline; as #mikelt21 pointed out) and add the CSS below, then your problem will be fixed.
h3 {
display: inline;
}
JSFiddle
I believe something like this might be what you are looking for.
What I did was add float:left to the first <a>.
As following:
<h3>
<a style="float:left"> tdhfkjshdfhsdfsdflkshdlflskfjl</a>
</h3>
You could achieve this by placing the right-floated <a> element ahead of the <h3> in the HTML:
$('#ttt a#iimarrow').css({
cursor: "pointer"
}).on('click', function() {
$(this).next('ul').toggle();
});
ul {
display: none;
}
#ttt {
float: right;
}
a#iimarrow {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="ttt"><a id="iimarrow">click</a>
<ul>
<li>12</li>
<li>13</li>
</ul>
</div>
<h3><a>tdhfkjshdfhsdfsdflkshdlflskfjl</a><h3>
Note that a <span> cannot contain the block-level <ul> element, so I've used a <div> in place of that, otherwise the only change is rearranging so the <div> (#ttt) comes ahead of the <h3>.
I found a good lightbox effect on a blog but I'm not sure how to tweak it the way I need. Aside from manipulating background opacity and z-index, it works by setting a divs css display property to "none" and then "block" when the effect is triggered. In that div I have the unordered lists I apply the jquery menu() and dialog() methods to. The lightbox effect and the ui methods work, but the dialog won't open inside the div designated by the class: "white content". It opens behind the white content instead. I tried to change the z-index of the dialog() in my script, but it didn't work. below I have the code from my .css, .html and .js files.
CSS
/*Lightbox effect
----------------------------------*/
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 2000%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 100%;
background-color: white;
z-index:1002;
overflow: auto;
}
HTML
<body>
<div id="light" class="white_content">
<div id="dialog" title="Invite">
<ul class="menu">
<li>
Age Group
<ul>
<li name="ageGroup">18-21</li>
<li name="ageGroup">21-30</li>
<li name="ageGroup">30-40</li>
<li name="ageGroup">40-50</li>
<li name="ageGroup">50-60</li>
<li name="ageGroup">60-70</li>
<li name="ageGroup">70-80</li>
<li name="ageGroup">80-90</li>
<li name="ageGroup">90-100</li>
</ul>
</li>
</ul>
<button>Button label</button>
</div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
JS
$(function(){
//event handler that triggers lightbox effect
$('#list').on('click', '.edit', function(event){
//this is where the lightbox effect executes.
$("#light").css("display", "block");
$("#fade").css("display", "block");
//I want the dialog and menu to open inside of the div #light
$("#dialog").dialog();
$(".menu").menu();// closes $("menu").menu()
$( "button" ).button();
}//closes function(event)
);// closes on()
}); //closes $function.
I couldn't find a way to get a UI dialog to open inside a <div>. Might be that it is made purposely to always open as a child of <body>. In jQuery UI site the dialog runs inside a <iframe> so that might trick you to believe it's inside a <div>.
My suggestion would be to put jQuery UI components inside your lightbox as it is already kind of like a dialog. Also if you want your lightbox to move you should be good with jQuery UI's draggable and resizable.
Here's a jsFiddle I made to explain what I'm after.
I am trying to do a toggle in pure CSS using :focus pseudo-selector.
My problem is I try to do the focus on parent element and change both child elements and adjacent selector.
<p class="collapser" tabindex="0">FILTERS
<span class="dblArrow right">
<i class="icon icon-double-chevron-right" tabindex="0">>></i>
<i class="icon icon-double-chevron-left" tabindex="0"><<</i>
</span>
</p>
<ul class="filters">.....
On the click on collapser (or the arrows in <i>), I want to display the <ul> or hide it, and changing the arrows.
You can view a demo of what I achieved until now : http://jsfiddle.net/TmzC7/9/
It has drawbacks : when you click anywhere outside the collapser the filters are hidden. To hide the filters, you have to click on the arrows.
If there is a solution so that either the arrows or the whole collapser (better) can handle the toggle and switch arrows, it would be great, but I reckon you have to use JavaScript for this...
I tried to do things like :
.collapser:focus .icon-double-chevron-right:focus + .icon-double-chevron-left {
opacity:1;
text-indent:0;
}
to detect click on the arrows, but it did not work. I assume focus does not bubble.
Is there a trick (like playing on tabindex or something) to achieve this without JavaScript?
using the examples here http://ghinda.net/css-toggle-switches/
i was able to do this http://jsfiddle.net/DbXQs/
it seems like the catch is to use the :checked selector.
hope it helps.
You could use the :target selector, like this :
.icon-double-chevron-right,
.icon-double-chevron-left,
.filters {
padding: 10px;
margin: 0;
list-style: none;
display:block;
border: 1px solid #000;
}
.filters,
.icon-double-chevron-left,
.icon-double-chevron-right:target {
display: none;
}
.icon-double-chevron-right:target + .icon-double-chevron-left,
.icon-double-chevron-right:target ~ .filters {
display:block;
}
a {
color: #333;
text-decoration: none;
}
<div>
>>
<<
<ul id="drop" class="filters">
<li>
FILTER 1
</li>
<li>
FILTER 2
</li>
</ul>
</div>
(see also this Fiddle)
I have a navigation bar with images, like so:
<ul>
<li class="me">
<span class="cont"><img src="dummy.png" /></span>
</li>
<li class="me">
<span class="cont"><img src="dummy.png" /></span>
</li>
</ul>
On hovering over a list item I want to change the background color to cover the span and image like so:
.me {background-color: none;}
.me:hover {background-color: rgba(150,150,150,0.5);}
Problem is, the image does not get covered... Is this because the background is in fact... a "background" on which child elements are sitting? If so, how could I achieve this effect with plain CSS?
EDIT - solution
this worked with my original HTML structure:
<ul>
<li>
<a href="" class="ui-btn">
<span class="ui-btn-inner"> /* CONTAINS IMAGE AS BACKGROUND */
<span class="ui-btn-text">text</span> /* GETS BACKGROUND */
<span class="ui-icon"></span>
</span>
</a>
</li>
</ul>
"Negative logic": If I assign the background to list item, it sits behind all child elements, so I figured I needed to assign the background to an element that is a child of the element containing the img to have it appear above all items. span ui-btn-inner contains the image, so setting the :hover background on span ui-btn-text makes it appear above the image... weird, but works.
Yes, the background is just a background, and is placed behind any child elements.
To achieve what you're looking for, try using the css :after pseudo element to mask the image on hover:
.me {
position: relative;
}
.me:hover:after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(150,150,150,0.5);
}
It's shiny, you get to use the image as a semantic image, and requires no extra HTML markup.
Yes, it's because the background is in fact a background. The best method to achieve this in raw css would be to continue using the background:
.me
{
background-color: none;
background-image: url(dummy.png);
background-repeat: no-repeat;
}
.me:hover
{
background-color: rgba(150,150,150,0.5);
background-image: ;
}
You could also achieve this effect with a bit of javascript as well.
<ul>
<li class="me">
<span class="cont"><img="dummy.png" onmouseover='this.src="sometransparent.gif";' onmouseout='this.src="dummy.png";'></span>
</li>
<li class="me">
<span class="cont"><img="dummy.png"" onmouseover='this.src="sometransparent.gif";' onmouseout='this.src="dummy.png";></span>
</li>
</ul>
Code not tested. It might require tweaking to get it just right.
Edit: Layering concept
None of this pseudo-code is test, but I've done it before so it may just take a bit of tweaking. I don't have a copy of the original I did on hand so I'll have to wing it. The first step is to create a relative container and 2 sub containers.
.meContainer
{
position: relative;
width: 100px;
height: 30px; /* I usually specify height/width for these things */
}
.meContainerLink
{
position: absolute;
top: 0;
left: 0; /* You need to use position to get them to overlap */
z-index: 1; /* Provide a layer */
}
.meContainerAlpha
{
position: absolute;
top: -30px; /* Move it UP 30px */
left: 0px;
z-index: 2; /* Place it on top of the other layer */
display: none; /* Hide it */
background-color: rgba(150,150,150,0.5);
}
.meContainerAlpha:hover
{
display: inline; /* Show it */
}
Then you'd need to place these in divs inside your <li>.
<ul>
<li class="me">
<div class="meContainer">
<div class="meContainerLink">
<img="dummy.png">
</div>
<div class="meContainerAlpha">
</div>
</div>
</li>
<li class="me">
<div class="meContainer">
<div class="meContainerLink">
<img="dummy.png">
</div>
<div class="meContainerAlpha">
</div>
</div>
</li>
</ul>
I don't recall ever trying this method inside embedded <li> tags, so it may behave oddly at first. You may have to abandon <li> and switch to a different <div> structure entirely.
another potential option that should be more cross browser than :after could be:
.me:hover span { display: hidden; }