I want to show the div with id #flower when clicking on the link with id #button but it doesnt work. Heres is the code i wrote.. i made also a jsbin page to show you
any suggestions?
http://jsbin.com/xefanaji/3/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="front">
<div><p>Button</p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
</body>
</html>
css
#button{
position:relative;
height:30px;
width:60px;
background-color:lightyellow;
left:40px;
top:40px;
}
#flower{
display:none;
position:relative;
top:-600px;
left:50px;
z-index:0;
}
#front {
z-index:1;
position:relative;
top:100px;
height:600px;
width:100%;
background-color:lightblue;
}
if i am not wrong.. you need to add id to your button ,if (<a ..>Button</a>) is the element you are talking about.
<div><p>Button</p></div>
//-^^^^^^^^^^----here
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
with CSS you have, i am sure you forget to add id to that a link
well few more thing,
always load script in your <head> section, and you don't need to add src in script tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
....
....
<script>
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
Try this
<div id="front">
<div><p><a id="button" href="">Button</a></p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
});
</script>
DEMO
Put the jQuery library in the head section of your document like below
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
If you need button you can use span instead of anchor e.g.
<span class="button">Button</span>
then add a little styling
.button {
font-size: 12px;
color: #333;
}
.button:hover {
color: #ddd;
}
and then put this script just before </body> tag
<script>
$(function() {
$(".button").click(function () {
$("#flower").show("slow");
});
});
</script>
You could use the revised jQuery below to accomplish this, the reason your code isnt working is because your link doesnt have the id button set.
$('#front a:first').on('click',function(e){
e.preventDefault();
$('#flower').show();
})
You are missing id #button for that link.
<a id="button" href="">Button</a>
Related
I'd like toggle the class of an element on click but it looks like jQuery only sees what class the element started out as and isn't reading in the change.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".red").click(function(){
$(this).addClass("green");
$(this).removeClass("red");
});
$(".green").click(function(){
$(this).addClass("red");
$(this).removeClass("green");
});
});
</script>
<style>
.green {
color: green;
}
.red {
color: red;
}
</style>
</head>
<body>
<p class="green">I should toggle red/green</p>
</body>
</html>
How can I properly toggle the class of an element each time it's clicked?
you need to use toggleClass()
$(document).ready(function(){
$(".red, .green").on('click',function(){
$(this).toggleClass("green red");
});
});
You need to use .on, as you are modifying the classes dynamically.
$(document).ready(function(){
$(document).on("click", ".red", function(){
$(this).addClass("green");
$(this).removeClass("red");
});
$(document).on("click", ".green", function(){
$(this).addClass("red");
$(this).removeClass("green");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document.body).ready(function(){
$(document.body).on('click',"button",function(){$(this).toggleClass("red green");})
});
</script>
<style>
.red {
font-size: 120%;
background: red;
}
.green{
background:green;
}
</style>
</head>
<body>
<button class = "green">Toggle class "green" for p elements</button>
</body>
</html>
Here is my code,
<html>
<head>
<style>
.containerTitle {
background-color:silver;
text-align:center;
font-family:'Segoe UI';
font-size:18px;
font-weight:bold;
height:30px;
}
</style>
</head>
<body>
<div id="a"/>
</body>
</html>
how to change the background-color in containerTitle style using jquery..
there you go: $(".containerTitle").css("background-color","red");
usage example:
// wait until the DOM tree is loaded
$(document).ready(function(){
// click event handler on <a> tags
$("a").click(function() {
// change the color on click
$(".containerTitle").css("background-color","red");
});
});
.containerTitle {
background: black;
height:100px;
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerTitle"></div>
<a href="javascript:;" >change color</a>
try this
$(".containerTitle").css(
"background","#dedede"
);
Add this code to change the style attribute dynamically.
$('.containerTitle').css({'background':'red'})
Like this,
<script>
$(document).ready(function() {
$(".containerTitle ").css("background-color","silver");
});
</script>
and also you should js library in your head section of your code:
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
and this <div id="a"/> should be like this, <div id="a" ></div>
I don't really know why this isn't working but I'm new to javascript so I'm sure I made a mistake.
I have a button and when clicked I want the div to disappear but when I click on the button nothing happens.
$(document).ready(function() {
$('#begin-button').click(function() {
$('#welcome-div').hide();
});
};
<div id="welcome-div">
<p>Welcome</p>
</div>
<a href="#" id="begin-button" class="intro-button"/>Begin Tour</a>
You are missing jQuery library in your code snippet.Add <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> to include jQuery library
$(document).ready(function() {
$('#begin-button').click(function() {
$('#welcome-div').hide();
});
};
$(document).ready(function() {
$('#begin-button').click(function() {
$('#welcome-div').hide();
});
});
//^....... missing ')'
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="welcome-div">
<p>Welcome</p>
</div>
<a href="#" id="begin-button" class="intro-button" />Begin Tour</a>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hide</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
label input[type="file"]
{
display: block;
margin-top: -20px;
opacity: 0;
}
</style>
<script>
$(window).ready(function() {
$(document).delegate('#hide','click',function(){
$('#spanFileName').hide();
});
});
</script>
</head>
<body>
<p id='hide'> Click for hide</p>
<span id='spanFileName'>Hide me</span>
</body>
</html>
I'm new to JQuery, and despite reading through the guide several times, I can't find the problem.
The following functions are not getting fired when I click on the button:
function enable(){
alert("Enable Working!");
}
function disable(){
alert("Disable Working!");
}
$("#enable").click(function(){
$("#enable").hide();
});
$("#disable").click(function(){
disable();
});
And the html page. I don't see any mistakes here either
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>popup</title>
<style>
#enable{
color:green;
position:relative;
top:20px;
}
#disable{
color:red;
position:relative;
top:25px;
}
body{
height: 100px;
}
</style>
</head>
<body id="popup">
<input id="enable" type="button" value="Enable">
<br />
<input id="disable" type="button" value="Disable">
<script src="popup.js"></script>
<script src="jquery.js"></script>
</body>
<html>
What I'd like is for the the enable function to run when I click the enable button. I'd like the disable function to run when I click the disable button. The alerts are there to test if it's working.
Load the jQuery file first, change the order of your files:
<script src="jquery.js"></script>
<script src="popup.js"></script>
Maybe something like this:
function enable(){
alert("Enable Working!");
}
function disable(){
alert("Disable Working!");
}
$("#enable").click(enable);
$("#disable").click(disable);
And as someone else mentioned, reverse the script includement:
<script src="jquery.js"></script>
<script src="popup.js"></script>
Your code looks good, just change the code inside the #enable click to run the function:
Demo
$("#enable").click(function(){
enable();
});
$("#disable").click(function(){
disable();
});
If you want to hide the button, putt it inside the function:
function enable(){
alert("Enable Working!");
$("#enable").hide();
}
Add this to load your code when the page loads:
$(document).ready(function(){
//your code
});
The jQuery script file can be loaded from an online source. If you want that the code is <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>. Load it before your other .js files. If the need jQuery.
Change it to this:
function enable(){
alert("Enable Working!");
}
function disable(){
alert("Disable Working!");
}
$(document).ready(function() {
$("#enable").click(function(){
enable();
});
$("#disable").click(function(){
disable();
});
});
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>popup</title>
<style>
#enable{
color:green;
position:relative;
top:20px;
}
#disable{
color:red;
position:relative;
top:25px;
}
body{
height: 100px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
});
function enable(){
alert("Enable Working!");
}
function disable(){
alert("Disable Working!");
}
$("#enable").click(function(){
enable();
});
$("#disable").click(function(){
disable();
});
});
</script>
</head>
<body>
<input id="enable" type="button" value="Enable">
<br />
<input id="disable" type="button" value="Disable">
</body>
</html>
How do you make a link that when pressed, displays more information about something without reloading the page? (i believe it is called overflow?)
an example would be here:
https://market.android.com/details?id=com.jiwire.android.finder&feature=featured-apps
click the MORE button under the Description section, and more description is showed and the entire webpage's content slides down WITHOUT need to reload
Thanks!
Make use of this
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#de9a44; margin:3px; width:80px;
height:40px; display:none; float:left; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
</script>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").show("slow");
} else {
$("div").slideUp();
}
});
</script>
</body>
</html>