here's a simple representation of a problem I have. When you click on the button, all black divs should change to black. But the big one styled with css doesn't. Any ideas? thanks a lot.
var v;
function link() {
v = document.querySelectorAll('[style*="background:black;"]');
v.forEach(function(value) {
value.style.backgroundColor = "red";
});
}
.box1 {
background-color: black;
height: 200px;
width: 200px;
border: 2px solid green;
font-size: 25px;
color: white;
}
<html>
<head>
<link rel="stylesheet" href="filter.css" />
</head>
<body>
<div style="background:black; height:100px; width:100px;" id="div1"></div>
<div style="background:blue; height:100px; width:100px;"></div>
<div style="background:black; height:100px; width:100px;"></div>
<div class="box1"> css styled box</div>
<button onclick="link()" style="height:20px; width:50px;">Click </button>
</body>
</html>
Try this
var v;
function link(){
v=document.querySelectorAll('[style*="background:black;"]');
v.forEach(function(value){
value.style.backgroundColor = "red";
});
}
.box1{
height:200px;
width:200px;
border:2px solid green;
font-size:25px;
color:white;
}
<html>
<head>
<link rel="stylesheet" href="filter.css" />
</head>
<body>
<div style="background:black; height:100px; width:100px;" id="div1"></div>
<div style="background:blue; height:100px; width:100px;"></div>
<div style="background:black; height:100px; width:100px;"></div>
<div class="box1" style="background:black;"> css styled box</div>
<button onclick="link()" style="height:20px; width:50px;">Click </button>
</body>
</html>
Related
When i grab object and try to drop in div it doesn't work,no errors in console nothing,logically i have everything done well and i realize what i am doing but in this case i'm stuck.
being a beginner surely is tough,i'm pretty sure i have done some silly mistake in my code.i did easily dropping 1 instance of object in div,but dropping multiple instances sure is another hardcore.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
.objects{
display:inline-block;
background-color:#FFF3CC;
border:#DFBC6A 1px solid;
width:50px;
height:50px;
margin:10px;
padding:8px;
font-size:18px;
text-align: center;
box-shadow:2px 2px 2px #999;
cursor:move;
}
#drop_zone{
background-color:#EEE;
border:#999 1px solid;
width:280px;
height:200px;
padding:8px;
font-size:18px;
}
</style>
<script type="text/javascript">
function _(id){
return document.getElementById(id);
}
var droppedIn=false;
function drag_enter(event){
_('app_status').innerHTML="You are Dragging over the"+event.target.getAttribute('id');
}
function drag_leave(event){
_('app_status').innerHTML="You Left The "+event.target.getAttribute('id');
}
function drag_start(event) {
_('app_status').innerHTML="You are Dragging"+event.target.getAttribute('id');
event.dataTransfer.dropEffect="move";
event.dataTransfer.setData("text",event.target.getAttribute('id'));
}
function drag_drop(event){
event.preventDefault();
var data=event.dataTransfer.getData("text");
event.target.appendChild(_(data));
droppedIn=true;
}
function drag_end(event){
if(droppedIn=false){
_('app_status').innerHTML="You let the"+event.target.getAttribute('id')+"go";
}
droppedIn=false;
}
</script>
<h2 id="app_status">App Status....</h2>
<h1>Drop Zone</h1>
<div id="drop_zone" ondragenter="drag_enter(event)" ondrop="drag_drop(event)" draggable="true"></div>
<div id="object1" class="objects" draggable="true" ondragstart="drag_start(event)"></div>
<div id="object2" class="objects" draggable="true" ondragstart="drag_start(event)"></div>
<div id="object3" class="objects" draggable="true" ondragstart="drag_start(event)" ondragend="drag_end(event)"></div>
<hr>
<button onclick="readDropZone()">GetObjectData</button>
</body>
</html>
If I click on a button,
the color of the first div changes to black from white and the color of the second div changes to white from black, if I click on that button the vice-versa happens.
You can use toggleClass() to acheive this.
Working Demo
$(document).ready(function(){
$("input").click(function(){
$('div').toggleClass('black , white')
});
});
.square{
width:100px;
height:100px;
border:1px solid red;
}
.black{
background-color:black;
}
.white{
background-color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square black"></div>
<div class="square white"></div>
<input type="button" value="Change">
Using jQuery's .toggleClass()
http://api.jquery.com/toggleclass/
$("button").on("click", function(){
$("#a, #b").toggleClass("black");
});
div{width:200px; height:50px; background: #ccc;}
.black{background:#000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>CLICK ME</button>
<div id="a"></div>
<div id="b" class="black"></div>
Using bitwise XOR ^ to remember the button state:
https://stackoverflow.com/a/22061240/383904
$("button").on("click", function(){
var io = this.io ^= 1;
$("#a").css({background: io ? "#ccc" : "#000"});
$("#b").css({background: io ? "#000" : "#ccc"});
});
div{width:200px; height:50px; background:#000;}
#b{background:#ccc;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>CLICK ME</button>
<div id="a"></div>
<div id="b"></div>
Using JS's Array.prototype.reverse()
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
var colors = ["#000","#ccc"];
$("button").on("click", function(){
$("#a").css({background: colors.reverse()[0] });
$("#b").css({background: colors[1] });
});
div{width:200px; height:50px; background:#000;}
#b{background:#ccc;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>CLICK ME</button>
<div id="a"></div>
<div id="b"></div>
Here's an additional reading if you want to use functions: https://stackoverflow.com/a/21520499/383904
function toggleClass() {
$(".main div").toggleClass("black , white");
}
.main {
background-color: lightblue;
height: 50px;
width: 50px;
}
.black {
color: #000;
}
.white {
color: #fff;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div class="main">
<div class="black">first</div>
<div class="white">second</div>
</div>
<button onclick="toggleClass();">Toggle</button>
This is my requirement:
I have "Ttile" and "Description" .
On page Load, "outerElementsContainer"(DIV ID) div background should
be WHITE
"Title" & "Border" Color should be GREEN, "Description color should
be to BLACK.
On mouse hover of "outerElementsContainer"(DIV ID) div, DIV
background should change to GREEN
"Title" Color should change to WHITE, "Description" color should
change to WHITE.
On mouse out of "outerElementsContainer"(DIV ID) div, DIV background
should change to WHITE
"Title" & "Border" Color should change to GREEN, "Description" color
should change to BLACK.
I am stuck at "Description" color. It is not changing on mouse hover.
Below is my HTML code:
<div id="outerElementsContainer">
<div id="123456" name="123456" onMouseOut="this.style.background='WHITE';this.style.color='GREEN';"
onmouseover="this.style.background='GREEN';this.style.color='WHITE';"
style="float:left; margin-right:2em;cursor: pointer; color:'GREEN';width:18em;height:12em;
border-color:'GREEN'; border-width:1px;margin-top: 1em; border-style:solid;">
<div id="InnerDiv1"
style="background-color:'GREEN';height:0.5em;margin-bottom: 10px;">
</div>
<div id="InnerDiv2"
style="height: 3.5em; overflow: hidden;margin-left: 0.5em;font-size: larger;font-weight: bold;">
<p id="title">Title</p>
</div>
<div id="InnerDiv3"
style="height: 5em;overflow: hidden;margin: 0.5em;color:black;">
<p id="Description">Description</p>
</div>
</div>
</div>
How to solve this??
You can do this with css only:
body{color:black;}
#outerElementsContainer > div {
float: left;
margin-right: 2em;
cursor: pointer;
color: 'GREEN';
width: 18em;
height: 12em;
border: solid 1px green;
}
#InnerDiv2 {
height: 3.5em;
overflow: hidden;
margin-left: 0.5em;
font-size: larger;
font-weight: bold;
}
#InnerDiv2 p{color:green;}
#InnerDiv3{
height: 5em;overflow: hidden;margin: 0.5em;
}
#outerElementsContainer:hover > div {
background:green;
border:green 1px green;
color:white;
}
#outerElementsContainer:hover p{
color:white;
}
<div id="outerElementsContainer">
<div id="123456" name="123456">
<div id="InnerDiv1">
</div>
<div id="InnerDiv2">
<p id="title">Title</p>
</div>
<div id="InnerDiv3">
<p id="Description">Description</p>
</div>
</div>
</div>
see in Description in InnerDiv3 div you are applied inine css color:black and inline css has more priority thats why color is not changing.
i have written you a simplified solution below using jquery with your requirement
$(document).ready(function(e) {
$("#123456").mouseover(function(e) {
$(".greenColor").css("background-color", "green");
$(".blackColor").css("color", "black");
$(".whiteColor").css("color", "white");
});
$("#123456").mouseleave(function(e) {
$(".greenColor").css("background-color", "white");
$(".blackColor").css("color", "green");
$(".whiteColor").css("color", "black");
});
});
.greenColor {} .blackColor {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerElementsContainer">
<div id="123456" name="123456" class="greenColor" style="float:left; margin-right:2em;cursor: pointer; color:'GREEN';width:18em;height:12em;
border-color:GREEN; border-width:1px;margin-top: 1em;border-style:solid;">
<div id="InnerDiv1" style="height:0.5em;margin-bottom: 10px;">
</div>
<div id="InnerDiv2" style="height: 3.5em; overflow: hidden;margin-left: 0.5em;font-size: larger;font-weight: bold;color:Green" class="blackColor">
<p id="title">Title</p>
</div>
<div id="InnerDiv3" style="height: 5em;overflow: hidden;margin: 0.5em;color:black;">
<p id="Description" class="whiteColor">Description</p>
</div>
</div>
</div>
hope so this will help you lot
try this.I think this is what you want.if this is not the case tell me.I wrote a full code for you.just copy,paste and try it.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
div.outerelement{
width:500px;
height: 500px;
background-color: white;
border:1px solid green;
text-align: center;
}
h1.ttl{
color: green;
}
h1.des{
color: black;
}
.classOne{
background-color: green;
}
.classTwo{
color:white;
}
</style>
<body>
<div class="outerelement">
<h1 class="ttl">Title</h1>
<br/><br/><br/>
<h1 class="des">Description</h1>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".outerelement").mouseenter(function(){
$(this).css({"background-color":"green"},1000);
$(".ttl").css({"color":"white"},1000);
$(".des").css({"color":"white"},1000);
});
$(".outerelement").mouseleave(function(){
$(this).css({"background-color":"white"},1000);
$(".ttl").css({"color":"green"},1000);
$(".des").css({"color":"black"},1000);
});
});
</script>
</body>
</html>
You can also remove the css property color:black :
<div id="InnerDiv3" style="height: 5em;overflow: hidden;margin: 0.5em;color:black;">
<p id="Description">Description</p>
</div>
to
<div id="InnerDiv3" style="height: 5em;overflow: hidden;margin: 0.5em;">
<p id="Description">Description</p>
</div>
use css:
#description:hover{
background-color: green;
color: black;
}
this will turn the background color green when your mouse is over the div with an id of 123456, when your mouse isn't over the div the background will return to white.
see - http://www.w3schools.com/cssref/sel_hover.asp
to use CSS, either make a .css file and include it in the <head> section of your html page like so - <link rel="stylesheet" type="text/css" href="myCSSFile.css"> <- is better practice, see - http://www.w3schools.com/css/css_howto.asp
if you want to you could also include the CSS styling in your html file, like so in the <head> section -
<style>
#description:hover{
background-color: green;
color:black;
}
</style>
which isn't as good as making a file for the CSS itself.
When I hover my mouse over a div with id one, dialog box appears, but the div with id three moves to the right.
I want the dialog box to appear over div with id three without it moving to right.
HTML PAGE
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:300px;
height:300px;
border:1px solid #000000;
float:left;
margin-left:10px;
}
#one,#three{
position:relative;
}
#two,#four{
margin:0;
padding:0;
left:334px;
top:100px;
background-color:#3B3B3B;
border:none;
width:200px;
height:100px;
display:none;
position:relative;
left:14px;
}
#triangleone,#triangletwo{
margin:0;
padding:0;
width: 0;
height: 0;
border-color:transparent;
border-top: 8px solid transparent;
border-right: 14px solid #3B3B3B;
border-bottom: 8px solid transparent;
top:35px;
display:none;
position:relative;
}
#dialogboxone,#dialogboxtwo{
margin:0;
padding:0;
width:214px;
display:none;
border:none;
}
</style>
<script>
var timer;
function showDialogBox(idOne,idTwo,idThree){
var firstSideBar=document.getElementById(idOne);
var secondSideBar=document.getElementById(idTwo);
var dialogBox=document.getElementById(idThree);
timer=setTimeout(function(){
firstSideBar.style.display="block";
secondSideBar.style.display="block";
dialogBox.style.display="block";
},800);
}
function hideDialogBox(idOne,idTwo,idThree){
clearTimeout(timer);
var firstSideBar=document.getElementById(idOne);
var secondSideBar=document.getElementById(idTwo);
var dialogBox=document.getElementById(idThree);
firstSideBar.style.display="none";
secondSideBar.style.display="none";
dialogBox.style.display="none";
}
</script>
</head>
<body>
<div id="one" onmouseover="showDialogBox('two','triangleone','dialogboxone')" onmouseout=hideDialogBox('two','triangleone','dialogboxone')></div>
<div id="dialogboxone">
<div id="two"></div>
<div id="triangleone"></div>
</div>
<div id="three" onmouseover="showDialogBox('four','triangletwo','dialogboxtwo')" onmouseout="hideDialogBox('four','triangletwo','dialogboxtwo')"></div>
<div id="dialogboxtwo">
<div id="four"></div>
<div id="triangletwo"></div>
</div>
</body>
</html>
You need a wrapper to position the dialogboxes against:
<div class="wrapper">
<div id="one"></div>
<div id="dialogone"></div>
</div>
Then you'll need to position the wrapper relatively, and position them to your liking (eg. with float). The dialog can be positioned absolutely, for example: position: absolute; left: 100% to position them just outside the wrapper to the right.
JSFiddle example
Note: please try to format your code a bit more readable, with indents and spaces... Whenyouwriteinenglishyoualsousespaces,doyou?
I am trying to show a grid in an HTML page. The grid has been made using angular. It worked fine when run in isolated environment. But when I merged it with my original angular project, it's layout distorted.
Following is my code :
index.html
<html>
<head>
<title> SiteMan</title>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "tree.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.min.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.min.css" type="text/css">
<link rel= "stylesheet" href="stylesheet.css">
</head>
<body ng-app="myApp">
<div>
<div id = "header">
<h1>Siteman RANN 0.1</h1>
</div>
<div id ="nav">
<button> Add Attribute </button>
<button> Add User </button>
<button> Add Doccument </button>
</div>
<div id = "aside" style="padding:5px">
<button class="link" ng-click="attr=1 ; docs=0 ; user=0">All Attributes</button></br>
<button class="link" ng-click="user=1 ; attr=0 ; docs=0">All Users</button></br>
<button class="link" ng-click="docs=1 ; attr=0 ; user=0">All Document Types</button></br>
</div>
<div id = "section" ng-controller="mainCtrl">
</div>
<div id = "article" ng-controller="gridCtrl">
<p><strong>Grid with native pagination controls</strong></p>
<div ui-grid="gridOptions" ui-grid-pagination class="grid" ui-grid-auto-resize>
</div>
</div>
<div id = "footer">
Copyright © Siteman RANN
</div>
</div>
</body>
</html>
tree.js
var app = angular.module("myApp", ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
app.controller('gridCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('users.json').success (function(data){
$scope.myData = data;
});
$scope.gridOptions = {
data: 'myData',
paginationPageSizes: [05, 10, 15],
paginationPageSize: 10,
columnDefs: [
{ field : 'name', displayName: 'Name' },
{ field : 'type', displayName: 'Type' },
{ field : 'displayName', displayName: 'DisplayName'}
]
};
}]);
stylesheet.css
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
border: 1px solid black;
}
#nav {
line-height:30px;
background-color:#eeeeee;
color:black;
text-align:center;
height:30px;
padding:5px;
border: 1px solid black;
}
#aside{
line-height:20px;
background-color:#eeeeee;
height:500px;
width:20%;
float:left;
padding:5px;
border: 2px solid black;
overflow: scroll;
}
#section {
float:left;
height:150px;
width:77%;
padding:10px;
border: 2px solid black;
overflow: scroll;
}
a {
text-decoration: none;
}
#article {
float:left;
height:330px;
width:77%;
padding:10px;
border: 2px solid black;
overflow: scroll;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
border: 1px solid black;
}
button.link{
background: none;
border: none;
}
.grid {
width: 800px;
}
I could not find the reason of distorted grid. Help..!!
You padding is not working the way you think it is.
Just add box-sizing: border-box to your code.
* {
box-sizing: border-box;
}
Further explanation on box-sizing:
Box Sizing | CSS tricks
* {box-sizing: border-box}