click one div change another's position - javascript

i cant seem to find the problem in my code.
I want to click the #menu and it will slide the #menudrop from the right.
#menudrop {
width: 200px;
height: 300px;
background: red;
position: absolute;
right: -9999px; /* get element out of viewport */
transition: 0.5s ease;
}
#menu{
width:100px;
height:100px;
position:absolute;
top:20px;
left:200px;
background-color:black;
}
<div id="menu"></div>
<div id="menudrop"></div>
$(document).ready(function(){
$('#menu').Click(function(){
$('#menudrop').css('right', '0px');
});
});
https://jsfiddle.net/theUnderdog/n60guhkq/

There are 2 issues in your code,
There is no function like Click (capital C used) available with jquery its click,
$(document).ready(function(){
$('#menu').click(function(){
$('#menudrop').css('right', '0px');
});
});
And its very important to include jquery library into our page before using it.
DEMO

Related

Jquery sliding drawer with overhang

I'm creating a toggling menu using JQuery slide effect. I am trying to make the collapse menu show a bit of over hang for the user to still see a bit of the drawer background when it's closed.
EDIT TO ADD: What do I mean by "overhang"?
In the Google example below, the white app drawer is present at the bottom, it never fully disappears. A piece of it hangs over the content so users can see a few things on it plus a small prompt to slide it up fully. I’d like my own slider to not fully disappear but leave some pixels of overhang.
Here is the code I am successfully using for the drawer:
$(function () {
$("a.toggle").click(function () {
$(".menu-container").toggle("slide", {direction:'right'}, 500);
$(this).toggleClass("open");
});
$(".main-navigation ul li a").click(function () {
$(".menu-container").toggle("slide", {direction:'left'}, 350);
$("a.toggle").toggleClass("open");
});
});
.menu-container {
position:fixed;
top: 0;
left: 0;
right: 0;
height: 999em;
background: rgba(144, 144, 144, 0.85);
display:none;
}
.menu-container ul{padding:2em;}
.toggle{
background:red;
color:#fff;
cursor:pointer;
padding:1em;
transform: rotate(-90deg);
position:absolute;
z-index:999;
top:50%;
right:0;
}
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a class="toggle">Menu</a>
<div class="menu-container">
<ul>
<li>Menu Item 1</li>
</ul>
</div>
Here's how I actually want it to function (I am showing Google Maps mobile drawer as an example):
The white drawer at the bottom has a few settings links
The little grey tictac on the white drawer lets you swipe the container up to take up the whole screen
Is it possible for the jQuery container I'm toggle sliding in and out to have a bit of overhang like this, for users to see even when closed?
You could do this in 10 different ways - but it all depends on your situation. It's always a little bit of a juggling act. - but check out translate. That's what I'd use.
var thing = document.querySelector('[rel="clicky-thing"]');
thing.addEventListener('click', function(event) {
event.target.classList.toggle('open');
});
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.menu {
border-radius: 10px;
border: 1px solid blue;
padding: 1rem;
min-height: 400px; /* arbitrary */
/* */
width: calc(100% - 20px);
position: absolute;
top: 100%;
left: 10px;
cursor: pointer;
/* */
transition: .2s;
transform: translateY(-200px);
}
.menu:not(.open) {
transform: translateY(-50px);
}
<nav class='menu' rel='clicky-thing'>
this is a menu... and it would have stuff in it
</nav>
example with button: https://jsfiddle.net/sheriffderek/zwq2okev/

jquery: Remove a <div> stacked above another <div> on mouseenter and restore that <div> on mouseleave

