Develop Reference

How to make custom cursor display over image?

I'm building a portfolio site for myself and I made a custom cursor that follows the default one, by creating an empty div, styling it as a small circle, and making it trail behind the default cursor with Javascript. All of that works fine.
The problem is that once the cursor moves over an image, the circle is displaying under it.
HTML
<div class="cursor"></div>
<img src="https://steamuserimages-a.akamaihd.net/ugc/268338039154053677/D41BD0C4419DBF35C84CB17B2737B065504B1858/" alt="">
CSS
.cursor {
height: 15px;
width: 15px;
border: 1px solid #0b0d0f;
border-radius: 50%;
position: absolute;
transition-duration: 200ms;
transition-timing-function: ease-out;
pointer-events: none;
}
JavaScript
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
console.log(e);
cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")
})
I would expect the custom cursor to hover over the image along with the default cursor, but instead is displays under it.

Give the hovering element a higher z-index in the CSS to make it appear in front of other elements (jsfiddle).
However, this may be a browser-specific problem—it works for me even without the z-index set.

CSS transition property does not take effect on div

This is my first question on stack exchange so feel free to let me know if I haven't included enough information. I've looked for a solution to my particular issue and found nothing relevant so here goes...
I'm trying to achieve a sidebar navigation that slides in upon a menu button being pressed. The rest of the page should slide with it so it flows smoothly. I have used some simple javascript to toggle on/off a .active class for the navigation sidebar div and the content-wrap div. For reference, this is what I'm trying to do: http://antrikshy.com/. The transition property is applied to both the sidebar div and content-wrap element but is only affecting the navigation bar. After inspecting the webpage, I can see the css properties have been applied to the content-wrap element successfully, but they don't work. This has been tested in safari and firefox with no change in results.
See the Pen sidebar transition example on CodePen.
Here is the individual css on the content-wrap:
.content-wrap {
position: relative;
transition: all ease 2.5s;
padding: 10px;
overflow: auto;
}

You need to define both sides of the transition. If you are transitioning on left you need the left attribute of 0 so the transition has a starting point.
.content-wrap {
position: relative;
transition: all ease 2.5s;
padding: 10px;
overflow: auto;
left:0 /* THIS */
}
On my browser that fixes your pen -- https://codepen.io/anon/pen/EvKQxR.

Sliding menu from the top hides behind Safari mobile bar

I have a serious issue with my dropdown settings on iOS Safari. Imagine a website, which has a header on the top. If you click the header, it will slide down, just like any notification center on mobile phones. The way I chose was quite simple. I have a <div class="settings hide"> with this css:
.settings{
position: fixed;
width: 100%;
height: calc(100vh + 60px);
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 10;
}
.hide{
top: -100vh;
}
Now, this makes it look like so:
Now, the next step was to create it "slide-able" which I've done using jQuery, by adding class called "show".
.show{
top: calc(0vh - 60px);
}
And this actually made it great. It just worked! Suddenly I tried the website on my iPhone, and because of the bottom bar, always showing until you scroll, my hipe was all gone.
Because it look like this:
Getting it so far? My menu did slide correctly, looks great in any browser, but here in Safari, it is hidden right behind the bar, so user actually can't close it.
I tried my best to solve this issue, butnothing really worked as I wanted.
PS: I assume you know that, but it kinda works when you use bottom: 0;, then it "knows" about the bar and stops correctly right above it. But because the setting is calculated with top position, it does not do the animation, which is necessary for my design.
Any help/solution appreciated!

David, unfortunately iOS Safari is full of unpleasant surprises.
One of them is what iOS Safari considers 100vh.
Viewport height in iOS Safari is not equal window inner height as in Chrome or Firefox.
E.g. on iPhone 7plus 100vh == 696px, but window.innerHeight == 628px.
On iPhone 6 100vh == 628px, but window.innerHeight == 559px.
And so on...
So the solution is getting rid of 100vh.
Assuming that body is offset parent of .settings use 100% instead:
.settings {
position: fixed;
width: 100%;
height: calc(100% + 60px);
...
}
.hide {
top: -100%;
}
Also you do not need to use calc in your .show class (since 0vh === 0):
.show {
top: -60px;
}

Sliding Full width div in CSS Or Javascript

I have been looking around the internet for a while to find a good library or way of making a mobile full width/height div
And when I click a button it swipes to the right revealing another div
with new content, and pushing the current div to the left ( or right )
The blue box is my viewport, mobile in this case
Here's a crappy illustration to show what I mean
I have tried using CSS ( with semi-success ) I can reveal another div using
.slide {
position: absolute;
width: 100%;
height: 100%;
transition: transform .5s ease-in-out;
}
#slide-options {
background: #eee;
transform: translate(100%, 0);
}
#slide-options.active {
transform: translate(0,0);
}
But it's just sliding over the 1st div, not pushing it along
Any idea's or existing libraries?
Thank you!

Foundation Toggle-able Sidebar with Icons Like Wordpress Dashboard

I am trying to build a sidebar navigation like the one used in the Wordpress admin dashboard. I like the option to collapse the sidebar but still see the icons. I'm using Zurb Foundation and jQuery. I finally have a solution that I think might work, but it's doing some funny things. The <li>s are all different widths, until I collapse and reopen the menu for the first time. Then they all stay the same size. So here are my questions:
How can I make the lis be the same size on the first load?
How can I make the main content resize and push over when the sidebar opens (instead of getting pushed down, which is what is currently happening)?
I want the sidebar to appear open on the first page load (with icons and titles), but then if the user toggles it closed (to just the icon view), it should stay closed as they navigate the site. How do I do that?
Here's a jsFiddle with my code.

Here you have a tutorial to do this, and works like a charm, you only need to adapt it to Foundation tutorial
In your particular case, since you want to have teh icons always visible, just open components.css and replace
.gn-menu-wrapper {
position: fixed;
top: 60px;
bottom: 0px;
left: 0px;
overflow: hidden;
width: 60px;
border-top: 1px solid #C6D0DA;
background: none repeat scroll 0% 0% #FFF;
transform: translateX(-60px);
transition: transform 0.3s ease 0s, width 0.3s ease 0s;
}
with
.gn-menu-wrapper {
position: fixed;
top: 60px;
bottom: 0px;
left: 60px;
overflow: hidden;
width: 60px;
border-top: 1px solid #C6D0DA;
background: none repeat scroll 0% 0% #FFF;
transform: translateX(-60px);
transition: transform 0.3s ease 0s, width 0.3s ease 0s;
}