Develop Reference

How to change style for before/after in Angular?

I'm trying implement breadcrumbs with triangles using before/after in the CSS, as shown in this tutorial:
http://css-tricks.com/triangle-breadcrumbs/
Relevant snippets:
<ul class="breadcrumb">
<li>Home</li>
</ul>
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 65px;
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
However, I'm using it as a directed flow, something like:
Main_Category >> Sub_Category >> Details
This flow starts with Main_Category highlighted and other 2 parts dark, and there's a underneath that you can select from. On select, Sub_Category becomes highlighted and another pops up.
My question is how to change the before/after border colors if they're pseudo-elements? So from the tutorial, I think can do this on the main part:
<li>Home</li>
But there's no where for me to set ng-style for before/after, and the triangle colors end up unchanged.

If I understand your question correctly, you want to know how to use an angular directive to dynamically style the before/after pseudo-tags.
Instead of using ng-style, use ng-class to attach a class that will determine which before/after pseudo class to use.
<ul class="breadcrumb">
<li>Home</li>
</ul>
And in CSS:
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a.color-0:after {
background: black;
}
.breadcrumb li a.color-1:after {
background: blue;
}

I would avoid using ng-style in this instance you may find it easier to use ng-class and apply a different class depending, this will allow you to keep all your CSS in a single place rather than overriding within the HTML.
Simply change your code to:
<li>Home</li>
Where subCategory should be a boolean, on click you set subCategory and then it will add breadcrumb-color as a class value, you should end up with something like this:
<li>Home</li>
Some sample css, now you can set the before and after as you please:
.breadcrumb-color li a {
background: red;
}
.breadcrumb-color li a:after {
background: red;
}

ng-class should work for what you are trying to do.
<li>Home</li>
rough code example

JS: Relative positioning of tooltip on right of icon

I have an icon, and when you hover over it, I would like to have a custom CSS tooltip appear to the right of the icon. Whether or not you scroll up or down the page, the tooltip will always need to appear to the right of the icon.
And no, I don't want to use any plugins. I just want a little JS/CSS to get the job done. If you use JQuery, it needs to be compatible with v1.7, and JQuery-UI: v1.8.
In addition, it needs to be compatible with IE 6 and 7.
I would prefer to leave my elements as siblings, but it looks like under certain circumstances the div that appears needs to be a child element, so it's OK if the HTML needs to be changed.
HTML:
<img src="" class="icon">ICON<img/>
<div class="demo">
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
</div>
CSS:
.demo {
margin-left: 5px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
}
.demo:after, .demo:before {
border: solid transparent;
content: ' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.demo:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.demo:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}
Live Example: http://jsfiddle.net/49Js3/16/

Since my reputation isn't high enough to comment on the answer above, I just wanted to add an updated fiddle (based on the above answer) that positions the tooltip absolutely, but with display: inline-block so that it is not fixed to certain position from the left and will show to the right:
here is the important bit:
a.tippy:hover + div {
display: inline-block;
position: absolute;
}
http://jsfiddle.net/7gmv3wo2/

Fiddle here: http://jsfiddle.net/49Js3/29/
I don't have access to IE6, so I don't know whether it's legal. I do know you'll need an anchor to get hover behavior with CSS in IE7 and earlier.
So, I added an anchor around your image, as well as a div to contain the tooltip.
HTML
<div class="outer">
<a class="tippy" href="">
<img src="" class="icon">ICON<img/>
</a>
<div class="demo">STUFF
<br/>STUFF
<br/>STUFF
<br/>STUFF
<br/>STUFF
<br/>
</div>
</div>
And here is the CSS:
.tippy {
text-decoration: none;
}
.outer {
width: 350px;
}
a.tippy:hover + div {
display:block;
float: right;
}
.demo {
margin-left: 5px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
display: none;
}
.demo:after, .demo:before {
border: solid transparent;
content:' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.demo:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.demo:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}

background image as link using css/jquery

I have div containing the background image but i want to make that image as clickable and pointed to somewhere site. Is it possible to do this in css or jquery
HTML:
<div id="logincontainer">
</div>
css :
#loginContainer {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif")
no-repeat scroll center center #FF660D; /*for example */
border-color: #FFFFFF;
border-image: none;
border-right: medium solid #FFFFFF;
border-style: none solid solid;
border-width: medium;
left: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
min-height:200px;
right: 0;
top: 0;
vertical-align: super;
width: 100%;
z-index: 9999999;
}
Here is the http://jsfiddle.net/a39Va/16/
I am not sure is there is a way to make the background image as clickable which is pointed in div?
Any suggestion would be great.

Just do something like:
<div id="loginContainer'></div>
Or you can do that as well via JavaScript and jQuery
$('#loginContainer').click(function(e) { <Whatever you want to do here> });

You need to fix the z-index of the background element, and as others have said, add an anchor or a javascript action. Also, I added some sample of the rest of the content on the page. You need to see how the two interact with each other.
Here's an updated jsFiddle
HTML
<div id="loginContainer">
</div>
<div class="content">
<p>Something</p>
</div>
CSS
#loginContainer {
background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif")
no-repeat center #FF660D;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 1;
}
#loginContainer a {
display: block;
height: 100%;
width: 100%;
}
.content {
z-index: 2;
position: relative;
width: 200px;
height: 100px;
background: #fff;
margin: 30px 0 0 30px;
}

