jQuery mouseenter() and mouseleave() not working properly - javascript

I have two simple script html:
<html>
<body>
<style>
.myBtn{
display: none
}
.myBtnReg{
display: block
}
</style>
<button class="myBtnReg" id="btn1" >Click Me!</button>
<script src="jquery-1.11.2.min.js"></script>
<script src="js.js"></script>
</body>
</html>
and javascript:
$(function(){
$("button").mouseenter(function(){
$(this).attr("class", "myBtn");
});
$("button").mouseleave(function(){
$(this).attr("class", "myBtnReg");
});
});
I'm trying to make an effect where the button changes class when ever the mouse enters and change it back when the mouse leaves, the code above doesn't seem to work properly, when I put my mouse over the button it flickers, so I assume I changes class constantly for some reason.

You can put button inside div and then toggleClass of button when you hover over div (you also need to set fixed height on div)
$('div').hover(function() {
$(this).find('button').toggleClass('myBtn');
});
div {
height: 50px;
}
.myBtn {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class="myBtnReg" id="btn1">Click Me!</button>
</div>

your style should be like
.myBtn{
background-color:RED;
}
.myBtnReg{
background-color:Green;
}
your total html is like this
<html>
<body>
<style>
.myBtn{
background-color:RED;
}
.myBtnReg{
background-color:Green;
}
</style>
<button class="myBtnReg" id="btn1" >Click Me!</button>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="js.js"></script>
</body>
</html>

Related

How can I get my reset button to work using JavaScript/JQuery?

I'm starting a coding class and one of my assignments is to get a box to grow, change to blue, shrink, and reset. I have the first three but I'm not sure how to go about getting the reset button done.
$("#boxGrow").on("click", function() {
$("#box").animate({height:"+=35px", width:"+=35px"}, "fast");
})
$("#boxShrink").on("click", function() {
$("#box").animate({height:"-=35px", width:"-=35px"}, "fast");
})
$("#boxBlue").on("click", function() {
$("#box").css("background-color", "blue");
})
<!DOCTYPE html>
<html>
<head>
<title>Jiggle Into JavaScript</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<p>Press the buttons to change the box!</p>
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>
<button class="btn" id="boxGrow">Grow</button>
<button class="btn" id="boxBlue">Blue</button>
<button class="btn" id="boxShrink">Fade</button>
<button class="btn" id="boxReset">Reset</button>
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>
To easily reset the inline styles, you can use $("#box").removeAttr("style");, however this will remove all inline CSS on the element. The solution to this would be to put your initial styles in a <style> tag, so your code would be:
<!DOCTYPE html>
<html>
<head>
<title>Jiggle Into JavaScript</title>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"
></script>
<style>
#box {
height: 150px;
width: 150px;
background-color: orange;
margin: 25px;
}
</style>
</head>
<body>
<p>Press the buttons to change the box!</p>
<div id="box"></div>
<button class="btn" id="boxGrow">Grow</button>
<button class="btn" id="boxBlue">Blue</button>
<button class="btn" id="boxShrink">Fade</button>
<button class="btn" id="boxReset">Reset</button>
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>
$("#boxGrow").on("click", function() {
$("#box").animate({ height: "+=35px", width: "+=35px" }, "fast");
});
$("#boxShrink").on("click", function() {
$("#box").animate({ height: "-=35px", width: "-=35px" }, "fast");
});
$("#boxBlue").on("click", function() {
$("#box").css("background-color", "blue");
});
$("#boxReset").on("click", function() {
$("#box").removeAttr("style");
});

How to make a button that can change background color of a doucment?

