Off-canvas / viewport navigation slide in with jQuery - javascript

I am trying to make an off-canvas navigation that slides in from the left to take up 20% of the page while the content slides to the left ( some of it will be off canvas ) taking up 80% of the page.
This has been seen in Google's mobile site and Facebook's mobile app.
Here is a version using CSS3 Transitions: http://codepen.io/chriscoyier/pen/umEgv
Except, I am trying to make one that relies only on JQuery / Javascript and not CSS Transitions at all.
Below is a link to what I have so far.
I don't understand why it is not working. The width of the #main-nav should be toggled every time .menu-button is clicked; thus creating a sliding tot he right effect.
Can someone please help me fix this and / or help me with that I am trying to achieve.
Here is what I have so far: http://pastebin.com/0X7uT7tC

Changed width to 20% in css and then hide this on load.
HERE IS FIDDLE
jQuery
$('#main-nav').hide();
$('.menu-button').click(function () {
$('#main-nav').animate({
width: 'toggle'
});
});
CSS
.main-nav {
position: fixed;
top: 0;
width: 20%;
height: 100%;
background: #3B3B3B;
overflow: hidden;
}

Related

React JS: How to implement scroll bar in one particular div?

I am creating a movie app. I am facing some problem on implementing the scroll bar.
While scrolling I want the header div to remain where it is. I don't want it to disappear while scrolling down. But the div located vertically bottom to the header must be scrollable.
This can be found in amazon.in
On searching Harry Potter, this page loads
On scrolling down, you can see that the header remains fixed.
How can I implement this in React?? Please share the necessary code/documentation. Thanks!
This actually has nothing to do with React. This has to do with basic HTML and CSS knowledge.
Here is my preferred method:
<div id="navbar">...</div>
<div id="content">...</div>
#navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
}
#content {
margin-top: /* size of navbar */ 50px;
}
You can add scroll bar in a div by using overflow property with some height.
CSS:
float:left;
width:1000px;
overflow-y: auto;
height: 100px;
HTML:
<div class="ScrollStyle">
Scrollbar Test!<br/>
Scrollbar Test!<br/>
</div>

Can't get Carousel to be visible under navbar in Bootstrap (v3.3.4) on IE

I'm using Twitter Bootstrap version 3.3.4 (getbootstrap.com) as the CSS/HTML framework for my Wordpress site.
I have a full-width carousel at the top of my site. I have then added a nav bar which I have offset from the top of the screen by about 40px so that the nav bar runs over the carousel with the slides rolling underneath it (ie: the slides are visible at the top of the screen).
It's working correctly in Firefox, Safari (desktop & iPhone) and Chrome (desktop & iPhone), but I can't get it to work in IE8-10. I think I must have to change the position or float CSS attributes of some of the carousel elements, but just can't get it to work.
Here's a comparison image. The top of the left side is good, the top right is the IE broken version: multicomsolutions.com/wp-content/uploads/2015/03/MultiFixIE.jpg
Here's my site: multicomsolutions.com
Question: Can anyone tell me how to fix my code so this feature works in Internet Explorer?
Thank you, I appreciate any help/advice.
Try to add this CSS
.carousel-inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}

How to hide scrollbars using jquery and scrolling divs without disabling rest of page?

See my problem here:
http://jsfiddle.net/nM6DF/
I want to have divs scroll on and off the screen using jquery, but I do not want any horizontal scrollbars. The only way I know how to do that is to make a container and do overflow:hidden. Here is my container CSS
#container {
top:0px;
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
I had to make the width and height 100% so that no matter what I scrolled across it would not be cut off.
When I make this container then everything behind it becomes unclickable and pretty much disabled. I want the page behind the scrolling divs to still behave normally where I can click and interact with it. How can I achieve that?

How to Show Div During Load with Pace.JS

I'm using Pace.JS to display a loader anytime I make AJAX calls to a REST service. Pace is working perfectly here except, the page is still interactive while the loader is spinning. I really don't want the page to be interactive while I'm trying to load data.
To fix this, I want to SHOW a div (white with a high opacity to simulate a modal) with a Z-Index of 1999 covering the entire page (width/height = 100%) while the Pace.JS loading animation is active (at Z-Index 2000 so it's sitting on top of the modal), and hide the div when the Pace.JS loading animation is complete to limit what a user can interact with while I'm loading data.
I've seen the events (start, restart, hide) on the Pace.JS hubspot homepage (http://github.hubspot.com/pace/) but there are no examples of actually using it and everything I've tried hasn't worked.
Can someone post an example of how to do what I'm looking for? It would really, really help me. Thanks!
You can achieve your goal with the following:
CSS:
div.paceDiv {
position: absolute;
width: 100%;
height: 100%;
...
display: none;
}
JS:
Pace.on("start", function(){
$("div.paceDiv").show();
});
Pace.on("done", function(){
$("div.paceDiv").hide();
});
Hope it's no too late though!
This is a old post, but i've fixed this just with css
pace-running::after {
position: absolute;
background-color: #ffffff;
opacity: 0.1;
top:0;
left: 0;
right: 0;
width: 100%;
height: 100%;
content: ' ',
z-index: 9998;}

Scrolling div tags on touch?

Ok, I have got a number div tags, within a section tag and on selected menu button clicks scrolls though to that selected div area.
Each div area has a translate3d css, move each div out one other the other. Then the code fires on a 'click' event to move the div tag into the browser window.
CSS code
#Area1 {
position: absolute;
top: 0px;
z-index: 10;
border-left:10px solid #FFFFFF;
width: 100%;
height: 100%;
padding-left: 10%;
padding-right: 10%;
background-color: #66cc33;
-moz-transform:translate3d(100%,0%,0px) skew(16deg, 0);
-webkit-transform: translate3d(100%,0%,0px) skew(16deg, 0);
}
Area2 code would be the same, but set at 200%. This div tag is set within a div wrapper set with position relative on it.
Jquery code the moves the div
$( "#AreaOne" ).animate({left: "0%"}, 1000, 'easeInOutQuad');
$( "#AreaTwo" ).delay(100).animate({left: "0%"}, 1000, 'easeInOutQuad');
This all works fine. No problems at all. But I want to be able to swipe through these divs as well. But is does not do this on my iphone I am testing on. Now I think this is because I use an click event function? I don't really want to change the code I have made, mainly because it works fine.
Now I tried using touchwipe on the div, but that did not work, not sure if I call it in right or not :).
Just wanted to know if there was a quick a simple way of making a div scroll on touch?
Many thanks,
Glenn.
PS. Sorry if I have not explained myself well. If its not clear, please let me know and I will change my question.
Have you tried adding the web-kit specific declaration?
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch; /* momentum scrolling, iOS Safari only*/
More depth here: http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
Also see the documentation for -webkit-overflow-scrolling.

Categories

Resources