Div selected state - javascript

Hi people #stackoverflow,
I'm currently trying to make a nav bar with the function of 'selected-state'.
I got it to work nicely with jsfiddle, http://jsfiddle.net/uphem/U7NLM/ but the selected-state somehow isn't working when I create a html out of this.
It's pretty much an exact copy of what I had in jsfiddle.
I tried to embed the jquery as a file and that didn't work either.
I can't seem to figure out why it's not working..
Please help!
<html>
<head>
<title>selected state test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$('.menu_button').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
})​
</script>
<style type="text/css">
.menu_button {
padding: 10px 20px 10px 20px;
position: relative;
color: #666;
float: left;
border-left: 1px dotted #e5e5e5;
font-size: 14px;
cursor: pointer;
}
.menu_button:hover {
color: #f26d7d;
}
.menu_button:active {
color: #ccc;
}
.menu_button.selected {
background-color: #ccc;
}​
</style>
</head>
<body>
<div class="menu_button">button 1</div>
<div class="menu_button">button 2</div>
<div class="menu_button">button 3</div>
<div class="menu_button">button 4</div>​
</body>
</html>

You have to load the jQuery code only after the page is loaded, like this:
<script type="text/javascript">
$(document).ready(function() {
$('.menu_button').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
})
});
</script>
as well, Could it be that your jQuery import call is wrong?
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
for more information about when and how to use // instead of http:// read Is it valid to replace http:// with // in a ?
I've tried your code and it worked for me after that change

If you are working offline your jQuery call is wrong.
Use this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Use this code
<html>
<head>
<title>selected state test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".menu_button").click(function(e) {
$(this).addClass("selected").siblings().removeClass("selected");
});
});
</script>
<style type="text/css">
.menu_button {
padding: 10px 20px 10px 20px;
position: relative;
color: #666;
float: left;
border-left: 1px dotted #e5e5e5;
font-size: 14px;
cursor: pointer;
}
.menu_button:hover {
color: #f26d7d;
}
.menu_button:active {
color: #ccc;
}
.menu_button.selected {
background-color: #ccc;
}​
</style>
</head>
<body>
<div class="menu_button">button 1</div>
<div class="menu_button">button 2</div>
<div class="menu_button">button 3</div>
<div class="menu_button">button 4</div>​
</body>
</html>

Try adding:
$(document).ready{
$('.menu_button').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
})​;
}

It's a problem with your src:
// this directs to yourdomain.com/ajax....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
//Instead use one of the following
<script src="ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>selected state test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu_button').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
});
});
</script>
<style type="text/css">
.menu_button {
padding: 10px 20px 10px 20px;
position: relative;
color: #666;
float: left;
border-left: 1px dotted #e5e5e5;
font-size: 14px;
cursor: pointer;
}
.menu_button:hover {
color: #f26d7d;
}
.menu_button:active {
color: #ccc;
}
.menu_button.selected {
background-color: #ccc;
}
</style>
</head>
<body>
<div class="menu_button">button 1</div>
<div class="menu_button">button 2</div>
<div class="menu_button">button 3</div>
<div class="menu_button">button 4</div>
</body>
</html>

Related

jQuery toggle not working with next() function

