I have a scenario where when click i am changing the border color from black to red by append a class to a div using ng-class.
But when i click a button the modal is getting triggered but the class is not getting appended.
<div ng-class="{'addBorder':clicked}" class="beforeClicked">
<button ng-click="clickToOpen()">My Modal</button>
</div>
function MyCtrl($scope, ngDialog) {
$scope.clicked=false;
$scope.clickToOpen = function () {
$scope.clicked=true;
ngDialog.open({ template: 'templateId' });
};
}
.addBorder{
border:1px solid red;
}
.beforeClicked{
width:100px;
height:300px;
border:1px solid black
}
DEMO
Here the div is already in black border when click on button i am making the flag true which should add class addBorder to the div which appends red color border.
But it isn't happening.
Any help would be appreciated.
Currently, beforeClicked border properties are overriding the border of .addBorder.
Just interchange the order of your css styles for .addBorder to have more preference.
.beforeClicked {
width: 100px;
height: 300px;
border: 1px solid black
}
.addBorder {
border: 1px solid red;
}
Updated fiddle: http://jsfiddle.net/nashcheez/mb6o4yd1/700/
just make the style !important
.addBorder{
border:1px solid red !important;
}
demo
Update your css like below
.beforeClicked{
width:100px;
height:300px;
border:1px solid black
}
.addBorder{
border:1px solid red;
}
add border class after before clicked class.
Related
I got 2 toggles of 50% width and on click it show a div below 100% and hide the other one, vice-versa.
The function that make this possible works fine, but what i am looking to do, is add custom style on the toggle displayed
Here is what it should looks like at the end :
The div one is displayed automatically with the custom style border black, thickker width bottom and text color black
Here is what is does look now :This is the style i would like when not openend, but i would like to change as i said the border and color style
`
function switch_div(show) {
document.getElementById("show_"+show).style.display="block";
document.getElementById("show_"+((show==1)?2:1)).style.display = "none";
}
function stylish(){
document.getElementById("borderRight").setAttribute(
"style", "color:#000000;border:1px solid black;border-bottom:5px solid black;");
document.getElementById("buttonRight").style.color = "#000000";
}
function stylish2(){
document.getElementById("borderLeft").setAttribute(
"style", "color:#000000;border:1px solid black;border-bottom:5px solid black;");
document.getElementById("buttonLeft").style.color = "#000000";
}
.content {
width: 100%;
height: 100px;
display: block;
background-color:#fafafa;
margin-top:3%;
}
.hide {
display: none;
}
.align1{
display:inline-block;
width:49%;
height:50px;
text-align:center;
border:1px solid #c3c6c6;
cursor:pointer;
}
#borderRight{
border-right:0px;
}
.titres{
font-family:Roboto;
font-size:20px;
background-color:transparent;
border:0px;
padding-top:2.3%;
font-weight:700;
color:#a2a2a4;
text-transform:uppercase;
font-size:20px;
letter-spacing:1.5px;
cursor:pointer;
}
.titres:hover{
color:#000000;
}
<div id="borderRight" class="align1" onclick="switch_div(1);">
<button id="buttonRight" class="titres" onclick="stylish()">Description</button>
</div><div id="borderLeft"class="align1"onclick="switch_div(2);"><button id="buttonLeft" class="titres" onclick="stylish2()">
Additional information</button>
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Div number 2
</div>
`
Thanks for your help !
Thanks it's fine ! i'll just adjust the text color , but the result is fine, took me hours to find a way, thanks a lot ! Wish you a nice day !
Hope this helps:
document.addEventListener("DOMContentLoaded", function() {
stylish();
});
function switch_div(show) {
document.getElementById("show_"+show).style.display="block";
document.getElementById("show_"+((show==1)?2:1)).style.display = "none";
}
function stylish(){
document.getElementById("borderLeft").removeAttribute('style');
document.getElementById("borderRight").setAttribute(
"style", "color:#000000;border:1px solid black;border-bottom:5px solid black;");
document.getElementById("buttonRight").style.color = "#000000";
}
function stylish2(){
document.getElementById("borderRight").removeAttribute('style');
document.getElementById("borderLeft").setAttribute(
"style", "color:#000000;border:1px solid black;border-bottom:5px solid black;");
document.getElementById("buttonLeft").style.color = "#000000";
}
.content {
width: 100%;
height: 100px;
display: block;
background-color:#fafafa;
margin-top:3%;
}
.hide {
display: none;
}
.align1{
display:inline-block;
width:49%;
height:50px;
text-align:center;
border:1px solid #c3c6c6;
cursor:pointer;
}
#borderRight{
border-right:0px;
}
.titres{
font-family:Roboto;
font-size:20px;
background-color:transparent;
border:0px;
padding-top:2.3%;
font-weight:700;
color:#a2a2a4;
text-transform:uppercase;
font-size:20px;
letter-spacing:1.5px;
cursor:pointer;
}
.titres:hover{
color:#000000;
}
<div id="borderRight" class="align1" onclick="switch_div(1);">
<button id="buttonRight" class="titres" onclick="stylish()">Description</button>
</div><div id="borderLeft"class="align1"onclick="switch_div(2);"><button id="buttonLeft" class="titres" onclick="stylish2()">
Additional information</button>
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Div number 2
</div>
Link to JsFiddle
I'm having the need to change the cell's background color everytime the user click on it, but I can't get it to work!
This is my script :
$( function() {
$('.tk099 td').click( function() {
$(this).toggleClass("red-cell");
} );
} );
in which tk099 is the table's class, and I don't want any td tag which has a class be affected by the event. Is this possible? Thanks alot!
Your selector .tk099 td takes presidence over .red-cell because:
It is more specific
It is declared later than .red-cell (and CSS cascades)
Declare .red-cell later on and make it just as specific/more specific:
.tk099 td {
background-color:#EEEEEE;
text-align:center;
border-bottom:1px solid #CCC;
border-left:1px solid #CCC;
}
td.red-cell {
background: #F00; /* Or some other color */
}
JSFiddle
change css to and should be declared at the after the default css
td.red-cell {
background: #F00; /* Or some other color */
}
So I have this code that I created with some help:
I don't understand how to enter code it kept creating everything on one line at the formatting looked unreadable so here is a link:
http://jsfiddle.net/QFF4x/
<div style="border:1px solid black;" onmouseover="change(this)" onmouseout="restore(this)" ></div>
Either way, when the mouse is over the black line it expands downwards.
How can i make the onomouseover area larger?
For example if the mouse is hovering up to 15 pixels underneath the line the line would expand. how can i have it do that?
*Note: I everything has to be in the HTML, inline coding only I cannot link any JS or CSS pages.
For some reason, I'm getting complaints about "external files" which isn't relevant, so I'm updating to clarify that all of this can be in one document: Live demo (click).
<style>
#outer {
padding-bottom: 15px;
}
#inner {
border: 1px solid black;
}
#inner.big {
border-width: 3px;
}
</style>
<div id="outer">
<div id="inner"></div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('mouseenter', function() {
inner.className = 'big';
});
outer.addEventListener('mouseleave', function() {
inner.className = '';
});
</script>
You don't need JavaScript for this at all. Here's just a css example: Live demo (click).
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer {
padding-bottom: 15px;
}
.inner {
border: 1px solid black;
}
.outer:hover > .inner {
border-width: 3px;
}
Rather than using JavaScript, I'm using CSS :hover. The trick here is to wrap the element in another element and pad the outer element so that you can hover over that padding to affect the inner element.
If you do want to use JavaScript, please ignore any answers here using inline js (that's where you refer to javascript functions within the html.). Here's a basic example of how to do that without inline js and keeping your styles in css: Live demo (click).
<div id="outer">
<div id="inner"></div>
</div>
CSS:
#outer {
padding-bottom: 15px;
}
#inner {
border: 1px solid black;
}
#inner.big {
border-width: 3px;
}
JavaScript:
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('mouseenter', function() {
inner.className = 'big';
});
outer.addEventListener('mouseleave', function() {
inner.className = '';
});
Why do this instead of inline js? Read these results - there are plenty! https://www.google.com/search?q=Why+is+inline+js+bad%3F
heres a solution using a wrapping div with padding:-15px and on its hover events, just use the firstElemntChild
<script>
function change (element) {
element.firstElementChild.style.border = "3px solid black";
}
function restore(element) {
element.firstElementChild.style.border = "1px solid black";
}
</script>
<div style="padding-bottom:15px;" onmouseout="restore(this)" onmouseover="change(this)" >
<div style="border:1px solid black;" >
</div>
</div>
so you can hover 15 px under the border and the border changes and restores
fiddle . http://jsfiddle.net/QFF4x/2/
To increase the border on hover change
element.style.border = "3px solid black";
To for 15px
element.style.border = "15px solid black";
You can put the div in a larger div, and set the onclick event on the larger div.
<div onmouseover="change(this.childNodes[0])" onmouseout="restore(this.childNodes[0])">
<div style="border:1px solid black;" ></div>
</div>
this is the solution.
<div style="border:1px solid black;" onmouseover="javascript:this.style.border = '8px solid black';" onmouseout="javascript:this.style.border = '1px solid black';" ></div>
http://jsfiddle.net/5GAUq/
This example seems like to change red color into blue from bottom. But, I want to change the red color into blue from top position by scrolling. Could you show me the good solution? It's okay if there are using javascript.
Here is another example what I want to. When you scroll down at this site, the gray line change into red.
<div id="scroll1"></div>
<div id="scroll2"></div>
Css part
#scroll1 {
background-color: red;
width: 50px;
height: 800px;
}
#scroll2 {
bacground-color: blue;
width: 50px;
height: 800px;
}
#scroll1{
background-color:blue;
width: 50px;
height:800px
}
#scroll2{
background-color:red;
width: 50px;
height:800px
}
According to approach used in example, this can be done by css. Just replace color.
When you say scroll do you mean a gradual fade into the other color? Or do you want the change to happen instantly?
Either way you are going to be faced with javascript as CSS is quite limited when it comes to feature-rich UI.
If you want to gradually change your colour you don't need two divs.
Create one div but with a gradient colour as the background-color.
The gradient is from red to blue, so when you scroll you don't need to change you CSS/JavaScript because the gradient will be different.
Look at my example on JSFiddle.
Check this out . I guess this is what you want.
html
<html>
<head></head>
<body>
<div id="contents"> </div>
<div id="container"></div>
</body>
</html>
style sheet
#container{
width:5px;
height:400px;
background-color: red;
Position:absolute;
border:1px #000 solid;
}
#contents{
width:5px;
height:400px;
position:fixed;
background-color: white;
border:1px #000 solid;
}
jquery script
$(document).ready(function(){
$("body").height(1000);
$(window).scroll(function() {
var newSize = $("#contents").height() * (1 - $(window).scrollTop() / ($(document).height() - $(window).height()));
$("#container").animate({height:newSize+"px"},500);
});
});
the demo is available here DEMO
I am trying to add a border to a div element when the moust is hovering on the div, but I found after the border is aded, the boder will occupy some space and make the content move. See the snippet below. Is it possible to avoid move the content in this case when the border is displayed?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#test-id').hover(function() {
console.log("test-id");
$('#test-id').css('border', '5px dotted');
},
function() {
$('#test-id').css('border', 'none');
}
);
});
</script>
</head>
<body style="margin-bottom:0px;margin-top:0px;">
<div>
<div style="width: 300px;">
</div>
<div id="test-id">
jfdjkfjdsfjaldsjfsjf
</div>
</div>
</body>
</html
>
Use CSS 'outline' property instead of border. Which will not occupy element space.
Hope will help you.
Try maintaing the border all the time, and just change the color from transparent to whatever color you want it to have when its visible. You could also use a the background color as the "off" color, but that means it has to overly a solid colored element.
Bin ,
Yes border is also cacluated as part of width. So do one thing give a border before itselef with the same color as background , once you mouseover you can change the color , so that it won't push the other ones down.
This is the behavior how the css render.
You need to set the margin to prevent this.
$('#test-id').css('margin', '-5px');
1 Solution is that you make the with: on hover -2px or another one on normal state, with the border color seted to the box color (or background color of the body).
ex 1:
<body>
<div class="container"></div>
</body>
body { background: #ccc; }
.container { width: 200px; height: 200px; background: #fff; }
.container:hover { width: 198px; border: 1px solid #000; }
ex 2: (best solution)
<body>
<div class="container"></div>
</body>
body { background: #ccc; }
.container { width: 200px; height: 200px; background: #fff; border: 1px solid #fff; } // or #ccc
.container:hover { border: 1px solid #000; }