Here's a Fiddle
HTML
<div id="logincontainer" data-link="http://google.com"></div>
jQuery
$(function() {
$('#logincontainer').hover(function() {
var divLink = $(this).attr('data-link');
$(this).wrap('');
});
});

Why not using an anchor ?
<a href="link" id="logincontainer">
</a>
i updated your jsFiddle
otherwise :
you can click on any element to behave like a link with jQuery.
you can surround your <div> in an anchor if you use the html5 <!DOCTYPE> ( Otherwise invalid )

CSS tricky hover effect

How can I display an image or text whenever I hover over an image? Can you guys help me?
An example:

This actually isn't complicated at all... Use a similar HTML structure as below and just change the display property of the span on hover.
http://jsfiddle.net/kkxfk/2/
<ul>
<li>Link Title<span>Link Desc.</span></li>
</ul>
Use absolute positioning to position the span where you want it.
ul li a span {
display: none;
}
ul li a:hover span {
display: block;
position: absolute;
}

i used it with my own idea and get fully satisfied ,you have to make 2 images, first non-texted and second with your text and hower on them..... try it.....
<style type="text/css">
.leftPan{width:200px; float:right;; margin-top:2px}
#c1 {
margin:6px;
border: thin solid black;
width: 200px;
height: 200px;
background: url(1.jpg) no-repeat;
display: inline-block;
}
#c1:hover {
background: url(2_photo.jpg) no-repeat;
}
</style>

Use a background-image on the a element.
You can then control when it's visible with css
a:hover {
background-image: url(url/to/img);
}
Like this
html
<nav>
Räätälöity-toimitus
<img src="http://placehold.it/200x200&text=image" alt="Räätälöity toimitus" />
</nav>
css
nav {
position: relative;
display: inline-block;
}
a {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
line-height: 7;
}
a:hover {
background-image: url(http://placehold.it/50x50/E8117F/E8117F/);
background-repeat: no-repeat;
background-position: top right;
}
http://jsfiddle.net/UpGKf/

Lite-Javascript Gallery - Can I position the img absolutely in relationship to the <li>s?

I have a lite-javascript run image gallery. The javascript grabs each <img> element in the list and places it as a background in the parent <li> element. Then the CSS styles the thumbnails as small blocks with a defined height/width. A click-event for each <li> object toggles its child’s <img> element’s visibility and adds an “active” class name to the <li>. Using CSS, I'm trying to place the <img> absolutely to make it appear at the same position for each thumb, but it's moving in relation to the thumbs.
Here's the CSS:
#jgal li {
background-position:50% 50%;
background-repeat:no-repeat;
border:solid #999 4px;
cursor:pointer;
display:block;
float:left;
height:60px;
width:60px;
margin-bottom:14px;
margin-right:14px;
opacity:0.5;
}
#jgal li img {
position:absolute;
top:0px;
left:210px;
display:none;
}
And the site: http://www.erisdesigns.net
Thanks in advance for any help!

if you want the <img> to appear at the same position:
#jgal {
list-style: none outside;
margin-top: 30px;
position: relative;
width: 200px;
}
#jgal li {
background-position: 50% 50%;
background-repeat: no-repeat;
border: 3px solid #999999;
cursor: pointer;
display: block;
float: left;
height: 60px;
margin: 0 14px 14px 0;
opacity: 0.75;
position: static; // Need to specify static since you have style li { position: relative; } inside another css file
width: 60px;
}
#jgal li img {
border: medium none;
display: none;
left: 300px;
position: absolute;
top: 0;
}
If you want img to be shown near the thumb - change position: static; to position: relative; for #jgal li {

position:absolute elements base their positioning to the closest parent element with position:relative
If you want the image to be relative to the <li>'s position, all you should need to do is add position:relative; to the #jgal li.
If you want to position it relative to #jgal, you can apply the position:relative there instead, and make sure the #jgal li is position:static (which is default, unless you are overriding it somewhere)