I am trying to make a container div change set height on click, but am having trouble getting it to work. I am not sure where I messed up and would love input as I am pretty new to Javascript.
$(function() {
$('#menu').click(function() {
$(".outer").css('height','600px ');
});
});
Here is a JS fiddle: https://jsfiddle.net/r92cc51d/2/
If you are just looking to increase the height on click then you don't need to do it in JS. You can do it in html also.
<div id="outer">
<div id="menu" onClick = "document.getElementById('outer').style.height = '600px';">
</div>
</div>
You're missing closing parenthesis for your click function:
$('#menu').on('click', function() {
$('.outer').css('height', '400px');
});
.outer {
width: 200px;
height: 200px;
background-color: #111111;
}
#menu {
height: 20px;
width: 20px;
background-color: #666666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div id="menu">
</div>
</div>
Related
I have two <div> elements attached to each other, I mean there is no space between them.
<div id="box1">1</div>
<div id="box2">2</div>
And I have this jQuery code:
$('#box1 , #box2').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
My problem is when I move the mouse between box1 and box2, I still get on console log "Not".
I want those divs to be considered as one element so when I move the mouse between them I don't get on console log "Not".
Thanks in advance!
I want those divs to be considered as one element
Well, quite simply, they aren't. And they can't be. That's not how HTML and CSS works.
The hover event is triggered one for each individual element bound to the event handler. And every time you leave one of those elements it will print the "not" output as per your instructions.
There is no "fix" for this in the exact way you described, but there are alternative approaches. An obvious solution is to wrap them both in an outer div and bind the hover event to that instead. Then the whole area will be considered as one element (because it literally is). Demo:
$('#boxcontainer').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
#boxcontainer {
border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxcontainer">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
friend check the code below. I think it will work for you. As you have dai you have an absolute position div you must need a parent div and the parent div position must be relative. For doing that you have to add just a simple CSS code position: relative;. You also need to do some changes to your jquery code. You can just hover on the parent div and it will do your work. Hope this code will help you.
//Box 1 Demo
$('#boxParrent1').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
//Box 2 Demo
$('#boxParrent2').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
/*Main Code that are needed*/
#boxParrent1, #boxParrent2 {
position: relative;
}
/*Codes Just used to give you a demo*/
#boxParrent1, #boxParrent2{
display: flex;
margin-bottom: 50px;
border: 1px solid #000;
}
#boxParrent1{
width: 200px;
}
#boxParrent2{
width: 210px;
}
#box1, #box2, #box3, #box4{
background: tomato;
width: 100px;
height: 100px;
display: grid;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: 50px;
color: #fff;
cursor: pointer;
}
#box2, #box4{
position:absolute;
top: 0;
left:100px;
background: #02dce6;
}
#box4{
left:110px;
background: #02dce6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxParrent1">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
<div id="boxParrent2">
<div id="box3">3</div>
<div id="box4">4</div>
</div>
Try to place your 2 div's in one super div
<div id="super">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
$('#super').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
I'm tyring to move a div every time I click a button. It should always move the same distance. I'm doing this with JavaScript, but I can't seem to get it working after the first click.
HTML
<div id="container">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<button id="move">Click to move the square</button>
CSS
.slide {
display: inline-block;
width: 100px;
height: 100px;
background: lightblue;
margin-bottom: 10px;
margin-right: 10px;
}
JS
document.getElementById("move").addEventListener("click", function() {
document.getElementById("container").style.transform = "translateX(30px)"
})
I've tried calling the function from outside the event listener, like this:
document.getElementById("move").addEventListener("click", clickNext);
function clickNext() {
document.getElementById("container").style.transform = "translateX(30px)"
}
I've also tried to handle the click event through HTML with the "onclick" attribute:
HTML
<button id="move" onclick="clickNext()">Click to move the square</button>
JS
function clickNext() {
document.getElementById("container").style.transform = "translateX(-100px)"
}
In every one of these code bits the button works as intendedb but only once. After that, the button stops working.
Any help on why that's happening would be much appreciated.
As there is no change in the style property being assigned on the second occurrence of the click hence there is no animation
Try this:
var amount = 30;
var initial = 0;
document.getElementById("move").addEventListener("click", function() {
initial += amount;
document.getElementById("container").style.transform = "translateX(" + initial + "px)"
})
.slide {
display: inline-block;
width: 100px;
height: 100px;
background: lightblue;
margin-bottom: 10px;
margin-right: 10px;
}
<div id="container">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<button id="move">Click to move the square</button>
Guys I was trying to make a notification menu which dropdown on click event.I have make that with below code but I have a problem that I can't hide it back.I want to hide it by clicking on body and div itself.How can I do that?
My html part.
<li class="clicker" >
<a>Notification</a>
<div class="display_noti">
<ol>
<span>This is it :D</span><br>
<span>This is it :D</span><br>
<span>This is it :D</span><br>
</ol>
</div>
</li>
My css part
.display_noti
{
width: 400px;
height: fixed;
display:none;
background-color: black;
color: white;
position: absolute;
top: 40px;
z-index: 2;
padding: 5px;
}
My jquery part.
$('.clicker').on('click',function(){
if($('.display_noti').css("display","none")){
$('.display_noti').show();
}
});
I am trying with this jquery code too but when I keep this code show() function doesn't work.
$('body').on('click',function(){
$('.display_noti').css("display","none");
});
just make your js code as:
$('.clicker').on('click',function(){
$('.display_noti').toggle();
});
http://jsfiddle.net/jp42q7t8/5/
Update:
also, if you want you may consider change the cursor shape on the li element to show that it is clickable like this:
.clicker { cursor:pointer; }
Update2:
If you add this somehow you can make the <div class="display_noti"> disappear when you click on it i don't know why though but it fixes it:
$('.display_noti').on('click',function(){
$(this).css({'background':'black'}); //same background color of the inner div
});
// hide some divs when click on window
var actionwindowclick = function(e){
if (!$(".display_noti, .clicker").is(e.target) // if the target of the click isn't the container...
&& $(".display_noti , .clicker").has(e.target).length === 0) // ... nor a descendant of the container
{
$(".display_noti").hide();
}
}
$(window).on('click',function(e){
actionwindowclick (e);
});
$('.clicker').on('click',function(){
$(".display_noti").slideToggle();
});
Jsfiddle
$(document).click(function(e) {
$('.display_noti').hide();
});
$('.clicker').on('click', function(e) {
$('.display_noti').toggle();
e.stopPropagation();
});
$('.display_noti').click(function(e){
e.stopPropagation();
});
.display_noti {
width: 400px;
height: fixed;
display: none;
background-color: black;
color: white;
position: absolute;
top: 40px;
z-index: 2;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="clicker"> <a>Notification</a>
<div class="display_noti">
<ol> <span>This is it :D</span>
<br> <span>This is it :D</span>
<br> <span>This is it :D</span>
<br>
</ol>
</div>
</li>
I have created an element that is displayed when I am over a particular box.
If I move my mouse over the box I can see my element but then I need to move my mouse in and out twice for the element to disappear. How can I fix it? Shouldn't the element hide itself once I move the mouse out?
How do I make my box only show when mouse is over the box?
<script>
$("#box").on("mouseover",function()
{
$("#my-box").toggle();
});
</script>
I tried to hide it myself, but it didn't work:
$("#box").on("onmouseout", function()
{
$("#my-box").hide();
});
You can use mouseover and mouseout in a same eventlistener like one below:
$("#box").on("mouseover mouseout",function()
{
$("#my-box").toggle();
});
#my-box{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
Box here
</div>
<div id="my-box">
My Box
</div>
FIDDLE DEMO
The problem with your code is you're using onmouseout instead of use mouseenter and mouseleave method.
You can use hover:
$('#box').hover(function(){
$('#my-box').toggle();
});
You can use combination of both
$("#box").mouseover(function() {
$("#my-box").show();
}).mouseout(function() {
$("#my-box").hide();
});
Example
jQuery Solution
HTML
<div class="box" id="action"></div>
<div class="box" id="hidden"></div>
JS
$("#action").on("mouseover mouseout",function()
{
$("#hidden").toggle();
});
CSS
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#hidden{
display: none;
}
JSFiddle
Allthough it would be better doing this by just using CSS.
CSS Only Solution
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#action:hover + #hidden{
display: block;
}
#hidden{
display: none;
}
JSFiddle
I'm trying to make a div that I have on top of another div show up when you click on something.
This is the code for the two divs, without all the stuff that's within each:
<div id="randomarticle_enlarge">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
<div class="bodybag">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
Then I have css for each, of course:
.bodybag {
width:960px;
}
#randomarticle_englarge {
height:750px;
width:960px;
position:absolute;
z-index:2;
margin-top:1px;
padding-left:20px;
padding-right:20px;
display: none;
}
Am I supposed to have the bodybag class have a z-index and a position:relative? Because even though I don't it's working (at this point).
Anyway, I have this script written that's doing exactly what I want it to do:
$(document).ready(function() {
$('.popular').click(function() {
$('#textmask').fadeTo( 'fast', 0.1);
$('#backgroundmask').css('background-color', 'white');
});
});
And all I want to happen next is that as the textmask and the backgroundmask fade in/change as they should and do, is for the randomarticle_enlarge div to show up.
I've tried using .toggle and .toggleClass and .slideToggle and .show but nothing is working.
Absolute positioning must be relative to a container. In order to absolutely position something you need to indicate what it's absolutely positioned to. Something along these lines.
<div id="randomarticle_englargeContainer">
<div id="randomarticle_englarge">
</div>
<div class="bodybag">
</div>
</div>
#randomarticle_englargeContainer {
position: relative;
}
.bodybag {
position: absolute;
left: 0;
top: 0;
}
When copying everything from above I have no issues using $('#randomarticle_englarge').toggle();. Check your browser's console for errors; you might find the answers there.
I'm not exactly sure about what would you like to do with the divs, but I created an example for you, maybe this is what you want:
LIVE DEMO
So there is two divs. The 2nd div covers the 1st one. Clicking on a 'button' hides the 2nd div, so the 1st one reveals. Clicking again the 'button', the 2nd div appears and covers the 1st one again.
HTML:
<div class="popular">Click me!</div>
<div class="container">
<div id="randomarticle_enlarge">
<h1>A</h1>
<h4>B</h4>
<p>C</p>
<p>D</p>
</div>
<div class="bodybag">
<h1>E</h1>
<h4>F</h4>
<p>G</p>
<p>H</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.bodybag {
width: 100px;
height: 200px;
background-color: red;
}
#randomarticle_enlarge {
width: 100px;
height: 200px;
background-color: green;
position: absolute;
top: 0;
left: 0;
}
.hide {
display: none;
}
jQuery:
$(document).ready(function() {
$('.popular').click(function() {
$('#randomarticle_enlarge').toggleClass('hide');
});
});