How do I wrap my text within a sliding navigation panel? - javascript

I have a panel that slides up and down when you click on it. When the panel slides down, some navigation text appears. When the panel slides up, the text is supposed to slide up with it, but it isn't. The panel slides and the text stays on the back. It hides but doesn't slide with the panel.
HTML:
<div id="panel">
<ul class="nav">
home
proj
about
</ul>
</div>
<div id="flip"></div>
Javascript:
$('a.panel').click(function() {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
CSS:
#flip {
content: url("Some image to click on");
margin: auto;
z-index: 100;
}
#panel {
padding: 5px;
text-align: right;
background-color: #fff;
display: block;
z-index: 100;
opacity: 0.7;
/* position:fixed;
width: 100%; */
}

Sorry mate, I don't know jQuery, but very quickly you could try and implement this via CSS transitions.
Once you have set the transition as
transition: property duration timing-function delay, property duration timing-function delay;
e.g.
transition: height 0.5s ease-in, opacity 0.25 ease-in 0.5s;
when you hover over the #panel (pseudo class :hover ), you can set different values for the #panel height and opacity.
Don't forget vendor-specific versions of the transition property (like -webkit-, -o- and so on).

Related

show/hide dropdown menu on click, hide on scroll down

I want to make a div that will show when clicked on a link, and also close when clicked on that same link. That div also has to fade out when a user scrolls down, and disappear until the user clicks on the same link again. HTML:
var slidesource = document.getElementById('panel');
document.getElementById('dropnavbutton').onclick = function() {
slidesource.className = slidesource.className ? '' : 'fade';
}
.paneldrop {
display: none;
position: fixed;
top: 70px;
left: 48.2%;
transition: 0.3s linear 0s;
overflow: hidden;
z-index: 10;
}
.paneldrop li {
display: block;
margin-top: 20px;
transition: 0.3s linear 0s;
}
.manjipaneldrop {
background-color: black;
height: 150px;
width: 150px;
transition: 0.3s linear 0s;
}
div#panel {
opacity: 1;
transition: opacity 1s;
}
div#panel.fade {
opacity: 0;
}
.dropnav {
color: #3a3a57;
font-weight: bolder;
font-size: 14px;
font-family: 'Josefin Sans', sans-serif;
padding: 10px 20px;
background-color: #61b9f6;
border-radius: 15px;
}
<li class="dropdown">
<a id="dropnavbutton" class="linknav" onclick="dropdownmenu()">Explore</a>
<div class="paneldrop" id="panel">
<div class="littlepaneldrop">
<ul>
<li><a class="dropnav" href="#">Culture</a></li>
<li><a class="dropnav" href="#">History</a></li>
<li><a class="dropnav" href="#">Nature</a></li>
</ul>
</div>
</div>
</li>
JS (Fade out/in doesn't work, unlike basic show/hide) If anybody has any idea how to approach this problem: hide menu when scrolling down and it stays hidden until the user clicks on the link again.
Thank you
I would suggest adding a scroll listener to your page.
Here's some pseudo code logic:
ScrollListenerOnWindow() { // Fires whenever the page is scrolled
if (panelDrop is visible) {
// Make it not visible
}
}
And just keep your current show/hide click logic as is.
In my opinion, (since you are asking for an approach) using jQuery for user interactions like this, is the smartest thing to do almost all the time.
You can use jQuery's fadeToggle() method out of the box like this.
$("#dropnavbutton").click( function (){
$(".paneldrop").fadeToggle();
});
To make the panel fadeout when scrolling,
$(window).on('scroll', function(e){
var scroll = $(window).scrollTop();
if(scroll > 200){
$(".paneldrop").fadeOut();
}
});

Have an Image Center in the Global Window / Viewport when clicked (JS or CSS)

I'd like to have it when I click an image that it centers in the viewport (like a lightbox effect).
I've set up a pen here http://codepen.io/emilychews/pen/OpXKGd and tried work out the best way to do this but I seem to have hit a wall.
I've included multiple elements in the demo because I'd like it so it uses the window as it's centering container, not just the parent element. I'll be using this on a wordpress site so saying just add a wrapper isn't viable for me.
Also if you look at the demo, at the moment the elements scale up smoothly and i'd like to have it align centrally in the window object as part of the transition when it scales up.
I appreciate this may only be possible with JS / jQuery and i have included some in my example.
My code for quick reference is:
HTML
<div class="wrapper">
<div class="holder image1">Image 1</div>
<div class="holder image2">Image 2</div>
<div class="holder image3">Image 3</div>
<div class="holder image4">Image 4</div>
<div class="holder image5">Image 5</div>
</div>
CSS:
.holder {
width: 20vw;
height: 400px;
background: red;
position: relative;
display: inline-block;
margin-bottom: 5px;
transition: all .75s ease-out;
}
// ======== THIS IS THE CLASS THAT IS ADDED WITH JQUERY
.fullsize {
background: blue;
z-index: 2;
position: relative;
transform: scale(1.75);
transform-origin: center center;
transition: all .75s ease-out;
}
jQuery:
$(document).ready (function(){
$('.holder').click(function() {
$( this ).toggleClass('fullsize');
$( this ).css('z-index', '+=1');
});
});
Any help / solution would be amazing.
Emily :)
I believe what you're looking for is to set a left property on the full size image. Note that you will also need to use position: absolute in order to offset each element by the same amount (centralising them).
.fullsize {
position: absolute;
left: 40vw;
}
I've created an updated CodePen showcasing this here.
Note that you also may want to give them a higher z-index, as the .fullsize elements are sometimes obscured behind the regular images.
Hope this helps! :)
Try this. It's a little jumpy and needs some fiddling, but it gives you what you want.
Change .holder to:
.holder {
width: 20vw;
height: 100px;
background: red;
position: static;
display: inline-block;
margin-bottom: 5px;
transition: all .75s ease-out;
z-index:0;
transform-origin: top left;
}
Change .fullsize to:
.holder.fullsize {
background: blue;
z-index: 200;
transform: scale(1.75);
transition: all .75s ease-out;
position:absolute;
}
and change your JQuery to
$(document).ready (function(){
$('.holder').click(function() {
var $scaleFactor = 1.75;
$( this ).toggleClass('fullsize');
var $winWidth = $(window).width();
var $myWidth = $(this).width();
var $newWidth = $myWidth*$scaleFactor;
var $left = $winWidth/2-$newWidth/2;
$(".holder").text($left);
$(this).animate({
left:$left+"px"
},200);
});
});
Setting the scaling in the JQuery instead might give you a smoother transition.

