Javascript in-page scrolling offset - javascript

This is more of a problem solving question. I'm trying to leverage the native in-page scrolling that browsers give to allow mobile users to skip to the content which they need more easily.
The issue is that I have a sticky header on the page, so using the native <a id="section1"></a>, visiting #section1 means that the scroll position is behind the sticky header.
Is there a way, using plain-old JS (or even CSS if possible!), to offset the scroll position by an amount of pixels? Or is there a more elegant JS solution for this which would work in IE11, Edge, Chrome & FF?
<header> ... </header> <!-- site-wide sticky header using position: sticky -->
<main>
<nav> <!-- page-specific sticky nav using position: sticky (placed under <header />) -->
Top
Bottom
</nav>
<div class="content">
<section>
<a id="top"></a>
...
...
...
</section>
...
<section>
<a id="bottom"></a>
...
...
...
</section>
</div>
</main>

If you know the heights of the headers then you can change the top of the anchor like the below:
header {
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
background: yellow;
width: 100%;
height: 40px;
}
nav {
position: sticky;
position: -webkit-sticky;
top: 40px; /* required */
background: red;
width: 100%;
height: 20px;
}
section > a {
position: relative;
top: -60px;
}
section > div {
height: 500px;
width: 100%;
}
#topDiv {
background: blue;
}
#bottomDiv {
background: green;
}
<header> ... </header> <!-- site-wide sticky header using position: sticky -->
<main>
<nav> <!-- page-specific sticky nav using position: sticky (placed under <header />) -->
Top
Bottom
</nav>
<div class="content">
<section>
<a id="top"></a>
<div id="topDiv" style="height: 500px; width: 100%" >
Content
</div>
</section>
<section>
<a id="bottom"></a>
<div id="bottomDiv" style="height: 500px; width: 100%" >
Content
</div>
</section>
</div>
</main>

Related

How to add particles.js to Bulma hero background?

I got particles.js to load however it pushes the bulma hero up instead of replacing the hero background. Any solutions?
#particles-js{
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom right, #ad5389, #3c1053);
}
<section class="hero is-fullheight" id="particles-js">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title has-text-light is-size-1">iOS application development</h1>
<a class="button is-light is-inverted is-outlined">Learn More</a>
</div>
</div>
</section>
<script type="text/javascript" src="js/site.js"></script>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
I've used:
#particles-js canvas{
position: absolute;
height: 100vh;
z-index: -1;
}

How can i slidetoggle to the left?

I have two glyphicon which i want to show the information to the left using slidetoggle. But, It opens downward. Please, help.
$(document).ready(function() {
$('#show_icon,.showhide_icon').hover(function() {
$(this).next().slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
<div class="container">
<div class="nav-header">
<div class="pull-right hidden-sm">
<ul>
<li class="listmenu">
<div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
<div id="categories">
<div CLASS="showhide_icon">Login/Register</div>
</div>
</li>
<li class="listmenu">
<div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
<div id="categories">
<div CLASS="showhide_icon">Shopping Bag</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
The CSS Properties goes like this.
CSS Properties
.listmenu {
float: left;
width: auto;
margin-right: 0;
height: 30px;
padding: 0 10px;
overflow: hidden;
}
#categories {
display: none;
width: 200px;
}
slideToggle() animates on the height of the element which is why you're seeing it open downward.
If you want a animation like you've linked in the comments use animate() to handle the width of the element. The site linked is using overflow: hidden and changing the width of the container to show the icon only or icon and text.
Edit: After reviewing your question again, a better solution might be to handle this with css:
The html is edited to include only what is needed to make this work. You'll want to review this for your purposes as well:
.listmenu {
display: inline;
}
.umMenu {
height: 16px;
max-width: 14px;
display: inline-block;
overflow: hidden;
}
.listmenu:hover .umMenu {
max-width: 500px;
/*Can be any # of sufficient width to display all content*/
transition: 2s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
<div class="container">
<div class="nav-header">
<div class="pull-right hidden-sm">
<ul>
<li class="listmenu">
Login/Register
</li>
<li class="listmenu">
Shopping bag
</li>
</ul>
</div>
</div>
</div>
</header>

Smooth Scrolling for absolute positioned contents

I am using this Page scroller.js to give smooth scroll effect to my page.
but it won't work.
Issue for this was that I was targeting the div which had position:absolute;. I still need this div to have position absolute and also have the smooth scroll work.
Here is my Html
<div id="wrapper">
<nav id="globalNav">
<h1><img src="img/logo.png" alt="SHISEIDO" /></h1>
<ul class="subMenu">
<li><img src="img/seperator.png" alt=""></li>
<li>TOP</li>
<li>CONCEPT</li>
<li>CONTACT</li>
<li><img src="img/seperator.png" alt=""></li>
<li><img src="img/seperator.png" alt=""></li>
<li><p class="copyright">Copyright © KOOGEN 2015<br>All rights reserved.</p></li>
</ul>
<div id="fbFeed">
<p></p>
</div>
</nav>
<div class="col-sm-8" id="left">
<div class="set">
</div><!-- set -->
</div>
<div class="col-sm-4" id="right">
<div id="inner1">
<div id="works"></div>
<div id="concept"></div>
<div id="contact"></div>
</div><!-- inner -->
</div>
</div><!-- #wrapper -->
So, #left #right divs have position absolute to create 3 column layout.
I added anchor link to my globalNav so that when I click, contents inside #right div will scroll smoothly.
heres my css added to #left and #right divs.
#left {
position: absolute;
top: 0px;
bottom: 0;
left: 218px;
width: 186px;
overflow-y: scroll;
background-color: rgba(255, 255, 255, 0.45);
padding-left: 6px;
}
#left .set{
padding-top: 230px;
}
#right {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
width: 67.5%;
}
#right #works{
padding-top: 230px;
}
#right .inner{
position: relative;
}
Any help would be much appreciated!
Thank you for your time!
UPDATE:
This is the fiddle.
http://jsfiddle.net/hirohito/Ls3jwpm9/
It works when the window's width is very narrow, but when I stretch it out to the ideal window size, smooth scroll stop working.
you can use for smooth scroll
$(document).on('click', 'a[href^="#"]', function(e) {
var id = $(this).attr('href');
var $id = $(id);
if ($id.size() === 0) {
return;
}
e.preventDefault();
var pos = $(id).offset().top;
pos = pos-95;
$('body, html').animate({scrollTop: pos});
});

