I am trying to have 2 divs totally overlapping: one div for a menu controller, one div for a menu.
The menu controller will catch all the mouse events, make the menu div disappear, etc.
I have settled most of it already, but I cannot manage to have the controller div on top of the menu div. To check the positioning, I change the background color of the controller in order to see if the menu is hidden.
My code is at the following location: http://codepen.io/3MO/pen/mJKeKg.
The main idea is the following:
#menu {
z-index: 0;
top: 0px;
position: absolute;
width: 100%;
height: 150px;
background: linear-gradient(90deg, rgb(60, 60, 60) 40%, white 49%, white 51%, rgb(60, 60, 60) 60%);
background-repeat: no-repeat;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 16px;
cursor: auto;
}
#menuController {
z-index: 10;
top: 0px;
position: absolute;
width: 100%;
height: 150px;
background-color: red;
}
I tried position:relative and position: absolute for both divs, no luck so far. Can you tell me what I do wrong?
Thanks!
You should add position: relative to their parent ( <body> ) element
I've managed to create a workaround this issue using javascript since you're already using this a lot. Function you need is below. I'm hiding menuController just for a moment, check what is beneath it under click coordinates and then showing it again.
function registerControllerClick() {
$(menuController).click(function(event) {
$(menuController).hide();
window.location.href = document.elementFromPoint(event.clientX, event.clientY).href;
$(menuController).show();
});
}
Add it to your init code:
function init() {
registerControllerOver();
registerControllerOut();
registerControllerClick();
}
Working example
If you don't want to go to location specified by href, but trigger click event instead use jQuery trigger('click') - take a look here
Related
This question already has answers here:
Hide div when user reaches the bottom of page
(3 answers)
Closed 1 year ago.
I have a fixed image
<img id="project-badge" src=x">
with this CSS:
#project-badge {
position: fixed;
right: 40px;
z-index: 2;
max-width: 130px;
bottom: 65px;
display: block !important;
}
The image stays fixed on the right side as the user scrolls down the page.
Im trying to get it to disappear once it's about 50-100px from the bottom of the screen. Some sort of smooth transition disappear would be great too so it's not so sudden.
Can it be done with pure CSS, and if not, how can it be done with Javascript?
$(window).scroll((function() {
// when you have multiple element to disappear
$(this).scrollTop> x && ("your_identy_element").each(function(a){
// effect disappear smooth timeout
setTimeout((function() {
$("your_identy_element").eq(a).addClass("your_styling_disappear")
}), 650 * (a + 1))
})
}
))
maybe what you mean is the paralax landing element effect, I want to give a direct example of the code but I'm too lazy to code and it's quite a hassle, so I gave the youtube tutorial link about paralax landing element "https://www.youtube.com/watch?v=cEkCIn4rY4Q"
but it's language in indonesia, iam suggest you for watch until end and try.
as far as I know, there is no way to do this using CSS however it can be done with javascript using the code below.
window.onscroll = function(event) {
if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
alert("you're at the bottom of the page");
//you can add a css class to you're image element
}
};
You can do this without the overhead of listening and reacting to scroll by using IntersectionObserver.
Plant a 1px element 200px up from the bottom of the content (or wherever you want the badge to start disappearing), observe it so when it is in the viewport the badge fades away and when it leaves the viewport (i.e. the user scrolls up again) fade it in.
let observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach(entry => {
const badge = document.querySelector("#project-badge");
if (entry.isIntersecting) { badge.classList.remove("fadein"); }
else { badge.classList.add("fadein"); }
});
});
observer.observe(document.querySelector("#pixel"));
#project-badge {
position: fixed;
right: 40px;
z-index: 2;
max-width: 130px;
bottom: 65px;
display: block !important;
/* ADDED */
opacity: 0;
transition: opacity 1s;
}
#project-badge.fadein {
opacity: 1;
}
#pixel {
position: absolute;
width: 1px;
height: 1px;
top: calc(100% - 200px);
}
/* JUST FOR THE DEMO */
#content {
background: linear-gradient(to bottom, white, gray);
position: relative;
height: 200vh;
}
#project-badge {
background-image: linear-gradient(to right, cyan, lime);
height: 30px;
width: 130px;
}
<img id="project-badge" src="x">
<div id="content">CONTENT - SCROLL DOWN AND UP TO SEE BADGE FADE OUT AND IN
<div id="pixel"></div>
</div>
Thanks for taking the time to read my post.
So I've started freelancing recently (CSS and HTML) and I've found my first difficulty.
Look at the green bar (Its a fixed div), its green for testing porpuses, but client wants it to be transparent when on top of this orange background...
...But switch to another color when on top of this white background (So the letters can be seen)
Is this possible to do with CSS? If so, how do I do it?
Thanks again!
Pure css does not currently have any amount of responsiveness to what is and is not onscreen. So, the short lame answer is "not with just css."
That being said, it's very easy to do this with js.
The event you'll be looking for is scroll event.
From there you can add/remove a class for styling.
Something like this:
// wait for document.addEventListener("DOMContentLoaded");
const myHeader = document.getElementById("MyHeader");
window.addEventListener("scroll", () => {
const scrollPos = window.scrollY;
if (scrollPos ... add your logic here) {
myHeader.classList.add("scrollIsThing"); // this is the css class you'll target
} else {
myHeader.classList.remove("scrollIsThing");
}
});
Sorry there's no good css way to do this.
It is "kind of" possible to do this just with css if you can accept some html markup duplication. You can split the fixed header into two layers, one for white text, one for background, and using z-index you can sandwich the content between these two header layers (in case of a colorful content), in which case only the white text would be visible, and position the white content below the header background. A sample of such behavior is shown below:
.header {
height: 50px;
background: transparent;
position: fixed;
top: 0;
width: 100%;
color: white;
font-family: sans;
text-align: center;
line-height: 50px;
z-index: 3;
}
.header.header-background {
background: teal;
z-index: 1;
}
.body1 {
height: 120vh;
background: orange;
z-index: 2;
position: relative;
}
.body2 {
height: 120vh;
background: #eee;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
<div class="header">
White text
</div>
<div class="body1"></div>
<div class="header header-background">
</div>
<div class="body2"></div>
I made a transparent button:
.home-btn-left {
position: fixed;
left: 20px;
top: 20px;
background-color: transparent;
width: 100%;
height: 100%;
cursor: pointer;
}
<a class="home-btn-left" onclick="plusDivs(-1)">❮</a>
It doesn't have a hover, focus or active state. But when I push it on my iphone I see this and I really don't wanna have it:
Do you have some suggestion?
https://jsfiddle.net/3bfptxty/
First off, you should apply the styles for every state of the <a> element using:
.home-btn-left,.home-btn-left:hover,
.home-btn-left:active, .home-btn-left:focus { /* your styles */ }
then you should add the otline property, to prevent dotted outline or similar behaviours
outline: 0;
Edit:
on more digging you might be searching for -webkit-tap-highlight-color, like described here
I've been playing around with CSS and I'm stuck with one really awful problem - position:fixed. The problem is that I'm editing wordpress template and as it is known, there's an admin bar with position:fixed in every template. I've tried to add another bar, like a menu, below that admin bar, but it always shows not directly below the admin bar, but about 50px below it. The menu is fixed, but not in the exact place I want it to show up.
I cannot place the menu bar with property top:28px, because the admin is only visible for the registered users, so for guests, the menu would still float 28px below an invisible object. As for registered, it would be fine, but as I've said, not for guests.
Pasting the code of admin bar and menu, maybe someone of you may find the problem...
#headerbar {
min-width: 100%;
height: 55px;
background-color: rgb(0, 166, 81);
z-index: 999999;
position:fixed;
}
#wpadminbar {
direction: ltr;
color: rgb(204, 204, 204);
font: 13px/28px sans-serif;
height: 28px;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
min-width: 600px;
z-index: 9999;
background: linear-gradient(to top, rgb(55, 55, 55) 0px, rgb(70, 70, 70) 5px) repeat scroll 0% 0% rgb(70, 70, 70);
}
If this is not enough to spot the problem, I could post the body CSS (if only needed?).
You could set different top positions for logged-in and non-logged-in users. Like, give your header bar a default top position of 0, when the user is logged in and an admin, give it an additional "with-admin-bar" class which will set the top position to 28px or so.
EDIT: Actually, this here is the more correct and clean solution:
CSS:
.bar-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%
}
.admin-bar {
height: 50px;
background: red;
}
.other-bar {
height: 50px;
background: blue;
}
HTML:
<div class="bar-wrapper">
<div class="admin-bar"></div>
<div class="other-bar"></div>
</div>
See it live: http://jsfiddle.net/CVeXA
I am trying to create a div that is square on the top site and flows into a triangle,
the square part is not so hard, and works fine, but the triangle part is a bit harder.
The box needs to change from size with the screen size, in the square i did this by using % in the width and height, but i cannot use the % sign in the border property
The code i have on this moment
HTML
<div id="overV12" class="menuItem" onclick="scrollToT('#overons')" onmouseover="setHover('overV12')" onmouseout="setOldClass('overV12')"><div class="menuInner">Over V12</div></div>
CSS
div.menuItem
{
height: 5.38%;
width: 7.44%;
position: fixed;
background-color: rgb(239, 239, 239);
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
}
div.menuItemHover
{
height: 5.38%;
width: 7.44%;
position: fixed;
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
background-color: rgb(211, 211, 211);
}
div.menuItemActive
{
height: 7.8%;
width: 7.44%;
position: fixed;
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
background-color: Black;
color: White;
}
The JavaScript is used for setting the class: i did this because i use a parralax library and wanted to set the button on "active" on a certain height
i hope someone can help me (and perhaps others) with this problem
jsfiddle
example
My idea is that when the div is set on class menuItemActive, it will have the arrow, else not
This is only when it is set on active
This uses two overlapping divs to create the triangle and this method to make things fluid while maintaining the aspect ratio.
Working Example
.div1 {
width:100%;
height:100%;
border: 1px solid red;
position:absolute;
z-index:2;
}
.div2 {
width:70%;
min-height:70%;
transform:rotate(45deg);
border:1px solid blue;
position:absolute;
left:15%;
top:65%;
z-index:1;
}
#container {
display: inline-block;
position: relative;
width: 25%;
}
#dummy {
padding-top: 100%;
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I left it without a background so you could see how it works.
You can do triangles in CSS.
Here's a link to an article, outlining the general technique: http://css-tricks.com/snippets/css/css-triangle/. There's also a variety of similar/other approaches for slightly different situations I've found and used, just search "css triangles".
To briefly describe the technique: it uses four borders on an element (if you wanted a down arrow, you'd put this element inside your <div id="overV12">, or depending on the effect, apply it to your inner <div>). Some are transparent, some aren't. By changing the border widths and colors, you can generate CSS triangles, which can be fully customized to form different angle degrees, lengths, etc. I've also seen this concept used to create CSS-only speech bubbles as well as tooltip handles.
I've used this technique extensively, and in my use cases, it worked in every browser (although I do remember having a problem with IE6 on one project).
I found the solution by using javascript instead of percentage,
Fiddle
I hope this can help some other people as well
The java script i used is this:
$(document).ready(setSize());
function setSize() {
var halfWidth = ($('.div1').width()) / 2;
$('.div2').css('border-width', ('50px ' + halfWidth + 'px 0 ' + halfWidth + 'px'));
$('.div2').css('top', ($('.div1').height()));
}
its better to use a background image for custom shaped like this
it'll make it easier to manager and you can make it adjust itself for different resolutions easily