Make an overlay on mouse over

I have a trouble with an effect I want to achieve.
When I put the mouse over this element :
<div class="process">
<h3 class="text-center">Process</h3>
<ul class="row text-center list-inline wowload bounceInUp animated" style="visibility: visible; animation-name: bounceInUp;">
<li data-id="Reflexion">
<span><i class="fa fa-flask"></i><b>Reflexion</b></span>
</li>
</ul>
</div>
I want to have an overlay over all the page and over this overlay my <ul>...</ul>
I have tried with z-index and position but it doesn't work, my overlay is always over all the page and over the <ul>...</ul>
Here is the style of <ul></ul> and .overlay
.process ul li{
width: 10em;
height: 10em;
border: 1px solid #CEEBF0;
padding: 0;
border-radius: 50%;
margin: 0 1.25em;
line-height: 13.5em;
color: #21ABCA;
-webkit-transition: border-color 0.5s ease-in; /* Safari */
-moz-transition: border-color 0.5s ease-in; /* Firefox */
transition: border-color 0.5s ease-in;
}
.process ul li span{line-height: 2em;display: inline-block;font-weight: 300;}
.process ul li span i{font-size: 3em;}
.process ul li span b{display: block;font-size: 1em;font-weight: 300;}
.process ul li:hover {
border-color:#3498db;
background-color: rgba(52, 152, 219,1.0);
}
.overlay {
position: fixed;
z-index: 50;
background-color: red;
height: 100vh;
width: 100vw;
}
Here is the script I'm using to listen mouse event :
$(".process ul li").on({
mouseenter : function() {
$('#overlay').addClass('overlay');
},
mouseleave : function() {
$('#overlay').removeClass('overlay');
},
});
Update
There is a Fiddle that show better than words my trouble
When I make overlays I usually use absolute positioning to get it right. Without knowing what effect you want specifically, here's a generic demo of how an overlay might work.
fiddle
By setting the overlay's position to absolute, and all of its positional attributes to 0, it covers the box it's bound to completely without having to worry about setting widths or heights.
Hope this helps!
EDIT
I know you've solved the issue, but for those who may look later, here's a link to a fiddle wherein the issue has been solved.
fiddle
The Z-index property only works when both elements are positioned manually. Make sure the list has position: relative or position: absolute too, not just the overlay. Then you need to give a higer value to the z-index of the list.
EDIT: try adding this to your code:
.process {
position: relative;
z-index: 100;
}
You'll have to actually play with Z-index to make sure only the hovered panel is in front of the overlay if that's what you want, but this proves that you need to set a position attribute on what you want to be manually z-positioned.

