I'm working on a single page portfolio which is navigated using a top-mounted navigation bar using href's. I use scroll-behavior: smooth; in my head's CSS and this makes the navigating smooth and pleasant to look at when looking at it in chrome. When loading the site using Safari this behavior is lost and the navigation is instant. Is there a Safari equivalent to this CSS functionality?
Safari does not support scroll-behavior: smooth, you'll need some custom javascript to achieve the same effect. See this: Javascript - window.scroll({ behavior: 'smooth' }) not working in Safari
Safari 15.4 adds support for CSS scroll-behavior as detailed in the 15.4 release notes.
Added support for the CSS scroll-behavior property and ScrollOptions, allowing smooth scrolling to anchors or via JavaScript.
2022 Update
Safari support for smooth-scroll is still broken and not customizable.
If you're looking for a simple way to enable it, you can take a look at the API I've been building for the past 4 years: https://github.com/CristianDavideConte/universalSmoothScroll.
It's extremly fast, easy to use and it enables smooth-scroll on basically every browser (IE is not supported) with high customization degree (easing, duration, interruptibility, etc...).
Below you'll find an example of how to use the API to quickly enable smooth-scroll on your website:
Edit:
Since from UniversalSmoothScroll 6.0.0 the Ease-Functions library has been converted to a module, this answer has been updated to make it work on stackoverflow.
The problem is that stackoverflow doesn't support modules in the javascript section of snippets, so you'll find a workaround to make it work: you can ignore it since in a normal website you wouldn't use it.
/*
* In this example we will only customize the document's scrolling,
* but the API fully support every custom scrollable container
*/
function init() {
/*
* We tell the API which element is the one that scrolls the document
* (useful whenever it's something like the body element, a custom container,
* a framework specific container, etc...)
*/
uss.setPageScroller(window);
/**
* This API function, enables the anchors'
* smooth-scrolling to the corresponding section
*/
uss.hrefSetup();
/**
* This API function, sets the easing of the pageScroller (that we set to window) to a
* medium speed(the "QUART" part) ease-in-out function that last exactly 1 second.
*/
uss.setStepLengthCalculator(EASE_IN_OUT_QUART(1000));
/**
* This API function allow us to stop the scrolling on a container.
* In this case, we don't want any more scrolling
* if the user scrolls the document with the mousewheel.
*/
window.addEventListener(
"wheel",
() => uss.stopScrolling(window)
);
}
/*
* YOU CAN IGNORE THIS PART.
* This is just part of the workaround used on stackoverflow to make modules work.
* Basically it loads the init function whenever the document is fully loaded and the module is imported.
* Check out this discussion for more informations: https://meta.stackoverflow.com/questions/389108/support-javascript-es6-modules-in-code-snippets
*/
document.addEventListener("readystatechange", () => document.readyState === "complete" && init());
/* Just styling, none of this is necessary for the API */
html, body {
margin: 0;
}
nav {
display: flex;
justify-content: center;
position: fixed;
margin-top: 0;
width: 100vw;
}
nav > a {
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
height: 20vh;
width: 15vw;
background: rgba(20,20,20,0.5);
transition: all 0.3s;
}
nav > a:hover {
background: rgba(20,20,20,0.6);
}
.horizontal-container {
display:flex;
}
.page {
width: 100vw;
height: 100vh;
flex-shrink: 0;
}
#to1 {
background: linear-gradient(135deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
}
#to2 {
background: linear-gradient(225deg, rgba(121,9,9,1) 0%, rgba(255,42,0,1) 100%);
}
#to3 {
background: linear-gradient(45deg, rgba(227,176,7,1) 0%, rgba(255,239,0,1) 100%);
}
#to4 {
background: linear-gradient(315deg, rgba(7,101,6,1) 0%, rgba(0,255,98,1) 100%);
}
<html>
<head>
<!-- We include the API -->
<script src = "https://cdn.jsdelivr.net/npm/universalsmoothscroll#latest/universalsmoothscroll-min.js"></script>
<!-- We include the API's easing library (this is optional) -->
<script src = "https://cdn.jsdelivr.net/npm/universalsmoothscroll#latest/universalsmoothscroll-ease-functions-min.js" type = "module"></script>
<!--
YOU CAN IGNORE THIS PART.
This is just part of the workaround used on stackoverflow to make modules work.
It import the module and turns the import into a global variable.
Check out this discussion for more informations: https://meta.stackoverflow.com/questions/389108/support-javascript-es6-modules-in-code-snippets
-->
<script type = "module">
import {EASE_IN_OUT_QUART} from "https://cdn.jsdelivr.net/npm/universalsmoothscroll#latest/universalsmoothscroll-ease-functions-min.js";
window.EASE_IN_OUT_QUART = EASE_IN_OUT_QUART;
</script>
</head>
<body>
<nav> <!-- header -->
<p>Blue</p>
<p>Red</p>
<p>Yellow</p>
<p>Green</p>
</nav>
<!-- Website pages -->
<div class="horizontal-container">
<div id="to1" class="page"></div>
<div id="to2" class="page"></div>
</div>
<div class="horizontal-container">
<div id="to3" class="page"></div>
<div id="to4" class="page"></div>
</div>
</body>
</html>
More usage examples can be found at: this answer and the official playground or my website.
According to the comment of elmcrest, it works.
<script defer src="https://unpkg.com/smoothscroll-polyfill#0.4.4/dist/smoothscroll.min.js"></script>
Using jquery there is a equivalent for scroll-behavior: smooth.
Try this:
$('html, body').animate({
scrollTop: 0
}, 1500);
Chanze zero to you desired postion.
$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function (t) {
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
var e = $(this.hash);
e = e.length ? e : $("[name=" + this.hash.slice(1) + "]"), e.length && (t.preventDefault(), $("html, body").animate({
scrollTop: e.offset().top
}, 600, function () {
var t = $(e);
if (t.focus(), t.is(":focus")) return !1;
t.attr("tabindex", "-1"), t.focus()
}))
}
});
you can solve the problem like that:
jQuery('html, body').animate({
scrollTop: $('html').offset().top
}, 800)
Although it is stated here that safari supports scroll with smooth
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior but even example doesn't work on safari
As a way out, I found a library with a polyfills, and in those browsers where it does not work it's replaced - https://github.com/iamdustan/smoothscroll
I am working on a one-pager WordPress site, and I need to hide the logo of the page (#logo) on the first section (#home). The whole page is a one-pager, so the first section does not need the logo, in fact it should only appear for the other sections below the first one.
Can this be accomplished using CSS?
If it is, then I also want to change the color of the menu elements for the first section, and be something else for the others.
Short answer: No.
You will need to write some JavaScript or jQuery to determine when the first section (i.e. home section) is no longer in the view window.
The logo is typically within the <header>. It's one element within the HTML markup. It does not have a relationship to the sections. With styling, you position it where you want and then scroll the document to view the rest of the content sections.
I assume with this being a one-pager, you want the <header> to be fixed. It's a good assumption since you want to display the logo in the same spot for each section, except the first one.
How
There are many ways to accomplish this behavior. Essentially, you need to determine if the home section is in the browser window or not. When it is, the logo is hidden; else, it's displayed.
One strategy is:
Set the position where the logo will show by grabbing the 2nd section's position in the document (i.e. its offset().top position).
Then determine where the 1st section is within the window. If it's > showPosition, then it's out of view.
Here's some code to get you started. You'll need to adapt it for your specific needs.
(function ( $, window, document ) {
"use strict";
var sectionContainers,
showPosition = 400;
var init = function () {
initSection();
logoHandler();
}
function initSection() {
sectionContainers = $( '.section-container' );
showPosition = $( sectionContainers[1] ).offset().top;
}
function logoHandler() {
var $logo = $( '#logo' );
if ( $( sectionContainers[0] ).offset().top >= showPosition ) {
$logo.show();
}
$( window ).scroll( function () {
if ( $( this ).scrollTop() > showPosition ) {
$logo.show();
} else {
$logo.hide();
}
} );
}
$( document ).ready( function () {
init();
} );
}( jQuery, window, document ));
body {
color: #fff;
}
.site-header {
position: fixed;
}
.site-logo {
font-weight: bold;
border: 5px solid #fff;
padding: 10px;
}
.section-container {
width: 100%;
height: 400px;
text-align: center;
padding: 50px 5%;
background-color: #627f00;
}
.section-container:nth-child(odd) {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="site-header" itemscope itemtype="http://schema.org/WPHeader">
<p id="logo" class="site-logo" itemprop="headline" style="display: none;">Logo</p>
</header>
<section id="home" class="section-container">
this is the home section
</section>
<section id="about" class="section-container">
this is the about section
</section>
<section id="about" class="section-container">
this is the portfolio section
</section>
JSFiddle
I have an accordion menu that I have tweaked to suit my needs. My last stumbling block is that I have an image (see attached image) of a FedEx Courier that I need to lay on top of the menu and yet still allow users to click through it to activate (access) the accordion menu. The image is a separate image that is set to the desired alpha as created in Photoshop. The file is merely a snapshot of how it would look if it was the way I wanted it.
If this is even possible, what code would I use and exactly where would I place it? If in the CSS file, where does it go and between which lines?
Original full size Image file
You can apply the css:
pointer-events: none;
to the image above the links.
See fiddle https://jsfiddle.net/4zgcrkyz/
pointer-events: none; is a suitable solution if you do not need to care about IE < 11. More info on compatibility here.
Alternatively you can use elementFromPoint() which has compatibility IE > 5.5
The following trick allow you to select under your cover image without using pointer-events: none;
https://jsbin.com/tuhotagize/edit?html,output
Explanation:
At click on cover image.
Hide cover image temporary.
Get mouse coordinates.
Get HTML element under that mouse coordinates (so you know what under the cover).
Trigger click event on that HTML element.
Show cover image again.
Another alternative solution to your problem, which does not include any JS is:
Trim your image in PhotoShop as should appear inside the menu. Use CSS background-image property on it
Use the courier FedEx image only as CSS background-image the body of your page.
You can achieve the same visual effect using only CSS.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
img {
position: absolute;
top: 0;
left: 0;
opacity: 0.4;
}
a {
display: block;
width: 300px;
height: 20px;
background-color: greenyellow;
}
a:hover {
background-color: #FF0000;
}
</style>
<script>
window.app = {
show: function () {
document.getElementById('cover').style.display = '';
},
hide: function () {
document.getElementById('cover').style.display = 'none';
},
event: null,
start: function () {
document.getElementById('cover').addEventListener('click', function (event) {
this.hide();
this.event = event;
var target = document.elementFromPoint(event.pageX, event.pageY);
this.show();
target.click();
}.bind(this));
var links = document.querySelectorAll('a');
for (var i = 0, len = links.length; i < len; i++) {
links[i].addEventListener('click', function (event) {
alert('click on ' + event.target.id);
}.bind(this));
}
}
};
</script>
</head>
<body onload="window.app.start();">
<img id="cover" src="http://placehold.it/200x200" />
<a id="a1">link</a>
<a id="a2">link</a>
<a id="a3">link</a>
<a id="a4">link</a>
<a id="a4">link</a>
<a id="a6">link</a>
</body>
</html>
How do I define different fixed_top values within magellan's options, or css, to accommodate different header heights on various devices? My header height varies from 60px on medium to 120px on large.
The inline nature of Magellan's options trumps all css I use to change this within my media queries.
I have also tried interchange to swap out values to no avail.
I've had the same problem. Currently there is not really a way to fix this with solely Magellan, for it uses fixed parameters setting the offset. I've applied the following fix:
Remove fixed from the data-magellan-expedition attribute. Magellan will no longer handle the fixed-positioning
Add a 'break point' script that adds classes to the body which you can use to applied media queries. These break point classes are reusable for other applications as well. An example:
Let's say your html is like:
<div data-magellan-expedition class="your-magellan-nav-bar">
<div data-magellan-arrival="some-header">
<a href="#some-header">
</div>
</div>
<!-- ... -->
<h3 data-magellan-destination="some-header">Some Header</h3>
<a name="some-header></a>
Note the missing fixed in data-magellan-expedition="fixed".
Now add some JS to your document:
function activateScrollpoints(scrollPoints) {
var $window = $(window);
var $body = $(document.body);
var tId = null;
function onScroll() {
var windowScrollTop = $window.scrollTop();
scrollPoints.forEach(function(point) {
$body.toggleClass('break-'+point, windowScrollTop >= point);
});
tId = setTimeout(function() {
clearTimeout(tId);
window.requestAnimationFrame(onScroll);
}, 100);
}
window.requestAnimationFrame(onScroll);
}
activateScrollpoints([310, 500]);
The above will add a class break-310 once the user scrolls more than 310px and another class break-500 if the user scrolls 310px.
Now in your CSS you could do something like:
#media #{$medium-up} {
body.break-310 .your-magellan-nav-bar {
position: fixed;
top: 310px; /* Some value for your offset */
left: 0px;
}
}
#media #{$small-only} {
body.break-500 .your-magellan-nav-bar {
position: fixed;
top: 500px; /* Some value for your offset */
left: 0px;
}
}
I'm attempting to toggle the transparency (effectively, from invisible to visible) of a title/date div (#post_h3_container) over the snippet of the post on a blog rollup page on mouseover of the parent div (#text_post_body). I've managed to make this work when hovering the #post_h3_container div only.
I've tried various selectors between the divs including +, ~, > (and using :hover) and even no selectors at all and can't seem to create the desired effect. I've matched my code to several answers addressing this on StackOverflow, but still no dice. I've starred the CSS rule that doesn't seem to be doing anything.
Any idea what it is I'm missing? This is for Tumblr, if that makes a difference.
Here's the site: http://bookishmatt.tumblr.com/
The CSS:
#text_post_body {
max-width: 460px;
margin-top: -15px;
}
#post_h3_container {
position: absolute;
width: 450px;
max-height: 120px;
background-color:rgba(51,51,51,0.8);
padding: 0 5px 0 5px;
opacity: 0;
}
#post_h3_container:hover {
opacity: 1;
-webkit-transition: opacity .4s;
}
**#text_post_body:hover ~ #post_h3_container {
opacity: 1;
-webkit-transition: opacity .4s;
}**
The HTML:
<div id="post">
<div id="text_post">
{block:Text}
{block:Permalink}{block:Title}<div id="perma_post"><h3>{Title}</h3></div>{/block:Title}
<div id="post_date_perma">{block:Date}<h2>{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} at {12Hour}:{Minutes} {AmPm}</h2>{/block:Date}</div><div id="by_container_perma">By +Matt Albrecht
{/block:Permalink}
{block:IndexPage}<div id="post_h3_container">{block:Title}<h3>{Title}</h3>{/block:Title}
<div id="post_date">{block:Date}<h2>{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} at {12Hour}:{Minutes} {AmPm}</h2>{/block:Date}</div><div id="by_container">By +Matt Albrecht
</div> {/block:IndexPage}
</div>
</div>
<div id="text_post_body">{Body}{block:More} Read more... {/block:More}</div>
<div id="notes">
<p>
<div id="socialcomments">
{block:IndexPage}{block:IfDisqusShortname}<a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'bookishmatt'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
{block:IfDisqusShortname}
{/block:IndexPage}
<span st_url='{Permalink}' st_title='{Title}' class='st_facebook_hcount' displayText='Facebook'></span><span st_url='{Permalink}' st_title='{Title}' class='st_twitter_hcount' displayText='Tweet'></span><span st_url='{Permalink}' st_title='{Title}' </span>
</div>
{/block:Text}
</div>
Any insights welcome. If jquery is needed, I'll admit outright that this is over my head, so I may need a really dumbed down walkthrough for how to implement the code, if that's the case.
EDIT: On the other hand, maybe you're of the opinion that the current hover options are alright on their own. If you don't think the whole snippet should reveal the title/date, I value your opinion on that matter, too.
CSS hover can only affect the object itself or its descendants. In this case, post_h3_container is a child of a sibling.
You could organize this better and:
HTML:
create an element .container that wraps both #by_container_perma and #text_post_body
CSS:
.container:hover #post_h3_container {
opacity: 1
}
If you don't like that, I will give you some jQuery, but it seems excessive.
Also, you mentioned this is a blog... be careful of your id's. They should not be used for repeated content.
#text_post_body:hover #post_h3_container {
opacity: 1.0;
}
Instead of your #post_h3_container:hover properties. Also you can apply the transition property to just plain #post_h3_container