I see this in Facebook (also Google), but can't figure out how to do it. I took a screenshot of the Facebook nav bar below,
Several questions,
It doesn't seem like this is highlighting the link only - i.e., not doing this through modifying the <a> tag alone - a:hover, etc. The entire element (probably a <li>) is being highlighted - does this mean the entire <li> element itself is a link? Or maybe they're just putting a lot of spaces (e.g., ) in front of the link text? Doesn't seem like they're doing that either.... How is this done?
How do you do a highlight AND a background image? Seems like the background color overrides the background image...?
How do you get the link to know where you are? Is this done through JavsScript, where when I click on a link, I modify its CSS to stay highlighted, and remove all the permanent highlights from the other links in the navbar? I could probably figure out how to do this, just wondering if this is the only way to do it.
Thanks a million for answering my newbie questions!
You can specify different CSS for an LINK element when on hover - it will have an effect as you have described. LIVE EXAMPLE
E.G.
a { background: #fff img1.png no-reapet left top; font-weight: normal}
a:hover { background: #000 img2.png no-reapet left top; font-weight: bold}
In this example we have changed background color, background image and font weight when the element is on :hover.
Q1: If you have an a href inside the li and you add display:block to the a href - a href will get as big as the parrent li. Which than can look as li is an a href
Also, if you add display:block to the a href it can serve as a condtainer for spans img em's etc.. elements - creating one big link which can looks like a div. e.g here you have a link a href which contains desc + img.
Q2: When you specify both - background image and background color for the same element - background image WILL always be on TOP.
Please note that:
a { background-color: #fff; background-image: url(img1.png); background-repeat: no-repeat; background-position: top left}
is the same as:
a { background: #fff url(img1.png) no-repeat top left}
Q3: You can add a class to the clicked element through JS to stay highlighet - but unless you save this value in the DB it will be lost when you reload the page.
Second option is that you can use javascript / jQuery to match URL of the links with current URL and mark matched element (see this example - jQuery).
1) here is an example on how you can achieve what you are looking for.
http://jsfiddle.net/UKna2/1/
CSS
li:hover {
background-color: lightblue;
}
li a {
display: block;
width: 100%;
}
HTML
<ol>
<li>menu item 1</li>
<li>menu item 2</li>
</ol>
2) All they probably do is set an image icon to the list item instead of the standard numbering or bullet. Read up on this : http://www.w3schools.com/cssref/pr_list-style-image.asp
Related
Hey so I have a bunch of tabs made up of like this:
<li><h6>Tab1</h6></li>
<li><h6>Tab2</h6></li>
<li><h6>Tab3</h6></li>
<li><h6>Tab4</h6></li>
<li><h6>Tab5</h6></li>
<li><h6>Tab6</h6></li>
There are all horizontally aligned with display: table-cell;
The problem is that some of them have text that wraps onto a second line, and the hover state when I mouse over an item isn't going to the full height of the row.
You can see the table I'm refering to on this site here: http://perennial.chkpt.com.au/invest-with-us/
You can add :hover style on li instead of a.
Example: apply this style for the website you provided
li.ui-state-default.ui-corner-top:hover {
background: red;
}
I created a circle icon and added an image in the center. I wan't the image to change colors on hover. The only real part of the icon is the circle. I have tried adding hover in the code for the circle icon like:
.circle-icon a:hover {
color: #0cf;
background-image:url(../images/phone-icon-blue-sm.png)}
So in the above I am attempting to swap out the image on hover and trying to change the color by adding a line to the style sheet. I am not sure that I can even do what I want without creating a rollover using javascript, which I am not thrilled about. The demo page is at:
http://tahoe-luxury-properties.com/index2.html
The icon that I am having trouble with is the phone link at the bottom right of the page. The facebook, linked in icons are working great. Just not my home made icon. I might have some code that I can use, but need to search that out. Any help, ideas are greatly appreciated. Thanks, Beth
You can't set a new img src via CSS.
Or you use two background's, or two img's tags (one hidded, that show on hover and hide the other).
/* hide second image, hide first on hover */
#social-icon-menu a em > img:last-child, #social-icon-menu a:hover em > img:first-child {
display: none;
}
/* show second on hover */
#social-icon-menu a:hover em > img:last-child {
display: block;
}
By the way, I noticed that your theme contains FontAwesome, is much better using it, because it's a font icon, so you can just change his color, using color property via CSS.
Here is a nice hover effect applyied on main menu (red rectangles above menu): http://www.templatemonster.com/demo/37841.html
I'd like to use this effect on my website. There is no any css for that effect, so it must be some javascript used. How could I reproduce this or where could I find the javascript that can do that on my website? Simply, how could I achieve that?
There is no need to use javascript, you can achieve it via CSS, try toggling the hover state on any of those links and you will see the effect.
The relevant CSS there is
#superfish-1 > li > a {
-webkit-transition: all .3s ease;
padding: 98px 10px 0 10px !important;
background: url(../images/menu_hover.gif) 0 -100px repeat-x;
}
#superfish-1 a:hover {
background-position: 0 0;
}
So, basically, there is a background image (the red rectangle) with a 100px offset; when you hover the link, the background offset disappears (with a 0.3s transition)
The best language to use would be javascript and the library JQuery. Use the command .toggleSlide and .hover() I put some code down below as an example. Research more into it to get more advanced.
$(document).ready(function(){
$('.home').hover(function(){
$('#home_div').toggleSlide('slow');
});
});
".home would" be the menu tab that say "Home"
"#home_div" would be the red box that appears.
to summarize all the code: You are basically saying that when you hover over the html element with the class "home" (in the case the menu item) to have the html element with the id "home_div" to slide down slow. and then slide back once you stop hovering your mouse.
Good luck. If you want to know more about jquery just research it.
I have a row of evenly-spaced navigation items, which looks like this:
The currently selected menu item is bold-italic. The designer wants the others to turn bold-italic on hover. When this happens, it makes the text of that item wider, which nudges all the other items over because they are displayed inline with a fixed margin. I have to get rid of the nudging.
What's the right way to fix this behavior? I have a couple ideas using javascript:
Onload, wrap the text up in divs and set the width of each div to the width of the text.
Onload, take the positions of each of the menu items relative to the div, then set their positions to absolute with the resulting coordinates (this would be okay because they are always in the same absolute position within the nav div).
These both seem a little hackish, and it's a pretty simple problem so I thought there must be an easier way.
I'm using jQuery if it makes a difference.
The following is a fairly minimal HTML page that will reproduce the issue:
<head>
<style type="text/css">
body {
background: black;
font-family: sans-serif;
}
a {
margin: 0px 20px;
font-size: 16px;
color: white;
text-decoration: none;
}
a:hover {
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<a id="projectslink" href="#projects">Projects</a>
<a id="innovationslink" href="#innovations">Innovations</a>
<a id="newslink" href="#news">News</a>
<a id="aboutlink" href="#about">About</a>
<a id="contactlink" href="#contact">Contact</a>
<a id="breathlink" href="#">Breath*</a>
</body>
I don't think there is an elegant solution to this time-old CSS problem... I can think of two "hackish" CSS solutions to choose from:
Give the items display: block-inline and a fixed width (in em, of course, to prevent font scaling / zoom problems). Width will differ from item to item if the padding should look consistent.
Hide the text and replace replace it with images.
In my opinion, your first solution (setting fixed width onload) isn't that bad. It "feels right" not to mess with position and is, at the very least, much less hackish than the alternatives.
To clarify, this is how I would implement your first solution:
HTML: no change
CSS: no change
JavaScript:
$(function() {
$('a').each(function() {
var menuItem = $(this);
menuItem.css({
'display': 'inline-block',
'width': menuItem.outerWidth(true),
'margin': 0,
'text-align': 'center'
});
});
});
As you can see:
There is no need to wrap the menu items in a div (just set display: block-inline from JS);
Each separate item can be kept centered by setting the width to the computed outerWidth() (which includes margin, padding and border width), clearing the margin and setting text-align to center.
Live example on JSFiddle.
Here's my solution:
http://jsfiddle.net/pRhKF/10/
Obviously you would have to adapt that to make it fit in to your own code. It makes all the as have the width they will have when the text is made bold by momentarily bolding them and then un-bolding them. Unfortunately I also had to use the hover event binder to achieve the mouse over effect, but maybe you can find a way around doing that...
Personally I like to give my nav some list markup, then give the anchor elements block display with a width:
http://jsfiddle.net/9AEnv/
I float the li, but you can also give them a display: inline-block if you want to avoid floats.
For posterity, this is the solution I ended up with: http://jsfiddle.net/jmcdon10/UdJZ5/
Mostly based on #Max's answer (which itself was a reworking of my first proposed solution), but using css hover instead of jQuery's hover event binder.
Is there an easy way to have an HTML <textarea> alternate its row colors
to improve editing?
I don't mind if the solution is pure CSS or if it requires JavaScript.
textarea {
background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
background-size: 100% 4rem;
border: 1px solid #CCC;
width: 100%;
height: 400px;
line-height: 2rem;
margin: 0 auto;
padding: 4px 8px;
}
Found this on codepen. Working for me.
If I understand correctly that you want the colors alternating WITHIN the textarea (as in each line)?
I would suggest the easiest method is to use a background image in your textarea's and have the rows of the alternate colors the same height as the font-size/line-height to create the illusion of alternate rows, then just repeat the background image.
Additional Solution
However, it seems that using that method, the background doesn't scroll along with each line.
The best technique I can come up with is to use a jQuery plugin called 'autoResize' by James Padolsey. What this does is removes the scrollbars and as your text nears the bottom of the textarea, the textarea height is increased accordingly.
Now, that can cause problems since you could potentially have VERY long textareas depending on how much text the user writes but I've created a fix for this.
What we can do is wrap the textarea in a div and set the overflow-y (vertical) to scroll and the overflow-x (horizontal) to hidden. What this does is now give us a "fake" scrollbar on our textarea, creating the illusion that it's scrollable so our background now appears as if it scrolls up and down with the text too.
You will have to adjust the width/height/margins/borders/paddings etc accordingly and maybe check for cross browser compatibility, but this should help set you on the right track and get you going.
Here is a link to an example I have created using the above method:
http://jsfiddle.net/HelloJoe/DmPLH/
CSS supports an nth child syntax now. Check out the MDN docs for an example of changing the background-color of only every other list item inside an unordered list:
HTML:
<p>NBA players with most championships:</p>
<ul>
<li>Bill Russell</li>
<li>Sam Jones</li>
<li>Tom Heinsohn</li>
<li>K. C. Jones</li>
<li>Satch Sanders</li>
<li>John Havlicek</li>
<li>Jim Loscutoff</li>
<li>Frank Ramsey</li>
<li>Robert Horry</li>
</ul>
CSS:
li:nth-child(even) {
background-color: lightyellow;
}
RESULT:
An example of making every other line in a textarea a different color by using CSS' nth-child syntax
SOURCE:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child