div fade-in when window is scrolled a certain distance from the top

I have the following script in my <head> tag which animates my div when the window is 150px from the bottom. I am not sure how to alter it so it animates when a certain distance from the top.
<script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()-150){
isShown = true;
$('.footer-btn').fadeIn(500);
}else{
$('.footer-btn').fadeOut(500);
}
});
</script>
Here's a jQuery script that I use in a site to set the animation from the top.
Change the value of offset() to control the fade-in activation position.
jQuery(document).ready(function($) {
// browser window scroll position (in pixels) where button will appear
// adjust this number to select when your button appears on scroll-down
var offset = 200,
// duration of the animation (in ms)
scroll_top_duration = 700,
// bind with the button link
$animation = $('.animation');
// display or hide the button
$(window).scroll(function() {
($(this).scrollTop() > offset) ? $animation.addClass('visible'):
$animation.removeClass('visible');
});
});
#container {
height: 800px;
}
#button {
border: 1px solid black;
padding: 10px;
width: 100px;
text-align: center;
background-color: chartreuse;
}
.animation {
position: fixed;
bottom: 25px;
right: 25px;
opacity: 0;
transition: opacity .3s 0s, visibility 0s .3s;
}
.visible {
visibility: visible; /* the button becomes visible */
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p>SCROLL DOWN</p>
<a id="button" class="animation">BUTTON</a>
</div>
http://jsfiddle.net/zmz6g8kh/4/

Fullscreen black bg with opacity fadeIn/fadeOut

I´m trying to make a full screen black bg with opacity, it appears smoothly when the mouse enters to the body and fade out smoothly when the user leaves the body of the page (which is the whole nav content screen).
I´m trying doing it with this script:
$("body").bind('mouseover', function() {
$("#bg_black").fadeIn("slow", 0.33);
});
$("body").bind('mouseleave', function() {
$("#bg_black").fadeOut();
});
with this css:
#bg_black{
position: absolute;
z-index: 1;
background: black;
opacity: 0.5;
width: 100%;
height: 100%;
display: none;
}
But the fadeout doesn´t works and also the fadeIn is very quickly and heavy.
Any ideas to achieve it, to make it also IE compatible? (not using css3)
I got this working by adding a div to body.
<div id="bg"></div>
styled it with css
#bg {
// so if user scrolls it doesn't matter
position: fixed;
background-color: black;
// expand to height & width
height: 100%;
width: 100%;
margin: 0;
padding:0;
// hidden initially
opacity: 0;
}
body {
background-color: white;
}
javascript to fadeIn and fadeOut
$("#bg").hover(function() {
// should user hover in and out quickly stop animations
$(this).stop().animate({ opacity: 1 }, 1000);
}, function( ) {
// should user hover in and out quickly stop animations
$(this).stop().animate({ opacity: 0 }, 1000);
});
Demo here
Try with this one:
$(function(){
$("body").hover(function() {
$("#bg_black").fadeIn("slow");
},function(){
$("#bg_black").fadeOut("slow");
});
});

Categories