Toggle Sidebar with sticky header and footer

I would like to be able to have a side bar that can be toggled in and out on a button press. However, I'd want this sidebar to go with the main content of the page and fit between a sticky header and a sticky footer.
My problem is that when I scroll the sidebar stays fixed. I want the sidebar and page content to be able to scroll together and the header disappear. Then the page content will scroll while the header stays where it is. Then once the bottom of the page is reached the footer comes in which will shrink the bottom of the sidebar. If there is overflow in the side bar then the sidebar should be scrollable.
I have a nearly working example using bootstrap and simple-side bar template here: https://jsfiddle.net/co7080j6/. The only problem is that the side bar doesn't adjust it's position with the sticky header and footer.
The html I'm using is here:
<body>
<!-- Navbar -->
<nav class="navbar navbar-inverse" style="margin: 0;">
<div class="container">
<a class="navbar-brand" href="#">Project name</a>
</div>
</nav>
<!-- /#navbar -->
<div class="container-full" >
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
Start Bootstrap
</li>
<li>
Events
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper" style="height: 900px">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<a href="#menu-toggle" class="btn btn-default"
id="menu-toggle">
Toggle Menu
</a>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
</div>
<!-- container-full -->
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
And besides bootstrap and simple sidebar (I removed z-index on the sidebar) I'm also I'm also using:
/*MY CSS*/
.container-full {
margin: 0 auto;
width: 100%;
}
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #333;
}
*I'd also like it if the header came into view any time the window scrolled up, but I think I can get that myself once this is resolved.
This is more of a CSS issue than anything. If you make the following changes to the CSS file, you get the functionality you desire.
#sidebar-wrapper {
position: absolute;
height: 90%;
}
.sidebar-nav {
position: fixed;
top: 55px;
left: 30px;
}
Also need to include a little extra JQuery to get around the fact that the sidebar-nav text doesn't hide when position is set to fixed.
$(document).ready(function() {
$('#menu-toggle').click(function() {
$('.sidebar-nav').fadeToggle(300);
});
});
Here's a JSFiddle
I'm not 100% sure you wanted the sidebar text to scroll or stay in place. If you want it to stay put, simply remove the .sidebar-nav CSS changes I made. And here's the JSFiddle for that.

jQuery Mobile Div at top

A bit of a strange request, I know.
I have a jQueryMobile page, a simple one as you can see:
<div data-role="page" class="type-home" id="home">
<div data-role="header" data-theme="b">
<h1>Our Tools</h1>
</div>
<div data-role="content">
<ul data-role="listview">
......
I need to put a Div containing a 100 px high content at the very top, outside any styling or div that jQuery Mobile uses.
How would that be done, as adding a plain Div as is just gets covered by jQuery Mobile.
I can't use an iFrame, it has to be all on one page in html.
If you are wanting a static header-type DIV, this is what works for me.
I put a "header" with fixed height and then offset the "content" with a margin-top like below. .ui-content is a class that is added automatically by jQM.
HTML:
<div data-role="page" id="somePage">
<div class="ui-bar ui-bar-b">
<a data-role="button" href="#main" data-transition="none" data-theme="a"></a>
<h1>Some header</h1>
</div>
<div data-role="content">
<div id="someDiv">
</div>
</div>
</div>
CSS:
.ui-bar {
position: fixed;
height: 100px;
z-index: 10000;
width: 100%;
padding: 0px 5px;
box-sizing: border-box;
}
.ui-content {
position: relative;
padding: 10px;
margin-top: 100px;
}

Categories