I would like to make a button that when it's clicked ,the background color of my webpage changes. I have tried already with Javascript & Css but no success! Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>
Test
</title>
<style>
.bgcolor1{
background-color:black;
}
.bgcolor2{
background-color:grey;
}
</style>
<script type="text/javascript">
</script>
</head>
<body class="bgcolor1">
<button onclick="this.className = 'bgcolor2'">Change COLOUR</button>
</body>
</html>
As you can see when the user click on the button it should change the class to "bgcolor2" so the background color would be grey but it just changes the background color of the button to grey & not the document!
So how can I change the background color of document with css or js or what's the problem with this code? thx ...
<button onclick="document.body.className = 'bgcolor2'">Change COLOUR</button>
this refers to the button and not the body. document.body.className = 'bgcolor2';
use the document.body instead of this
<!DOCTYPE html>
<html>
<head>
<title>
Test
</title>
<style>
.bgcolor1{
background-color:black;
}
.bgcolor2{
background-color:grey;
}
</style>
<script type="text/javascript">
</script>
</head>
<body class="bgcolor1">
<button onclick="document.body.className = 'bgcolor2'">Change COLOUR</button>
</body>
</html>
Try something like this:
HTML
<button onclick="myFunction()">Click me</button>
Javascript
function myFunction(){
document.body.className = 'bgcolor';
}
CSS
.bgcolor{
background:red;
}
DEMO
Simply target document.body.className instead of this; in this scenario, this is a reference to the button itself. Make your onclick attribute as below
onclick="document.body.className='myCustomBGColor'"
where myCustomBGColor is a CSS class.
Here's your final working fiddle
.bgcolor1{
background-color:black;
}
.bgcolor2{
background-color:grey;
}
<body class="bgcolor1">
<button onclick="document.body.className = 'bgcolor2'">Change COLOUR</button>
</body>

Why Is My Jquery Slide div always showing at the start

I have a simple jQuery slide toggle but I want hit the div on start up but it is always showing
Here is a demo I build to show u what I mean.
Maybe you can see where I am going wrong
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:Red;
border:solid 5px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">This div should always be hidden til clicked </div>
</body>
</html>
You need to hide the panel div
this should do it
#panel
{
padding:50px;
display:none;
}
Hope it helps
$(document).ready(function(){
//just need an initial run to close it first
$("#panel").slideDown();
//or if it was open to start use this instead
$("#panel").slideUp();
//rest the same
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});

Cant get the height of the div in html

I have assigned the 80% height of the viewport to my div as height. In Button click I have displayed the height of the div. This works fine in ie9, ie10. But in ie7, ie8 $("#divContainer").height() is 0. Am I doing anything wrong and how to get the height of the div in IE7, IE8(vml)
<html style="height:100%;">
<body style="height:100%;">
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<button id="button1"></button>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").height());
});
});
</script>
</body>
</html>
Thanks In Advance
For IE you may try pure javascript solution
var height = getElementById("divContainer").clientHeight;
Most importantly include jQuery Library in your Code's head section and use .css("height") instead of .height()
Modified code is as below
<html style="height:100%;">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body style="height:100%;">
<button id="button1" value="text"></button>
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").css("height"));
});
});
</script>
</body>
</html>
Note I have taken Button above the container.
you can use jquery - Height option
or
use jquery with css option of any properties of tag or id.
like
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").css("height"));
//also set the height too as
$("#divContainer").css("height", "80%");
});
});

Passing a div class into a javascript function

Is it possible to pass the class of a div into a javascript function? I am using square space so I cannot add an id to the div, but I can get it to work with div's that do have id's. Also, I already have loaded the jquery.
This is what I am thinking so far, thanks in advance!
<script type="text/javascript">
function unhideme(arg) {
$(arg).slideDown()
}
function clickme(arg1, arg2) {
unhideme(arg1);
unhideme(arg2);
//other stuff
}
</script>
<style type="text/css">
#myid{
display:none
}
.klass{
display:none
}
</style>
<form><input type="submit" onclick="clickme('#myid','.klass')">
<div id="myid"></div>
<div class="klass"></div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function unhideme(classname) {
$(classname).slideDown();
}
function clickme(classname) {
unhideme(classname);
}
</script>
<style>
.klass {
display: none;
}
</style>
<form>
<input type="submit" onclick="clickme('.klass');return false;">
<div class="klass">testdown</div>
</form>

Categories

Resources