I've been trying to get my off-canvas menu working by scrolling particularly in landscape mode because the list itself runs longer than the size of the screen. This menu is shown below 768px for tablet and mobile.
To clarify, the menu items go longer then the screen space and I'm trying to get it to scroll by doing multiple methods, such as overflow-y: scroll, -webkit-overflow-scrolling: touch and more (all works in desktop browser at phone sizes when I was messing in the inspector).
I've been trying everything to inspect the elements and get the menu to scroll when needed and not the background (website/page behind menu). Here is some of my markup and styling, I'm also including a live link to inspect as its way easier than pasting everything in here. Any help is kindly appreciated!
LIVE LINK
<body class="cbp-spmenu-push">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left mobile" id="cbp-spmenu-s1">
<a class="m-storyLink mobile-nav-link" href="">1</a>
2
3
3
Contact Us
4
<ul class="mobile-social">
<li></li>
<li></li>
<li></li>
</ul>
</nav>
<header id="header" class="header headroom headroom--pinned">
<!-- mobile header -->
<div class="mobile">
<button id="showLeftPush">MENU</button>
<img src="img/home/logo.png" alt="#"
</div>
And CSS
.cbp-spmenu-push-toright {
left: 240px!important;
}
.cbp-spmenu-push-toright.cbp-spmenu-push {
overflow: hidden;
position: fixed;
}
/* General styles push menu*/
.cbp-spmenu {
background-color: #000;
position: fixed;
font-family: FranklinGothicLTCom-BkCm, "Arial Narrow", sans-serif;
padding: 110px 0 0 0;
}
.mobile-nav-link {
background-position: 10px center;
}
/* Orientation-dependent styles for the content of the menu */
.cbp-spmenu-vertical {
width: 240px;
min-height: 300px;
height: 100%;
top: 0;
z-index: 1000;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch;
}
.cbp-spmenu-left {
left: -240px;
}
.cbp-spmenu-right {
right: -240px;
}
.cbp-spmenu-left.cbp-spmenu-open {
left: 0px;
}
.cbp-spmenu-right.cbp-spmenu-open {
right: 0px;
}
/* Horizontal menu that slides from the top or bottom */
.cbp-spmenu-top {
top: -150px;
}
.cbp-spmenu-bottom {
bottom: -150px;
}
.cbp-spmenu-top.cbp-spmenu-open {
top: 0px;
}
.cbp-spmenu-bottom.cbp-spmenu-open {
bottom: 0px;
}
/* Push classes applied to the body */
.cbp-spmenu-push {
position: relative;
left: 0;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
LIVE LINK: http://bit.ly/1eGCShX
cbp-spmenu has a min-height of 550px. This is what is limiting your ability to scroll it in smaller resolutions.
Remove the min-height and you should be fine. Of course, do it as a media query, so it only is in effect on mobile devices.
-----------update----------------
not sure if you just changed it, but I took another look and now I don't see the min-height, but adding overflow:auto to the same cbp-spmenu element also makes it scroll.
Related
I view this code sample to enlarge an image.
I try used it in bootstrap3 Slide Carousel.
I try add 'enlarge' class bootstrap3 slide carousel items.:
<div class="item active">
<div class="item-item col-md-3 col-sm-4">
<a href="#">
<img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive enlarge">
</a>
</div>
</div>
css:
.enlarge {
width: 100%;
float: left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.enlarge:hover {
width: 120%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
cursor: pointer;
}
you can see change here in jsfiddle.
but it can not enlarge.how can I do it?
The issue is that, if you want to increase the width of the image to suppose 120%, the increase will work perfectly fine. But bootstrap.min.css has the following style properties for img element.
CSS:
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Thus you are not able to scale above 100% if you add the class.
.carousel .img-responsive{
max-width:none;
}
It will override the CSS in bootstrap, if you any reason you are not able to view the changes you can add !important, which will override on priority.
.carousel .img-responsive{
max-width:none !important;
}
This will apply to all the images under the carousels.
If you want to specify only for one carousel, you can specify the ID of the carousel, like
#myCarousel .img-responsive{
max-width:none;
}
Here is a working DEMO.
JSFiddle Demo
Borrowing from a number of examples I created a bootstrap navbar that is affixed to the top of the page, upon scrolling the navbar plus logo image shrink from 100 px to 50 px in height, working perfectly on a desktop pc, normal width browser.
With a smaller mobile device less than 767px I set the parameter to enable the hamburger menu and simple bootstrap dropdown menu.
With the browser very narrow or on a small device if you first access the page and are at the very top you click on the hamburger icon and the menu appears at about 50 px which is in the middle of the height of the logo (100px tall). Within a fraction of a second it jumps to under the logo at 100px where it should. It is this awkward short-lived behavior that I wish to eliminate. It also happens when you collapse the menu. Otherwise it works as planned.
My javascript:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('img').addClass('shrink');
$('nav').addClass('shrink');
} else {
$('img').removeClass('shrink');
$('nav').removeClass('shrink');
}
});
The relevant CSS:
body {
padding-top: 100px;
}
.navbar {
min-height: 101px; /* to get the 100px tall image contained within navbar */
}
.navbar.shrink {
min-height: 51px;
background: white;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
img {
max-height: 100px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
img.shrink {
max-height: 50px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/* adjust top position of menu on small device due to larger logo */
#media (max-width: 767px) {
.collapse { margin-top: 50px; }
nav.navbar.shrink .collapse {
margin-top: 0px;
-webkit-transition: all 0.8s ease;
transition: all 0.8s ease;
}
}
See demo:
http://www.dottedi.biz/demo/code/public/navbars/shrinking-navbar+logo-scroll.html
you are targeting wrong selector here
instead
.collapse {
margin-top: 50px;
}
in your media query, apply
.navbar:not(.shrink) .navbar-collapse {
margin-top: 50px;
}
and this will work for you
see attached img https://i.stack.imgur.com/uAVQr.jpg
When I click a div, I want a second div to expand/collapse. That is done using JS, HTML, and CSS. Now I want the CSS transition to animate.
Right now all I get is a jumping expansion and either a scroll (Edge) or a jump after a wait (Chrome, Opera, Firefox).
I've tried to set height to 1px instead of 0px, but that doesn't change anything.
function growDiv(id) {
var ele = document.getElementById(id);
if (ele.style.height == '100%') {
ele.style.height = '0px';
} else {
ele.style.height = '100%';
}
}
.main {
font-weight: 700;
overflow: hidden;
cursor: pointer;
}
.secondary {
-webkit-transition: height .5s ease;
-moz-transition: height .5s ease;
-ms-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
overflow: hidden;
padding-left: 20px;
height: 0px;
cursor: pointer;
}
<div class="main" onclick="growDiv('expandable')">
Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')">
number1,
<br>number2,
<br>number3,
<br>number4.
</div>
Codepen behaves as I know the full site does, so for good measure; here's the codepen: http://codepen.io/anon/pen/ezJQjM
From http://css3.bradshawenterprises.com/animating_height/
Instead of using 100%, just "let it" get the auto value by not restraining it.
NOTE: 100px is just "any number bigger than the actual size"
function growDiv(id) {
var ele = document.getElementById(id);
if (ele.style.maxHeight != '0vh') {
ele.style.maxHeight = '0vh';
} else {
ele.style.maxHeight = "100vh";
}
}
.main {
font-weight: 700;
overflow: hidden;
cursor: pointer;
}
.secondary {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
overflow: hidden;
padding-left: 20px;
cursor: pointer;
}
<div class="main" onclick="growDiv('expandable')">
Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')" style="max-height: 0vh;">
number1,
<br>number2,
<br>number3,
<br>number4.
</div>
EDIT: Changed everything to VH (viewport height) so it will never grow bigger than 100% of the screen height and will adapt to the max height of any screen.
Also switched the "style="max-height: 0vh;" to the element itself instead of the class, so you could be unsetting it with ele.style if needed (otherwise you will need to set a new value to override the class.
Are you willing to use jQuery? It offers some cool animation possibilities, and may accomplish what you are trying to do. This is just a possible alternative to your approach.
Check out my fiddle here:
https://jsfiddle.net/3mo28z1t/11/
<div class="main" id="clicker">
Expand
</div>
<div class="secondary" id="expandable">
number1, <br> number2, <br> number3, <br> number4.
</div>
<script>
$( document ).ready(function() {
$(".secondary").hide();
$(document).ready(
function(){
$("#clicker").click(function () {
$(".secondary").toggle("slow");
});
});
});
</script>
The problem is caused by switching units of measure, so from pixels to percent. I would probable do it a little differently though.
growDiv = function(id) {
document.getElementById(id).classList.toggle('expanded');
}
.main {
font-weight: 700;
overflow: hidden;
cursor: pointer;
}
.secondary {
transition: max-height .5s ease;
overflow: hidden;
padding-left: 20px;
max-height: 0;
cursor: pointer;
}
.secondary.expanded {
height: 100%;
max-height: 100px;
}
<div class="main" onclick="growDiv('expandable')">
Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')">
number1,
<br>number2,
<br>number3,
<br>number4.
</div>
You'll notice the JS is a bit simpler, and it relies more on the CSS.
I've made a site where the first page of my site is a youtube video, I want the navigationbar to be hidden until you hover over it. Once you go to another site I want the navigation bar to be visible at all times.
As for now the navigationbar dissapears when you hover over it on other pages of the site.
This is my code for the navigation bar:
html:
<div class="navbar">
<nav>
<ul>
<span class="toc-button" id="Block1-button">front page</span>
<span class="toc-button" id="Block2-button">2nd page</span>
<span class="toc-button" id="Block3-button">3rd page</span>
<span class="toc-button" id="Block4-button">4th page</span>
</ul>
</nav>
</div>
css
.navbar {
background-color:rgba(213,213,213,0.7);
display: block;
position: fixed;
top: 0;
margin: auto;
width: 100%;
text-align: center;
font-family: 'Georgia';
font-size: 1em;
list-style-type: none;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.navbar ul span:hover{
color: white;
cursor:pointer;
}
.navbar.hidenav{
opacity:0;
}
js
$(document).ready(function () {
$(function() {
$('.navbar').addClass('hidenav');
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 300) {
$(".navbar").removeClass("hidenav")
}else{
$('.navbar').hover(function() {
($('.navbar').toggleClass('hidenav'))
})
}
});
I have an exmaple here: www.skmo.nu/test
you can try this changes
// hover to show navbar
$('.navbar').hover(function() {
if (!$(window).scrollTop()) {
($('.navbar').toggleClass('hidenav'))
}
});
// show navbar after scrolling
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll) {
$(".navbar").removeClass("hidenav")
} else {
$('.navbar').addClass('hidenav')
}
});
I create a site and it work on Firefox but not in IE, the background image is gone actually seem like the div is gone, might also be a z-index problem, could you please help :(
the following is HTML code
<div id="wrapper">
<!-- Home -->
<div id="landing" class="panel">
<img src="images/bgmain_no_producer.jpg" class="bg" />
</div>
</div>
the following is CSS
#wrapper {
width: 90 % ;
/*float:left;*/
min - height: 100 % ;
height: auto!important;
height: 100 % ;
margin: 0 auto 0px auto;
}
.panel {
min - width: 100 % ;
height: 100 % ;
overflow - y: hidden;
overflow - x: hidden;
position: absolute;
margin - top: -150 % ;
margin - left: -5 % ;
background - color: #555555;
opacity: 0;
z-index:0;
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
-ms-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
}
img.bg {
/* Set rules to fill background */
min-width: 250px;
left: 50%;
margin-left: -50%; /* 50% */
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position:absolute;
top: 0;
z-index:-999;
}
The image is not visible because of opacity: 0 (makes the element invisible) and margin-top: -150%; to your .panel class. remove them it will work.
As specified in W3C, the margin properties including margin-top and margin-bottom refers the width of the containing block (not the height), if set in percentages.
Working Fiddle
Also if the intention was to have the image fade in, then you need to change the opacity to 1 after the document has loaded.
document.getElementById('landing').style.opacity = 1;
Here is a working Fiddle