Need little CSS help! I want to unhide a elements when another element is hovered.
For example:
<div class="Welcome"><a>Welcome to our site<a><div>
<div class="Message">Thanks for touching me!<div>
CSS
.Message {
display: hidden
}
.Welcome a: hover {
/*I want to make .Message visible now. Any ideas?*/
}
This is really the best you can get, when you hover over .Welcome .Message is displayed. This uses the adjacent sibling + selector.
.Message {
display: none;
}
.Welcome:hover + .Message {
display:block;
}
http://jsfiddle.net/mowglisanu/ZPVSU/
This is really easy with a bit of jQuery.
CSS
div.Message{
display:none;
}
HTML
<div class="Welcome">Welcome to our site<div>
<div class="Message">Thanks for touching me!<div>
jQuery
$('.Welcome').hover(
function () {
$('.Message').show();
},
function () {
$('.Message').hide();
}
);
Example: http://jsfiddle.net/gxn34/
EDIT
To answer your question below
You would need to add the following to your page, usually in the <head> section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And
<script>
$(document).ready(function(){
$('.Welcome').hover(
function () {
$('.Message').show();
},
function () {
$('.Message').hide();
}
);
});
</script>
.Welcome a: hover {
display: block;
}
Related
I have the markup:
<body class="arabic specific-page">
<div class="child">
<div class="grand-child">
</div>
</div>
</body>
In my sass I am already inside .specific-page and .child. I would like to apply a specific property if body is .arabic:
what I already have:
.specific-page {
.child{
.arabic & {
.grand-child{
gets compilet to:
.arabic .specific-page .child .grand-child
I would like to compile to:
.arabic.specific-page .child .grand-child (body has the same class)
without changing the selector at the top of the tree, only at child level
You can do this using #at-root like so:
.specific-page {
.child{
#at-root .arabic#{&} {
.grand-child{
border: 1px solid red;
}
}
}
}
This compiles to: .arabic.specific-page .child .grand-child, see here.
For this to work you're going to need to alter your SASS a bit. Try
.specific-page {
&.arabic {
.child {
.grand-child {
You could use #at-root and break out of your nesting structure.
.specific-page {
.child{
.arabic {
#at-root .arabic.specific-page .child .grand-child{}
}
}
}
I use an #mixin function like this, when i need change some element in middle
of a sass big tree.
The first parameters is the parent element, the target, and the second the class that should have.
SASS
#mixin parentClass($parentTarget, $aditionalCLass) {
#at-root #{selector-replace(&, $parentTarget, $parentTarget + $aditionalCLass)} {
#content;
}
}
Sample,
like I need to improve font size in a strong tag, when .txt-target had .txt-strong too
HTML
<section class="sample">
<h1 class="txt-target txt-bold">Sample<strong>Bold</strong>Text</h1>
</section>
SASS
section{
.txt-target{
strong{
#include parentClass('.txt-target','.txt-bold'){
font-weight:bold;
font-size:30px;
}
}
}
}
2 options:
.arabic.specific-page {
.child{
.grand-child{
Or (you can switch the order of arabic and specific-page):
.arabic{
&.specific-page {
.child{
.grand-child{
I know how to collapse (display / hide) a div:
$('#nav').click(function() { $('#hello').toggleClass('hidden'); });
.hidden { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">NAV</div>
<div id="hello" class="hidden">Hello</div>
Is it possible to do this without Javascript / jQuery?
I've tried the main answer from this question, but it is not working, as detailed here.
Nobody has mentioned the 'details' element, which seems perfect for this job.
<details>
<summary>Click to toggle</summary>
<span>Oh, hello</span>
</details>
You may use :checked selector.
#hidden {
display: none;
height: 100px;
background: red;
}
:checked + #hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<div id="hidden"></div>
<label for="my_checkbox">Show/hide</label>
Example fiddle
Well yes, it is, but it's not neat. It involves the :target selector, where you can apply styles to active elements / id's. If we wrap your nav content in a link, we can apply a hashtag which invokes the active rule in our CSS.
Downside, this jumps the page to the location unless prevented by... JavaScript.
a {
color: #000;
text-decoration: none;
}
#hidden {
display: none;
}
#hidden:target {
display: block;
}
<div id="nav">NAV</div>
<div id="hidden">Hello</div>
I wan't to make a special menu for the iPad version of my website.
It should work like this:
http://itu.dk/people/mbul/humlum/images/ipad_menu.png
Click on IMG 1 and the menu expands (to IMG 2) and the links gets visible. When you click outside IMG 2 it disappears along with the links so only IMG 1 is visible.
I've come this far but it doesn't really do the trick:
<div class="nav_mobile_container">
<div class="nav_mobile_elements">
<div class="nav_mobile"></div>
</div>
</div>
div.nav_mobile_container{
position: fixed;
top: 0px;
left: 0px;
}
div.nav_mobile_elements{
display: inline-block;
}
div.nav_mobile_elements a{
vertical-align: top;
display: inline-block;}
div.nav_bookmark:hover{
display: inline-block;
}
.nav_mobile{
width:70px;
height:70px;
background-image:url('images/menu_small.png');
display: inline-block;
}
.nav_mobile:hover{
width:496px;
height:500px;
background-image:url('images/menu_small_expanded.png');
}
I would really appreciate a CSS solution on this if possible.
Thank you!
The closest you can get is
#nav_mobile:active {
width:496px;
height:500px;
background-image:url('images/menu_small_expanded.png');
}
But that does not work on an ipad.
I recommend to use a bit of javascript.
Create an onclick event that displays a div with all the navigation information you need.
With jquery:
$("#small_navigation").click(function(){
$("#big_navigation").show();
});
The css:
#big_navigation {
display: none;
width: ...
height: ...
etc...
}
You will need javascript for this. Using jQuery, this is how you could make it :
First, don't set an :hover in your CSS, but just make a class that you will add on click :
.nav_mobile.navopen {
width:496px;
height:500px;
background-image:url('images/menu_small_expanded.png');
}
And then a bit of jQuery to make it work :
$(document).ready(function(){
// expend the menu on click
$('.nav_mobile').on('click', function(event){
event.stopPropagation();
$(this).addClass('navopen');
});
// close menu on click outside the menu
$('html').click(function() {
$('.nav_mobile').removeClass('navopen');
});
});
The jsFiddle demo
Edit : with pure javascript
window.onload = function() {
var menu = document.getElementsByClassName('nav_mobile')[0];
menu.onclick=function(e){
e.stopPropagation();
menu.className = "nav_mobile navopen";
};
var html = document.getElementsByTagName('html')[0];
html.onclick=function(){
menu.className = "nav_mobile";
};
};
I have a vertically displayed navigation menu. I would like a bullet point to appear to the left of the page currently being viewed. I've read a little bit about using background changes applied to li to indicate page, but I don't know how to apply that to using bullets.. Any ideas?
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>lookbook</li>
<li>services</li>
<li>contact</li>
<li>blog</li>
</ul>
</nav>
nav {
position: fixed;
right: 13%;
top: 65%;
}
nav ul li {
text-align: right;
}
http://jsfiddle.net/jtRws/
Update
Live examples of all proposed solutions
Working with AMC it was determined that a JavaScript solution would work better given the requirements. All content would appear on one page so the CSS solutions would not work based on my findings. I proposed the simple jQuery code to show a bullet when the link was clicked.
jQuery
$(window).load(function(event) {
$('a').click(function() {
$('#Nav li').removeClass();
$(this).parent().addClass("current");
});
});
CSS
#navcontainer3 ul {
width: 200px;
list-style-type:disc;
}
#navcontainer3 ul li {
color: #ccc;
float:right;
clear:right;
}
#navcontainer3 ul li.current {
color: #000;
}
This page contains examples of all the solutions but you'll find the jQuery solution alone at this link: http://jsfiddle.net/jtRws/10/.
Interesting problem. Obviously, there are JavaScript solutions, but it looks like you want a pure CSS solution.
Solution 0
Hide the other list item bullets by setting the list style color to the background color.
All pages will have the same navigation HTML but each page's <body> will have an id unique for that page. For example: <body id="home">, <body id="products">, etc. Then, using some clever CSS, the current page will obtain the specific styling definition (last def below).
#navcontainer0 ul {
width: 200px;
list-style-type:disc;
}
#navcontainer0 ul li {
color: #fff;
float:right;
clear:right;
}
body#home #homenav0,
body#products #prodnav0 {
color: #000;
}
Solution 1
Use background to show and hide the bullet image. Based on this article I used the following code. The article explains the technique in greater detail. Below you'll find the same code as the live example.
CSS
#navcontainer ul {
width: 200px;
padding:0;
margin:0;
text-align:right;
}
#navcontainer ul li a:hover {
color: #930;
background: #f5d7b4;
}
body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
background:url(bullet.gif) 0 50% no-repeat no-repeat;
padding-left:15px;
}
Products Page
<body id="products">
<div id="navcontainer">
<ul id="navlist">
<li><a id="homenav" href="index.html">Home</a></li>
<li><a id="prodnav" href="products.html" >Products</a></li>
</ul>
</div>
</body>
I assume you're using anchors to navigate through page sections, so the only way I can think of right now is using javascript(jQuery).
I've updated your code example: http://tinyurl.com/a6ypyuz
In addition to #earthdesigner answer, if you don't want to add jquery then use this javascript instead:
http://jsfiddle.net/7uxcg/31/
window.onload = function() {
// var nav = document.getElementById('nav');
var nav = document.getElementsByTagName('NAV')[0].children[0];
for(c in nav.children) {
var li = nav.children[c];
if(li.nodeName == 'LI') {
li.onclick = function() {
changeClass(this.children[0].hash);
}
}
}
function changeClass(cur) {
var nav = document.getElementsByTagName('NAV')[0].children[0];
for(c in nav.children) {
var li = nav.children[c];
if(li.nodeName == 'LI' && li.children[0].hash == cur)
li.className = 'active';
else
li.className = ''
}
}
};
I understand that you want bullets only to current page. So first of all we're goind to eliminate normal bullets.
ul {list-style-type:none;}
Than i saw that you use id's for content divs on every page. Combining that with atribute selector here's an example of what you could do:
#home li a[href='#home']:before, #about li a[href='#about']:before {
content:"•";pointer-events:none; text-decoration:none;
}
I have made a textbox with an autocomplete in ASP.NET MVC 4, Javascript and JSON.
I want to give the autocomplete a nice layout, but it won't work.
There is a css-file jquery.ui-autocomplete.css automatically in the project.
This is the place where I fill the list
<li data-role="list-divider">Gemeente</li>
<li data-role="fieldcontain">
<div class="ui-widget">
<input type="text" name="Gemeente" class="ui-autocomplete"/>
</div>
</li>
This is the script I use:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('.ui-autocomplete').autocomplete({
source: '#Url.Action("AutocompleteGemeenten")'
});
</script>
This is the JSON-code I use:
public ActionResult AutocompleteGemeenten(string term)
{
List<string> items = new List<string>();
items = _zoekClient.GetGemeenten();
List<string> filteredItems = new List<string>();
filteredItems = items.Where(test => test != null && test.ToLower().Contains(term.ToLower())).ToList();
return Json(filteredItems, JsonRequestBehavior.AllowGet);
}
this is the css-file
.ui-autocomplete { position: absolute; cursor: default; }
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
list-style:none;
padding: 2px;
margin: 0;
display:block;
float: left;
}
.ui-menu .ui-menu {
margin-top: -3px;
}
.ui-menu .ui-menu-item {
margin:0;
padding: 0;
zoom: 1;
float: left;
clear: left;
width: 100%;
}
.ui-menu .ui-menu-item a {
text-decoration:none;
display:block;
padding:.2em .4em;
line-height:1.5;
zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
}
Can anyone help me changing the layout of the autocomplete?
thanks in advance
If you want to change the default styling of jQuery UI you have a few options.
1. Override the default css
CSS is evaluated in order of last declaration, which means the last defined rule wins. You add rules that override the styles defined in the jQuery UI style sheet. Add your rules in another CSS file and place a link to that file after the link to the jQuery UI CSS file
<link href="~/Content/jquery.css" rel="stylesheet" type="text/css" />
<link href="~/Content/overrides.css" rel="stylesheet" type="text/css" />
2. Add classes to your generated jQuery widget
jQuery has a method called addClass. You can define a CSS class with your style rules and then add that class to to jQuery widget
Define:
.myClass {
display:block;
float: left;
}
Add:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('.ui-autocomplete').addClass('myClass');
$('.ui-autocomplete').autocomplete({
source: '#Url.Action("AutocompleteGemeenten")'
});
});