I'm using CSS to bring down a header element when the user hovers over it. Is it possible to also bring down the rest of the page so that the header overlaps absolutely nothing? How would this be done?
Example of header here: http://dev.handyvet.org/VetProsDevSite/_MASTER/views/vetpro%20users/vet_pro_registration_3.html
Thanks!
You just need to use the height of the nav div, like this:
nav {
width: 100%;
height: 50px;
background: #000;
color: #fff;
}
.active {
height: 200px;
}
I made you a very simple fiddle: http://jsfiddle.net/rnc8L53L/
I used jQuery to toggle the .active class, on the nav when the button is pressed. The .active class overrides the "height:50px" rule , which is the initial state of the nav class.
It's just a very simple example that. It can be done with Javascript too but the event handling is a little more complex. Hope it helps.
You can move the whole page instead of header. Set negative top margin for page as default and decrease it's value when you need it
Related
*Edit: Everyone is disliking this post :(
So I want a button (I'll make a hamburger text) and when I click the button I want the whole page (the navigation element) to become (100% width and 100 height and I'll put flex in it) the navigation menu and when I click the button again the navigation element disappears.
What I want to know:
How do I do the CSS so that the navigation element opens over everything else?
position:absolute?
(After I know how to put the navigation element over everything else -
Maybe display: none on the navigation page and somehow put it over everything when I change display: visible with JS?)
Where can I find JS (because I don't know it yet) to edit CSS of the navigation element on click?
Something like this from W3, but I will probably need to change the diplay from none to visible and back again:
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
In order to set your navigation into full screen, you should use position:fixed property of css. In order to properly hide and show the navbar you should toggle the class of the element instead of directly applying the display style. Take a look at below example to understand it better -
let btn = document.getElementById('btn');
let nav = document.getElementById('nav');
btn.addEventListener('click', function(){
//event listener toggling the active class
if(nav.classList.contains('active')){
nav.classList.remove('active'); //remove active class if already added
} else {
nav.classList.add('active'); //add active class if not added
}
});
html, body{
height: 100%;
width: 100%;
}
nav{
display: none; /*default in hidden state*/
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
color: white;
}
nav.active{
display: inline-block; /*visible if nav element contains active class, applied via JavaScript code*/
}
#btn{
position: fixed;
top: 40px;
left: 10px;
z-index: 100;
}
<nav id="nav">
Full screen content
</nav>
<button id="btn">toggle full screen element</button>
<p>Some static content</p>
Try to add css position:absolute; and z-index=99 to your navigation element and toggle its display with onclick.
So I'm working on a silly to do list app using mostly materialize and jquery.
Here is my codepen:
http://codepen.io/centraleft/pen/adWvPp
Basically the user enters text, my javascript takes that text and makes a new list element with a button inside of it. I want the button to always be on the far right of the list item regardless of the text inside the list element, so I float the button to the right however I run into a problem where I have an ugly little black sliver at the bottom of my list! Use the app once and you will see.
Is there another way to accomplish what I'm trying to do? Or a way to get rid of that black sliver with CSS?
Here is my current CSS for the button:
.orange {
bottom: 7px;
float: right;
height: 35px;
width: 35px;
}
The problem is your button is bleeding outside of your list. Set your lis to have a max height and overflow: hidden. See my fork.
The additions (CSS):
.collection-item {
height: 42px;
overflow: hidden;
}
On my webpage, I have a footer which has a textarea box. When the user clicks in the textarea, I want the rest of the page to darken by 60%, kindof like they are in a modal. I am a noob when it comes to advanced css so I am unsure of the properties to apply.
I am using bootstrap 3, javascript and knockout. I know how to detect when the user is in the text area I just want to change the background so everything else is opaque.
A jsFiddle would be wonderful as well :)
We use a combination of CSS and JQuery JavaScript for that. You'd basically use some Overlay method first to overlay the whole page (e.g. See Technique #1 from the Link).
With the help of JavaScript, We attach to events of the forms to:
Show the Overlay
Make the required form elements, e.g. the first Div inside the form, appear above the Overlay ("z-index" CSS attribute)
CSS:
Overlay has Z-Index 10, so give the relevant element the Z-Index 11 to appear on top:
form > div { z-index: 11; }
this JQuery JavaScript can look like this:
$(document).on("focus", "textarea", function() {
$(".overlay").show();
});
Beware, this is not only a "background" topic, if you want to prevent users to do any interaction with the page, you need an overlay which actually blocks clicks. Also, in our case, we also had to prevent any links to be triggered which are below the overlay. Users were still able to go through the links using the TAB key on they keyboard to navigate to a button and click it using the Space key, so we also added JavaScript code to prevent that when in editing mode.
EDIT: a very basic Fiddle
Here is how I would do this - When the user clicks in the text area, set a class on body, and style the class.
with jQuery (you can use vanilla js too)
$('.my-textarea').on('focus', function() {
$('body').addClass('dark');
});
$('.my-textarea').on('blur', function() {
$('body').removeClass('dark');
});
body.dark {
background-color: #333;
opacity: 0.6;
}
A good solution is to make a modal appear behind the input and not just making the background darker, this can be accomplished with css alone
...
<style>
textarea:focus{
z-index: 901;
position: relative;
}
textarea ~ .textarea-modal{
position: fixed;
background-color: transparent;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 900;
pointer-events: none;
transition: background-color .5s ease;
}
textarea:focus ~ .textarea-modal{
pointer-events: auto;
background-color: rgba(0,0,0,0.3);
}
</style>
...
<div>
<textarea></textarea>
<div class="textarea-modal"></div>
</div>
...
feel free to change the selectors to target specific elements, however at the moment when you focus on the textarea a modal would appear below it with other elements behind.
How can I set up my menu to slide out, only when the header is hovered on? I'm looking to set it up to function exactly like this: http://adirondack-demo.squarespace.com/
So on hover, it slides out, but doesn't push the content down.
Any ideas? jQuery, or can this be done VIA CSS?
Thought I'd add a javascript version as css animations can be tricky and are often not fully supported (though I'm not sure the other answer even uses animations and I can't seem to get it working).
Here is my: JsFiddle
bar is the top bar, baz is the page content and foo is the drop-down. On mouseover of bar, foo drops down without effecting the content, because it is positioned absolutely. The animation keeps it at the bottom of bar. Feel free to play with it and ask questions.
One option: if the menu is a child element of the header. In that (markup) case you could set position: relative; to the header and position: absolute; to the menu element to position the one below the other. Use the CSS :hover pseudo class to make the menu visible.
#header {
position: relative;
}
#main-menu {
position: absolute;
top: 100%
display: none;
}
#header:hover #main-menu,
#header #main-menu:hover {
display: block;
}
If you want the menu to stay open, if the user crosses the border with his/her cursor, you may use an additional wrapper around the menu. That wrapper would become the target of the display settings. You could then assign that transparent wrapper a padding of your choice. The menu stays visible as long as the cursor is within the padding of the wrapper element.
#main-menu-wrapper {
display: none;
padding: 5em;
}
#header:hover #main-menu-wrapper {
#header #main-menu-wrapper:hover {
display: block;
}
I have a page with some blog items. The items are preceded with anchors, and sometimes I directly link to them using #my-item.
The thing is, I have a fixed menu on top, and that menu now covers the title because the anchor link hugs the top of my browser.
Is it possible to push this down (by 100px for example)? I can think of a jQuery way on click()but as I said, sometimes I come from another page.
You can change the way anchor jumping behaves by adding negative top-margin to the target and compensate it with the same amount of top-padding. The browser will jump to the position of the negative margin on click, but the target will still have correct spacings.
Here's an example jsfiddle
CSS
article {
display: block;
margin-top: -50px;
padding-top: 50px;
}
This is an old thread, but since it is still popping up in search results, it should be noted that current CSS provides the scroll-margin-top property for that purpose which is widely supported as of 2021.
You can simply use
#my-item { scroll-margin-top: 100px; }
to push the item down without meddling with margin and padding.
Why not add some padding to the element?
<h3 style="padding-top: 100px;">The subheading</h3>
The browser will scroll down until the viewport meets the top edge of the element, and the element has 100px of space between the content and the border.
The easiest method would be to add a margin or padding to the top of your content. Consider this HTML:
<a name="post1234"></a>
<article>
Lorem ipsum...
</article>
When the hash points to #post1234 the link will be positioned at the top of the screen. So just add padding/margin to the top of the article:
article { padding-top: 100px; }
Solution:
Add padding to you a
a.anchor{
position: relative;
padding-top: 100px;
width:1px;
display: block;
}
Thx
In case anyone wants to know how push down the jump target for all anchors on a page, here it is:
/* all anchors and all elements with the anchor class */
a, .anchor { margin-top: -2em; padding-top: 2em; }
/* all anchors with an href attribute */
a[href] { margin-top:0; padding-top: 0; }
You could also use margin-top:unset; instead of margin-top:0;
If you're really feeling dangerous, you could probably use *[id] and apply this to everything with an id. But I probably wouldn't do it. I don't know. Give it a shot. Take a walk on the wild side.
Other answers here seem to include a display setting, but I don't see how that's necessary or helpful.