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');
})
});
Related
I want to let user go to some website when he clicked my website background picture(parent div), but the function need be closed when user clicked my website content(child div), and then when user clicked the background picture(parent div) again, the function will be activity.
I try many times, but when I clicked my website content(child div), and clicked website background picture(parent div) again, the function didn't work.
What can I do? Thank you!
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Test!</title>
<style type="text/css">
.head{
background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px;
text-align:center; padding:10px;
}
.tt{
width:100%; height:100%;
border:1px solid red;
}
.content{
width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue;
border:1px solid blue;
}
</style>
<script type="text/javascript">
function bgADlink(){
window.open('https://www.google.com');
}
var i = 0;
function test1(){
if(i == 0 || i == 1)
bgADlink();
return i = 0;
}
function test2(){
bgADlink=false;
return i = 1;
}
</script>
</head>
<body style="margin:0px; background-color:#eeeeee;">
<div class="head">Test</div>
<div class="tt" onclick="test1()">
<div class="content" onclick="test2()"></div>
</div>
</body>
</html>
just remove that || i == 1 condition from test1() function like below.
function test1(){
if(i == 0)
bgADlink();
return i = 0;
}
check this fiddle https://jsfiddle.net/ca7Lbsy3/
I am not sure that is what you need, but basically you need to stop event bubbling from child to parent.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Test!</title>
<style type="text/css">
.head{
background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px;
text-align:center; padding:10px;
}
.tt{
width:100%; height:100%;
border:1px solid red;
}
.content{
width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue;
border:1px solid blue;
}
</style>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
function bgADlink(){
window.open('https://www.google.com');
}
$(document).ready(function(){
$(".tt").on("click",function(){
bgADlink();
});
$(".content").on("click",function(e){
e.stopPropagation();
});
});
</script>
</head>
<body style="margin:0px; background-color:#eeeeee;">
<div class="head">Test</div>
<div class="tt" onclick="test1()">
<div class="content" onclick="test2()"></div>
</div>
</body>
</html>
this snippet is not opening parent div link either..but use this on html page then try it
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Test!</title>
<style type="text/css">
.head{
background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px;
text-align:center; padding:10px;
}
.tt{
width:100%; height:100%;
border:1px solid red;
}
.content{
width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue;
border:1px solid blue;
}
</style>
<script type="text/javascript">
var i = 0;
function test1(){
if(i == 0 || i == 1)
bgADlink();
return i = 0;
}
function test2(varr,event){
// bgADlink=false;
event.stopPropagation();
return i = 1;
}
function bgADlink(){
console.log("bgADlink")
window.open('https://www.google.com');
}
</script>
</head>
<body style="margin:0px; background-color:#eeeeee;">
<div class="head">Test</div>
<div class="tt" onclick="test1()">
<div class="content" onclick="test2('',event)"></div>
</div>
</body>
</html>
There are different problems in your code.
Because events propagate from an inner element, to it's parent element (not only parent but all the hierarchy up), the "tt" div will always fire, so the best thing to do is to stop the propagation of the events with
onclick="event.stopPropagation();test1()"
I don't really understand what you're trying to accomplish with the "i" and why your having a function bgADlink() and then assigning it a Boolean, JavaScript lets you do that, but basically your function is now a Boolean.
I made you a small sample fiddler yo you can see the stopPropagation working, hope it helps.
https://jsfiddle.net/pimboden40/kg9wfdqj/29/
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>
I recently have been trying to use Jquery to create and html animation and I am trying to make a bar float to the right as it is currently floated to the left. Although when I try to do this it wont work please help
Html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="assests/css/main.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".bar").animate({float: 'right'});
});
</script>
</head>
<body>
<div id="wrapper" align="center" >
<div class="obj">
<div class="bar"></div>
<div class="body">
<h1> Welcome </h1>
</div>
</div>
</div>
</body>
</html>
Css :
#import url(https://fonts.googleapis.com/css?family=Raleway);
* {
margin:0px;
padding:0px;
font-family:Raleway;
}
#wrapper {
width:100%;
height:100vh;
}
.obj {
width:500px;
height:200px;
margin-top:14%;
}
.bar {
float:left;
height:200px;
width:5px;
background-color:#95a5a6;
transition: all .5s ease-in-out;
}
.body {
width:495px;
height:200px;
float:right;
}
.body > h1 {
font-size:70px;
color:#333;
padding-top:50px;
}
You can animate the position like this:
$(document).ready(function() {
$('.bar').animate({"left" : 700 +'px'});
});
http://codepen.io/anon/pen/eZpbaP
Here is my attempt at replicating the code I have. For some reason, the code works perfectly in jsfiddle, but malfunctions with my own website. Maybe someone can somehow figure out what the issue is regardless.
http://jsfiddle.net/neowot/g0teoyrc/
So like I said, it works well in jsfiddle, but in my actual website, clicking the Button makes Div2 instantly disappear and then instantly reappear again before beginning its fade animation. Obviously this looks very bad and weird.
Does anyone have ideas as to what might be happening?
HTML
<body>
<section id="wrapper">
<div id="button">B</div>
<div id="Div1">Div1</div>
<div id="Div2">Div2</div>
</section>
</body>
CSS
#wrapper{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#Div1{
height:400px;
width:1000px;
position:relative;
float:left;
background:blue;
}
#Div2{
height:400px;
width:380px;
position:absolute;
top:20;
background:green;
display:none;
margin-left:380px;
}
#button{
width:20px;
height:20px;
background:orange;
cursor:pointer;
}
JS
$('#button').click(function() {
$('#Div2').fadeToggle(300);
var toggleWidth = $("#Div1").width() == 380 ? "1000px" : "380px";
$('#Div1').animate( {'width': toggleWidth}, 300);
});
Works for me as fiddle
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery animate </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
#wrapper{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#Div1{
height:400px;
width:1000px;
position:relative;
float:left;
background:blue;
}
#Div2{
height:400px;
width:380px;
position:absolute;
top:20;
background:green;
display:none;
margin-left:380px;
}
#button{
width:20px;
height:20px;
background:orange;
cursor:pointer;
}
</style>
<body>
<section id="wrapper">
<div id="button">B</div>
<div id="Div1">Div1</div>
<div id="Div2">Div2</div>
</section>
<script>
$(document).ready(function(){
$('#button').click(function() {
$('#Div2').fadeToggle(300);
var toggleWidth = $("#Div1").width() == 380 ? "1000px" : "380px";
$('#Div1').animate( {'width': toggleWidth}, 300);
});
});
</script>
</body>
</html>
I am trying to get custom tooltip over image. but during run time it says "method or property tooltip not defined"
here is my code
<script src="/full/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#content img[title]").tooltip();
});
</script>
<style type="text/css" >
.tooltip
{
display:none;
background:transparent url(Images/blackarrow.png);
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#eee;
}</style>
</asp:Content>
<div id="content"> <img alt="" src="Images/help1.png" title="Your help comes here" /></div>
Try to include the plugin directly from the developer, just for test. If works, there is some problem with your code.
I've removed the [title] from <img>, if you really need it, put it again.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#content img").tooltip();
});
</script>
<style type="text/css" >
#tooltip {
width:160px;
height:70px;
background:transparent url(Images/blackarrow.png) #eee;
z-index: 3000;
border: 1px solid #111;
opacity: 0.85;
font-size:12px;
padding:25px;
color:#eee;
position: absolute;
}
#tooltip h3, #tooltip div { margin: 0; }
</style>
<div id="content">
<img alt="" src="Images/help1.png" title="Your help comes here" />
</div>