I have this: http://jsfiddle.net/QDUQk/1621/
*click on "Menu" to toggle the slide. Code is at the bottom of this post.
How can I make it so that "Menu" does NOT disappear, but rather the "Inner Menu" slides out to the left of it WITHOUT moving the position of "Menu" ("Menu" would be on the far right side of the screen and the "Inner Menu" would slide out to the left of "Menu" without moving the position of "Menu").
Thus clicking "Menu" leaves you with "Inner Menu◀Menu" & clicking again on "Menu" brings you back to just "Menu" being displayed.
Also, how can I make it so that clicking "Inner Menu" does NOT provoke it to slide away?
Thank you!
CSS
#categories {
display: none;
border : none;
width: 100px;
right: 0px;
}
HTML
<div id="cat_icon">Menu</div>
<div id="categories">
<div CLASS="panel_title">Inner Menu◀</div>
</div>
</div>
JS
$('#cat_icon,.panel_title').click(function () {
if($('#cat_icon').is(':visible')){
$('#cat_icon').fadeOut(function () {
$('#categories').toggle('slide', {
direction: 'right'
}, 1000);
});
}
else{
$('#categories').toggle('slide', {
direction: 'right'
}, 1000, function(){ $('#cat_icon').fadeIn();});
}
});
Simplify your JS to
$('#cat_icon').click(function () {
$('#categories').toggle('slide', {
direction: 'right'
}, 1000);
});
and change CSS to
#cat_icon {
float: right;
}
#categories {
float: right;
display: none;
border : none;
width: 100px;
right: 0px;
}
http://jsfiddle.net/zqnL6aqg/2/
I think this covers everything you are asking for:
http://jsfiddle.net/QDUQk/1627/
To ensure that clicking inner-menu doesn't dismiss it, you need to remove ".panel_title" from the .click() handler, like this:
$('#cat_icon').click(function () {
if($('#cat_icon').is(':visible')){
$('#categories').toggle('slide', {
direction: 'right'
}, 1000);
}
else{
$('#categories').toggle('slide', {
direction: 'right'
}, 1000, function(){ $('#cat_icon').fadeIn();});
}
});
Other fixes included positioning elements... and providing a parent that they could be positioned relative to.
<div id="container">
<div id="cat_icon">Menu◀</div>
<div id="categories">
<div CLASS="panel_title">Inner Menu◀</div>
</div>
<div>
and CSS like:
#container {
position: relative;
}
#cat_icon {
position: fixed;
top: 0px;
right: 0px;
}
#categories {
position: fixed;
top: 0px;
right: 50px;
display: none;
border : none;
width: 100px;
}
Here you have a snippet:
$('#cat_icon').click(function () {
$('#categories').toggle( 'slide', { direction: 'right' }, 1000);
});
#container
{
float: right;
/* to avoid the "Full page" div in the snippet iframe*/
margin-top: 50px;
}
#cat_icon
{
background-color: white;
}
#cat_icon, #categories
{
position: absolute;
right: 0px;
line-height: 1.5em;
}
#categories {
margin-right: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id ="container">
<div id="categories">
<div CLASS="panel_title">Inner Menu◀</div>
</div>
<div id="cat_icon">Menu</div>
</div>
To avoid the overlap you can put a white background to the #cat_icon element.
Also, both #cat_icon and #categories elements don't get correctly
alineated due to the ◀symbol. You can force the line-heightto avoid it.
Hope it helps!
Related
I have two block inside container and under them button. I need, when I click on the button, then the first div slowly moves up and removed. I tried so:
HTML:
<div class="container">
<div class="block"></div>
<div class="block"></div>
</div>
<button class="move">Click</button>
CSS:
.container {
border: 2px solid blue;
display: inline-block
}
.block {
width: 100px;
height: 100px;
background: red;
margin: 5px;
}
.move {
display: block
}
jQuery:
$(document).ready(function() {
$('.move').click(function() {
$('.block:first-child').animate({scrollTop: '-100px'}, 1000, function() {
$(this).remove();
});
});
});
But when I click on the button, then first .block just removed. I need to first move it up. How to fix it?
JSFiddle
You're animating the scrollTop of the element which will not have the effect you want. You can animate the height instead. However there is also the slideUp() function which will do this for you. Try this:
$('.move').click(function() {
$('.block:first-child').slideUp(function() {
$(this).remove();
});
});
Example fiddle
If you have to do it without resizing the block, you can set overflow: hidden on the container, then animate the margin-top of the block itself.
Example fiddle
Add position: relative to element. top property works on positioned elements that is position is anything other than static. position: relative suits in this case.
$(document).ready(function() {
$('.move').click(function() {
$('.block:first-child').animate({
top: '-100px'
}, 1000, function() {
$(this).remove();
});
});
});
.container {
border: 2px solid blue;
display: inline-block
}
.block {
width: 100px;
height: 100px;
background: red;
margin: 5px;
position: relative
}
.move {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="block"></div>
<div class="block"></div>
</div>
<button class="move">Click</button>
I have a problem where I'm using .toggle to slide elements up and down, the problem is when i try to move my cursor quickly over the items it gets messed up. The id of the element is removed and I get custom styling assigned by jQuery.
<div class="ui-effects-wrapper" style="font-size: 100%; border: none; margin: 0px; padding: 0px; width: 160px; height: 60px; float: none; position: relative; z-index: auto; top: -50px; left: auto; bottom: auto; right: auto; overflow: hidden; display: block; background: transparent;">Novi test</div>
How do I fix this? I've tried using .stop but it doesn't solve the problem. I've tried reducing the animation time but the problem persists.
.js code
$(document).ready(function(){
$('.journal-entry').hover(function(){
var name = $(this).attr('name');
$(this).find('div').stop()
$(this).find('div').toggle("slide", { direction: "down" }, 200).html(name);
}, function(){
$(this).find('div').stop();
$(this).find('div').toggle("slide", { direction: "down" }, 200);
});
});
HTML
<li class="col-md-3 journal-entry" name="Name of the img">
<a href="#">
<img class="journal-img" src="imgsrc">
<div id="journal-img-title">Novi test</div>
</a>
</li>
I fixed it by changing the selector and adding a class
$('.journal-entry').hover(function(){
var name = $(this).attr('name');
$("a",this).children('.titler').toggle("slide", { direction: "down" }, 200).html(name);
}, function(){
$("a",this).children('.titler').toggle("slide", { direction: "down" }, 200);
});
http://honghanhdinh.com/
I am currently developing my website and I am running into some troubles with some of the parallax tutorials I am learning.
As you can see, the plane and the words to my name "Hong" appears on on the opening page but the other 2 parts of my name "Hanh Dinh" only appears when beginning to scroll down. In addition, the plane also disappears upon scrolling and flys out from the right to the left.
I don't want the plane to appear upon entering the website but for it to naturally slide out to the left when scrolling down. I also want my full name "Hong Hanh Dinh" to appear upon entering the website--not just the Hong part.
I've tried many things to fix it but I think I'm missing something.
Here is the beginning of HTML code:
<BODY>
<!--Begin about info--!>
<MAIN>
<section id="bg" data-speed="10" data-type="background">
<div id="plane">
<img src="http://www.locanto.info/classifieds/images/airplane.png">
</div>
<div id="parallax2">
<h2 id="center" class="parallax2">Hong</h2>
<h2 id="left" class="parallax2">Hanh</h2>
<h2 id="right" class="parallax2">Dinh</h2>
</div>
</section>
Here is my CSS:
#bg {
background-color: #FFFFFF;
background-size
}
#parallax2 {
height: 800px;
margin-bottom: 600px;
overflow: hidden;
padding-top: 200px;
}
/* Parallax Scrolling text */
#center.parallax2 {
font-size: 175px;
color: #CC3333;
opacity: 0.5;
text-align: center;
left: 200px;
padding: 0;
position: relative;
bottom: 100px;
}
#left.parallax2 {
color: #336699;
font-size: 200px;
text-align: left;
left: 400px;
opacity: 0.75;
overflow: hidden;
position: relative;
}
#right.parallax2 {
color: #C5C3DE;
font-size: 250px;
text-align: right;
opacity: 0.5;
overflow: hidden;
position: relative;
width: 1200px;
bottom: -300px;
}
This is the jQuery for the "Hong Hanh Dinh" scrolling:
$(document).ready(function() {
var controller = $.superscrollorama();
controller.addTween(
'#parallax2',
(new TimelineLite()).append([
TweenMax.fromTo($('#left.parallax2'), 1, {
css: {
top: 200
},
immediateRender: true
}, {
css: {
top: -900
}
}),
TweenMax.fromTo($('#right.parallax2'), 1, {
css: {
top: 500
},
immediateRender: true
}, {
css: {
top: -1800
}
})
]), 1000 // scroll duration of tween
);
});
This is the jQuery for the flying plane:
$(document).ready(function() {
$(window).scroll(function() {
console.log($(this).scrollTop());
$('#plane').css({
'width': $(this).scrollTop(),
'height': $(this).scrollTop()
});
});
});
Please let me know if my error is in the CSS or in the jQuery. Thank you!
I think you could fix this by adding width: 0; and overflow: hidden; to your div#plane. Otherwise, follow these steps:
Step 1:
Remove the img tag from the plane div, it is not needed. Add the id to the img tag itself.
<img id="plane" src="http://www.locanto.info/classifieds/images/airplane.png">
Step 2:
#plane{
position: fixed;
right: -WIDTH OF IMAGE;
}
Step 3:
$(document).ready(function() {
$(window).scroll(function() {
$('#plane').css({
'right': $(this).scrollTop() - WIDTH OF IMAGE,
});
});
});
Your name "Hanh Dinh" does exist when it loads but it is out of our range of sight, change this line:
css: {
top: 200
}
To a number like -400 and you'll see it'll appear on screen.
(That is for Hanh, for Dinh you'll need a larger number like -900.
I am currently building a layout where I have several 'triggers' inside a <nav><ul><li><a> element - each display a <div> which effectively sits 'behind' (z-index).
I need the divs (#showme and #showmetoo) to stay visible even if the user moves the mouse from the respective trigger (.thetrigger, .thenextrigger) - as the divs will contain content/links.
Additionally, when the user moves from one trigger to the next the displayed div should change.
<header>
<nav>
<ul>
<li><a class="thetrigger">Show Me That Thing</a></li>
<li><a class="thenexttrigger">Show Me That Thing</a></li>
</ul>
</nav>
<div id="showme">Yay, this thing</div>
<div id="showmetoo">and this thing</div>
</header>
CSS
header {
width: 100%;
height: 300px;
position: relative;
background: red;
z-index: 1;
}
nav {
position: absolute;
top: 10px;
left: 30px;
z-index: 3;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
padding: 30px;
}
.thetrigger, .thenexttrigger {
color: white;
}
#showme {
display: none;
background: blue;
color: white;
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 100%;
z-index: 2;
}
#showmetoo {
display: none;
background: green;
color: white;
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 100%;
z-index: 2;
}
jQuery
$(document).ready(function() {
$('.thetrigger').hover(function() {
$('#showme').fadeIn();
}, function() {
$('#showme').fadeOut();
});
$('.thenexttrigger').hover(function() {
$('#showmetoo').fadeIn();
}, function() {
$('#showmetoo').fadeOut();
});
});
http://jsfiddle.net/richardblyth/24bcs/
Demo
It sounds like you want the div to remain until the next trigger is hovered over.
You can use a lot less jQuery if you use a class for the triggers, and find their respective divs using data. With this you can add as many triggers + corresponding divs as you like without having to write more jQuery.
HTML
<header>
<nav>
<ul>
<li><a class="trigger" data-show="pane1">Show Me That Thing</a></li>
<li><a class="trigger" data-show="pane2">Show Me That Thing</a></li>
</ul>
</nav>
<div class="pane" data-show="pane1" id="showme">Yay, this thing</div>
<div class="pane" data-show="pane2" id="showmetoo">and this thing</div>
</header>
jQuery
$(function(){
$('.trigger').on('mouseover', function(){
// show the desired pane and hide its siblings
$('.pane[data-show="' + $(this).data('show') + '"]').fadeIn().siblings('.pane').fadeOut();
});
});
I think what you actually want, if I understand you question, is to hide the other #showme element when you hover into the trigger element associated with the #showmetoo element.
Like this:
$(document).ready(function() {
$('.thetrigger').hover(function() {
$('#showme').fadeIn();
$('#showmetoo').fadeOut();
});
$('.thenexttrigger').hover(function() {
$('#showmetoo').fadeIn();
$('#showme').fadeOut();
});
});
http://jsfiddle.net/4N26S/
I'm creating a navigation with a sliding bar/box that follows the mouse. I manage to animate the box I'm having trouble to move the box to follow the mouse. ex. if the mouse is in nav1 the box would slide to nav1 from wherever nav the box is currently place.
I made a example jsfiddle: http://jsfiddle.net/5Wrcr/
HTML
<div id="nav" style="margin: 0 auto; width: 500px; background: red;">
<div id="nav1"></div>
<div id="nav2"></div>
<div id="nav3"></div>
<div id="nav4"></div>
<div id="movers"></div>
</div>
CSS
#nav1, #nav2, #nav3, #nav4 {
width: 98px;
height: 48px;
border: thin solid black;
float: left;
}
#movers {
width: 100px;
height: 50px;
background: blue;
display: none;
position: absolute;
opacity: 0.3;
}
#nav:hover > #movers {
display: block;
}
JS
$(document).ready(function(){
$("#nav").hover(function(){
$('#movers').stop().animate({'margin-left': '300px'}, 500);
});
});
I don't know what animation showing that code. But if you want to use margin left animation then you can use:
$(document).ready(function()
{
$('#nav').hover(function()
{
$('#movers').animate({
margin-left: '300px'
});
});
});
not tested but should work...
Try this DEMO
$(document).ready(function(){
$("#nav div").hover(function(){
var a =$(this).position();
$('#movers').stop().animate({'margin-left': (a.left-29)+'px'},500);
});
});
Try this.
$("#nav div").hover(function(){
$('#movers').stop().animate({
'left': $(this).offset().left
}, 500);
});
UPDATED FIDDLE