I have a button with :hover and :focus css property. While hovering on it the color changes to red.
Now when i click on it a Alertify confirm box appears and then i press ok or cancel the color changes to red again because of :focus property.
How can i unbind :focus when clicked on ok or cancel.
<html>
<head>
<script src="https://cdn.jsdelivr.net/alertifyjs/1.8.0/alertify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/alertifyjs/1.8.0/css/alertify.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/alertifyjs/1.8.0/css/themes/default.min.css"/>
</head>
<style>
.btn-test:hover,.btn-test:focus{
background-color:red;
}
</style>
<body>
<button class="btn-test">Click Me</button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(".btn-test").click(function(){
alertify.confirm('Confirmation', 'You clicked', function () {
//do nothing
}
, function () {
//do nothing
});
});
</script>
</html>
you have to just add this code in js file $(".btn-test").blur(); like this:
$(".btn-test").click(function(){
$(".btn-test").blur();
alertify.confirm('Confirmation', 'You clicked', function () {
//do nothing
}
, function () {
//do nothing
});
});
.btn-test:hover,.btn-test:focus{
background-color:red;
}
<html>
<head>
<script src="https://cdn.jsdelivr.net/alertifyjs/1.8.0/alertify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/alertifyjs/1.8.0/css/alertify.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/alertifyjs/1.8.0/css/themes/default.min.css"/>
</head>
<body>
<button class="btn-test">Click Me</button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</html>
Related
Any opinions on this? When the user presses the button the initially hidden div must show itself on the page.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
function show() {
$("div").toggle();
}
</script>
</head>
<body>
<p>Animals are cute!</p>
<div><p>Some text gonna blow up some pixels!</p></div>
<button onclick="show()">Click</button>
</body>
</html>
The exactly written error in the Console:
ReferenceError: show is not defined[Learn More
Move the inline script into its own tag. You can't use an external script and inline script in the same tag.
So:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function show() {
$("div").toggle();
}
</script>
function show() {
$(".any-text").toggle();
}
.any-text {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<p>Animals are cute!</p>
<div class="any-text"><p>Some text gonna blow up some pixels!</p></div>
<button onclick="show()">Click</button>
</body>
</html>
I want to toggle the messages 'Yes' and 'No' on the button click event, but that is currently not working with the below code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<button id="myButton">
Button
</button>
<br />
<span id="mySpan">
</span>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
JS custom.js
$(document).ready(function(){
$('#myButton').on('toggle',function(){
$('#mySpan').html('Yes');
},function(){
$('#mySpan').html('No');
});
});
There is no 'toggle' event - you can either use the jquery .toggle() function or use an .on('click') handler to then perform the toggle.
$( "#target" ).toggle(function() {
alert( "First handler for .toggle() called." );
}, function() {
alert( "Second handler for .toggle() called." );
});
var $mySpan = $('#mySpan');
$('#myButton').on('click', function(){
$mySpan.html( $mySpan.html() === 'Yes' ? 'No' : 'Yes' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton">
Button
</button>
<br />
<span id="mySpan">
</span>
it doesn't do anything on the first click because it's only attaching the event handler at that point.
$(document).ready(function(){
$('#myButton').click(function(){
$("#mySpan").text() =="Yes"? $('#mySpan').text('No'):$('#mySpan').text('Yes');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton">
Button
</button>
<br />
<span id="mySpan">
</span>
This works with toggle on the most recent version of jQuery. .toggle() now only displays or hides an element. There are various options you can use to control how that happens. This example starts with all elements present, but one of them is not displayed via CSS. jQuery .toggle() will toggle the display values on the elements with a class of mySpan.
$('#myButton').click(function(){
$('.mySpan').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<button id="myButton">
Button
</button>
<br />
<span class="mySpan">Yes</span>
<span class="mySpan" style="display: none">No</span>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
You just need to use .click event instead of .on.
Here is the working fiddle:
https://jsfiddle.net/mp5w4b8c/
And your jQuery should look like this:
$(document).ready(function(){
$('#myButton').click(function(){
$('#mySpan').html('Yes');
},function(){
$('#mySpan').html('No');
});
});
Update:
I changed my jQuery logic to this:
$(document).ready(function() {
$('#myButton').click(function() {
if($('#mySpan').html === "" || 'No') {
$('#mySpan').html('Yes');
} else if($('#mySpan').html === 'Yes') {
$('#mySpan').html('No');
}
});
});
but it doesn't work as i expected. Is there any issues in my code?
The updated fiddle: https://jsfiddle.net/mp5w4b8c/
var $elem = $('#mySpan');
$('#myButton').click(function(){
$elem.html( $elem.text().trim() === 'Yes' ? 'No' : 'Yes' );
});
This code should work fine for your case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animations</title>
<link rel="stylesheet" type="text/css" href="css/animate.css">
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".box").on("click", function(){
$(".container").addClass("animated rollIn");
//$(".container").addClass("rollIn"); we have the same result
});
$("#join_us button").on("click", function(){
$(this).addClass("animated shake");
});
});
</script>
</head>
Why the two functions are executed only at the first time (only once) each of them when I click the box and button of my html page? Do you have any solution? I searched a lot here the topics but I didn't manage to fix the problem.
P.s.: sorry for any mistake if any, it's the first time I post a topic.
Try using this, where the class is added in setTimeout
<div class="container">DIV 1</div>
<button class="box">Roll In</button>
<div id="join_us">
<button>Shake It</button>
</div>
<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".box").on("click", function(){
$(".container").removeClass("animated rollIn");
setTimeout(function(){
$(".container").addClass("animated rollIn");
},1);
});
$("#join_us button").on("click", function(){
var button = $(this);
button.removeClass("animated shake");
setTimeout(function(){
button.addClass("animated shake");
},1);
});
});
</script>
When i click one of the buttons i want the paragraphs to change size depending on the button i've clicked. That doesn't seem to work. I've checked everything and with my level of knowledge of jQuery (beginner ) i can't figure it out so i need your help. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<input type="button" id="smaller" value="smaller text" />
<input type="button" id="bigger" value="bigger text" />
<p > Some text inside of it.</p>
<p > Some text inside of it too!</p>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="query.js"> </script>
</body>
</html>
jQuery
$('#bigger').click(function() {
$('p').addClass('.bigger');
});
$('#smaller').click(function() {
$('p').addClass('.smaller');
});
CSS
.bigger {
font-size:30px;
background-color:red;
}
.smaller {
font-size:10px;
}
Remove . from addClass() because the function already recognize the string like a class without specifiy the class selector.
try this:
$('#bigger').click(function() {
$('p').addClass('bigger'); //instead of .bigger
});
$('#smaller').click(function() {
$('p').addClass('smaller'); //instead of .smaller
});
DEMO
Remember $.addClass("bigger"); not $.addClass(".bigger");
Demo
http://jsfiddle.net/dieegov/ebGQ2/
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>