I need to disable click on certain divs based on some condition. Can anyone guide me please? Currently am using ng-disabled which is not working
Working Demo below for you to play
.aw-right-pane-content{height:200px; width:200px;}
.aw-dataType-selected{background:green;}
.charts{
height:30px; width:30px;
border:1px solid #ccc;
margin:20px 0 0 10px;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
</head>
<body>
<div class="aw-right-pane-content"
ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false,clickable:false}, {name:'Chart2',selected:false,clickable:true},{name:'Chart3',selected:false,clickable:true},{name:'Chart4',selected:false,clickable:false}]">
<div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts" >
<div ng-click="chart.selected = !chart.selected" class="charts" ng-class="{'aw-dataType-selected':chart.selected}" ng-disabled = "chart.clickable"></div>
<div class="aw-right-pane-charts-name"> {{chart.name}}</div>
</div>
</div>
</body>
</html>
You cannot disable a div using ng-disabled the possible solutions are either you can add an ng-class for disabled elements with no cursor events or you can use a fieldset instead of div.
First Solution - Using ng-class and changing script handling clickable property
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
.aw-right-pane-content {
height: 200px;
width: 200px;
}
.aw-dataType-selected {
background: green;
}
.charts {
height: 30px;
width: 30px;
border: 1px solid #ccc;
margin: 20px 0 0 10px;
}
.disabled {
opacity: 0.4;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="aw-right-pane-content" ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false,clickable:false}, {name:'Chart2',selected:false,clickable:true},{name:'Chart3',selected:false,clickable:true},{name:'Chart4',selected:false,clickable:false}]">
<div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts">
<div ng-click="(chart.clickable)? chart.selected = !chart.selected : chart.selected = chart.selected" class="charts" ng-class="{'aw-dataType-selected':chart.selected, 'disabled': !chart.clickable}"></div>
<div class="aw-right-pane-charts-name"> {{chart.name}} - {{chart.clickable}}</div>
</div>
</div>
</body>
</html>
Second Solution. Using fieldset instead if div.
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
.aw-right-pane-content {
height: 200px;
width: 200px;
}
.aw-dataType-selected {
background: green;
}
.charts {
height: 30px;
width: 30px;
border: 1px solid #ccc;
margin: 20px 0 0 10px;
}
</style>
</head>
<body>
<div class="aw-right-pane-content" ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false,clickable:false}, {name:'Chart2',selected:false,clickable:true},{name:'Chart3',selected:false,clickable:true},{name:'Chart4',selected:false,clickable:false}]">
<div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts">
<fieldset ng-click="chart.selected = !chart.selected" class="charts" ng-class="{'aw-dataType-selected':chart.selected}" ng-disabled="!chart.clickable"></fieldset>
<div class="aw-right-pane-charts-name"> {{chart.name}} - {{chart.clickable}}</div>
</div>
</div>
</body>
</html>
I will prefer the second one.
You can do it as follows :
<div class="aw-right-pane-content"
ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false,clickable:false}, {name:'Chart2',selected:false,clickable:true},{name:'Chart3',selected:false,clickable:true},{name:'Chart4',selected:false,clickable:false}]">
<div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts" >
<div ng-click="chart.clickable ? chart.selected = !chart.selected: ''" class="charts" ng-class="{'aw-dataType-selected':chart.selected}"></div>
<div class="aw-right-pane-charts-name"> {{chart.name}}</div>
</div>
</div>
You can apply a common class over elements that need not be clicked and apply pointer-events: none; to the same.
CSS should always be preferred in such cases instead of Javascript.
Related
I am trying to select 4 divs using a d3 selectAll function, but nothing is getting selected. The height in this code never changes:
var popop = d3.select("#chart")
.selectAll(".bar");
popop.style("height", "40px");
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<script src="../lib/d3.v3.min.js"></script>
<script src="project1.js"></script>
<style>
.bar {
float: left;
width: 30px;
margin-right: 20px;
border-color: #F4F5F7;
border: 1px solid #C5C5C5;
}
#chart {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div id="chart">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</body>
</html>
The select('#chart') works when it is used by itself. When I look at the code in the Code Inspector it popop has one element. When I add .selectAll(".bar") only one element is given.
When I run this in the browser here on Stack Overflow I get the same as my local code. Just four small horizontal lines. Their height is 0 when you hover over them.
When I run Aagam Jain's code on Stack Overflow it works!!! When I copy Aagam's code locally, it doesn't work. The includes downloading d3.v3 from the website.
Tried in Firefox and Chrome and get the same.
The question was in d3.v3. Below snippet works for me.
d3.select('#chart').selectAll('.bar').style('height', '40px')
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>
.bar {
float: left;
width: 30px;
margin-right: 20px;
border-color: #F4F5F7;
border: 1px solid #C5C5C5;
}
#chart {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div id="chart">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</body>
</html>
It was a timing issue. If I defer the scripts (so they run after everything has loaded and then runs them in order) like mentioned in the comments on my question, everything works:
<script src="https://d3js.org/d3.v3.min.js" defer></script>
<script src="./project1.js" defer></script>
I have a confusing issue. When my first div "leftbox" is hovered over, "rightbox" (the hidden div) displays, but it eventually disappears when "leftbox" is not hovered over. But I need "rightbox" to stay visible when rightbox is hovered over, then when the user's mouse leaves rightbox, then it should disappear. How can I get this to work? I'd really appreciate the help.
If you add a container class it works fine.
$(function(){
$('.container').hover(function(){
var boxId = $(this).find("[data-id]").attr('data-id');
$('#'+boxId).stop().fadeToggle();
});
});
.leftbox {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.rightbox {
width: 100px;
height: 100px;
border: 1px solid black;
background: #99bf8f;
margin-left: 110px;
display: none;
}
.container {
float:left;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<div class="leftbox" data-id="functionbox1"></div>
<div class="rightbox" id="functionbox1"></div>
</div>
<script src="test.js"></script>
</body>
</html>
I need a popwindow on click or onfocus of the dropdown . In the popwindow I should display the checkboxes with multiselect option.I searched for this kind but I couldn't find any references.
Can anyone write code for this using jQuery.
Thank you
Try this code... hope it helps
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#pop
{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#container
{
position: relative;
width:500px;
margin:100px auto;
background-color: white;
border-radius: 10px;
padding: 20px;
}
#ddown
{
width:100px;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js">
</script>
<title></title>
</head>
<body>
<select id="ddown" >
<option></option>
</select>
<div id="pop" >
<div id="container">
<h1>Some Check box here</h1>
</div>
</div>
</body>
<script type="text/javascript">
$("#ddown").on("click",function(event){
event.preventDefault();
$("#pop").show();
})
$("#pop").click(function(){
$("#pop").hide();
})
</script>
</html>
I have a flash object which is 300x600. I want to place it horizontally with another div. swfObject creates it with style="display: block !important;", so I think that's the problem.
I've tried to use swfobject.createCSS to disable this, but it didn't work-out.
I'd be glad for help.
Here's how you can do it ...
<!DOCTYPE html>
<html>
<head>
<style>
#wrapper {
width: 500px;
border: 1px solid black;
overflow: auto;
}
#first {
float: left;
width: 300px;
border: 1px solid red;
}
#second {
border: 1px solid green;
margin: 0 0 0 302px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="first">
<object width="300" height="315"
data="http://www.youtube.com/v/XGSy3_Czz8k">
</object>
</div>
<div id="second">
<h1>This is some second div</h1>
</div>
</div>
</body>
</html>
I started using jsPlumb and JQuery, I want to connect draggable elements but if I add the
draggable behavior before the connection then the connection does not refresh position.
My code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.window {
background-color: white;
border: 3px solid #346789;
color: black;
font-family: helvetica;
font-size: 0.8em;
height: 12em;
opacity: 0.8;
padding: 0.5em;
position: absolute;
width: 14em;
z-index: 20;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.jsPlumb-1.3.2-all-min.js"></script>
</head>
<body>
<div>
<div id="a" class="a window" style="width: 100px;height: 100px;border: solid 1px"></div>
<div id="b" class="b window" style="width: 100px;height: 100px;border: solid 1px;"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".window").draggable();
var a = $("#a");
var b = $("#b");
jsPlumb.connect({
source:a,
target:b,
connector:["Bezier",68],
endpoints:[
["Dot",{radius:12}],
["Rectangle",{width:20,height:30}]
]
});
});
</script>
</body>
</html>
i wrote jsPlumb.
the reason it doesn't refresh is that it has no way of knowing something is being dragged. instead of calling $(".window").draggable(), you either need to let jsPlumb do that for you when a connection is made, or through this method:
jsPlumb.draggable($(".window"));
the first option will not initialise the dragging for any window that doesn't have a connection. the second one will.
There are few ways to do so - refer to the jsPlumb documentation
,but generally you can use:
Id of the element
Array of elements
Or selector (for example class selector that was mentioned previously: jsPlumb.draggable($(".window"));
Here is a working example:
<!DOCTYPE html>
<html>
<head>
<title>JS plumb test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="/include/jquery.jsPlumb-1.3.16-all-min.js"></script>
<style>
.window {
background-color: #EEEEEF;
border: 1px solid #346789;
border-radius: 0.5em;
box-shadow: 2px 2px 19px #AAAAAA;
color: black;
height: 5em;
position: absolute;
width: 5em;
cursor: pointer;
}
</style>
<script>
jsPlumb.ready(function () {
// three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)
//jsPlumb.draggable("container0");
//jsPlumb.draggable(["container0", "container1"]);
jsPlumb.draggable($(".window"));
//perform operation only after DOM is loaded
var e0 = jsPlumb.addEndpoint("container0"),
e1 = jsPlumb.addEndpoint("container1");
jsPlumb.connect({ source: e0, target: e1 });
});
</script>
</head>
<body >
<div class="window" style="left: 20px" id="container0">
</div>
<div class="window" style="left: 200px" id="container1">
</div>
</body>
</html>