I am trying to make buttons for a webpage that you can hover the mouse over and a 'drop down like' box will appear next to it with links and information.
Here's a link to what it looks like: https://jsfiddle.net/kvbvLy4d/
After implementing this into the webpage I had the buttons stopped working. This is what I have:
(I have removed irrelevant code to minimize length - Let me know if you need me to post the full script)
html
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="resources/scripts/jquery-1.12.2.min.js"></script>
<script src="resources/scripts/jquery.cycle.all.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$("#box, #content").on("mouseenter", function() {
$("#content").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content").is(":hover"))
$("#content").fadeOut(); //hide();
});
$("#box1, #content1").on("mouseenter", function() {
$("#content1").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content1").is(":hover"))
$("#content1").fadeOut(); //hide();
});
$("#box2, #content2").on("mouseenter", function() {
$("#content2").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content2").is(":hover"))
$("#content2").fadeOut(); //hide();
});
</script>
<div id="buttons">
<div id="box"></div>
<div id="content">content here</div>
<div id="box1"></div>
<div id="content1">content here</div>
<div id="box2"></div>
<div id="content2">content here</div>
</div>
</div>
</body>
</html>
css
(same for each box and content div apart from position)
#box {
position: absolute;
top: 23vw;
width: 10vw;
height: 10vw;
background-color: blue;
}
#content {
position: absolute;
top: 23vw;
left: 11vw;
width: 10vw;
height: 10vw;
background-color: red;
display: none;
}
Any help, better ways to do this or a link to a question that specifically answers this would be very much appreciated. Thanks!
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="resources/scripts/jquery-1.12.2.min.js"></script>
<script src="resources/scripts/jquery.cycle.all.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("#box, #content").on("mouseenter", function() {
$("#content").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content").is(":hover"))
$("#content").fadeOut(); //hide();
});
$("#box1, #content1").on("mouseenter", function() {
$("#content1").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content1").is(":hover"))
$("#content1").fadeOut(); //hide();
});
$("#box2, #content2").on("mouseenter", function() {
$("#content2").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content2").is(":hover"))
$("#content2").fadeOut(); //hide();
});
});
</script>
<div id="buttons">
<div id="box"></div>
<div id="content">content here</div>
<div id="box1"></div>
<div id="content1">content here</div>
<div id="box2"></div>
<div id="content2">content here</div>
</div>
</div>
</body>
</html>
add your jquery functions inside document.ready
Related
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");
});
I am trying to build a basic tab-navigation. When I hover about a tab (step), then the background of the tab gets green.
But after several hovers/resizes of the browser, hover doesnt't work anymore. Then I have to click on the tab in order to get the green background. It kind of freezes.
Thats the jsFiddle:
https://jsfiddle.net/rob_the_mob_87/L84kyym1/
Here is my minimal code:
index.html
<html>
<head>
<title>Tabs</title>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/static.js">
</script>
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
<div class="process_step active" id="1">Step 1</div>
<div class="process_step" id="2">Step 2</div>
</body>
</html>
main.css
.process_step{
}
.active{
background-color: green;
}
static.js
$(document).ready(function () {
bindShowStepHandlers()
});
this.bindShowStepHandlers = function () {
$('.process_step').each(function() {
$(this).hover(function () {
var clickedStepId = $(this).attr('id');
openStep(clickedStepId);
});
});
}
this.openStep = function (clickedStepId) {
$('.process_step').each(function() {
var stepId = $(this).attr('id');
if (stepId == clickedStepId) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
}
check this snippet below. i think it is what you want..
$(document).ready(function() {
bindShowStepHandlers()
});
this.bindShowStepHandlers = function() {
$('.process_step').each(function() {
$(this).on('mouseenter',function() {
$(this).addClass('active');
});
$(this).on('mouseleave',function() {
$(this).removeClass('active');
});
});
}
.process_step {}
.active {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="process_step active" id="1">Step 1</div>
<div class="process_step" id="2">Step 2</div>
I want to make a <div> draggable only when mouse is over first element inside this <div>. When mouse isn't over that first element, whole <div> can't be draggable. This is my code:
<div id="containers">
<div id="cont1">foo</div>
<div id="cont2">bar</div>
</div>
<script>
$(document).ready(function() {
$("#cont1").mouseenter(function() {
$("#containers").draggable("enable");
});
$("#cont1").mouseleave(function() {
$("#containers").draggable("disable");
});
});
</script>
When mouse enter or leave #cont1, there is an error in console:
Uncaught TypeError: undefined is not a function(index):27 (anonymous function)jquery-1.11.0.js:4995 jQuery.event.special.(anonymous function).handlejquery-1.11.0.js:4624 jQuery.event.dispatchjquery-1.11.0.js:4292 elemData.handle
You're looking for the handle option of draggable widget:
$("#containers").draggable({
handle: "#cont1"
});
#containers {
height: 100px;
background: grey;
}
#cont1 {
width: 50px;
height: 50px;
background: dodgerblue;
}
#cont2 {
width: 50px;
height: 50px;
background: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="containers">
<div id="cont1">foo</div>
<div id="cont2">bar</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<div id="containers" style="height: 200px;width: 200px;background-color: blanchedalmond">
<div id="cont1">foo</div>
<div id="cont2">bar</div>
</div>
<script>
$(document).ready(function() {
$("#cont1").mouseenter(function() {
$("#containers").draggable({ disabled: false });
});
$("#cont1").mouseleave(function() {
$("#containers").draggable({ disabled: true });
});
});
</script>
Use this code.
I have simple list number slider with fade effect. I need to add bullet navigation to control the slider. Pls help me to do so.
jsFiddle Demo
Here is my code :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Slider</title>
<style id="jsbin-css">
.testimonials .quote {
display: none;
}
</style>
</head>
<body>
<div class="testimonials">
<div class="quote">1</div>
<div class="quote">2</div>
<div class="quote">3</div>
<div class="quote">4</div>
<div class="quote">5</div>
<div class="quote">6</div>
<div class="quote">7</div>
<div class="quote">8</div>
<div class="quote">9</div>
<div class="quote">10</div>
</div>
<script>
$(function () {
(function anim(num, delay) {
$('.testimonials .quote')
.slice(0,num)
.fadeIn()
.delay(delay)
.fadeOut()
.promise()
.done(function () {
$('.testimonials').append(this);
anim(num, delay);
});
}(2, 2000));
});
</script>
</body>
</html>
I have such a webpage with some jQuery using http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
I would like to define the "highlight row" behavior but somehow I cannot override it as long as I am using jQuery's theme mentioned above.
My code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
$( document ).tooltip();
$("tbody > tr:even").addClass("even");
$("tbody > tr:odd").addClass("odd");
$("#company_row ~ tr").bind( "mouseover", function(e){
$(this).toggleClass("highlight");
});
$("#company_row ~ tr").bind( "mouseout", function(e){
$(this).toggleClass("highlight");
});
});
</script>
</head>
<body>
<style>
tr.even { background-color: #efefef; }
tr.odd { background-color: #fff; }
.highlight { background-color: #fffdcd !important; }
</style>
<div id="tabs">
<ul>
<li>Companies</li>
<li>People</li>
</ul>
<div id="tabs-1">
<table border='2' id="companies"></table>
</div>
<div id="tabs-2">
<table border='2' id="people"></table>
</div>
</div>
</body>
</html>
I have also tried this
$("#companies").hover(
function () {
$(this).css("background","yellow");
},
function () {
$(this).css("background","");
}
);
Try replacing the tr:even and tr:odd selectors with tr:nth-child(even)
You should not have to use jQuery at all to apply these styles, trying using a rule with a form similar to:
tbody > tr:nth-child(even):hover {
background-color: #efefef;
}