I have here a navbar with a dropdown menu and I wanted the page to stop scrolling when I stretch out the whole screen to another resolution. I have reviewed my code and I think the problem is the conditions in my if-else statement. I am stuck in this for hours now and I cannot formulate a solution to my problem. I also added a label in my html aria-label="hidden" to use for enabling and disabling the whole page scroll. Can someone enlighten me with this problem I am currently having now?
Here is my code snippet:
<div class="c-dropdown-btn"><i class="fas fa-bars c-grey-pill"></i></div>
<div id="c-nav-mobile" aria-label="hidden">
<ul class="c-nav-links2">
<li>カテゴリ1</li>
<li>カテゴリ2</li>
<li>カテゴリ3</li>
<li>カテゴリ4</li>
</ul>
<div class="c-img-cont2">
<div class="c-image-res3"></div>
<div class="c-consult-cont2">
<div class="c-con-rel"><span class="c-consult-text2">自分のキャリアに合った留学を選ぶための無料相談会実施中</span>
<button class="c-btn c-btn-primary consult-text">詳しくはこちら→</button>
</div>
</div>
</div>
</div>
And here is my jquery code for this:
$('.c-dropdown-btn i').click(function () {
$(this).toggleClass('fa-times');
$('#c-nav-mobile').fadeToggle("on");
bodyStyle();
});
$(window).resize(function(){
bodyStyle();
});
function bodyStyle() {
var viewportWidth = $(window).width();
var navMobile = $("#c-nav-mobile");
if(viewportWidth < 768 && navMobile.attr("aria-label") == "hidden") {
$("body").css("overflow", "hidden");
console.log("abc");
} else if (viewportWidth > 769 && navMobile.attr("aria-label") == "hidden"){
$("body").css("overflow", "none");
console.log("123");
}
}
for scss snippet (for #c-nav-mobile)
#c-{
&nav-mobile {
display: none;
position: absolute;
left: 0;
z-index: 1;
top: 41px;
width: 100%;
height: 523px;
padding: 25px 32px 34px 31px;
background: rgba(0,0,0,0.5);
#include mq('md') {
display: none !important;
}
&.on {
display: block;
}
}
}
I declared a function and called it inside resize and also to my click event.
#c-nav-mobile add this:
box-sizing: border-box;
CSS media queries do most of the work for you.
You can eliminate much of the JS here by using css rules inside a class. Then only use JS to toggle the tag - which you are already doing but do so on the body tag.
HTML (just added the body tag for completeness)
<body>
<div class="c-dropdown-btn"><i class="fas fa-bars c-grey-pill"></i></div>
<div id="c-nav-mobile" aria-label="hidden">
<ul class="c-nav-links2">
<li>カテゴリ1</li>
<li>カテゴリ2</li>
<li>カテゴリ3</li>
<li>カテゴリ4</li>
</ul>
<div class="c-img-cont2">
<div class="c-image-res3"></div>
<div class="c-consult-cont2">
<div class="c-con-rel"><span class="c-consult-text2">自分のキャリアに合った留学を選ぶための無料相談会実施中</span>
<button class="c-btn c-btn-primary consult-text">詳しくはこちら→</button>
</div>
</div>
</div>
</div>
</div>
</body>
CSS
// code below works if it's the body that is doing the scrolling
// if not, use the scrolling element instead here and the JS click
#media only screen and (max-width: 768px) {
body.fa-times {
overflow: hidden;
// might need to set a height
height: 100vh;
}
}
JS
$('.c-dropdown-btn i').click(function () {
$('body').toggleClass('fa-times');
$('#c-nav-mobile').fadeToggle("on");
});
Related
I want the image (any image) height equal the window height even when I resize, I want to do it by jquery.
I used resize method in jquery but I don't get the results I need.
html:
<div class="header">
<div class="container">
</div>
</div>
css:
.container {
width: 1200px;
margin: auto;
}
.header {
background: url('https://preview.ibb.co/cu9YyH/download.jpg');
background-repeat: no-repeat;
}
jquery:
$(function () {
$(".header").height($(window).height());
$(window).resize(function () {
$(".header").height($(window).height());
});
});
There's no need for JS here. CSS alone will do the job, and is preferable for two reasons. Firstly this is a UI concern, so you shouldn't use JS as a crutch for that. Secondly, it performs better and you don't need to rely on the resize event to update the settings on the element.
To achieve what you need use vh (viewport height) units, like this:
html, body {
padding: 0;
margin: 0;
}
header {
background-color: #ccc;
height: 100vh;
}
div {
min-height: 50px;
}
<header>
I am the full-height header...
</header>
<div>
Some content here...
</div>
UPDATE: To clear up some confusion I added a fiddle that demonstrates how it is supposed to work, but it is just missing the
scrollspy: https://jsfiddle.net/kmdLg7t0/ How can I add the scrollspyto this fiddle so that the menu highlights when I'm on a specific section?
I created a fixed left menu that turns into an off-canvas menu at
<992px in browser width for tablet and mobile. When I select the anchor link on a browser width >992px it closes the menu and navigates to the anchor link section.
Custom JQuery Code:
This is my custom jQuery code that closes the Off-Canvas Menu when I click on an anchor link:
// close off-canvas menu and navigate to anchor
$('.navmenu-nav li a').on('click', function() {
$('body').removeClass('bs.offcanvas');
});
PROBLEM:
I decided to add a bootstrap offscrollspy and it works as intended after the browser width is greater than 992px, but when I resize the browser width to less than 992px this interferes with the Custom Jquery Code to close the menu and navigate to the anchor link.
Here's the Fiddle:
Bootstrap ScrollSpy causes issue with Off Canvas Menu and JQuery Code
My GUESS: I'm guessing the solution to this problem is to use jquery or
javascript to prevent or remove the data-target=".navmenu" from
activating when my screen is less than the <992px. Or we can find
a way to only activate the scrollspy after >992px. I'm
currently trying to figure this out, but I need someone who is a true
expert in jquery to solve this dilemma.
Pre-Requisite:
Bootstrap.min.css
Bootstrap.min.js
jasny-bootstrap.css
jasny-bootstrap.js
JS:
$(document).ready(function () {
toggleOffcanvas($(window).width() <= 992);
});
// simulate modal opening
$('.nav-link').click(function() {
if ($(window).width() > 992) {
$('.backdrop').hide(0, false);
}
$('#navToggle').click();
});
$('.navmenu').on('show.bs.offcanvas', function() {
if ($(window).width() <= 992) {
$('.backdrop').fadeIn();
}
});
$('.navmenu').on('hide.bs.offcanvas', function() {
if ($(window).width() <= 992) {
$('.backdrop').fadeOut();
}
});
// close modal on resize
$(window).resize(function() {
if ($(window).width() > 992) {
$('.backdrop').hide(0, false);
$('body').removeClass('bs.offcanvas');
}
toggleOffcanvas($(window).width() <= 992);
});
// switch active navigation link onclick
$('.nav a').on('click', function() {
$('.nav').find('.active').removeClass('active');
$(this).parent().addClass('active');
});
// close modal when navigating to anchor
$('.navmenu-nav li a').on('click', function() {
$('body').removeClass('bs.offcanvas');
});
function toggleOffcanvas(condition) {
if (!! condition) {
$('.nav-link').attr('data-toggle', 'offcanvas');
} else {
$('.nav-link').removeAttr('data-toggle');
}
}
html:
<body data-spy="scroll" data-target="#myScrollspy" data-offset="50">
<div class="backdrop"></div>
<div id="myScrollspy" class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm colornav ">
×
<a id="navToggle" class=""><span></span></a>
<h4 class="navmenu-brand visible-md visible-lg visible-sm visible-xs" href="#">2017</h4>
<ul class="nav navmenu-nav">
<li class="active"><a class="nav-link" data-toggle="offcanvas" data-target=".navmenu" href="#january">Enero</a></li>
<li><a class="nav-link" data-toggle="offcanvas" data-target=".navmenu" href="#february">Msrs</a></li>
<li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navmenu-reveal/">Jupiter</a></li>
<li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navbar-offcanvas/">Off canvas navbar</a></li>
</ul>
</div>
<div class="navbar navbar-default navbar-fixed-top navbar-preheader">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">navbar brand</a>
</div>
<div class="container">
<div class="page-header">
<h1>Navmenu Template</h1>
</div>
<p class="lead">This example shows the navmenu element. If the viewport is <b>less than 992px</b> the menu will be placed the off canvas and will be shown with a slide in effect.</p>
<p>Also take a look at the examples for a navmenu with push effect and reveal effect.</p>
<p class="space"></p>
<p id="january">January</p>
<p id="february">February</p>
</div><!-- /.container -->
</body>
CSS:
html, body {
height: 100%;
}
body {
padding: 50px 0 0 0;
}
.space {padding-bottom:900px;}
.backdrop {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 1040;
display: none;
}
.navbar-fixed-top {
background:#fff!important;
}
.navbar {
display: block;
text-align: center;
}
.navbar-brand {
display: inline-block;
float: none;
}
.navbar-toggle {
position: absolute;
float: left;
margin-left: 15px;
}
.container {
max-width: 100%;
}
#media (min-width: 1px) {
.navbar-toggle {
display: block !important; background:none!important; border:none !important; color:#f90 !important;
}
}
#media (min-width: 992px) {
body {
padding: 30px 0 0 300px;
}
.navmenu {
padding-top: 0;
}
.navbar-toggle {display:none!important;}
.close {display:none}
.navmenu-fixed-left {
z-index:0;
top: 48px;
bottom: 0; background:#fff!important;
}
}
.navbar-default .navbar-toggle .icon-bar{
background-color:#333;
}
.close {margin-right:10px; margin-top:10px;}
#media (max-width:991px) {
.navmenu-fixed-left {
z-index:1050;
top: 0;
bottom: 0; background:#fff!important;
}
}
.backdrop {display:none}
#january, #february {
text-transform: uppercase;
background-color: red;
text-align: center;
line-height: 90vh;
font-size: 5em;
height: 90vh;
color: white;
}
#february {
background-color: green;
}
The problem with the code is that data-target=".navmenu" on menu items breaks the scrollspy plugin. Basically, scrollspy makes the connection between menu item and an element on the page via either data-target property or href property. Here is a part of it's source code:
return `${selector}[data-target="${target}"],` +
`${selector}[href="${target}"]`
Because of this you can't use data-target on menu links to close the menu. You can use javascript to close the menu instead.
Here is updated link's HTML:
<li class="active"><a class="nav-link" href="#january">Enero</a></li>
<li><a class="nav-link" href="#february">Msrs</a></li>
And all the javascript you need:
$(document).ready(function () {
// Add the backdrop when menu is shown
$('.navmenu').on('show.bs.offcanvas', function() {
$('.backdrop').fadeIn();
});
// Remove the backdrop when menu is hidden
$('.navmenu').on('hide.bs.offcanvas', function() {
$('.backdrop').fadeOut();
});
// Hide the menu on menu item click
$('.nav-link').click(function() {
if ($(window).width() <= 992) {
$('.navmenu').offcanvas('toggle');
}
});
// Remove the backdrop if window is resized over the breakpoint
$(window).resize(function () {
if ($(window).width() > 992) {
$('.backdrop').fadeOut();
}
});
});
A complete working example:
https://jsfiddle.net/kmdLg7t0/5/
Finally you have to remove all href="#" from link elements where they are not necessary. For example close menu button will take you back to # even if you have navigated to #january.
So things I did in total:
removed data- attributes from links
closing menu with javascript on link click
removed unnecessary href=# from links
Everything else is handled by plugins themselves.
By tying the scroll spy to a class, you can then toggle said class as needed. In addition, make sure to run the function once on page load to set initial state.
$('body').scrollspy({ target: '.scroll-spy' });
toggleScrollSpy($(window).width() <= 992);
// close modal on resize
$(window).resize(function() {
if ($(window).width() > 992) {
$('.backdrop').hide(0, false);
$('body').removeClass('bs.offcanvas');
}
toggleScrollSpy($(window).width() <= 992);
});
function toggleScrollSpy(condition) {
if (!!condition) {
$('#myScrollspy').addClass('scroll-spy');
} else {
$('#myScrollspy').removeClass('scroll-spy');
}
}
I would simply say when you animate or resize web page, make sure your coordinates top, left and height, width are carefully calculated. Because if they there is any change during resize it will show undesired positions. So its always good idea to examine coordinates and then alter dynamically them as the need arises.
I made this page with three sections that have full width and height, but i don't know how to make them scroll horizontally and not vertically, i tried this source:
CSS-tricks: Horizontal scrolling but it doesn't work on my code...
Here is my code:
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
}
.element {
flex: 0 0 100%;
}
.element1 { background: pink; }
.element2 { background: lightgreen; }
.element3 { background: lightblue; }
<div class="element element1">Element #1</div>
<div class="element element2">Element #2</div>
<div class="element element3">Element #3</div>
The horizontal scrolling is working as expected, please check the code below. From your reference the demo uses a jquery plugin. You need to include jQuery and jQuery mousewheel plugin for it to work. :)
$(function() {
$("body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
}
.element {
flex: 0 0 100%;
}
.element1 { background: pink; }
.element2 { background: lightgreen; }
.element3 { background: lightblue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<div class="element element1">Element #1</div>
<div class="element element2">Element #2</div>
<div class="element element3">Element #3</div>
You just need to change body style
body {
margin: 0;
display: block;
}
I think you might be missing some js files in your page. Make sure to add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>
<script>
$(function(){
$("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
$(".post").wrap("<td></td>");
$("body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
</script>
Here is a JSFiddle with a working example
https://jsfiddle.net/ybvsyt0p/
I think using JavaScript together with your CSS will produce the "Horizontal Scroll" effect you need:
Define HTML AND BODY as selectors use a base method like "mousewheel", and notice the placement and scope of this as it references its parent object (the page) via mousewheel.
delta can be used to work with values that are consistent with the user interaction and scrollLeft is a property in CSS 2 and a method in CSS 3 (I.e., scrollLeft() works in most browsers.
$("html, body").mousewheel(
function
(event, delta) {
this.scrollLeft *= -30;
}
)
I have a mobile website which has a simple side menu bar with scroll, when scrolling the menu on safari it lags a lot (struggle to scroll).
here is the html:
<body>
<div id="menu_background" onclick="toggleMenu()"></div>
<div id="menu">
<ul>
<li>
<div>item 1</div>
</li>
//other items goes here
</ul>
</div>
<div id="global_container">
//some content goes here
</div>
</body>
here is the css:
#menu
{
position: absolute;
top: 0px;
bottom: 0px;
z-index: 100;
overflow: hidden;
display:none;
width: 0%;
padding: 1%;
}
and the javascript :
var menuShown = false;
function toggleMenu(){
var menu = document.getElementById("menu");
var menuBackground = document.getElementById("menu_background");
var globalContainer = document.getElementById("global_container");
if(!menuShown){
menuShown = true;
menuBackground.style.visibility = "visible" ;
menu.style.width="60%";
menu.style.display="block";
menu.style.overflowY="auto";
globalContainer.style.position="fixed";
globalContainer.style.right="62%";
}
else{
menuShown = false;
menuBackground.style.visibility = "hidden" ;
menu.style.width="0%";
menu.style.display="none";
menu.style.overflowY="hidden";
globalContainer.style.position="static";
}
}
I didn't include the rest of html where there is a menu button with onclick action that trigger the toggleMenu() javascript function.
Also I don't want to use ready made jQuery plugins or other solutions.
any suggestions ?
Solved using the following in the css:
rather than using the following in the css #menu selector
overflow: hidden;
use this instead
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
I want to make a grid of divs that are the size of the viewport. Just to set a few basic variables, lets say I want it to be 7 divs wide and 10 divs high.
Here is a code I have so far to set the div size:
function height() {
var height = $(window).height();
height = parseInt(height) + 'px';
$(".page").css('height',height);
}
$(document).ready(function() {
height();
$(window).bind('resize', height);
});
function width() {
var width = $(window).width();
width = parseInt(width) + 'px';
$(".page").css('width',width);
}
$(document).ready(function() {
width();
$(window).bind('width', width);
});
Right now I just have 2 divs that are stacked on top of each other. One is red and one is black, just so I can see them. I want to be able to put content inside the divs. I also made sure to put
body {
margin: 0px;
}
Later I am going to put some scrolling features with jQuery but for now I just want a way to make the grid.
Edit:
Each individual div is the size of the viewport
Edit:
I used this handy plugin for the scrolling that is much better then a small script at the end of the page
You won't need any javascript for this as it can be easier achieved with just CSS.
HTML
<div id="content1">
Place your content here.
</div>
<div id="content2">
Place your content here.
</div>
<div id="content3">
Place your content here.
</div>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
#content1,#content2,#content3 {
min-height: 100%;
height: auto !important; /*min-height hack*/
height: 100%; /*min-height hack*/
}
EXAMPLE 1
All 3 divs have the size of the browser window and of course they adjust accordingly. Also you can add a anchor link to navigate from tab to tab with again just html/css
Go to Main Element
If a navigation like this is something you would like to have then you can have a look on the
EXAMPLE 2
PS: in the example i have separated the css of the boxes just to put different colors but you can have it as i posted it above.
I've also created another fiddle for you, as my first two versions were missing something...You asked for a couple of divs vertically and a couple horizontally.
EXAMPLE 3
This example has 3x2 divs (6 total) but with the same logic you can make them 7x10.
Please don't hesitate to ask if you don't understand anything in the code.
Also i've added a bit of jQuery to make the scrolling more smooth, which is optional, you can just remove it
JavaScript (don't forget to include jQuery)
var $root = $('html, body');
$('a').click(function () {
$root.animate({
scrollLeft: $($.attr(this, 'href')).offset().left,
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
Hope this helps you
EDIT: You need to include jQuery in your code and also wrap the javascript code with:
$(window).load(function(){
});
I can't tell if you want the div to be the entire size of the screen and then have the overflow scroll - and shoot over to the next panel, or if you want your grid of divs to be the size of the viewport. If it's the second, here is my answer.
fiddle is here:
HTML
<div class="block">01</div>
<div class="block">02</div>
<div class="block">03</div>
<div class="block">04</div>
<div class="block">05</div>
<div class="block">06</div>
<div class="block">07</div>
<div class="block">etc. (to 70)</div>
CSS
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
margin: 0;
}
html {
height: 100%;
background-color: orange;
}
body {
height: 100%;
border: 1px solid blue;
}
.block {
width: 14.285714%%; /* 100/7 */
float: left;
height: 10%; /* 100/10 */
border: 1px solid rgba(255,255,255,.5);
}
Now, If that's not what you wanted, maybe this is.
fiddle is here:
HTML
<div id="content1" class="block">
<h2>block 01</h2>
</div>
<div id="content2" class="block">
<h2>block 02</h2>
</div>
<div id="content3" class="block">
<h2>block 03</h2>
</div>
<div id="content4" class="block">
<h2>block 04</h2>
</div>
<div id="content5" class="block">
<h2>block 05</h2>
</div>
<div id="content6" class="block">
<h2>block 06</h2>
</div>
<div id="content7" class="block">
<h2>block 07</h2>
</div>
<div id="content8" class="block">
<h2>block 08</h2>
</div>
<!-- you'll need 70... ? -->
<nav class="global-nav">
01
02
03
04
05
06
07
08
</nav>
CSS ( a little SASS in here for quickness )
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
}
html, body {
height: 100%;
}
html {
width: 700%;
/* overflow: hidden; */
/*This would hide the scroll bars but I'm leaving them for you to see */
}
.block {
min-height: 100%;
height: auto !important; /*min-height hack*/
height: 100%; /*min-height hack*/
width: 100%/7; /* SASS division to be quick*/
float: left;
border: 1px solid red;
}
.global-nav {
position: fixed;
bottom: 0;
left: 0;
}
.global-nav a {
display: block;
color: black;
}