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>
Related
So I'm not sure what I'm doing wrong. I am trying to make a button appear as if it is pressed down by toggling a class when it is clicked.
I did a quick JavaScript if statement to make sure jQuery was loaded.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.12.3.min.js"></script>
<script>
$("button").click(function(){
$("button").toggleClass("active-class");
});
</script>
<style type="text/css">
.active-class {
background-color:red;
}
/* Non-important styles */
button {
font-size:15px;
padding:10px;
background-color:#E8E8E8;
border:1px solid rgba(0,0,0,0.3);
border-radius:5px;
outline:none;
}
</style>
</head>
<body>
<button>Click to toggle!</button>
</body>
</html>
When I click on the button it does absolute nothing. Any suggestions?
Move your js before end body tag.
or add document ready function :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$( document ).ready(function() {
$("button").click(function(){
$("button").toggleClass("active-class");
});
});
</script>
<style type="text/css">
.active-class {
background-color:red;
}
/* Non-important styles */
button {
font-size:15px;
padding:10px;
background-color:#E8E8E8;
border:1px solid rgba(0,0,0,0.3);
border-radius:5px;
outline:none;
}
</style>
</head>
<body>
<button>Click to toggle!</button>
</body>
</html>
Put the script tag before your body tag ends.
$(document).ready(function(){
$('button').on('click', function(){
$(this).toggleClass('active-class');
})
});
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.
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>
Is it possible to send all the elements in my document to the alert function?
If so, how can I do that?
Here is an example document. I want to print all of the elements.
<!DOCTYPE html>
<html>
<head>
<style>
h3 { margin: 0; }
div,span,p {
width: 80px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
<script>var elementCount = $("*").css("border","3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");
</script>
</body>
</html>
Sure, you can do it like this:
alert(document.documentElement.outerHTML);
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>