<html lang="en">
<head>
<style>
#thisdiv {padding:10px; margin:-15px 0 0 40px; background-color:#333; position:absolute; display:none;}
div.block {margin-top:10px; width:200px;}
div#thisdiv a {color:#fff;}
</style>
</head>
<body>
<div id ="one" class="block">one</div>
<div id="thisdiv">hello</div>
<div id ="two"class="block">two</div>
<div id ="three"class="block">three/div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#one').hover(function() {
$('#thisdiv').fadeIn(400);
});
$('div:not(#thisdiv)').mouseleave(function() {
$('#thisdiv').fadeOut(400)
});
});
</script>
</body>
</html>
#thisdiv doesn't fadeOut. I could have used the following, but it only fades out if the cursor mouse outs of #thisdiv. Is there any way i can solve this so when the cursor navigates away from anyway, the div still fade out.
$('#thisdiv').mouseleave(function() {
$('#thisdiv').fadeOut(400)
});
I couldn't figure out what's why jquery's :not selector is not doing what I wanted to.
Am i using it wrongly?
1 - You need to use mouseover, not hover for the first binding:
$('#one').mouseover(function() {
$('#thisdiv').fadeIn(400);
});
hover accepts two function parameters (mouseover/mouseout).
2 - Your closing div tag at the end of your markup is broken (missing a <):
<div id ="three"class="block">three/div> <-- here
I tested your code having made the above modifications, and it seems to work as you want it to (if I've understood correctly). Test it here.
if you are going to explicitly set the time, you will need to pass it in as a hash parameter. Otherwise you can use 'slow', 'fast' or the default which is 400.
$('#my_button').mouseleave(function(){ $(this).fadeOut({duration:1000}) })
Related
Im a complete noob when it comes to JavaScript and jQuery but here we go.
I want to make a slidetoggle that shows 3 slides, 3 "snowboardtricks" when i press "toggle".
As it is now only one "trick" is shown when i press toggle, the rest is already there from the beginning.
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#flip").click(function()
{
$("#panel,#panel2,#panel3").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#panel2,#panel3,#flip
{
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#panel
{
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Toggle</div>
<div id="panel">Switch back 1080 double cork</div>
<div id="panel2">Frontside triple cork 1440</div>
<div id="panel3">Ollie</div>
</body>
</html>
If I'm understanding correctly, on page load you only want to display "Toggle". When you click "Toggle" you want to show the three other sections.
To do that you want to place the three other sections inside of a wrapper div, and then use slide toggle on the wrapper div instead.
Quick jsfiddle: http://jsfiddle.net/43byX/
Here is a modified version of your code:
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function() {
$("#drawer").slideToggle("slow");
});
});
</script>
<style type="text/css">
#toggle,
.panel {
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#drawer {
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="toggle">Toggle Me</div>
<div id="drawer">
<div class="panel">Switch back 1080 double cork</div>
<div class="panel">Frontside triple cork 1440</div>
<div class="panel">Ollie</div>
</div>
</body>
</html>
#panel, #panel2, #panel3
{
padding:5px;
display:none;
}
You are in essence hiding only the div whose id is panel. But the other two div's are visible. Those need to be hidden as well. This way when you toggle all three will have their displays turned to true.
On a side note is there a reason you are creating your own toggle? It might be faster to use twitter bootstrap which already comes with it. See This
Correct me if I'm wrong, but it seems what you're trying to do can be more easily accomplished using accordion.
Quick jFiddle example here. Click the headers to see the effects.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
</head>
You can erase the active code if you want one of the panes to be open when the page loads, and you can erase the collapsible line if you want one of the panes to always remain open.
and then the html layout:
<div id="flip">
<h3>Switch back 1080 double cork</h3>
<div><p>some text or whatevs here</p></div>
<h3>Frontside triple cork 1440</h3>
<div><p>some text or whatevs here</p></div>
<h3>Ollie</h3>
<div><p>some text or whatevs here</p></div>
</div>
Read more about accordion here.
Edit: It may be better to put the
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
just before the closing body tag instead of in the header. Best practices would have you put it in a separate file and link it in the header.
I think, you want to toggle that one hidden element one by one. Well, If I am not wrong, then here is the code:
$("#flip").click(function(){
var targets = $("#panel, #panel2, #panel3"),
hiddenElm = targets.filter(":hidden");
hiddenElm.slideDown();
if(hiddenElm.next().length){
hiddenElm.next().slideUp();
} else {
targets.first().slideUp();
}
});
Working jsfiddle: http://jsfiddle.net/ashishanexpert/jg2wg/
I have something like the below:
$grabarticles = $db->prepare("
SELECT title, message
FROM articles
");
$grabarticles->execute();
foreach($grabarticles as $articles) {
echo $articles["title"];
//when a user clicks the text above, reveal the below
echo "<div id='article'><br/><br/>";
echo " ".$articles["message"];
echo "</div><br/><br/>";
//when a user clicks the $articles["title"] again, it then collapses
}
I'm not too well versed in Javascript to know, but is there some kind of thing I can do to make the $articles["title"] clickable, and onclick expand below to display the contents of $articles["message"], but also be reversible with another onclick? Here's an image to illustrate:
I want each <div> to be separate from another, so if I open #1 by clicking $article["title"] //1, and then open #2 by clicking the appropriate text, I can then close #1 by reclicking it without interfering with #2.
Wrap the article title in a DOM element that can have events bound to it, such as a span. Then give it a class so we can easily target it.
echo '<span class="article-title">', $articles["title"] ,'</span>';
Next, your id in your foreach loop should be a class, as you're generating multiple elements and only one element can have a single ID.
echo "<div class='article' style='display:none;'><br/><br/>"; // <--note the "class" instead of "id"
Now just make a click function to toggle the visibility of the element.
$('.article-title').click(function(){
$(this).next().toggle(); // find the next element after this one and toggle its visibility
});
Use jscript
<script type="text/javascript">
$(function () {
$('#testTitle').click(function (e) {
if ($("#testcontent").is(":visible")) {
$("#testcontent").slideUp("slow");
}
else {
$("#testcontent").slideDown("slow");
}
});
});
You want to use this collapsible DIV jQuery plugin written by John Snyder. It does exactly what you are looking for.
I use this on my blog you can see an example of it here and here
Sample HTML
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="/stylesheet.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.collapsible.js"></script>
<div class='collapsible'>
Header Text 1<span></span>
</div>
<div class='container'>
<div class='content'>
<div>
Body Text 1
</div>
</div>
</div>
<div class='collapsible'>
Header Text 2<span></span>
</div>
<div class='container'>
<div class='content'>
<div>
Body Text 2
</div>
</div>
</div>
</html>
CSS to go along with it
/* START SECTION FOR COLLAPSEIBLE DIV */
.collapse-open {
/* background:#000;
color: #fff;*/
}
.collapse-open span {
display:block;
float:left;
padding:10px;
background:url(/images/minus.png) center center no-repeat;
}
.collapse-close span {
display:block;
float:left;
background:url(/images/plus.png) center center no-repeat;
padding:10px;
}
Im attempting to make a navigation bar with Jquery. the idea is that you click on the navigation button and several links(in the form of divs) will slide out. However, i am unable to get the initial click action to work. Currently im just trying to move the #Home button to the left 100px after you click the #clickme button.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src = "jquery-2.0.1.js"></script>
<script>
$("#clickme").click(function(){
$("#Home").animate({left: 100} , "fast");
});
</script>
<style type="text/css">
#Nav {
position:absolute;
width:200px;
height:115px;
z-index:1;
top: 268px;
left: 530px;
background-color: blue;
}
.Button{
position:absolute;
width:200px;
height:115px;
z-index:0;
background-color:#693;
}
</style>
</head>
<body>
<div id="Nav">
<div id="Home" Class = "Button">Home</div>
<div id="About" Class = "Button">About The Internship</div>
<div id="Meet" Class = "Button">Meet the Interns</div>
<div id="Request" Class = "Button">Request an Intern</div>
<div id="clickme" Class = "Button">Navigation</div>
</div>
</body>
</html>
You have to wait 'till your dom is ready + you've the wrong selector.
.ID is for Classes (css)
#ID is for actual ID's
$(function(){
$("#clickme").click(function(){
$("#Home").animate({left: 100} ,"fast");
});
})
This should work..
In addition to stackErr's answer:
'fast' should be passed as a string.
fiddle: http://jsfiddle.net/jonigiuro/xt57a/
$("#clickme").click(function(){
$("#Home").animate({left: 100} ,'fast');
}
the problem seems to be with the selector. id must be used with # not with .
try
$("#clickme").click(function(){
$("#Home").animate({left: 100} ,fast);
});
you can place this code at the bottom before </body> using scripts at the bottom of the page makes page faster & executes when dom is ready. otherwise wrap the codde with $(function())
Your id selector is incorrect.
Your code should be:
$("#clickme").click(function(){
$("#Home").animate({left: 100} ,'fast');
});
this shouldnt matter but script tag should have the type attribute since you are not using HTML5:
<script type="text/javascript" src="jquery-2.0.1.js"></script>
Here is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.7.2.min.js"></script>
<style>
div{
border:2px solid black;
width:200px;
min-height:300px;
}
</style>
</head>
<body>
<div>
<p id="demo">This will change</p>
<input type="button" value="OK" onclick="myFunction()"/>
</div>
<script>
$(document).ready(function()
{
$("input").click(function()
{
if($("div").height("300px") === true){
document.getElementById("demo").innerHTML="HELLO WORLD!";
}
});
});
</script>
</body>
</html>
I want to do is like this, If div height is equal to 300px the "This will change" paragraph will change to Hello World on the click of a button. Sorry this is my first time on javascript
$("div").height("300px") sets the height of the div, it does not return true if the height equals 300px.
You want $('div').height() === 300
http://api.jquery.com/height/
I'm noticing a couple things right off the bat. First, the .height function returns the numeric value without "px". Second, you are placing a value inside the .height function,meaning you are setting its value to "300px". Lastly, you are using the === operator which only returns true if the type and value are the same. Instead, try this:
if($("div").height() == 300)
On another note, you'll eventually want to give your input and div ids and access them through those ids, just in case your markup has more than one of each later on.
I have a div and a simple jQuery code that calls the div on an 'onlclick' event and properly hides on 'onmouseout' event. The problem is when I put a text or a link inside this div and move a cursor over the text / link in this div - it triggers out() function effect and dissappears - even if the cursor is still inside the div. Why is that so ? Thanks for comments.
<script src="js/jquery.js"></script>
<style type="text/css">
#sample {
position:relative;
width:500px;
height:200px;
background-image:url(images/img.png);
background-repeat:repeat-x;
}
</style>
</head>
<body>
<a href="javascript:show();" >link</a>
<div id="sample" onmouseout="out()">THIS IS TEXT</div>
<script type="text/javascript">
$(document).ready(function() {
$("#sample").hide();
});
function show() {
$("#sample").fadeIn('slow');
}
function out() {
$("#sample").fadeOut('slow');
}
</script>
</body>
</html>
Use mouseenter and mouseleave.
In the document ready function add this
jQuery("#sample").mouseleave(out);
and remove the onmouseout code from the HTML markup.
remove JavaScript code from HTML
and try this.
$(function(){
$("#sample").hide();
$("a").click(function() {
$("#sample").fadeIn('slow');
return false;
});
$("#sample").mouseout(function() {
$("#sample").fadeOut('slow');
});
})();
Demo
Your <a> element is inside the #sample element, so running fadeOut on #sample will hide it, and everything inside it.
To keep the <a> you need to place it outside #sample in the html.
Oooh, no I get it, try this instead of the inline stuff:
$("#sample").hide();
$("a").mouseenter(function() {
$("#sample").fadeIn('slow');
});
$("#sample").mouseleave(function() {
$("#sample").fadeOut('slow');
});
Here's a Fiddle, not the way I would do it, but the closest I could get to your example: http://jsfiddle.net/GkSGz/