We Keep Coding

SCSS for adding left line to border not working

I'm trying to had a button that in it's non-selected state looks just like a plain undecorated link.
When a user clicks on it I want to apply an class called "active".
In the active state, I want the left border of the button to turn blue.
Here is how I have my scss, but it's not working:
.case-nav-link {
display: block;
min-width: 200px;
font-size:16px;
border:1px solid gray;
margin:10px;
padding:15px 10px;
border-left:solid 6px transparent;
&.active {
border-left:solid 6px blue;
}
}

You shouldn't use a <a> for this purpose if you want the class to be added on click, use <button type="button"> or <span> if you add it when page load your code works. check this fiddle
something
.case-nav-link {
display: block;
min-width: 200px;
font-size: 16px;
border: 1px solid gray;
margin: 10px;
padding: 15px 10px;
border-left: 6px solid transparent;
box-sizing: border-box;
&.active {
border-left: 6px solid red;
}
}

i think you need to use something like jQuery to add the class in a click event
$(document).ready(function() {
$('.case-nav-link').on("click", function(e) {
e.preventDefault();
$(this).addClass('active');
})
})
.case-nav-link {
display: block;
min-width: 200px;
font-size:16px;
border:1px solid gray;
margin:10px;
padding:15px 10px;
border-left:solid 6px transparent;
}
.active {
border-left:solid 6px blue;
}
/* added for testing */
.container {width:500px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<a class="case-nav-link" >Link</a>
</div>

Slidetoggle not working properly when within LI

I am trying to show/hide div on click with slidetoggle, its working properly but when I click on input, its still showing/hiding, how do I make it working only on LI not on inner elements.
Here is the working JSfiddle Demo
Limitation I have is I can't bring that div out of LI as currently its within LI tag
Here is the function I have created for that:
$('#location').click(function(){
$(".location_contents").slideToggle(600);
$(".header_right > ul > li:nth-child(1)").toggleClass('actbtn');
});

If you will trigger function while clicking parent div, it also will trigger when child is clicked, you can use immediate child selector,
$('#location > a').click(function(){
$(".location_contents").slideToggle(600);
$(".header_right > ul > li:nth-child(1)").toggleClass('actbtn');
});

Are you looking for this?
I have added a class toggleable in <a> because there may be use
many <a> and in script i have selected 2 selector one toggleable
class and another one list item.
$('#location .toggleable, #location ul li').click(function(){
$(".location_contents").slideToggle(600);
$(".header_right > ul > li:nth-child(1)").toggleClass('actbtn');
});
/*Location Popup*/
.location_contents {background: #fff; max-width: 450px; min-width: 450px; position: absolute; left: 0; top: 68px; width: 100%; z-index: 2; border-radius:4px; box-shadow:0 6px 8px -1px rgba(0, 0, 0, 0.5); display:none;}
.location_contents:after {bottom: 100%; left: 85%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(232, 248, 255, 0); border-bottom-color: #e8f8ff; border-width: 15px; margin-left: -15px;}
.location_contents_head {background: #e8f8ff; float: left; padding: 15px; width: 100%; box-sizing:border-box; color:#404040;}
.location_contents_head > input{width:100%; display:block; padding:8px; border:1px solid #d7d7d7; font-size:14px; color:#404040; box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset; height:45px;}
.location_contents_body{float:left; width:100%; background:#fff; padding:15px; box-sizing:border-box; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;}
.location_contents_body > ul{list-style:none; margin:0; padding:0;}
.location_contents_body > ul > li{display:block; float:left; font-size:14px; color:#404040; display:block; float:left; min-width:140px; text-align:left; padding:3px 0;}
.location_contents_body > ul > li > span {padding: 4px 10px; display:inline-block; transition: all 0.3s ease 0s; border-radius: 2px;}
.location_contents_body > ul > li:hover > span {background: #0076AA; color: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_right">
<ul>
<li id="location" class="actbtn">
<i class="ico ico_location"></i> Delhi/NCR
<div class="location_contents" style="display: block;">
<div class="location_contents_head"><input placeholder="Enter Your City" type="text"></div>
<div class="location_contents_body">
<ul>
<li><span>Agra</span></li>
<li><span>Aligarh</span></li>
<li><span>Allahabad</span></li>
<li><span>Ambala</span></li>
<li><span>Amritsar</span></li>
<li><span>Bhopal</span></li>
<li><span>Chandigarh</span></li>
<li><span>Dehradoon</span></li>
<li><span>Delhi/NCR</span></li>
<li><span>Indore</span></li>
<li><span>Lucknow</span></li>
<li><span>Ludhiana</span></li>
<li><span>Mathura</span></li>
<li><span>Meerut</span></li>
<li><span>Patiala</span></li>
</ul>
</div>
</div>
</li>
<li id="login"><i class="ico ico_user"></i> Login</li>
</ul>
</div>

Trouble with chat layout

I am trying to replicate a chat layout on a site I am working on. I was able to create the chat bubble and get the content in pretty much the right spot, I am just having trouble getting it exactly how I want. There are only a few tiny things I am having trouble with. I can't figure out how to get the triangle on the side of the bubble's border to be as thin as the rest of the bubble, as well as making it lower and smaller. I'm having trouble with positioning the sign in image a little lower like in the image of what I need it to look like. And lastly the "Sign In to Comment" needs to be a little to the left of the image. If anyone could shed any light on any of these things, it would be super appreciated!
Currently:
What I am trying to achieve:
As you can see I am very close! just a few tiny things giving me trouble.
HTML:
<div class="sign-in">
<div class="cell one">
<p class="triangle-border right blue">Join the Conversation</p>
</div>
<div class="cell two">
<img class="sign-in-img" src="<?php bloginfo('stylesheet_directory'); ?>/images/sign-in.png" />
</div>
</div>
<span class="si">Sign In to Comment</span>
CSS:
.triangle-border {
position:relative;
padding:15px;
margin:1em 0 .5em;
border:1px solid #5a8f00;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
min-width: 90%;
max-width: 90%;
background-color: #E0F6F2;
}
.triangle-border.blue {
background-color: #CDE5F7;
border:1px solid #3A7DBA;
}
.triangle-border.right {
margin-right:30px;
}
.triangle-border:before {
content:"";
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:40px; /* controls horizontal position */
border-width:20px 20px 0;
border-style:solid;
border-color:#5a8f00 transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the smaller triangle */
.triangle-border:after {
content:"";
position:absolute;
bottom:-13px; /* value = - border-top-width - border-bottom-width */
left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
border-width:13px 13px 0;
border-style:solid;
border-color:#fff transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the larger triangle */
.triangle-border.right:before {
top:10px; /* controls vertical position */
bottom:auto;
left:auto;
right:-30px; /* value = - border-left-width - border-right-width */
border-width:15px 0 15px 30px;
border-color:transparent #3A7DBA;
}
/* creates the smaller triangle */
.triangle-border.right:after {
top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
bottom:auto;
left:auto;
right:-21px; /* value = - border-left-width - border-right-width */
border-width:9px 0 9px 21px;
border-color:transparent #fff;
}
.pagecontent .cols .col.two .sign-in {
table-layout: fixed;
display: table;
outline: none;
}
.pagecontent .cols .col.two .sign-in .cell {
display: table-cell;
margin: 5px;
height: 100%;
}
.pagecontent .cols .col.two .sign-in .cell.one {
width: 85%;
}
.pagecontent .cols .col.two .sign-in .cell.two {
padding-left: 2%;
width: 15%;
}
.pagecontent span.si {
font-size: .8em;
color: #808C8D;
}

Here is one way to do it:
<div class="wrapper">
<p class="talk-bubble">
talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble
</p>
<p class="sign-in">
Sign In to Comment
</p>
<img src="your/image.png" />
</div>
CSS:
div.wrapper {
position: relative;
padding-bottom: 0px;
background-color: #ffffff;
z-index: -2;
}
div.wrapper img {
position: absolute;
bottom: 0;
right: 0;
border: 1px solid black;
width: 40px;
height: 40px;
}
.sign-in {
text-align: right;
margin: 0;
margin-right: 50px;
padding: 0;
}
p.talk-bubble {
border: 1px solid #3A7DBA;
padding: 15px;
background-color: #CDE5F7;
position: relative;
margin-right: 60px;
}
p.talk-bubble:before,
p.talk-bubble:after {
box-sizing: border-box;
padding: 0;
content: '';
width: 20px;
height: 20px;
display: block;
position: absolute;
border: 20px solid transparent;
}
p.talk-bubble:before {
z-index: -1;
border-bottom: 20px solid #3A7DBA;
right: -12px;
bottom: -1px;
}
p.talk-bubble:after {
border-bottom: 20px solid #CDE5F7;
right: -10px;
bottom: 0px;
}
https://jsfiddle.net/mcgraphix/zLx5967t/

Check this out:
.triangle-border {
position:relative;
padding:15px;
margin:1em 0 .5em;
border:1px solid #5a8f00;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
min-width: 90%;
max-width: 90%;
background-color: #E0F6F2;
}
.triangle-border.blue {
background-color: #CDE5F7;
border:1px solid #3A7DBA;
}
.triangle-border.right {
margin-right:30px;
}
.triangle-border:before {
content:"";
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:40px; /* controls horizontal position */
border-width:20px 20px 0;
border-style:solid;
border-color:#5a8f00 transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the smaller triangle */
.triangle-border:after {
content:"";
position:absolute;
bottom:-13px; /* value = - border-top-width - border-bottom-width */
left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
border-width:13px 13px 0;
border-style:solid;
border-color:#fff transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the larger triangle */
.triangle-border.right:before {
top:25px; /* controls vertical position */
bottom:auto;
left:auto;
right:-15px; /* value = - border-left-width - border-right-width */
border-width:5px 0 5px 15px;
border-color:transparent #3A7DBA;
}
/* creates the smaller triangle */
.triangle-border.right:after {
top: 27px;
bottom: auto;
left: auto;
right: -13px;
border-width: 3px 0 3px 13px;
border-color: transparent #ccf;
}
.pagecontent .cols .col.two .sign-in {
table-layout: fixed;
display: table;
outline: none;
}
.pagecontent .cols .col.two .sign-in .cell {
display: table-cell;
margin: 5px;
height: 100%;
}
.pagecontent .cols .col.two .sign-in .cell.one {
width: 85%;
}
.pagecontent .cols .col.two .sign-in .cell.two {
padding-left: 2%;
width: 15%;
}
.pagecontent span.si {
font-size: .8em;
color: #808C8D;
}
<div class="sign-in">
<div class="cell one">
<p class="triangle-border right blue">Join the Conversation</p>
</div>
</div>

Flickering Lines when moving div from Javascript; pixel perfect CSS?

Please take a look at this JSFiddle:
https://jsfiddle.net/a08vkmew/light/
I created a compass with CSS/Html/Javascript that reacts to horizontal mouse movement on the page.
If you move the mouse slowly you will see that the lines change their width slightly which results in a flickering appearance of the compass.
I think this effect occurs when a line does not exactly match up with the according pixels on the screen, so that only half the width of the line can be shown.
In some GUI frameworks we can choose to display the GUI as pixel perfect. Is something like this possible within CSS?
HTML
<div id="compass-container">
<div class="arrow down"></div>
<div class="arrow up"></div>
<div id="viewport">
<div id="compass-scale">
</div>
</div>
</div>
CSS
div#compass-container {
position:relative;
height: 6em;
}
div#viewport{
position:relative;
height:40%;
width:50%;
left:50%;
top:1.2em;
margin-left:-25%;
overflow: hidden;
}
div#compass-scale {
position:relative;
width: auto;
height: 100%;
}
.mini-container {
width:1em;
height:95%;
top:0em;
border: 0px solid black;
float:left;
}
.line {
position: relative;
left:45%;
width:.1em;
background-color:black;
}
.line.small {
height: 15%;
}
.line.medium {
height: 30%;
}
.line.big {
height: 45%;
}
.compass-text {
position:relative;
height:100%;
width:100%;
margin-top:.4em;
text-align: center;
font-family: sans-serif;
color:dodgerblue;
}
.compass-text.small {
font-size: .6em;
}
.compass-text.big {
font-size: .8em;
}
.arrow {
position:absolute;
width: 0;
height: 0;
left:50%;
}
.arrow.up {
margin-left:-1em;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
border-bottom: 2em solid dodgerblue;
bottom: 0em;
}
.arrow.down {
margin-left:-0.5em;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
border-top: 1em solid dodgerblue;
top: 0em;
}

How do I resize an Avatar image into a smaller one in a fixed header navbar using jquery and css

I need help about resize avatar image into a smaller one in a fixed header navbar. I created this DEMO from codepen.io
When you scroll down on the page then the navbar to be a fixed. But i want to add a avatar in a navbar when scroll down like twitter. Anyone can help me here ?
JQuery
$(document).ready(function() {
$('.globalHeader').scrollToFixed();
$('.footer').scrollToFixed( {
bottom: 0,
limit: $('.footer').offset().top
});
var summaries = $('.summary');
summaries.each(function(i) {
var summary = $(summaries[i]);
var next = summaries[i + 1];
summary.scrollToFixed({
marginTop: $('.globalHeader').outerHeight(true) + 10,
limit: function() {
var limit = 10;
if (next) {
limit = $(next).offset().top - $(this).outerHeight(true) - 10;
} else {
limit = $('.footer').offset().top - $(this).outerHeight(true) - 10;
}
return limit;
},
zIndex: 0
});
});
$('#sponsor').scrollToFixed({
marginTop: $('.globalHeader').outerHeight(true) + 10,
limit: function() {
var limit = $('.footer').offset().top - $('#sponsor').outerHeight(true) - 10;
return limit;
},
minWidth: 1000,
zIndex: 999,
fixed: function() { },
dontCheckForPositionFixedSupport: true
});
$('#sponsor').bind('unfixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor preUnfixed');
});
$('#sponsor').bind('unfixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor unfixed');
$(this).css('color', '');
$('.globalHeader').trigger('unfixed.ScrollToFixed');
});
$('#sponsor').bind('fixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor fixed');
$(this).css('color', 'red');
$('.globalHeader').trigger('fixed.ScrollToFixed');
});
});
CSS
.globalHeader {
z-index: 90;
background-color: #323949;
position: fixed;
width: 100%;
border-bottom: 1px solid #3f4858;
color: #fff;
font-size: 40px;
font-family: arial, sans-serif;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}
.globalHeader_in {
z-index: 99999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
min-width: 960px;
width: 100%!important;
max-width: 1580px;
height: 52px;
left: 0;
top: 0;
padding: 0 20px 0 15px;
margin: auto;
}
.profile-kapak-alani {
width:100%;
height:385px;
background-position: center top;
background-size: 100% auto;
background-size:cover;
border-bottom:1px solid #3f4858;
background: #323949 url(icons/genis.png) repeat 0 0;
}
.profil-kapak-profil-resim {
width:900px;
height:385px;
margin:0px auto;
}
.profil-kapak {
width:900px;
height:385px;
overflow:hidden;
}
.profil-kapak img {
width:900px;
}
.profil-ana-etki-alani{
width: 900px;
margin: auto;
padding: 52px 30px 0;
overflow:hidden;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
}
.kullanici-profil-fotografi-alani {
float:left;
width:200px;
height:200px;
margin-top:-110px;
margin-left:30px;
position:absolute;
padding:8px;
z-index:5;
background-color: rgba(50, 57, 73, 1);
border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2), 0 0 8px rgba(0, 0, 0, 0.5) inset;
}
.kullanici-profil-fotografi-alani span {
display: inline-block;
overflow: hidden;
vertical-align: middle;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
}
.profil-fotografini-degistir {
position:absolute;
width:55px;
height:35px;
margin-top:-38px;
margin-left:4px;
}
.link-abonelik-takipci-fotograf-takip {
width:100%;
height:60px;
position:relative;
border-bottom:1px solid #3f4858;
background-color: #323949;
border-top:1px solid #3f4858;
box-shadow: 0 -7px 5px -6px #000000;
-webkit-box-shadow: 0 -7px 5px -6px #000000;
-moz-box-shadow:0 -7px 5px -6px #000000;;
-o-box-shadow:0 -7px 5px -6px #000000;;
}
.la-t-f-t {
width:900px;
height:60px;
margin:0px auto;
}
.ll-p-t{
float:right;
width:630px;
height:60px;
}
.pay-t{
float:left;
width:88px;
height:60px;
padding-left:15px;
padding-right:15px;
}
.pay-t-t {
font-weight:normal;
color:#9aa2ae;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:11px;
margin-top:10px;
float:left;
width:88px;
text-align:center;
}
.p-t-t-a{
font-weight:bold;
color:#9aa2ae;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:18px;
text-align:center;
margin-top:8px;
float:left;
width:88px;
}
#navbar {
position: absolute;
width:100%;
height:60px;
}
.main-content{
width:100%;
height:auto;
overflow:hidden;
background-color:red;
}
.content{
margin:0px auto;
width:900px;
height:900px;
}
.footer {
background-color: #eee;
padding: 0px;
clear: both;
}
.footer.scroll-to-fixed-fixed {
color: red;
}

For the large background image, you can simply use $(window).scroll() to slow down the scrolling. You also need to set your content to position: relative so it sits above the overflowing background image (since it will scroll at a much slower rate). But your nav bar has a dynamically added z-index:auto which will then cause it to sit behind your content (probably from the plugin) so you'll have to use !important on your #navbar's z-index:
JS
$(window).scroll(function(){
var scrolled = $(this).scrollTop();
$(".profil-kapak").css({"top":(scrolled*0.7)+"px"});
});
CSS
#navbar {
position: absolute;
width:100%;
height:60px;
z-index: 4 !important; //add, need to override the plugin
}
.main-content{
width:100%;
height:auto;
overflow:hidden;
background-color:red;
position: relative; //add
}
For the mini profile look, you can set up the container in your nav bar set to display: none and do a simple fade in/out with the bigger one when the nav bar get's fixed:
HTML
<div class="mini-profile-wrapper">
<div class="mini-profile-img">
<img src="http://www.designbolts.com/wp-content/uploads/2013/11/Frozen-Movie-poster-payoff-Wallpaper-HD1.jpg">
</div>
<p class="profile-name">John Doe</p>
</div>
CSS
.mini-profile-wrapper{
display: none;
float: left;
}
.mini-profile-img{
display: inline-block;
width: 80px;
padding: 5px 5px 0 0;
overflow: hidden;
vertical-align: middle;
}
.mini-profile-img img{
max-width: 100%;
display: inline-block;
}
.mini-profile-wrapper .profile-name{
display: inline-block;
vertical-align: middle;
font-weight:normal;
color:#FFF;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:20px;
}
You can Use pre-existing JS function
$('#navbar').bind('unfixed.ScrollToFixed', function() {
...
$(".kullanici-profil-fotografi-alani").fadeIn();
$(".mini-profile-wrapper").fadeOut();
});
$('#navbar').bind('fixed.ScrollToFixed', function() {
...
$(".kullanici-profil-fotografi-alani").fadeOut();
$(".mini-profile-wrapper").fadeIn();
});
CODEPEN

Twitter is doing some interesting things in this case. The container #1 for the small avatar is in the navigation bar all the time in the same place. That avoids messing around with the placement of the avatar and any other outside elements.
The content of this container #1 is container #2 and has a given height and in its not-fixed state a padding-top of the same value. And because of the overflow: hidden, the inner content (avatar, texts) gets cut of.
As soon as the navigation bar gets fixed, the padding-top of container #2 is set from the height to 0, and thanks to a CSS transition, we have a nice animation. In addition, the big avatar get animated away.
Conclusion: Make the smaller version and place in a spot where you want. Keep this position all the time and just change its visibility. Can be the way described above, can also just be a simple visibility: hidden. Be creative. And then, when you fix your navigation, simply show the small avatar, and hide it, when its going to be unfixed.