I am trying to figure out how I can use Laxxx.js with my html section with two boxes.Here is my code.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<title>Sidebar Navigation</title>
</head>
<body>
<section id="about">
<div class="page-num">
<h1>01</h1>
</div>
<div class="left">
<div class="box1"></div>
<div class="box2" data-lax-preset="spin-180"></div>
</div>
<div class="right">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam alias recusandae tenetur impedit similique dolore, rem molestias illo incidunt ipsum ipsa omnis odit, placeat tempore sapiente aliquid unde. Quaerat, architecto ex sit possimus commodi distinctio enim. Maxime, odit iste animi ut et iure, eius error.</p>
</div>
</section>
<script src="node_modules/lax.js/lib/lax.min.js"></script>
<script>
window.onload = function() {
lax.setup() // init
document.addEventListener('scroll', function(e){
lax.update(window.scrollY)
},false)
console.log('hey');
}
</script>
</body>
</html>
scss
#about {
background: black;
height: 100vh;
display: flex;
align-items: center;
color: white;
position:relative;
overflow:hidden;
.left {
width: 40%;
position:relative;
.box1{
position:absolute;
top: 20% ;
left:20%;
z-index:0;
width:400px;
height:400px;
border:30px solid yellow;
overflow:hidden;
transform: rotateZ(65deg);
}
.box2{
position:absolute;
top: 30%;
left:10%;
z-index:0;
width:300px;
height:300px;
border:30px solid red;
overflow:hidden;
}
}
.right {
width: 50%;
padding: 10vh 20vh;
// position:relative;
h1 {
font-size: 3vw;
margin: 0;
}
p {
font-size: 1.2rem;
line-height: 28px;
}
}
}
I guess I have followed al the steps on documentation however I get no amination on scroll and no error on console as well.
And here is the github documentation for laxxx.js https://github.com/alexfoxy/laxxx
I think you just need to add the lax class
<div class="lax box2" data-lax-preset="spin-180"></div>
Related
could someone help with this?
i have four articles and i want them to be organized like this:
first one
second one third one fourth one
but i don't understand what is the problem??
body {
background-color: #edefee;
font-family: serif;
margin-top: 3rem;
margin-bottom: 3rem;
margin-left: 5%;
margin-right: 5%;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
header > img {
display: block;
margin-left: auto;
margin-right: auto;
}
nav ul{
list-style: none;
text-align: center;
}
nav li {
display: inline-block;
}
section {
display: flex;
}
article {
flex: 1;
}
footer {
display: flex;
}
footer div {
flex: 1;
}
my problem for the articles
could someone help with this?
i want this result and this is my code for css part
You can use something like https://grid.layoutit.com/ to draw this using grid.
something like this :)
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
". a1 ."
"a2 a3 a4";
}
.a1 { grid-area: a1; }
.a2 { grid-area: a2; }
.a3 { grid-area: a3; }
.a4 { grid-area: a4; }
this is ny html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<img src="logos/logo3.png" alt="" width="300px" height="100px">
</header>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Book</li>
<li>About</li>
</ul>
</nav>
<main>
<section>
<article class="art-fle">
<h1>Header 1</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat
corporis voluptate vel ab consectetur repudiandae sunt accusantium.
Perspiciatis, minima voluptatem!</p>
</article>
</section>
<section>
<article class="art-fle">
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Similique, enim ad architecto necessitatibus consectetur tempora.</p>
</article>
</section>
<section>
<article class="art-fle">
<h2>Header 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae,
autem! Modi voluptate officia facere voluptatibus!</p>
</article>
</section>
<section>
<article class="art-fle">
<h2>Header 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Perferendis, veniam nam! Dicta dolorum officiis quas?</p>
</article>
</section>
</main>
<footer>
<div>
<img src="">
</div>
<div>
<p>Copyright Little Lemon</p>
</div>
</footer>
</body>
</html>
so i tried building a collapsible sidebar , the sidebar collapses when clicked on button but the contents of it do not get collapsed. When i click on the open menu button it opens the side bar but when i click that button to close it again the content of sidebar that is "hi" written in h1 tag does not disappear. please help.
'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar practice</title>
<link rel="stylesheet" href="css/sidebar.css">
</head>
<body>
<div class="sidenav" id="sidenav">
<h1>hi</h1>
</div>
<div class="topnav" id="topnav">
<button onclick="openNav()">
open menu
</button>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Voluptates aliquam, nihil ab fugiat temporibus maxime nulla
pariatur, sapiente porro blanditiis ipsam eos, labore magnam
dolore et incidunt voluptatem inventore. Possimus?
</p>
</div>
<script>
var checked = 0;
function openNav() {
if(checked == 0){
document.getElementById("sidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("topnav").style.marginLeft = "250px";
checked = 1;
}
else{
document.getElementById("sidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.getElementById("topnav").style.marginLeft = "0";
checked = 0;
}
}
</script>
</body>
</html>
'''
body {
margin: 0;
}
#topnav {
background-color: #333;
overflow: hidden;
padding: 40px 16px;
transition: 0.5s;
}
#image1 {
height: 25px;
width: 25px;
}
#image2 {
height: 25px;
width: 25px;
}
#sidenav {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
background-color: #333;
padding-top: 20px;
transition: 0.5s;
}
button {
background-color: #333;
}
#main {
transition: margin-left .5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar practice</title>
<link rel="stylesheet" href="css/sidebar.css">
</head>
<body>
<div class="sidenav" id="sidenav">
<h1>hi</h1>
</div>
<div class="topnav" id="topnav">
<button onclick="openNav()">
open menu
</button>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Voluptates aliquam, nihil ab fugiat temporibus maxime nulla
pariatur, sapiente porro blanditiis ipsam eos, labore magnam
dolore et incidunt voluptatem inventore. Possimus?
</p>
</div>
<script>
var checked = 0;
function openNav() {
if(checked == 0){
document.getElementById("sidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("topnav").style.marginLeft = "250px";
checked = 1;
}
else{
document.getElementById("sidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.getElementById("topnav").style.marginLeft = "0";
checked = 0;
}
}
</script>
</body>
</html>
Add overflow:hidden to your css in #sidenav
#sidenav {
overflow:hidden;
}
just add this function
function openNav() {
if(checked == 0){
document.getElementById("sidenav").style.display = "block";
checked = 1;
}
else{
document.getElementById("sidenav").style.display = "none";
checked = 0;
}
}
I am making a note making website using pure JavaScript
This is a HTML Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Note taking website</title>
<style>
#container {
text-align: center;
}
#container1 {
text-align: center;
}
#flex {
display: flex;
flex-direction: row;
margin: 20px 377px;
}
#show-notes {
width: 278px;
background-color: #70e0d3;
height: 204px;
border: 2px solid purple;
margin: 3px 8px;
}
h3 {
margin-bottom: 0px;
margin-top: 6px;
}
</style>
</head>
<body>
<section id="container" class="contain">
<div id="top">
<h1 class="head">Note Taking Website</h1>
</div>
<div class="second">
<textarea name="area" id="text" cols="110" rows="10" placeholder="Enter here something"></textarea>
</div>
<div class="second" id="class-btn">
<button id="btn" type="submit">Submit</button>
</div>
</section>
<section id="container1">
<h1 id="notes">Your Notes</h1>
<div id="flex">
<!-- <div id="show-notes">
<h3>Notes</h3>
<p id="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam natus unde reiciendis
maiores sint
suscipit explicabo quisquam et, odit consequatur fugiat, repellat fugit nihil placeat aspernatur
accusamus praesentium facere tempore modi eos? Eum, nisi laudantium dolorum hic mollitia corrupti
sequi incidunt cum culpa enim.</p>
</div> -->
</div>
</section>
<script src="javatut/app.js"></script>
<!-- <script src="team.js"></script> -->
</body>
</html>
After building layout, In the JavaScript I want to save the strings in the localStorage. I have to show that notes when a user clicks on submit button whatever in the textarea input under the section of Your Notes but when I am checking the length in console after adding multiple strings in localStorage it shows the length only 1. Please help me to increase the length of localStorage,
you can run this code below
let button = document.getElementById("btn")
button.addEventListener("click",function(e){
let txtara =document.getElementById("text")
let notes = localStorage.getItem("note");
let textobj;
if (notes==null)
{
textobj = [];
}
else
{
textobj =JSON.parse(notes);
}
textobj.push(txtara.value);
localStorage.setItem("note",JSON.stringify(textobj))
// console.log(typeof notes)
})
This is just a theory based question. I am fairly new to programming and was wondering why this happens within HTML.
I'm making an HTML based resume where when I have a mouse pointer hover over my ul it will activate a function such as this.
$("li#about").hover(function(){
$("#content1").toggle();
});
The Issue While hovering over my selector when my #content was no longer hidden, my margins between my header and ul box would cause jittering within the page.
I went from:
<header>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
</header>
<body>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span> </li>
<li id='education'> <span>Education</span></li>
<li id='info'> <span>Experience</span></li>
<li id='ref'> <span>References</span></li>
</ul>
<div class="clr"></div>
</div>
to:
<header>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
<body>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span> </li>
<li id='education'> <span>Education</span></li>
<li id='info'> <span>Experience</span></li>
<li id='ref'> <span>References</span></li>
</ul>
<div class="clr"></div>
</div>
</header>
My questions:
What was the reason for the sporadic jittering and how did wrapping my ul within the header tag prevent this from occurring?
Is my solution proper etiquette? If not, what would you recommend?
If you have any good recommendations for coding etiquette please post links in comments.
sing-song Being new, I know my code must look like poo. Regardless I added a fiddle for you.
Thanks for the read! I apologize in advance for the ugly code. I posted a JSFiddle as well, figured it would help any other newbies to conceptualize what i'm asking. This fiddle is without correction Just change the closing header tag to where I specified above to see the results.
My Fiddle: https://jsfiddle.net/dgibbins1/cwn6ws02/4/
header{
background: #5a4c1c;
border-radius:10px;
opacity:0.85;
padding:1px 0;
}
h1{
margin: 0 0;
color: white;
padding-left:10px;
}
h3{
color:#dad6c7;
padding-left: 31px;
}
body{
background:#dad6c7;
}
ul{
list-style-type:none;
padding: 0px 15px;
margin: 50px 0;
}
span{
color:white;
}
li{
font-family:Helvetica;
}
div.column{
border-style:solid;
border-color:rgba(56,43,3,1);
}
#content1, #content2,#content3,#content4{
opacity:1;
display: none;
padding: 3px auto;
}
.clear-fix{
}
.column li{
padding:4px 0 4px 0;
margin-top:30px;
margin-bottom:30px;
font-family:'Oswald', sans-serif;
text-align: center;
font-size: 20px;
overflow: hidden;
}
.clr{
clear:both;
font-size:0;
}
.column{
float:left;
background-size: 220px 220px;
background:#5a4c1c;
padding: 5px 2px;
margin: 10px 10px 0 0;
opacity:0.5;
width: 15%;
border-radius:20px;
}
.column li:hover{
background: black;
border-radius:20px;
}
.content{
color:#5a4c1c;
font-weight: bold;
font-family: helvetica;
width:85%;
}
.footer{
text-align: center;
background:#5a4c1c;
color: white;
padding: 10px 0;
opacity: 0.5;
margin-top: 30%;
border-radius:10px;
}
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="/normalize.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<title> Resume: Ryan Anderson</title>
</head>
<header>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
</header>
<body>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span> </li>
<li id='education'> <span>Education</span></li>
<li id='info'> <span>Experience</span></li>
<li id='ref'> <span>References</span></li>
</ul>
<div class="clr"></div>
</div>
<div id="content1" class="content show-description">
<p>About me <br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content2" class="content" >
<p>Education <br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content3" class="content">
<p>Experience <br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content4" class="content">
<p>References <br />
Paul Garven (co-worker): (780)-828-1111<br />
Paul CWC (owner of CWWC): (416)- 721-1111<br />
Someone at Bitmaker: (416-967-11-11
</p>
</div>
</div>
<div class="footer">
<p>Contact <br/>
<small>mobile: (647)-333-8723 <br/>
e-mail: hotmail#gmail.com</small>
</p>
</div>
<script>
$("li#about").hover(function(){
$("#content1").toggle();
});
$("li#education").hover(function() {
$("#content2").toggle();
});
$("li#info").hover(function() {
$("#content3").toggle();
});
$("li#ref").hover(function() {
$("#content4").toggle();
});
</script>
</body>
You have an error in your CSS.
#content1, #content2,#content3,#content4{
opacity:1;
display: none;
padding: 3px auto; <--
}
padding doesn't take the value auto.
Switch it to padding-top:3px; padding-bottom:3px; and the jittering will stop.
Link: Working proof
you have some issues with your markup
some of your nesting is applied incorrectly.
in fact i am not even sure i found all the errors
some of your css is incorrect as well
$("li#about").hover(function() {
$("#content1").toggle();
});
$("li#education").hover(function() {
$("#content2").toggle();
});
$("li#info").hover(function() {
$("#content3").toggle();
});
$("li#ref").hover(function() {
$("#content4").toggle();})
header {
background: #5a4c1c;
border-radius: 10px;
opacity: 0.85;
padding: 1px 0;
}
.minheight {
min-height: 200px;
}
h1 {
margin: 0 0;
color: white;
padding-left: 10px;
}
h3 {
color: #dad6c7;
padding-left: 31px;
}
body {
background: #dad6c7;
}
ul {
list-style-type: none;
padding: 0px 15px;
margin: 50px 0;
}
span {
color: white;
}
li {
font-family: Helvetica;
}
div.column {
border-style: solid;
border-color: rgba(56, 43, 3, 1);
}
#content1,
#content2,
#content3,
#content4 {
opacity: 1;
display: none;
padding: 3px auto;
}
.clear-fix {
}
.column li {
padding: 4px 0 4px 0;
margin-top: 30px;
margin-bottom: 30px;
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 20px;
overflow: hidden;
}
.clr {
clear: both;
font-size: 0;
}
.column {
float: left;
background-size: 220px 220px;
background: #5a4c1c;
padding: 5px 2px;
margin: 10px 10px 10px 0;
opacity: 0.5;
width: 20%;
min-width:134px;
border-radius: 20px;
}
.column li:hover{
background: black;
border-radius: 20px;
}
.content {
color: #5a4c1c;
font-weight: bold;
font-family: helvetica;
width: 85%;
}
.footer {
text-align: center;
background: #5a4c1c;
color: white;
padding: 10px 0;
opacity: 0.5;
margin-top: 30%;
border-radius: 10px;
clear:both;
}
<link href="//normalize-css.googlecode.com/svn/trunk/normalize.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span>
</li>
<li id='education'> <span>Education</span>
</li>
<li id='info'> <span>Experience</span>
</li>
<li id='ref'> <span>References</span>
</li>
</ul>
<div class="clr"></div>
</div>
<div id="content1" class="content show-description">
<p>About me
<br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content2" class="content">
<p>Education
<br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content3" class="content">
<p>Experience
<br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content4" class="content">
<p>References
<br />Paul Garven (co-worker): (780)-828-1111
<br />Paul CWC (owner of CWWC): (416)- 721-1111
<br />Someone at Bitmaker: (416-967-11-11
</p>
</div>
</div>
<div class="footer">
<p>Contact
<br/>
<small>mobile: (647)-333-8723 <br/>
e-mail: hotmail#gmail.com</small>
</p>
</div>
</body>
I have issue with scrollLeft for Safari when page in RTL direction.
In Safari when i do click on button (that has a handler scrollLeft(-200)) i will scroll to 0 position of page. And this is big issue.
Safari: 7.0.1
OS: OS X 10.9.1
Following code has structure like as my page but more easier:
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<style>
.main {
}
.content {
direction: rtl;
width: 2000px;
}
.button-scroll {
width: 50px;
height: 50px;
background: red;
color: white;
text-align: center;
position: fixed;
left: 10px;
top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
<h1>Header</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, sapiente illo dignissimos odit nisi. Voluptatibus, temporibus, recusandae totam libero architecto veniam unde quod nisi facere perspiciatis fugiat harum odit tenetur.
</p>
</div>
<div class="button-scroll"></div>
</div>
<script type="text/javascript">
$(document).ready(function($) {
$('.button-scroll').bind('click', function(){
console.log('scrolling... ' + document.body.scrollLeft);
// $(document.body).scrollLeft(100);
document.body.scrollLeft -= 100;
console.log(document.body.scrollLeft);
})
});
</script>
</body>
</html>