The toggle function works on small screens, but when using a larger screen the toggle function does not show/hide the container.
Is there a way to make the container show by default on large screens but also be able to show and hide the container with button click using Foundation?
Container:
<div class="off-canvas position-left reveal-for-large is-transition-push"
id="mainSidebar"
data-off-canvas
data-position="left"
aria-hidden="false">Content goes here.</div>
Button:
<button class="menu-icon"
type="button"
data-open="mainSidebar"
aria-expanded="false"
aria-controls="mainSidebar">Toggle container</button>
Toggle off-canvas menu for all device.
CSS Code
<style>
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
HTML Code
<body>
<div id="sideNav" class="sidenav">
×
Home
About Us
Our Services
Contact Us
Sign Up
Login Up
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
</div>
JS Script to open and close the toggle
<script>
function openNav() {
document.getElementById("sideNav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("sideNav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
}
</script>
</body>
Related
$(document).ready(function() {
$('.carousel').carousel();
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*:focus {
outline: 0;
}
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
background-color: #000000;
}
.carousel {
height: 700px;
-webkit-perspective: 600px;
perspective: 600px;
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.carousel .carousel-item {
cursor: -webkit-grab;
cursor: grab;
width: 400px;
}
.carousel .carousel-item:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.carousel .carousel-item img {
width: 100%;
}
.carousel .carousel-item h3 {
background-color: #ffffff;
color: #000000;
font-size: 2em;
font-weight: bold;
margin: -5px 0 0;
padding: 10px 5px;
text-align: center;
}
<div class="carousel">
<div class="carousel-item">
<img src="./img/gry1.png" alt="Dog" title="Dog" id="Dog">
</div>
<div class="carousel-item">
<img src="./img/img1.png" alt="Cat" title="Cat" id="Cat">
</div>
<div class="carousel-item">
<img src="./img/img1.png" alt="Wolf" title="Wolf" id="Wolf">
</div>
<div class="carousel-item">
<img src="./img/img1.png" alt="Tiger" title="Tiger" id="Tiger">
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js'></script><script src="./script.js"></script>
I'd like to change background for each item in my carousel, materialize adding "active" class for selected item in carousel but I cant figure out how to change bg (for whole page), I was trying to add background image to css for each item but it didnt cover whole page bg.
I think it will be good to solve it by jquery (check which item is "active" and select background for that item, adding it to body class)
The same script available on codepen:
https://codepen.io/crianbluff/details/PMZBVJ
You can do it like that.
I added the dummy data that contains image-url and I added carousel-item--* classes in HTML.
const setBackground = () => {
const number = document.querySelector('.carousel-item.active').classList[1].split('--')[1];
document.body.setAttribute('style', `background-image: url("${dummy[number]}")`);
}
in number variable, I am getting the carousel-item--* number and get the image-url of dummy data through index and add background-image through javascript
Codepen: https://codepen.io/NishargShah/pen/oNzwGwx?editors=1010
I am making a pretty simple bottomnav for a project I am working on, and I am having difficulty with the view in mobile mode. From standard desktop, I have a pretty simple, bottomnav with 4 icons, however when I inspect the page in mobile view, it only shows you either the first, or the first and 2nd icon. all of my styling for this component is:
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: rgb(75, 90, 72);
overflow: hidden;
position: absolute;
bottom: 0;
min-width:800px;
height:64px;
/* width: 100%; */
}
.navCont {
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
.navButton {
margin-left:10vh;
margin-right:10vh;
min-width:10px;
}
.navButtonLeft {
margin-left:10vh;
margin-right:10vh;
min-width:10px;
}
/* Style the links inside the navigation bar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.navbar a.active {
background-color: #4CAF50;
color: white;
}
img {
width:32px;
height: auto;
float:left;
margin-bottom: 20px;
}
#media screen and (max-width: 100px) {
.navbar {
display: inline-block;
height:64px;
}
.navCont {
display: flex;
align-content: space-between;
}
.navButton,
.navButtonLeft {
padding: none;
display: inline-block;
}
img {
display: inline-block;
}
}
Any advice or tips would be greatly appreciated!
edit: Here is the component i am working with.
import React from "react";
import home from "./home.png"
import post from "./post.png"
import profile from "./profile.png"
import search from "./search.png"
import "./Footer.css";
class Footer extends React.Component {
render() {
return (
<div class="navCont">
<div class="navbar">
<img src={home} alt="home icon"/>
<img src={profile} alt="home icon"/>
<img src={post} style={{width:"44px", height: "auto"}} alt="home icon"/>
<img src={search} style={{width:"44px", height: "auto"}} alt="home icon"/>
</div>
</div>
);
}
}
export default Footer;
I've revamped your css to use flexbox for laying out the icons in a row; got rid of all the floats and some other rules that seemed unnecessary. I'm not sure this does exactly what you're trying to do (since I don't know exactly what you're trying to do) but I think this is at least a better starting point.
.navCont {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color: rgb(75, 90, 72);
}
.navbar {
height: 64px;
display: flex;
justify-content: center;
}
/* Style the links inside the navigation bar */
.navbar > * {
flex: 0 0 auto;
padding: 14px 16px;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
img {
width: 32px;
max-width: 100%;
height: auto;
}
<div class="navCont">
<div class="navbar">
<a href="/" class="navButton">
<img src="https://via.placeholder.com/64x64.png/fff/000/?text=A" />
</a>
<a href="Profile" class="navButton">
<img src="https://via.placeholder.com/64x64.png/fff/000?text=B" />
</a>
<a href="Post" class="navButton">
<img src="https://via.placeholder.com/64x64.png/fff/000?text=C" />
</a>
<a href="Search" class="navButton">
<img src="https://via.placeholder.com/64x64.png/fff/000?text=D" />
</a>
</div>
</div>
My question is actually more complex then the title, but I couldn't come up with a better one.
Initial Setup:
I use Bootstrap v4.0.0-alpha.2 and I ripped out this simple sidebar. I'm not sure why and if it's relevant but I also set flex: true in my _library-variable-overrides.scss (I use css-burrito) but since I only set it to try it out, I'm probably okay with turning it off. ;-)
What I want to do:
I would like to have a button in the sidebar that is bottom aligned. Ideally it's centered horizontally in the sidebar and has about 1em margin to the bottom.
What my code looks like:
_shell.scss & _sidenav.scss:
#shell-wrapper {
padding-left: 0;
transition: all 0.5s ease;
}
#shell-wrapper.toggled {
padding-left: 250px;
#shell-content-wrapper {
position: absolute;
margin-right: -250px;
}
}
#media(min-width:768px) {
#shell-wrapper {
padding-left: 250px;
}
#shell-wrapper.toggled {
padding-left: 0;
#shell-content-wrapper {
position: relative;
margin-right: 0;
}
}
#shell-content-wrapper {
padding: 20px;
position: relative;
}
}
#sidenav-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
transition: all 0.5s ease;
}
#shell-wrapper.toggled {
#sidenav-wrapper {
width: 250px;
}
}
#shell-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
/* Sidenav Styles */
.sidenav-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
li {
text-indent: 20px;
line-height: 40px;
a {
display: block;
text-decoration: none;
color: #999999;
}
a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
a:active, a:focus {
text-decoration: none;
}
}
>.sidenav-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
a {
color: #999999;
}
a:hover {
color: #fff;
background: none;
}
}
}
#media(min-width:768px) {
#sidenav-wrapper {
width: 250px;
}
#shell-wrapper.toggled #sidenav-wrapper {
width: 0;
}
}
and index.html:
<div id="shell-wrapper" class="toggled">
<div id="sidenav-wrapper">
<ul class="sidenav-nav">
<li class="sidenav-brand">
Brand
</li>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li id="logout">
<button class="btn btn-danger-outline">Logout</button>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button">
☰
</button>
<div id="shell-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<!--Main Content Here-->
</div>
</div>
</div>
</div>
</div>
The logout button is one in question. I just tried doing it as a <li> of the sidenav-nav but I'm not tied to this setup.
What I have tried so far:
a lot!
What came closest to what I want was adding this:
.sidenav-nav {
height: 100%;
}
#logout {
position: absolute;
bottom: 1em;
}
It's pretty close to my goal on a desktop browser, but hitting that show me this on a phone button in chrome, the logout button is just gone.
i haven't worked with css-buritto, but you could look into giving the button a class or id and passing the position:relative argument you can then set a bottom: 1em and that should position the button at the bottom. alternativly you can also look into the other position elements like fixed that could also do the trick
like you mentioned a the end
#logout {
position: relative;
bottom: 1em;
}
I have a box with a background, which is dimmed when hovered on. There is also a text, which is uncolored (transparent color), I'm trying to set its color to white when parent element is hovered on.
I know this should work:
#someDiv:hover > .someClass {
color: white;
}
But in my code it doesn't. Can anyone point me to the mistake?
jsfiddle here.
HTML:
<div class="row">
<div class="box" style="background:url('http://images6.fanpop.com/image/photos/34000000/Sandor-Clegane-sandor-clegane-34035068-960-640.jpg')">
<div id="overlay"></div>
<div class="hashContainer"><span class="tru">123</span></div>
</div>
CSS:
.box {
display: inline-block;
width: 300px;
margin: 40px;
height: 300px;
background-size: cover;
z-index: -1;
}
.hashContainer {
pointer-events: none;
position: relative;
top: 22%;
}
#overlay {
height: 300px;
width: 300px;
position: absolute;
}
#overlay:after {
content: "";
display: block;
height: inherit;
width: inherit;
opacity: 0;
background: rgba(0, 0, 0, .5);
transition: all 1s;
top: 0;
left: 0;
position: absolute;
}
#overlay:hover:after {
opacity: 1;
}
.tru {
font-size: 70px;
color: transparent;
font-weight: 900;
transition: all 1s;
}
/* not working */
#overlay:hover > .tru {
color: white;
}
/* not working */
.box > .tru {
color: white;
}
In my case, I'm trying to apply color change to the tru class span, while box \ overlay divs are hovered.
The [#overlay] is a sibling of[+] [.hashcontainer and .hashcontainer] the parent of[>] [.tru]
CSS
#overlay:hover + .hashContainer > .tru {
color: white;
}
HTML
<div id="overlay"></div><!----------------[#overlay isn't a parent of .hashContainer but an actual sibling]-->
<div class="hashContainer"><!-------------[.hashContainer is the parent of .tru]-->
<span class="tru">123</span>
</div>
http://plnkr.co/edit/H2Up3Y2YD6fl5uiwQky4?p=preview
Consider the following HTML document:
<html>
<head>
<style>
.someClass:hover { //mention in this manner
background: blue;
}
</style>
</head>
<body>
<div id="id1" class="someClass" >
<h1 id="id2" > HELLO MAN </h1>
</div>
</body>
</html>
The above code works. Color changes to blue when you hover over <div>.
How can I achieve the following effect: when a user clicks a link he'll see the content of the current page slowly move up and away then new content of the next page appear instead. I'd prefer to use only CSS if possible.
A CSS-only solution can be achieved with transitions. Here's the example and the code is as follows:
CSS
.message {
background:#181818;
color:#FFF;
position: absolute;
top: -250px;
left: 0;
width: 100%;
height: 250px;
padding: 20px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;
}
.message h1 {
color:#FFF;
}
#toggle {
position:absolute;
appearance:none;
cursor:pointer;
left:-100%;
top:-100%;
}
#toggle + label {
position:absolute;
cursor:pointer;
padding:10px;
background: #26ae90;
width: 100px;
border-radius: 3px;
padding: 8px 10px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
margin:20px 50px;
transition:all 500ms ease;
}
#toggle + label:after {
content:"Open"
}
.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
padding:5em 3em;
}
#toggle:checked ~ .message {
top: 0;
}
#toggle:checked ~ .container {
margin-top: 250px;
}
#toggle:checked + label {
background:#dd6149;
}
#toggle:checked + label:after {
content:"Close"
}
HTML
<input type="checkbox" name="toggle" id="toggle" />
<label for="toggle"></label>
<div class="container">
<h1> Click the Open button to see hidden mesage.</h1>
</div>
<div class="message">
<h1> hello, I'm a hidden message. You found it.</h1>
</div>
Here's one way to do it:
HTML Include all your pages in a <main> div (or else)
<body>
<main>
some link
</main>
</body>
CSS make the <main> in fixed position, and the size of the window
main {
position: fixed; top: 0; left: 0;
width: 100%; height: 100%;
}
jQuery
$('a').click(function(event){ // when click on any link <a>
event.preventDefault(); // prevents <a> natural behavior (sending you somewhere)
var URL = $(this).attr('href'); // stores the <a> href attribute
$('main').animate({top:'-=100%'},1000,function(){ // moves up <main> and when it's gone…
window.location.href = URL; // sends you where you belong
});
});
Cheers!
$('a').click(function(event){
event.preventDefault();
var URL = $(this).attr('href');
$('main').animate({top:'-=100%'},1000,function(){
window.location.href = URL;
});
});
main {
position: fixed; top: 0; left: 0;
width: 100%; height: 100%;
background-color: #DDD;
padding: 10px;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<main>
some link
</main>