SCSS for adding left line to border not working - javascript

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>

Related

Combining borders after showing data

I am attempting to combine a border for a title and description. The title shows upon page load, but once the title is clicked its description appears below it in its own border. I want those borders to combine when the description is showing.
I created a snipet to show what I have so far.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.toggle(500);
});
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
I am trying to make it do something like this:
http://royalwoodfloor.com/services/
Does anyone know what I should do?
Image
Just change your css like this
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0 0 0;/* update the margin */
}
here is the example link the example link
Updated the code snipet
Try something like this. Slightly changed your HTML structure and css.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title"><span>Floors</span>
<div class="service_description"><span>The best floors!</span></div>
</div>
</div>
</div>
CSS
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
width: 30%;
}
.service_title span{
padding:8px 8px 8px 8px;
display:inline-block;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border-top: 1px solid black;
}
.service_description span{
padding:10px
}
Separate from the animation transition not being the same as the example, this fixes the margin issue:
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
margin-top: -16px;
}
See it working here

I want to add a border to my button on hover event without moving the button or anything [duplicate]

This question already has answers here:
Add a CSS border on hover without moving the element [duplicate]
(4 answers)
Closed 7 years ago.
right now I want to implement a border on hover on a button.
That button is in a div together with 3 other buttons. However, as soon as I hover over it, the border is being displayed, but at the same time the button expands the size of the added border as well, which is not what I have in my mind.
I made a fiddle to demonstrate the problem: Click me
I read up about this topic here, and I indeed found a solution, by adding margin-top: 3px;
to the hover classes, however, that "squeezes" the button, which is not what I want.
Instead, I want the button to not look compressed or anything, but rather simply with a 4px border overlaying the top 4 px of the button.
Any advice?
Thanks in advance
You could try using a box shadow instead, as this doesn't actually affect the positioning:
a {
transition: all 0.8s;
margin: 5px;
text-decoration: none;
display: inline-block;
background: lightgray;
height: 50px;
width: 150px;
line-height:50px;
text-align: center;
color:black;
}
a:hover {
box-shadow: 0 -3px red;
}
HOVER MENOTICEHOWIDON'TMOVE?
I created a quick example: http://jsfiddle.net/alexcoady/ogoy21dq/
And one with just top or bottom http://jsfiddle.net/alexcoady/ogoy21dq/2/
Use margin to replace border-width when it's not visible.
button {
margin: 3px;
border: 1px solid red;
}
button:hover {
margin: 0px;
border: 4px solid red;
}
You can:
use the box-shadow fiddle demo
.functionButton:hover{
box-shadow: 0 -4px 0 0 #a3def1;
}
Style your button to have vertical-align to top. Add the following style to the bottom of your CSS:
#functionButtonDiv button{
vertical-align: top;
}
Updated jsFiddle
Read up: vertical-align | MDN
Try to understand what is happening.
You want buttons not be squeezed, but a border on top to be added.
Initially your button height was 25px and border was 1px.
On hover your height remains same however the border increases by 3px, hence making your button to squeeze.
Solution:
Hover: height has to be increased to accomodate increased border( 4px-1px = 3px) (in order not to squeeze the button).
If you do this only you will observe that the button starts shifting down.
To avoid it add margin of 4-1 = 3px to your functionButton class to compensate the increased height.
Similarly add a margin of -3px in hover class as the height is already increased by 3px.
.functionButton{
width:60px;
height:25px;
border: 1px solid #A3DEF1;
border-left: none;
outline:none;
background: #F2F5FD;
margin-top:3px; //added to avoid shifting of buttons down on hover (Here it compensates the increased height while hovering)
}
.functionButton:hover{
border-top: 4px solid #A3DEF1;
height:28px; //increased height to accomodate the increased border
margin-top:-3px; //negative margin to avoid shifting of button down
}
.functionButton{
width:60px;
height:25px;
border: 1px solid #A3DEF1;
border-left: none;
outline:none;
background: #F2F5FD;
margin-top:3px;
}
.functionButton:hover{
width:60px;
height:28px;
border-top: 4px solid #A3DEF1;
margin-top:-3px;
}
<div class="functionButtonDiv" id="functionButtonDiv">
<button type="button" class="functionButton">Dummy2</button>
<button type="button" class="functionButton">Dummy3</button>
<button type="button" class="functionButton">Dummy4</button>
</div>
You probably don't need Javascript for this.
You can use box-sizing to make sure that borders are included in your dimensions and vertical alignment to maintain position.
button {
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button {
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.functionButtonChat {
width: 60px;
height: 25px;
border: 1px solid #A3DEF1;
outline: none;
background: #F2F5FD;
}
.functionButtonChat:hover {
border-left: 4px solid #A3DEF1;
border-top: 4px solid #A3DEF1;
}
.functionButton {
width: 60px;
height: 25px;
border: 1px solid #A3DEF1;
border-left: none;
outline: none;
background: #F2F5FD;
}
.functionButton:hover {
border-top: 4px solid #A3DEF1;
}
<div class="functionButtonDiv" id="functionButtonDiv">
<button type="button" class="functionButtonChat">Dummy1</button>
<button type="button" class="functionButton">Dummy2</button>
<button type="button" class="functionButton">Dummy3</button>
<button type="button" class="functionButton">Dummy4</button>
</div>
use following css i have made some changes in ur css and its working as per ur requirement try the following
.functionButtonChat{
width:80px;
height:25px;
outline:none;
background: #F2F5FD;
}
.functionButtonChat:hover{
border: 4px solid #A3DEF1;
}
.functionButton{
width:80px;
height:25px;
outline:none;
background: #F2F5FD;
}
.functionButton:hover{
border: 4px solid #A3DEF1;
}

div element not growing

I wrote this menu that elements dynamically adds, but after adding elements the parent the div does not grow.
CSS:
#frstMenu
{
position:absolute;
top:1.5%;
right:1%;
width:23%;
height:70%;
background:rgba(0,0,0,0.6);
border-radius: 5px;
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
cursor: pointer;
outline: none;
padding-top:1%;
overflow:hidden;
z-index:2;
}
.menulist1{
position:absolute;
width:100%;
height:15$;
top:0%;
right:0%;
dispaly:none;
text-decoration: none;
color: #333;
clear:both;
border-bottom: 1px solid #e6e8ea;
z-index:2;
}
#menulist
{
position:absolute;
top: 100%;
right: 1%;
width:23%;
height:500%;
background: #fff;
border-radius: 0 0 5px 5px;
border: 1px solid rgba(0,0,0,0.2);
border-top: none;
border-bottom: none;
list-style: none;
z-index:1;
}
HTML:
> <div id="firstMenuList">
> <div id="frstMenu">choose</div>
> <div id="menulist" class="menuList"></div>
> <div id="frstList1" class="menuList"></div> <- The child divs are similar this </div>
Javascript:
function ccc( prnt , id , cls, r ) {
var ar=new Array("hi","there","hello","world","adsad","asdsad","dsfsdfs","fdsfsdf","sfdsfsdf","soiqeqjek");
var parent=document.getElementById(prnt);
for (var i=0;i<ar.length;i++)
{
var node=document.createElement("div");
node.setAttribute("id",id+""+i);
node.setAttribute("class",cls);
node.setAttribute("onclick","select('"+id+""+i+"')");
node.style.top=(((i)*15)+2)+"%";
node.style.right=r+"%";
node.innerHTML=ar[i];
parent.appendChild(node);
}
parent.style.display="none";
}
And how do I call that function:
ccc("menulist","frstMenu","menulist1","0");
Image:
With position: absolute you must grow your menu inside loop (for) - just add height while you are adding each element.
Code for adding height without using jQuery should in your case look like this:
parent.style.width = parent.clientHeight + 20;
But its of course example and you must change "20" value to your own (calculated).

wrapping text in css div

Hi guys for some reason my text is not wrapping in Div, I have three divs placed inline-block and floating left. If i don't use floating left the the divs gets pushed down.
CSS code
#OuterSection
{
border-top: 10px solid #0272b0;
border-left: 5px solid #0272b0;
border-bottom: 5px solid #0272b0;
border-right: 5px solid #0272b0;
border-radius: 10px;
background-color: #0272b0;
width:250px;
height: auto;
display:inline-block;
}
#InnerSection
{
width:auto;
height:auto;
text-align:center;
background-color: #FFF;
border-radius: 5px;
text-align:left;
word-wrap: break-word;
float:left;
}
#SectionTitle
{
color: #FFF;
display: inline-block;
font-weight: bold;
margin-bottom: 5px;
}
HTML code here
<div id="OuterSection">
<span id="SectionTitle">section1</span>
<div id="InnerSection">
testtesttesttesttesttesttesttesttesttesttesttest
</div>
</div>
<div id="OuterSection">
<span id="SectionTitle">section2</span>
<div id="InnerSection">
</div>
</div>
<div id="OuterSection">
<span id="SectionTitle">section3</span>
<div id="InnerSection"></div></div>
#Section{display:inline-block;}
Fix can be found here: DEMO
Used word-wrap:break-word; on your innerSection with width:100%;

Having a problem with selectors

The problem I'm having is not being able to select the divs inside the 'menuItem' class divs. I've tried using the jQuery selector to select by both class and even ID, but every time I try to do anything with it, such as an animation, nothing happens. Is there some jQuery law I don't know about that prevents me from doing so?
$('.menu')
.hover( function() {
$(this).toggleClass('highlighted');
})
.click(function() {
$(this).parent().children('.menuItem').children('#wtf').slideDown();
});
Also tried these for the click(), but none of them work..
$('#wtf').slideDown();
$('.test').slideDown();
$(this).parent().find('.menuItem').each( function() { $(this).slideDown(); } );
$(this).parent().children('.menuItem').children().slideDown();
<div class='box'>
<div>
<div class='menu'>Resources</div>
<div class='menuItem'>
<div ID='wtf' class='test'>Library</div>
<div>Internet</div>
<div>Your mom</div>
</div>
</div>
<div>
<div class='menu'>Products</div>
</div>
<div>
<div class='menu'>Contact</div>
</div>
</div>
body { font-size: 16px; }
.box {
background: blue;
border: 1px;
padding: 4 6 4 6;
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid;
}
.box div {
float: left;
text-align:center;
}
.menu {
background: lightblue;
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-weight: bold;
font-family:'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid gray;
}
.highlighted {
background: lime;
color: navy;
}
.menuItem {
clear: left;
position: absolute;
margin-top: 30px;
}
.menuItem div {
display: none;
background: lightblue;
opacity: .7;
filter: alpha(opacity=.7);
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-size: 10px;
font-family: 'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid white;
clear: left;
}
Have you tried?
$(this+' > .menuItem div')
I applied a background color to your style and your jQuery selector wasn't selecting properly. I tried this and it changed the background color, but I don't have CSS in place for the visual of the slideDown() to work - you'll have to write your CSS up correctly.
$(this).siblings().find("#wtf").css("background-color","#cccccc").slideDown();

Categories