Here's the challenge:
I have two divs layered on top of one another in an HTML file. The top div is mostly transparent using CSS the bottom div has an image as its background. On mouseenter, I want the top div to disappear and on mouseleave I want the top div to come back.
$(document).ready(function() {
$('.dimmer').on('mouseenter', event => {
$(this).hide();
}).on('mouseleave', event => {
$(this).show();
});
});
.experience {
background: url("cmu-110.png") no-repeat center;
height: 110px;
width: 110px;
z-index: 2;
}
.dimmer {
background: rgba(238, 238, 238, .25);
position: relative;
top: -128px;
z-index: 3;
}
<div>
<div class="experience"></div>
<div class="dimmer"></div>
</div>
The jquery code snippet above is in a separate file and called in the html's head.
<head>
<!--- Some head stuff like title, meta, calling css in separate file, etc --->
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="interaction.js"></script>
</head>
Full transparency: I am new to jquery and trying to use it for the first time. Despite working through the full codecademy jquery tutorial, reading w3C school tutorial, searching other stackoverflow posts, and spending more than a reasonable amount of time, I can't seem to get this to work--probably due to a dumb mistake.
Thank you for your help!
I believe a jquery '.on( "mouseout", handler )' on the bottom div should be sufficient to make the top div visible/fade in.
This post should help you: jquery .mouseover() and .mouseout() with fade
If not (if that does not work) what I would do/suggest is:
When mouse enters the top div activate a setTimeout polling functiion or .mouseMove that runs every 1 second or so which checks the mouse position and hide the top div.
If the mouse is not on the bottom div (mousemove) , then display the top div and disable the polling.
You can seach this forum for how to write a setTimeout polling function, etc. If I have some time over the weekend I will give it a whirl...
Trust this helps.
You can set the css visibility property to hidden and visible on mouseenter and mouseleave. I put some space between two divs to make the effect visible clearly.
$(document).ready(function() {
$('.dimmer').on('mouseenter', () => {
$('.dimmer').css("visibility","hidden");
}).on('mouseleave', () => {
$('.dimmer').css("visibility","visible");
});
});
.experience {
background: red;
height: 110px;
width: 110px;
z-index: 0;
}
.dimmer {
background: blue;
position: absolute;
top: -10px;
height: 110px;
width: 110px;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="experience"></div>
<div class="dimmer"></div>
</div>
jQuery(document).ready(function(){
jQuery(".dimmer").on({
mouseenter: function () {
jQuery(this).css('opacity', '0');
},
mouseleave: function () {
jQuery(this).css('opacity', '1');
}
});
});
.experience {
background: url("http://lorempixel.com/400/200/") no-repeat center;
height: 110px;
width: 110px;
z-index: 2;
}
.imparant{
position:relative;
height: 110px;
width: 110px;
}
.dimmer {
background: rgba(238, 238, 238, .25);
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
z-index: 3;
transition:opacity 320ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="imparant">
<div class="experience"></div>
<div class="dimmer"></div>
</div>
You don't really need to use jQuery or javascript at all for this. You can do it with a single div, a pseudo-element, and a hover style:
.container{
position:relative;
height: 110px;
width: 110px;
background-image: url("https://randomuser.me/api/portraits/men/41.jpg");
}
.container::before{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
transition: opacity 0.4s;
}
.container:hover::before{
opacity: 0;
}
<div class="container"></div>
If for some reason you wanted to keep the extra divs you could still do it but you'd want to change the CSS hover rule slightly. If you were ok moving the .dimmer before .experience you could just do the hover directly on the .dimmer element:
.dimmer:hover { opacity: 0 }
Otherwise you'd need to use a descendant selector:
.outerDiv:hover .dimmer { opacity: 0 }

jQuery + CSS, remove other images on hover with a fade-like transition

Firstly, What I'm trying to accomplish is when you hover over a thumbnail on the lower left, the other thumbnails will become black. However, what I have now seems wierd as the other images flashes back too quick and has no transition.
Secondly, when you transition between thumbnails, I would like when you hover over a "blackened" image, the image will return with a transition, just like what I have at the bottom of my fiddle example.
I'm sorry for the slight confusion since it's two things combined, but I hope I explained it right.
$('.thumb-box').click(function() {
var theSRC = $(this).find('img').attr('src');
$(this).parents('.image-wrapper').find('.main-image').attr('src', theSRC).fadeIn();
});
//Resize image
$('.thumb-box').hover(function(){
$(this).siblings().find('.child-img').addClass('add-active');
}, function(){
$(this).siblings().find('.child-img').removeClass('add-active');
});
$('.main-image').each(function() {
if ($(this).height() > 550) {
$(this).addClass('higher-than-max');
} else if ($(this).height() <= 550) {
$(this).addClass('not-higher-than-max');
}
});
.parent{
border:1px solid purple;
height:100%;
width:80%;
float:Right;
}
.child{
border:1px solid red;
height:100%;
background:gray;
text-align:center;
}
.child-img{
display:inline-block;
max-width:100%;
margin:0 auto;
}
.image-wrapper{
width:100%;
background:orange;
}
.thumbnails img{
width:auto;
height:100%;
width:100%;
}
.thumbnails{
width:100px;
height:100px;
}
.thumb-box{
height:40%;
width:40%;
display:inline-block;
background:black;
}
.higher-than-max{
max-height:500px;
width:auto;
}
.not-higher-than-max{
max-height:100%;
width:auto;
}
.add-active{
transition:2s;
display:none;
}
.boxes{
height:100px;
width:100px;
background:black;
transition:.5s;
}
.boxes:hover{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
<div class="image-wrapper">
<img src="http://vignette2.wikia.nocookie.net/pokemon/images/b/b1/025Pikachu_XY_anime_3.png/revision/latest?cb=20140902050035" alt="374x333" class="main-image">
<div class="thumbnails">
<div class="thumb-box">
<img src="http://vignette2.wikia.nocookie.net/pokemon/images/b/b1/025Pikachu_XY_anime_3.png/revision/latest?cb=20140902050035" alt="374x333" class="child-img">
</div>
<div class="thumb-box">
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg" alt="800x450" class="child-img">
</div>
<div class="thumb-box">
<img src="http://vignette3.wikia.nocookie.net/scratchpad/images/0/02/Pikachu.gif/revision/latest?cb=20150217015901" alt="" class="child-img">
</div>
<div class="thumb-box">
<img src="http://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png" alt="" class="child-img">
</div>
</div>
</div>
</div>
<div class="accomplish">
Image Hover Transition:
<div class="boxes"></div>
</div>
</div>
Personally, I would do this with pure CSS using pseudo elements to create the black overlays.
.thumb-box {
height: 100px;
position: relative;
width: 100px;
// Black overlay
&:after {
background-color: #000;
content: '';
height: 100%;
left: 0;
opacity: 0;// hide overlay to start
position: absolute;
top: 0;
transition: all 250ms ease-in-out;
width: 100%;
}
}
// Show all black overlays on hover
.thumbs {
&:hover {
.thumb-box:after {
opacity: 1;
}
}
}
// Hide black overlay on individual hovered item
.thumb-box {
&:hover {
&:after {
opacity: 0 !important;
}
}
}
Demo: http://jsbin.com/lanuni/edit?html,css,output
Note: I had to add an additional wrapper around each image since you can’t create pseudo elements on <img> tags (see CSS :after not adding content to certain elements).
I think the issue is your are trying to transition between display: inline-block and display: none
You can't transition display. See this question: Transitions on the display: property
First: it flashes b/c the gap between your thumbnail will force your mouse to hover out, thus create the flickering effect.
to solve this you can use setTimeOut() to delay between hovers.
Second: transition between display:block to display:none don't work well, use opacity instead, and put a black background between your thumbnail

How to scroll with div buttons instead of scroll bar

I want to know how to turn my two arrow buttons into scrolling buttons so you can scroll through the div container. IF you look at the demo below you will notice a window appears when you press the black square. One the window opens there are to black rectangle which indicate my scrolling buttons the the gray squares are the contents. I would like to remove the scroll bar but still have scrolling function which I can control with the two black rectangle buttons i made. I would also like the bottom black rectangle to be where the horizontal scroll bar is normally at and I would not like that button to fall into the scroll because that would void the whole purpose.
I would also like top button to disappear when the container is all the way at the top and the bottom button to disappear when the container is all the way at the bottom.
There is a website that I got this idea from so you can go look at it to see what I am talking about. It will be listed below! If you click the little map button on the left another window will open up with circle icons! You may have to shrink your browser for the scroll feature to appear but you will notice a button at the bottom which scrolls down and once you go all the way down it disappear and once you scroll down the up button appears to scroll up then goes away when you get to the top again.
Here is the example website! http://intothearctic.gp/en/
Here is some code!
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates" class="not-open regionsButton">
<div id="regionsUnitedStatesTooltip"></div>
</div>
</div>
<div id="regionsUnitedStatesChooseState" class="regionsContent">
<div id="chooseStateUnitedStatesColumnOne">
<div id="chooseStateUnitedStatesScrollUp"></div>
<div id="chooseStateAlabama1" class="not-open regionsButton"></div>
<div id="chooseStateAlabama2" class="not-open regionsButton"></div>
<div id="chooseStateAlabama3" class="not-open regionsButton"></div>
<div id="chooseStateAlabama4" class="not-open regionsButton"></div>
<div id="chooseStateAlabama5" class="not-open regionsButton"></div>
<div id="chooseStateAlabama6" class="not-open regionsButton"></div>
<div id="chooseStateAlabama7" class="not-open regionsButton"></div>
<div id="chooseStateUnitedStatesScrollDown"></div>
</div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height:100%;
min-width: 60px;
max-width: 60px;
background-color: #383D3F;
position: absolute;
left: -60px;
transition: left ease-in-out 0.5s;
top: 0;
}
#sidemenu.show {
left: 0;
}
#regionsContainer {
width: 60px;
height: 100%;
min-width: 60px;
max-width: 60px;
background-color: #383D3F;
position: absolute;
top:25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-color:#111111;
}
#regionsUnitedStatesTooltip {
opacity:0;
background-color:#000;
height:60px;
width:180px;
left:100px;
position:absolute;
transition:all ease-in-out 0.25s;
top:0;
visibility:hidden;
}
#regionsUnitedStates.not-open:hover #regionsUnitedStatesTooltip{
left: 60px;
opacity:1;
visibility:visible;
}
#regionsUnitedStates:hover {
background-position:bottom;
}
#regionsUnitedStatesChooseState{
position:absolute;
transition:all ease-in-out 0.25s;
left: -150px;
width: 150px;
height: 100%;
background: #505759;
top:0;
z-index:-1;
overflow:auto;
}
#regionsUnitedStatesChooseState.show {
left: 60px;
z-index:-1;
}
#chooseStateUnitedStatesScrollUp {
width:150px;
height:40px;
background-color:#111111;
top:0%;
}
#chooseStateUnitedStatesScrollUp:hover {
background-position:bottom;
cursor:pointer;
}
#chooseStateUnitedStatesScrollDown {
width:150px;
height:40px;
background-color:#111111;
bottom:100%;
}
#chooseStateUnitedStatesScrollDown:hover {
background-position:bottom;
cursor:pointer;
}
#chooseStateUnitedStatesColumnOne {
width:100px;
height:100%;
float:left;
top:0%;
}
#chooseStateAlabama1 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama2 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama3 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama4 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama5 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama6 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
margin-bottom:10px;
}
JAVASCRIPT
$(function(slideSidemenu) {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
var $regionsContent = $('.regionsContent'),
$regionsButton = $('.regionsButton').click(function(){
var $button = $(this).removeClass('not-open');
var buttonIndex = $regionsButton.index($button);
$regionsContent.removeClass('show');
setTimeout(function() {
$regionsContent.eq(buttonIndex).addClass('show');
}, 150);
$regionsButton.not($button).addClass('not-open');
});
$('#chooseStateAlabama').click(function() {
$(this).parents('.regionsContent').removeClass('show');
setTimeout(function() {
$("#regionsUnitedStatesAlabamaChooseCity").addClass('show');
}, 300);
});
$('#chooseStateAlaska').click(function() {
$(this).parents('.regionsContent').removeClass('show');
setTimeout(function() {
$("#regionsUnitedStatesAlaskaChooseCity").addClass('show');
}, 300);
});
DEMO
JSFIDDLE
This doesn't make the scrollbars disappear, nor does it hide buttons other than the example button scrolling out of view when moving down to paragraph four (so this isn't everything you need), but for a basic "click a div to scroll with jQuery" example, using code from this answer:
window.onload = init;
function init() {
$("#myButton").click(function() {
$('html, body').animate({
scrollTop: $("#foo4").offset().top
}, 2000);
});
}
Working example.

Simple fixed widget

I am trying to create simple widget with fixed position using Jquery. I recently started learning JQuery so I would like to ask what is the better way to to this than:
var i = 0 ;
$('#button').on('click', function() {
if( i === 0) {
$('#widget').animate({'bottom':0},700);
i = 1;
} else {
$('#widget').animate({'bottom': -211},700);
i = 0;
}
});
Full code:
http://jsfiddle.net/zX8He/
There are better ways I think
You could just toggle a class on click and let CSS do the rest.
UPDATED EXAMPLE HERE
$('#button').on('click', function() {
$(this).parent('#widget').toggleClass('open');
});
CSS
#widget {
width: 150px;
height: 250px;
background: gray;
border: 1px solid black;
position: absolute;
right: 0;
bottom: -211px;
transition:all 2s;
-webkit-transition:all 2s;
-moz-transition:all 2s;
}
#widget.open {
bottom:0px
}
It's pretty simple, just use a CSS transition and add styling to the .open class. It's worth noting that I added overflow:hidden to the body element in order to hide the element below the screen. You can also add cursor:pointer to the button element on :hover in order to indicate that it is clickable. (example)
#button:hover {
cursor:pointer;
}
Using jQuery will allow your code to be cross browser compatible, as CSS3 transitions are not supported in all browsers. http://jsfiddle.net/fyCcx/
the css:
.btn{
border:1px solid #888;
background: #f8f8f8;
width:150px;
height:40px;
margin:0px;
}
#widget{
width:150px;
position: absolute;
right:0px;
background: #333;
bottom:0px;
}
the html
<div id="widget">
<button class="btn">Click Me</button>
</div>
the script:
$(document).ready(function(){
var open = false;
$('.btn').click(function(){
if( !open ){
$('#widget').animate({
height: '400px'
}, 2000);
open = true;
} else{
$('#widget').animate({
height: $('.btn').height() + 'px'
}, 2000);
open = false;
}
})
});

Categories