Currently using foundation 6 Off canvas with basic html here
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
Menu off canv
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="top-bar-container" data-sticky-container>
<div class="sticky" data-options="marginTop:0;" data-sticky data-sticky-on="small" style="width:100%;">
<div class="top-bar">
<div class="row column">
columns content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The Problem here is when user scrolls and then click on offcanvas menu they get brought to the top ( same thing as foundation's doc ) and when they scroll down again the sticky menu acts really funny.
also the offcanvas menu doesn't stick to the side as the user scrolls, which is what the doc on foundation does as well.
I noticed when toggled there is a is-open class on the big wrapper that does a css translate x
this is what is breaking the sticky from position absolute.
when I switched that class to margin-left: -250px; everything works again.
I was looking on the web but couldn't find anything that is related and was wondering if it is just my html structure being incorect or is that really a bug.
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right" data-force-top="false">
this prevents scroll to top on the button action.
.off-canvas.position-right { position:fixed; right:-250px; top:0; z-index:1; transition:0.5s ease; }
.is-open-right .off-canvas.position-right { right:-0px; }
.admin-bar .off-canvas.position-right { top:32px; }
.off-canvas { background-color: transparent; }
.is-open-right { -webkit-transform: initial; transform: initial; margin-left: -250px; }
.off-canvas-wrapper-inner { transition: margin 0.5s ease; }
.sticky.is-stuck { left:0px !important; transition:0.5s; }
.is-open-right .sticky.is-stuck { left:-250px !important; }
my css restructure to use the good old margin negative.
These changes makes it look just like how it acts before.
Related
I am a novice programmer so I apologise if this does not make sense.
I am developing a website and I am trying to implement a hamburger menu and a close button to exit the hamburger menu. The javascript function is working fine on one page's class attribute but not on the other page's same class attribute.
Here is my code
var close_popup = document.querySelector('.cancel-icon');
close_popup.addEventListener('click', function(){
document.getElementById('toggle').checked = false;
});
Here is my HTML code
<label class="Hamburger" for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<!-- Navigation Bar -->
<nav class="navbar">
<div class="cancel-icon" ><span>X</span></div>
<a class="navlink1" href="Profile.html">Profile</a>
<a class="navlink2" href="Portfolio.html">Portfolio</a>
<a class="navlink3" href="Contact.html">Contact</a>
</nav>
</div>
Here is the CSS
#toggle:checked + .navbar{
top: -12vh;
visibility: visible;
min-height: 100vh;
background-color: #3A3B3C;
transform: scale(1.5);
transition: all 0.5s ease-in-out;
}
this code is making sure if the checkbox for the hamburger menu is checked then make it false. So far it works on one page but not on the others. What am I doing wrong. Thanks
Your javascript is working properly. Clicking the ".cancel-icon" does close the opened menu. The main problem is that the ".cancel-icon" element is hidden when the menu is open which prevents you from being able to click the "X" icon.
Here is an updated example where I have rearranged the HTML and added some additional CSS rules in order to keep the "X" icon visible when the menu is open. The CSS positioning can be adjusted as needed.
var close_popup = document.querySelector('.cancel-icon');
close_popup.addEventListener('click', function() {
document.getElementById('toggle').checked = false;
});
#toggle:checked+.navbar {
top: -12vh;
visibility: visible;
min-height: 100vh;
background-color: #3A3B3C;
transform: scale(1.5);
transition: all 0.5s ease-in-out;
}
.cancel-icon {
z-index: 10;
position: absolute;
right: 65px;
top: 5px;
}
.cancel-icon:hover {
cursor: pointer;
}
<label class="Hamburger" for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<!-- Navigation Bar -->
<nav class="navbar">
<a class="navlink1" href="Profile.html">Profile</a>
<a class="navlink2" href="Portfolio.html">Portfolio</a>
<a class="navlink3" href="Contact.html">Contact</a>
</nav>
<div class="cancel-icon"><span>X</span></div>
I am using onclick method on a link in order to display a div. However, it doesn't slide, it simply appears. How do I make it appear with a slide effect without using jQuery. The reason I don't want to use jQuery is because I want the page to load as fast as possible.
function view() {
document.getElementById('topmenu').setAttribute('style', 'display:block');
}
#topbar {
background-color: yellow;
overflow: auto;
}
#topmenu {
display: none;
}
<header>
<div id="topbar">
<img src="/images/santorini-wedding-photographer-logo.png" style="float: left;">
<span style="float: right;">MENU</span>
</div>
<div id="topmenu">
some text here
</div>
</header>
It can be done using Javascript
setInterval() and clearInterval() functions.
See code samples here
JavaScript slidedown without jQuery
You can't apply transition to display property - you can transition scale instead - see demo below:
function view() {
// add a class to show the element
document.getElementById('topmenu').classList.add('show');
}
#topbar {
background-color: yellow;
overflow: auto;
}
#topmenu {
transform: scaleY(0); /* scale to zero vertically */
transform-origin: top; /* set origin to top */
overflow: hidden;
transition: transform 1s; /* apply transition to only scale */
}
#topmenu.show {
transform: scaleY(1); /* scale to full height */
}
<header>
<div id="topbar">
<img src="https://via.placeholder.com/50" style="float: left;">
<span style="float: right;">MENU</span>
</div>
<div id="topmenu">
some text here
</div>
</header>
I have a navigation function that has two parts, the first function don't work but the 2nd does.
https://jsfiddle.net/f7Lnthm1/
if you scroll down you will see the navigation fade in on scroll.. what i am trying to accomplish is have the same links show with no background color, and then when you scroll down the links scroll up with the web site then the same links fade in with the black navbar.
<div id="menu" style="display: block;">Top Bar</div>
<header id="header-active">
<ul>
<li>Nav links</li>
</ul>
</header>
<div id="hero"></div>
<div style="height: 600px;">section 1</div>
Jquery
(function($) {
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 300) {
$('#header-active').fadeIn(500);
} else {
$('#header-active').fadeOut(500);
}
});
});
})(jQuery);
Do you mean something like this?
https://jsfiddle.net/f7Lnthm1/3/
Basically, I split up the CSS for #header and the active version of it. You can use CSS for the animations (better to do this than JQuery anyway.
CSS:
#header {
width:100%;
height:75px;
color: #000;
z-index:9999;
background: none;
}
#header.active {
position:fixed;
top:0px;
background:#000;
color: #fff;
transition: all ease-in-out 500ms;
}
Then in the JS:
if ($(this).scrollTop() > 200) {
$('#header').addClass('active');
} else {
$('#header').removeClass('active');
}
That obviously pushes the aqua box down, if you want it just to match, setting the background color of #header to background: aqua instead of none like I've done would work: https://jsfiddle.net/f7Lnthm1/6/ I also removed the margin-top from the ul inside #header so the aqua butts up against the red.
If you want it to sit on top of the aqua box, then you would want to set the position of #header to absolute: https://jsfiddle.net/f7Lnthm1/5/
I have searched for about 2 hours now and I just can't get a hold of this.
I am using bootstrap and I want to have three columns with "col-xs-6" placed next to each other. However, when I click the button, I want the outer column that is visible to collapse in and the column on the other side to show up. The blue column in the middle should not change at all, just the visibility of the outer columns.
I know I could just use display: none but this would not look as smooth as a CSS3 Transition.
The fade Out works perfectly fine, but instead of fading in, the div will just be at 50% width right after the display property has set.
Here is a fiddle:
Fiddle
And here is the Code:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 red fadeIn">
Hello i am the red div
</div>
<div class="col-xs-6 blue">
Hello i am the blue div
</div>
<div class="col-xs-6 green fadeOut is-out">
Hello i am the green div
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="pull-right">
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-plus"></span> TOGGLE
</button>
</div>
</div>
</div>
</div>
JS:
$('.btn').click(function(){
var eleForFadeIn;
var eleForFadeOut;
if ($('.green').hasClass('is-out')){
eleForFadeIn = $('.green');
eleForFadeOut = $('.red');
}
else {
eleForFadeIn = $('.red');
eleForFadeOut = $('.green');
}
eleForFadeIn.addClass('fadeIn');
eleForFadeIn.removeClass('fadeOut');
eleForFadeOut.addClass('fadeOut');
eleForFadeOut.removeClass('fadeIn');
setTimeout(function() { doFadeIn(eleForFadeIn); }, 150);
setTimeout(function() { doFadeOut(eleForFadeOut); }, 1500);
});
function doFadeIn(element){
element.removeClass('is-out');
}
function doFadeOut(element){
element.addClass('is-out');
}
CSS:
.red{
background-color: red;
height: 250px;
-webkit-transition: width 2s;
transition: width 2s;
}
.blue{
background-color: blue;
height: 250px;
}
.green{
background-color: green;
height: 250px;
-webkit-transition: width 2s;
transition: width 2s;
}
.fadeOut{
width: 0px;
}
.fadeIn{
width: 50%;
}
.is-out{
display: none;
}
Thanks in Advance!
Edit: The timeout functions are used because i want the display property to be none at the end of the transition. Yes i tried to build in the transition eventlistener but it did not work... So if you know how to implement int i would appreciate any suggestions :-)
Edit2: Trying to express myself a bit more cleary about my goals.
display:none can't really be animated and that is where your problem lies. Change it to this and all should be well.
.is-out {
visibility: hidden;
padding: 0;
}
The JSFiddle you show doesn't produce three adjacent columns. Regardless, the reason the column takes up 50% of the width after the fade out is because it has the class col-xs-6. This class uses Bootstrap's grid system to size the element to 6/12 == 1/2 the available horizontal space.
If you want three adjacent columns, I suggest using col-xs-4 since 12/3 == 4. After fading out the outer two columns. You should adjust the class of the remaining one to be col-xs-12 instead of col-xs-4 so it will take up the entire horizontal width.
I'm currently building a responsive site and i need to have a hidden div which will slide in from the left after clicking a button in the the left side bar. Once this button has been pressed the side bar will be pushed across from the sliding content (Sliding from the left) and overlay the existing content or push across the content in the right hand side.
This is where the problem lies as it's a responsive site. I would like the sidebar in the 'siteInnerLeft' div to be pushed to the right hand side of the page when the new div slides in. So after the content has sliden in the previous content is no longer visible until the sliding content has slid back out.
Here is a my JSFiddle - http://jsfiddle.net/76xvB/2/
Hopefuly you can see what i'm trying to acheive. I've manaed to get it working until a point but the issue I have is the content sliding in is fixed and I don't want it to be fixed as there is more content to view and this removes the users ability to scroll.
I understand that 'position fixed' takes the element out of the document flow. So is this going to stop me acheiving what I want? If so, is there another way of doing it.
NOTE: The real site will have percentages not pixels because of it being responsive, this is a broken down version.
My current code:
HTML
<div id="siteWrapper">
<div id="siteInnerLeft">
<div id="homeNavLink">
<p>Click me</p>
</div>
</div>
<div id="siteInnerRight">
<div class="pushmenu-push">
<p>Current page content</p>
</div>
<div class="pushmenu pushmenu-left">
<p>Content to slide in from the left</p>
</div>
<div id="footer">
<p>This is my footer and this content always needs to be showing and can't be hidden behind the fixed div</p>
</div>
</div>
</div>
CSS
#siteWrapper{
max-width:500px;
margin:0 auto;
width:100%;
}
#siteInnerLeft{
background-color:green;
width:100px;
float:left;
position:fixed; /* Sidebar that needs to be fixed*/
}
#siteInnerRight{
width: 400px;
background-color:yellow;
float:left;
margin-left: 100px; /*Compensates for fixed header width */
}
.pushmenu {
background: #e9e8e0;
font-family: georgia,times news roman, times, serif;
position: fixed;
width:400px;
height: 100%;
top: 0;
z-index: 1000;
}
.pushmenu-push{
left: 0;
overflow-x: hidden;
position: relative;
width: 100%;
}
.pushmenu-left{
left:-400px;
}
.pushmenu-left.pushmenu-open {
left: 0px;
/* box-shadow: 5px 5px 5px #d9d8d0;*/
}
.pushmenu, .pushmenu-push {
transition: all 0.3s ease 0s;
}
#footer{
width:100%;
clear:both;
background-color:red;
}
jQuery
$menuLeft = $('.pushmenu-left');
$nav_list = $('#homeNavLink');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
Any suggestions would be most appreciated.
Thanks.
On completion of the transition, change the position of the sidebar so that it is not longer fixed. The answer on the following link breaks it down pretty well and has quality references:
Callback when CSS3 transition finishes
If the side-bar is fixed, you could create a scroll-bar inside for the content, so the text can be viewable; you could do this by adding overflow-y: auto; in the .pushmenucss class.
Another way would be to set the sidebar as position: absolute; and then dynamically change the top property from javascript when the user hits the sidebar's bottom.