In the following example all the 3 divs with class ".container2" are hidden by default. When I click an h2, the div next to it shall open (which is happening) but when I click the h2 again, the div is not closing but remains open. Please, help me out why it is not getting toggled?
Example:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
* {margin:0px;padding:0px;}
h2{background:#000;color:#fff;margin:10px;border-radius:4px;padding:5px 10px;}
.container2{background:yellow;color:#000;margin:0px 10px;padding:2px 10px;}
</style>
<script>
$(document).ready(function(){
$('.container2').hide();
$('h2').click(function(){
$('.container2').hide();
$(this).next().toggle();
});
});
</script>
</head>
<body>
<h2>Set-I</h2>
<div class="container2">123</div>
<h2>Set-II</h2>
<div class="container2">456</div>
<h2>Set-III</h2>
<div class="container2">789</div>
</body>
</html>
NOTE: At a time I only want maximum 1 div to open. If I remove
$('.container2').hide() then more than 1 divs might open at a time,
which I don't want!
What you need is this line:
$('.container2:visible').not($(this).next()).hide();
This change will do the intended behavior.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
h2 {
background: #000;
color: #fff;
margin: 10px;
border-radius: 4px;
padding: 5px 10px;
}
.container2 {
background: yellow;
color: #000;
margin: 0px 10px;
padding: 2px 10px;
}
</style>
<script>
$(document).ready(function() {
$('.container2').hide();
$('h2').click(function() {
$('.container2:visible').not($(this).next()).hide();
$(this).next().toggle();
});
});
</script>
</head>
<body>
<h2>Set-I</h2>
<div class="container2">123</div>
<h2>Set-II</h2>
<div class="container2">456</div>
<h2>Set-III</h2>
<div class="container2">789</div>
</body>
</html>
Hide all but the current toggled one
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
* {margin:0px;padding:0px;}
h2{background:#000;color:#fff;margin:10px;border-radius:4px;padding:5px 10px;}
.container2{background:yellow;color:#000;margin:0px 10px;padding:2px 10px;}
</style>
<script>
$(document).ready(function(){
$('.container2').hide();
$('h2').click(function(){
var container2 = $(this).next();
$('.container2').not(container2).hide();
container2.toggle();
});
});
</script>
</head>
<body>
<h2>Set-I</h2>
<div class="container2">123</div>
<h2>Set-II</h2>
<div class="container2">456</div>
<h2>Set-III</h2>
<div class="container2">789</div>
</body>
</html>
You will need to do that in two steps.
step 1: hide all h2 divs.
step 2: only toggle the current next() h2 div.
and you should do it with a callback function passed to .hide() to guarantee that it will only be executed after the function has finished hiding the other divs.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
* {margin:0px;padding:0px;}
h2{background:#000;color:#fff;margin:10px;border-radius:4px;padding:5px 10px;}
.container2{background:yellow;color:#000;margin:0px 10px;padding:2px 10px;}
</style>
<script>
$(document).ready(function(){
$('.container2').hide();
$('h2').click(function(){
var btn = $(this).next();
$('.container2').hide(function(){
btn.toggle();
});
});
});
</script>
</head>
<body>
<h2>Set-I</h2>
<div class="container2">123</div>
<h2>Set-II</h2>
<div class="container2">456</div>
<h2>Set-III</h2>
<div class="container2">789</div>
</body>
</html>

Angular Trigger Div Click based on condition

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.

Highlight comment and remove class when delete button is clicked

I am new to web development and currently learning jQuery from codecademy.
I made a simple opinion pull.
Problem: Besides add comment, i would like to delete the comment when i highlight the comment and press trash button.
index.html
<!doctype html>
<html>
<head>
<!--Boostrap CSs stylesheet-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!--jQuery script-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--Bootsrap js-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!--CSS stylesheet-->
<link href="index.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
<div class= "glyphicon glyphicon-pencil" ></div>
<div class= "glyphicon glyphicon-trash" ></div>
</div>
<ul class="posts">
</ul>
</div>
<!--JavaScript script-->
<script src="index.js"></script>
</body>
</html>
index.css
html,body {
font-family: courier, sans-serif;
color: #404040;
background-color: #eee;
}
.container {
width: 520px;
margin-top: 20px;
}
.button-group {
margin-bottom: 20px;
padding: 5px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}
index.js
var main = function() {
//btnPost
$('#btnPost').click(function() {
var post = $('.status-box').val();
$('<li>').text(post).prependTo('.posts');
$('.status-box').val('');
$('.counter').text('140');
$('#btnPost').addClass('disabled');
});
$('.status-box').keyup(function() {
var postLength = $(this).val().length;
var charactersLeft = 140 - postLength;
$('.counter').text(charactersLeft);
if(charactersLeft < 0) {
$('#btnPost').addClass('disabled');
}
else if(charactersLeft == 140) {
$('#btnPost').addClass('disabled');
}
else {
$('#btnPost').removeClass('disabled');
}
});
$('#btnPost').addClass('disabled');
//btnDelete
$('#btnDelete').click(function(){
});
}
$(document).ready(main);
I have created a fiddle to provide something close to the desired functionality. I'm not sure what you mean by "highlight" the comment, but what you are looking for is event delegation. Using jQuery's .on() function, you can listen for events on dynamically created elements:
$('body').on('click', '.btnDelete', function(){
$(this).closest('li').remove();
});
See this jsFiddle: http://jsfiddle.net/voveson/5gL44z6m/2/
And for more info on how the .on() function works, see here.

Cylcle2 no cycle-pager shows up

I'm trying to make a slideshow for a website where the pictures slides automaticly (which works), and there should be round buttons to click below it. But the buttons doesn't show up, even thou I have follow the instructions from http://jquery.malsup.com/cycle2/demo/pager.php
my HTML:
<div class ="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="5000" data-cycle-pager=".cycle-pager">
<img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach9.jpg">
</div>
<div class="cycle-pager"></div>
My CSS:
.cycle-pager {
text-align: center;
width: 100%;
z-index: 500;
position: absolute;
top: 10px;*
overflow: hidden;
}
.cycle-pager span {
font-family: arial;
font-size: 50px;
width: 16px;
height: 16px;
display: inline-block;
color: #999999;
cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}
.cycle-pager{
width: 500px;
height: 30px;
margin-top: 517px;
}
and my JavaScript:
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();
This problem causes doctype Use <!doctype html>
try this javascript
<Script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<Script type="text/javascript" src="jquery.cycle2.min.js"></script>
<script type="text/javascript">
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();
</script>
Try this:
JSFiddle Demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
</head>
<body>
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="2000">
<!-- empty element for pager links -->
<div class="cycle-pager"></div>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>
</body>
</html>
Try adding "height:40px;" to the .cycle-pager class.

JsPlumb - Endpoints do not refresh position when used on draggable element

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>

Categories