Is it possible to create arrow with transparent container with border? - javascript

Is it possible to create something like this:
Because now I have something like this:
https://jsfiddle.net/38kjb5us/
body{
background-image: url('//ssl.gstatic.com/gb/images/v1_76783e20.png');
}
.dropdown-content{
display: inline-block;
padding: 18px 14px;
border: 1px solid #ffffff;
min-width: 160px;
position: relative;
box-shadow: 0 0 10px #000000;
margin: 15px;
}
.dropdown-content:before{
position: absolute;
content: "";
border: 1px solid #ffffff;
width: 0;
height: 0;
border-style: solid;
border-width: 0 12px 12px 12px;
border-color: transparent transparent #ffffff transparent;
top: -12px;
}
<div class="dropdown-content"></div>
and I have no idea how to add an arrow with a border to the transparent container(((
Is it possible? If yes, then how?

Check this solution using only DIVs and Css
the solution below you can change the width and the height and position of the arrow container
https://plnkr.co/edit/nXRNr7bbdMSaxBKa6h4J?p=preview
and this codepen to add shadow
http://codepen.io/tawfiqin/pen/JKYyMK
html and css
.image-cont{
height:400px;
background:red;
background:url('https://mir-s3-cdn-cf.behance.net/project_modules/hd/94430a33978280.56bf480f1ad36.jpg');
}
.arrow-container{
position:absolute;
width:360px;
height:170px;
background:rgba(255,255,255,0.0);
top:140px;
left:160px;
color:white;
}
.arrow-content{
height:100%;
overflow:auto;
background:rgba(255,255,255,0.0);
}
.arrow{
position:absolute;
width:30px;
height:30px;
border-left:1px solid white;
border-top:1px solid white;
transform:rotate(45deg);
top:-15px;
left:40px;
}
.top-border{
position:absolute;
width:calc(100% + 2px) ;
height:1px;
/*Thanks to Ahmad Shadeed #shadeed user at codepen*/
background: linear-gradient(to right, #fff 34px, transparent 0, transparent 76px, #fff 0, #fff 100%);
}
.bottom-section{
width:100%;
border:1px solid white;
border-top:none;
height:100%;
top:1px;
position:absolute;
pointer-events:none;
}
.cont2{
width:200px;
height:100px;
top:350px;
}
.cont3{
width:auto;
max-width:300px;
height:100px;
top:350px;
left:400px;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="image-cont">
<div class="arrow-container">
<div class="arrow"></div>
<div class="top-border"></div>
<div class="bottom-section"></div>
<div><h2 style="margin-left:10px;">your content</h2></div>
</div>
<div class="arrow-container cont2">
<div class="arrow"></div>
<div class="top-border"></div>
<div class="bottom-section"></div>
<div class="arrow-content">
<h2 style="margin-left:10px;">your content</h2>
<p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
<div class="arrow-container cont3">
<div class="arrow"></div>
<div class="top-border"></div>
<div class="bottom-section"></div>
<div class="arrow-content">
<h2 style="margin-left:10px;">Dynamic Width</h2>
<p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
</div>
</body>
</html>
also you do it using SVG

Here is a ultra simple pure CSS solution with only one single div. Arrow is created using pseudo-elements :before and :after.
body {
background: url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg') top center no-repeat;
background-size: cover;
padding: 50px;
overflow: visible;
}
.box {
padding: 15px;
color: red;
position: relative;
width: 300px;
height:auto;
max-width: 100%;
margin: 0 auto 30px auto;
background-color: transparent;
border: 1px solid #FFFFFF;
border-top: none;
overflow: visible;
}
.box.second {
width: 100%;
}
.box:before, .box:after {
content:'';
position: absolute;
top: -10px;
background-color: inherit;
padding-top: 10px;
}
.box:before {
width: calc(30% - 12px);;
left: 0px;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
border-bottom: 1px solid #FFFFFF;
border-right: 3px solid #FFFFFF;
}
.box:after {
width: calc(70% - 12px);;
right: 0px;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
border-bottom: 1px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
}
<div class="box">
This is a transparent box (fixed width) with an transparent arrow (with borders)
</div>
<div class="box second">
This is a transparent (responsive width) box with an transparent arrow (with borders)
</div>
Please feel free to improve and edit my quickly made demonstration to your needs.

Another possibility is to use :before, border and background(linear-gradient or a one pixel image) .
p {
margin: 40px 5% auto;
padding: 1em;
border: solid;
color: white;
border-top: none;
position: relative;
background: linear-gradient(white, white) top left no-repeat, linear-gradient(white, white) 100px 0 no-repeat;
background-size: 50px 3px, 100% 3px;
/* background-position and background size are used to set length or position to leave a gap */
}
p:before {
/* the arrow*/
content: '';
position: absolute;
height: 35px;
width: 35px;
border-top: solid;
border-right: solid;
top: 0;
left: 48px;
transform: rotate(-45deg);
transform-origin: 0 0;
}
p+p {
width: 20%;
float:left;
}
p+p+p {
width: 50%;
border-radius: 5px;
}
p+p+p:before {
border-radius: 0 5px;
}
html {
height: 100%;
background: url(http://lorempixel.com/640/480/nature/6) fixed;
background-size: cover
}
body {
min-height: 100%;
background: rgba(0, 0, 0, 0.15);
margin: 0;
padding:5px;
display:table;
}
* {
box-sizing: border-box
}
p:first-of-type {
background-color:rgba(250,250,0,0.25);
box-shadow:-5px 5px 5px -5px ,5px 5px 5px -5px , 50px -50px 5px -50px
}
p:first-of-type:before {
background: linear-gradient(45deg, rgba(0, 0, 0, 0) 50% , rgba(250, 250, 0, 0.25) 50% ) 0 0 no-repeat;
box-shadow: 5px 0 5px -5px black, 0 -5px 5px -5px black;
background-size:38px 32px
}
p:first-of-type:after {
content:'';
position:absolute;
top:0;
left:-3px;
width:60px;
height:20px;
box-shadow:-5px -5px 5px -5px ;
}
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
luctus, metus</p>
A shadow can be added on the main container and the pseudo, a second pseudo needs to be used to draw the last bit of shadow.
a translucide background can even be added via an rgba() color and a gradient on the pseudo first paragraph in snippet (or 3rd paragraph in demo)

This solution allows for small border radius on popover container.
For arrow I used png image, but I'm pretty sure you can easily create whole popover fully in css.
.popover {
position: relative;
border-left: 2px solid white;
border-bottom: 2px solid white;
border-right: 2px solid white;
margin-top: 12px;
padding: 12px 18px;
display: block;
border-radius: 4px;
}
.popover--fixed {
width: 300px;
}
.popover--responsive {
width: 75%;
}
.popover:before {
content: " ";
position: absolute;
top: 0; left: 0;
width: 20px;
height: 2px;
background-color: #fff;
}
.popover:after {
content: " ";
position: absolute;
top: 0; right: 0;
width: calc(100% - 32px);
height: 2px;
background-color: #fff;
}
.popover__arrow {
width: 16px;
height: 12px;
background: url(http://i.imgur.com/oOMecP3.png) no-repeat;
position: absolute;
top: -6px; left: 18px;
}
* {
box-sizing: border-box;
}
body {
background: black;
padding: 36px;
background-image: url(https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg);
background-size: cover;
color: white;
}
h1 {
margin-top: 3px;
margin-bottom: 9px;
}
p {
margin-top: 3px;
margin-bottom: 0;
}
<div class="popover popover--fixed">
<div class="popover__arrow"></div>
<h1>Fixed width</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit?</p>
</div>
<div class="popover popover--responsive">
<div class="popover__arrow"></div>
<h1>Responsive width</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit? Lorem ipsum dolor sit amet, consectetur adipisicing elit?</p>
</div>

look at site. Shapes Examples
https://css-tricks.com/examples/ShapesOfCSS/

I'd like to – belatedly – offer a further approach which uses only a single element, and its two pseudo-elements, both the ::before and ::after:
body {
background-color: #000;
}
.quote {
border: 1px solid #fff;
/* Hiding the top-border by making it transparent, to
prevent a line from showing beneath the transparency
of the pseudo-elements */
border-top-color: transparent;
/* adjustable to taste: */
width: 50vw;
padding: 0.4em;
color: #fff;
font-weight: bold;
/* to allow the pseudo-elements to be placed relative
to this element, rather than any other ancestors */
position: relative;
/* to ensure that the 'arrow' portion is entirely
visible on screen and between any element
vertically (on-screen) 'above' the current
.quote element */
margin-top: 2em;
}
/* defining the common settings of the arrow portions: */
.quote::before,
.quote::after {
position: absolute;
/* moving the arrows to the top of their parent */
top: 0;
content: '';
border-bottom: 1px solid #fff;
height: 1em;
/* the negative of the pseudo-element's height
to align the bottom-border of the pseudo-element
over the top-border (transparent) of the parent
element */
margin-top: -1em;
}
.quote::before,
.quote.quote-center::before {
/* the right border of the ::before
pseudo-elements will form the left
slope of the 'arrow': */
border-right: 1px solid #fff;
/* defining a width in which the 'arrow' base is
equal to ten percent of the width of the element;
adjust to taste */
left: 0;
right: 55%;
/* skewing the rectangular pseudo-element into
a parallelogram; the -45deg skews the rectangle
to rightwards */
transform: skew(-45deg);
/* we want the bottom left corner of the pseudo
element to stay in place relative to the top
top-left corner of the parent, so we transform
from that point */
transform-origin: 0 100%;
/* to position the left-most point of the pseudo
element over the left-border of the parent */
margin-left: -1px;
}
.quote::after,
.quote.quote-center::after {
border-left: 1px solid #fff;
left: 55%;
right: 0;
transform: skew(45deg);
transform-origin: 100% 100%;
margin-right: -1px;
}
/* repositioning the 'arrow' using another
class-name to override the default placing;
all other details remain the same */
.quote.quote-left::before {
left: 0;
right: 80%;
}
.quote.quote-left::after {
right: 0;
left: 30%;
}
.quote.quote-right::before {
left: 0;
right: 30%;
}
.quote.quote-right::after {
right: 0;
left: 80%;
}
/* defining a 'bold' arrow, as the
picture in the question shows
(though I'm unsure if that was a
deliberate or incidental part of
the image */
.quote.quote-bold::before {
/* increasing the thickness of the arrow's
left slope */
border-right-width: 3px;
/* adjusting the skew to a higher number to
adjust for the changed thickness; this is
somewhat arbitrary unfortunately and requires
adjustment to values that work (so far as I
can work out) */
transform: skew(-48deg);
}
.quote.quote-bold::after {
border-left-width: 3px;
transform: skew(48deg);
}
/* entirely irrelevant to the demo; just to show
the classes used in each of the elements which
influence each of the pseudo-elements */
pre {
color: limegreen;
}
pre::before {
content: "Class: ";
}
<div class="quote">
<!-- the <pre> elements are included only to show the
classes used for styling the quotes, they have
no part to play in the CSS which creates the
'arrows' or 'quotes' -->
<pre>"quote"</pre>
<p>Lorem ipsum dolor sit amet, nibh patrioque nam ne, graeco consequat reprehendunt ut mei, ex enim labitur vis. Graeci causae adversarium his no. Pro enim causae nostrum eu. Ius unum ornatus liberavisse et, mei dolore menandri mandamus no.</p>
</div>
<div class="quote quote-center">
<pre>"quote quote-center"</pre>
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
innovation via workplace diversity and empowerment.
</p>
</div>
<div class="quote quote-left">
<pre>"quote quote-left"</pre>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="quote quote-right">
<pre>"quote quote-right</pre>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
<div class="quote quote-left quote-bold">
<pre>"quote quote-left quote-bold"</pre>
<p>And with a emboldened arrow</p>
</div>
JS Fiddle demo.

Here is a solution that doesn't use calc and looks cool on retina displays:
body,
.content {
height: 100%;
width: 100%;
background-color: blue;
}
.box {
color: white;
font-family: "Lucida Console", Monaco, monospace;
}
<div class='content'>
<pre class='box'>
__/\__________
| |
| DOST THOU |
| LOVE ME? |
|______________|</pre>
<pre class='box'>
__________
| |
| NO. |
|______ __|
\/</pre>
<pre class='box'>
__/\__________
| |
| BUT THOU |
| MUST! |
|______________|</pre>
</div>

Try This:
Here is https://jsfiddle.net/desqxw38/1/
<div class="arrow_box">
Lorem Ipsum dummy set.
</div>
body {
margin:0;
}
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
height:150px;
margin-top:40px;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 15%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 30px;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 36px;
margin-left: -36px;
}

You can use following snippet to create different arrows using HTML.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table border=1 width=100% style="background-color:yellow">
<tr>
<td>
<center>
<div style="width:0px;border:25px solid;border-color:Black yellow yellow yellow"><div>
</center>
</td>
<td>
<center>
<div style="width:0px;border:25px solid;border-color:yellow yellow black yellow"><div>
</center>
</td>
</tr>
<tr>
<td>
<div style="width:0px;border:25px solid;border-color: yellow yellow yellow Black"><div>
</td>
<td>
<div style="width:0px;border:25px solid;float:right;border-color:yellow Black yellow yellow"><div>
</td>
</tr>
</table>
</body>
</html>

This should do the trick:
.dropdown-content::before {
position: absolute;
content: "";
width: 16px;
height: 16px;
border-style: solid;
border-width: 1px;
border-color: white white transparent transparent;
top: -10px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

Yes it is possible.
A transparent tooltip in it's cleanest form (I think)
Transparent tooltip
body {
background-image: -webkit-linear-gradient(315deg, #fff, #aaa);
background-image: linear-gradient(135deg, #fff, #aaa);
background-size: 50px 50px;
}
.tooltip {
border-color: #000;
border-style: solid;
border-width: 0 2px 2px;
left: 20%;
padding: 15px;
position: absolute;
top: 20%;
}
.tooltip::after, .tooltip::before {
border-color: inherit;
border-style: inherit;
content: '';
display: block;
height: 10px;
position: absolute;
top: -10px;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
.tooltip::after {
border-width: 0 2px 2px 0;
left: -3px;
-webkit-transform: skewX(135deg);
transform: skewX(135deg);
width: calc(30% - 10px);
}
.tooltip::before {
border-width: 0 0 2px 2px;
right: -2px;
position: absolute;
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
width: calc(70% - 10px);
}
<div class="tooltip">
tooltip adf asd afdasdf asdfas fasdfas
</div>

We can do like this
<style>
.triangle{
width: 0;
height: 0;
margin-left:20px;
border-left: 12.5px solid transparent;
border-right: 12.5px solid transparent;
border-bottom: 25px solid #00B0FF;
opacity:0.3;
}
#tri{
width:300px;
height:100px;
background-color:#00B0FF;
opacity:0.3;
}
</style>
<div class="triangle"></div>
<div id="tri">
</div>

try this demo here i used some code, i hope it helps
html
<div class="dropdown-content">
<div class="triangle"></div>
</div>
css
.triangle {
position: absolute;
margin: auto;
top: -10px;
left: -160px;
right: 0;
width: 15px;
height: 15px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-1355deg);
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
https://jsfiddle.net/38kjb5us/1/

Related

JS is not working in my web page,Explained below,any solution?

I am working on a web project every thing was too good until i decided to add JS, to make my page dynamic but at that point i faced a big problem when i try to access my elements by tagName or by id or class it always returns null and undefined, any solution please , i am new at this ,Thanks in advance,if you are unavle to understand the question you can mail me or reply here but please i need solution
console.log('test1')
window.onload = function() {;
elements.forEach((element) => element.style.color = 'red');
}
/* * {
margin: 0;
} */
}
body {
margin: 0;
box-sizing: border-box;
display: block;
background: #eee;
}
header {
color: white;
background: linear-gradient(to left, #222, black, #222);
box-sizing: border-box;
border-bottom: 2px solid #999;
display: block;
overflow: hidden;
width: 100%;
text-align: center;
padding: 22px;
padding-bottom: 20px;
}
header .page-title {
cursor: pointer;
display: block;
font-size: 25px;
font-variant: small-caps;
transition: color 1s linear, font-size 1s linear;
}
header .page-title:hover {
cursor: pointer;
font-size: 25px;
color: green;
text-shadow: 0 0 7px #004800;
transition: color 1s linear, font-size 1s linear, text-shadow 2s linear;
}
//not working.pagetitle:hover < header {background:black;}
.search {
float: left;
text-decoration: none;
font-size: 15px;
padding: 17.5px;
display: inline-block;
border: none;
border-left: 1px solid white;
box-sizing: border-box;
color: white;
background: black;
width: 88%;
}
.icon {
float: left;
border-right: none;
text-align: : left;
box-sizing: border-box;
background: black;
margin: 0;
display: inline-block;
color: white;
padding: 17.5px;
font-size: 15px;
width: 6%;
}
input:focus {
outline: none;
}
/*input:before{
border:1px solid black:
content:"";
}
//.icon:before{
border:1px solid black;
content:"";
}
*/
.contextBtn {
//box-shadow:inset 0 0 7px white;
border-top: 1px solid white;
font-size: 15px;
padding: 15px;
display: block;
box-sizing: border-box;
text-align: center;
width: 100%;
background: black;
color: white;
}
ul {
list-style-type: none;
padding: 0 0 5px 0;
margin: 0;
box-shadow: 0 0 3px black;
}
li {
width: 100%;
}
li a {
position: relative;
color: #fff;
//background:#333;
background: linear-gradient(to left, black, #222, black);
font-size: 110%;
text-align: center;
text-decoration: none;
box-sizing: border-box;
margin: auto;
//padding:3%;
padding: 20px;
width: 100%;
height: 6%;
display: block;
overflow: hidden;
box-shadow: 0px -1px 1px white;
transition: width 1s, border-radius 2s, padding 1.5s, background 1.5s, font-size 1s, border-left 2s, border-right 2s;
}
li a:hover:not(.active-item) {
box-sizing: border-box;
display: block;
background: linear-gradient(to left, #1B1B1B, black, #1B1B1B);
font-size: 120%;
margin-left: auto 10%;
width: 80%;
height: 6%;
overflow: hidden;
//padding:4%;
padding: 23px;
border-left: 3px solid green;
border-right: 3px solid green;
border-radius: 25px;
box-shadow: 0 0 3px #67FF67;
box-shadow: inset 0 0 7px #69FF69;
transition: width 1.5s, background 3s linear 0.2, border-radius 1s linear, font-size 0.2s linear 0.1s, margin 2s linear 5s, padding 2s, border-right 1s linear 1s, border-left 1s linear 1s, box-shadow 1s linear 2s;
//transition:width 1.5s, background 1.5s,border-radius 1.5s;
}
li a:active {
background-color: red;
}
li a:before {
content: "";
position: absolute;
height: 0;
width: 0;
box-sizing: border-box;
left: 50%;
transition: width 2s linear, left 2s linear, height 0.4s linear 0.1s;
}
li a:hover:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
border: 3px solid green;
border-left: 0px solid green;
border-right: 0px solid green;
border-top: 2px solid green;
box-sizing: border-box;
bottom: 0;
left: 0;
transition: width 1s linear, left 1s linear, height 0.2s linear 0.1s, box-shadow 3s linear 2s;
}
li a:after {
content: "";
position: absolute;
height: 0;
width: 0;
box-sizing: border-box;
right: 50%;
transition: width 2s linear, right 2s linear, height 0.4s linear 0.1s;
}
li a:hover:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
border: 2px solid green;
border-left: 0px solid green;
border-right: 0px solid green;
border-top: 1px solid green;
box-sizing: border-box;
bottom: 0;
right: 0;
transition: width 1s linear, right 1s linear, height 0.2s linear 0.1s;
}
li a.active-item {
//position: relative;
background: green;
padding: 25px;
border-radius: 30px;
border-top: 0.5px solid #989898;
border-bottom: 0.2px solid black;
width: 80%;
margin: auto;
font-size: 22px;
box-shadow: 0 0 5px #3F7D00;
}
li a.active-item:hover {
border: 1px solid green;
box-shadow: 0 0px 5px #3F7D00;
}
article {
//position: relative;
margin: 2px;
padding: 20px 8px;
box-shadow: 0px 0px 5px black;
//font-size:20px;
}
article p {
font-size: 15px;
}
.divider {
text-align: center;
}
footer {
margin: 0 2px 5px 2px;
background: grey;
}
.foot-container {
background: grey;
//position: relative;
box-sizing: border-box;
box-shadow: 0 1px 5px black;
}
.foot-section {
line-height: 25px;
text-align: center;
color: white;
float: left;
margin: 0.1111111111111111%;
width: 33%;
box-sizing: border-box;
box-shadow: 0 0 1px black;
}
/* .foot-section:after{
content"";
display:table;
clear:both;
}*/
.foot-section h4 {
//text-decoration:underline;
display: inline-block;
margin: 6px auto 8px auto;
font-size: 110%;
}
.foot-section a {
color: white;
text-decoration: none;
display: block;
clear: both;
}
.foot-section a:hover {
font-size: 90%;
box-shadow: inset 0 0 7px #2F2F2F;
}
address {
text-decoration: none;
margin: 5px auto;
line-height: 20px;
box-shadow: 0 0 5px black;
text-align: center;
color: white;
}
.social {
width: 100%;
display: block;
box-sizing: border-box;
text-align: center;
//bottom: 0;
}
.social a {
border: 1px solid black;
border-radius: 8.5px;
width: 17px;
height: 17px;
margin: 2px;
padding: 3px;
display: inline-block;
box-shadow: 0 0 5px black;
}
.social a:hover {
color: white;
background: black;
}
#media only screen and (min-width: 500px) {
body {
background: white;
//position: relative;
}
/* .contextBtn {
display: none;
} */
li a {
overflow-y: hidden;
//position: sticky;
width: 25%;
float: left;
top: 0;
transition: none;
}
li a:hover:not(.active-item) {
width: 25%;
padding: 20px;
z-index: 1;
border-radius: 0%;
font-size: initial;
transition: none;
}
li a.active-item {
display: none;
}
article {
margin: 50px 5px 10px 5px;
padding: 50px 5px;
}
.icon {
width: 8%;
}
.search {
width: 92%;
}
}
/* #media only screen and (min-width:350px) {
.contextBtn {
display: none;
}
.search {
width: 90%;
}
.icon {
width: 8%;
}
} */
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0 ">
<title>About Us </title>
<link rel="stylesheet" href="style/mystyles.css">
<script src="https://kit.fontawesome.com/7e25e18c01.js" crossorigin="anonymous"></script>
<!-- https: //cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js -->
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
</head>
<body>
<header>
<h1 class="page-title">About MixHacxTricks &nbsp &nbsp
<i class="fas fa-id-card-alt"></i></h1>
</header>
<nav>
<div>
<ul>
<div class="search-area"><input class="search" type="search" placeholder="Search">
<!--<label class="icon">-->
<span class="icon"> <i class="fas fa-search"></i></span>
<!--</label>-->
</div>
<span class="contextBtn" id="context"> x </span>
<li class="menu">Home &nbsp <i class="fas fa-home"></i></span></li>
<li class="menu">Android &nbsp <i class="fab fa-android"></i></span></li>
<li class="menu">Windows &nbsp <i class="fab fa-windows"></i></span></li>
<li class="menu">Trending &nbsp <i class="fas fa-chart-line"></i></span></li>
<li class="menu">About <i class="fas fa-id-card-alt"></i></span></li>
</ul>
</div>
</nav>
<article>
<div class="article">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Ipsum consequat nisl vel pretium
lectus. Justo nec ultrices dui sapien. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Maecenas ultricies mi eget mauris. Mauris a diam maecenas sed enim. At quis risus sed vulputate. Nec ullamcorper sit amet risus
nullam eget felis. Sit amet dictum sit amet justo. Eu facilisis sed odio morbi quis commodo odio aenean.</p>
<br>
<p>Proin nibh nisl condimentum id venenatis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla ut morbi tincidunt augue interdum. Vehicula ipsum a arcu cursus vitae. Consequat nisl vel pretium lectus quam id leo in vitae.
Mattis rhoncus urna neque viverra justo nec ultrices. Commodo elit at imperdiet dui accumsan sit amet. Nunc sed id semper risus in. At erat pellentesque adipiscing commodo elit. Facilisi nullam vehicula ipsum a arcu cursus vitae. Scelerisque
viverra mauris in aliquam. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Euismod nisi porta lorem mollis aliquam ut porttitor leo.</p><br>
<!--<marquee><p class="divider">#*************************************************************************************************************************************************************************************************************************************</p></marquee>-->
</div>
<div class="social"><a><i class="fa fa-facebook" aria-hidden="true"></i></a><a><i class="fa fa-telegram" aria-hidden="true"></i></a></div>
</article>
<footer>
<div class="foot-container">
<div class="foot-section">
<h4>Android</h4>
Apps
Games
Tools<br>
</div>
<div class="foot-section">
<h4>Windows</h4>
Softwares
Games
Tools<br>
</div>
<div class="foot-section">
<h4>Others</h4>
WebTools
Source Code
O.S.<br>
</div>
<address>
MixHacxTricks<br>
Web Site: Soon Uploaded<br>
Developer:Priyanshu Agrawal<br>
Contact:-<br>Email:<br>priyanshu#mail2expert.com<br>
</address>
</div>
</footer>
</body>
<script src="js/myscript.js"></script>
</html>
The problem is you are loading your js script before rendering elements on the page.
You can use defer attribute for the script tag to launch script after page rendering.
<script src="js/myscript.js" defer>
getElementsByTagName() is returning a HTMLCollection, so here is a working code:
console.log('test1');
let elemens = document.getElementsByTagName('p');
for (let i=0; i < elemens.length; i++) {
elemens[i].style.color = 'red';
}
console.log(elemens);
And by the way, is it a typo with elemens variable up above?
<p class="mp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Ipsum consequat nisl vel pretium
lectus. Justo nec ultrices dui sapien. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Maecenas ultricies mi eget mauris. Mauris a diam maecenas sed enim. At quis risus sed vulputate. Nec ullamcorper sit amet risus
nullam eget felis. Sit amet dictum sit amet justo. Eu facilisis sed odio morbi quis commodo odio aenean.</p>
<br>
<p class="mp">Proin nibh nisl condimentum id venenatis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla ut morbi tincidunt augue interdum. Vehicula ipsum a arcu cursus vitae. Consequat nisl vel pretium lectus quam id leo in vitae.
Mattis rhoncus urna neque viverra justo nec ultrices. Commodo elit at imperdiet dui accumsan sit amet. Nunc sed id semper risus in. At erat pellentesque adipiscing commodo elit. Facilisi nullam vehicula ipsum a arcu cursus vitae. Scelerisque
viverra mauris in aliquam. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Euismod nisi porta lorem mollis aliquam ut porttitor leo.</p><br>
<!--<marquee><p class="divider">#*************************************************************************************************************************************************************************************************************************************</p></marquee>-->
<!-- always place js in footer -->
<!-- method by classname in javascript-->
<script>
var x = document.getElementsByClassName("mp");
x[0].style.color = "red";
x[1].style.color = "blue";
</script>
<!-- method by tag in jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
jQuery("p").css("color", "yellow");
</script>
</body>
</html>
Wrap Javascript code in DOMContentLoaded event
Like
document.addEventListener("DOMContentLoaded", function(event) {
//do work
});
More information
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
document.addEventListener("DOMContentLoaded", function(event) {
console.log('test1')
let elemens = document.getElementsByTagName('p');
for (let i = 0; i < elemens.length; i++) {
elemens[i].style.color = 'red';
}
});
/* * {
margin: 0;
} */
}
body {
margin: 0;
box-sizing: border-box;
display: block;
background: #eee;
}
header {
color: white;
background: linear-gradient(to left, #222, black, #222);
box-sizing: border-box;
border-bottom: 2px solid #999;
display: block;
overflow: hidden;
width: 100%;
text-align: center;
padding: 22px;
padding-bottom: 20px;
}
header .page-title {
cursor: pointer;
display: block;
font-size: 25px;
font-variant: small-caps;
transition: color 1s linear, font-size 1s linear;
}
header .page-title:hover {
cursor: pointer;
font-size: 25px;
color: green;
text-shadow: 0 0 7px #004800;
transition: color 1s linear, font-size 1s linear, text-shadow 2s linear;
}
//not working.pagetitle:hover < header {background:black;}
.search {
float: left;
text-decoration: none;
font-size: 15px;
padding: 17.5px;
display: inline-block;
border: none;
border-left: 1px solid white;
box-sizing: border-box;
color: white;
background: black;
width: 88%;
}
.icon {
float: left;
border-right: none;
text-align: : left;
box-sizing: border-box;
background: black;
margin: 0;
display: inline-block;
color: white;
padding: 17.5px;
font-size: 15px;
width: 6%;
}
input:focus {
outline: none;
}
/*input:before{
border:1px solid black:
content:"";
}
//.icon:before{
border:1px solid black;
content:"";
}
*/
.contextBtn {
//box-shadow:inset 0 0 7px white;
border-top: 1px solid white;
font-size: 15px;
padding: 15px;
display: block;
box-sizing: border-box;
text-align: center;
width: 100%;
background: black;
color: white;
}
ul {
list-style-type: none;
padding: 0 0 5px 0;
margin: 0;
box-shadow: 0 0 3px black;
}
li {
width: 100%;
}
li a {
position: relative;
color: #fff;
//background:#333;
background: linear-gradient(to left, black, #222, black);
font-size: 110%;
text-align: center;
text-decoration: none;
box-sizing: border-box;
margin: auto;
//padding:3%;
padding: 20px;
width: 100%;
height: 6%;
display: block;
overflow: hidden;
box-shadow: 0px -1px 1px white;
transition: width 1s, border-radius 2s, padding 1.5s, background 1.5s, font-size 1s, border-left 2s, border-right 2s;
}
li a:hover:not(.active-item) {
box-sizing: border-box;
display: block;
background: linear-gradient(to left, #1B1B1B, black, #1B1B1B);
font-size: 120%;
margin-left: auto 10%;
width: 80%;
height: 6%;
overflow: hidden;
//padding:4%;
padding: 23px;
border-left: 3px solid green;
border-right: 3px solid green;
border-radius: 25px;
box-shadow: 0 0 3px #67FF67;
box-shadow: inset 0 0 7px #69FF69;
transition: width 1.5s, background 3s linear 0.2, border-radius 1s linear, font-size 0.2s linear 0.1s, margin 2s linear 5s, padding 2s, border-right 1s linear 1s, border-left 1s linear 1s, box-shadow 1s linear 2s;
//transition:width 1.5s, background 1.5s,border-radius 1.5s;
}
li a:active {
background-color: red;
}
li a:before {
content: "";
position: absolute;
height: 0;
width: 0;
box-sizing: border-box;
left: 50%;
transition: width 2s linear, left 2s linear, height 0.4s linear 0.1s;
}
li a:hover:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
border: 3px solid green;
border-left: 0px solid green;
border-right: 0px solid green;
border-top: 2px solid green;
box-sizing: border-box;
bottom: 0;
left: 0;
transition: width 1s linear, left 1s linear, height 0.2s linear 0.1s, box-shadow 3s linear 2s;
}
li a:after {
content: "";
position: absolute;
height: 0;
width: 0;
box-sizing: border-box;
right: 50%;
transition: width 2s linear, right 2s linear, height 0.4s linear 0.1s;
}
li a:hover:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
border: 2px solid green;
border-left: 0px solid green;
border-right: 0px solid green;
border-top: 1px solid green;
box-sizing: border-box;
bottom: 0;
right: 0;
transition: width 1s linear, right 1s linear, height 0.2s linear 0.1s;
}
li a.active-item {
//position: relative;
background: green;
padding: 25px;
border-radius: 30px;
border-top: 0.5px solid #989898;
border-bottom: 0.2px solid black;
width: 80%;
margin: auto;
font-size: 22px;
box-shadow: 0 0 5px #3F7D00;
}
li a.active-item:hover {
border: 1px solid green;
box-shadow: 0 0px 5px #3F7D00;
}
article {
//position: relative;
margin: 2px;
padding: 20px 8px;
box-shadow: 0px 0px 5px black;
//font-size:20px;
}
article p {
font-size: 15px;
}
.divider {
text-align: center;
}
footer {
margin: 0 2px 5px 2px;
background: grey;
}
.foot-container {
background: grey;
//position: relative;
box-sizing: border-box;
box-shadow: 0 1px 5px black;
}
.foot-section {
line-height: 25px;
text-align: center;
color: white;
float: left;
margin: 0.1111111111111111%;
width: 33%;
box-sizing: border-box;
box-shadow: 0 0 1px black;
}
/* .foot-section:after{
content"";
display:table;
clear:both;
}*/
.foot-section h4 {
//text-decoration:underline;
display: inline-block;
margin: 6px auto 8px auto;
font-size: 110%;
}
.foot-section a {
color: white;
text-decoration: none;
display: block;
clear: both;
}
.foot-section a:hover {
font-size: 90%;
box-shadow: inset 0 0 7px #2F2F2F;
}
address {
text-decoration: none;
margin: 5px auto;
line-height: 20px;
box-shadow: 0 0 5px black;
text-align: center;
color: white;
}
.social {
width: 100%;
display: block;
box-sizing: border-box;
text-align: center;
//bottom: 0;
}
.social a {
border: 1px solid black;
border-radius: 8.5px;
width: 17px;
height: 17px;
margin: 2px;
padding: 3px;
display: inline-block;
box-shadow: 0 0 5px black;
}
.social a:hover {
color: white;
background: black;
}
#media only screen and (min-width: 500px) {
body {
background: white;
//position: relative;
}
/* .contextBtn {
display: none;
} */
li a {
overflow-y: hidden;
//position: sticky;
width: 25%;
float: left;
top: 0;
transition: none;
}
li a:hover:not(.active-item) {
width: 25%;
padding: 20px;
z-index: 1;
border-radius: 0%;
font-size: initial;
transition: none;
}
li a.active-item {
display: none;
}
article {
margin: 50px 5px 10px 5px;
padding: 50px 5px;
}
.icon {
width: 8%;
}
.search {
width: 92%;
}
}
/* #media only screen and (min-width:350px) {
.contextBtn {
display: none;
}
.search {
width: 90%;
}
.icon {
width: 8%;
}
} */
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0 ">
<title>About Us </title>
<link rel="stylesheet" href="style/mystyles.css">
<script src="https://kit.fontawesome.com/7e25e18c01.js" crossorigin="anonymous"></script>
<!-- https: //cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js -->
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
</head>
<body>
<header>
<h1 class="page-title">About MixHacxTricks &nbsp &nbsp
<i class="fas fa-id-card-alt"></i></h1>
</header>
<nav>
<div>
<ul>
<div class="search-area"><input class="search" type="search" placeholder="Search">
<!--<label class="icon">-->
<span class="icon"> <i class="fas fa-search"></i></span>
<!--</label>-->
</div>
<span class="contextBtn" id="context"> x </span>
<li class="menu">Home &nbsp <i class="fas fa-home"></i></span></li>
<li class="menu">Android &nbsp <i class="fab fa-android"></i></span></li>
<li class="menu">Windows &nbsp <i class="fab fa-windows"></i></span></li>
<li class="menu">Trending &nbsp <i class="fas fa-chart-line"></i></span></li>
<li class="menu">About <i class="fas fa-id-card-alt"></i></span></li>
</ul>
</div>
</nav>
<article>
<div class="article">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Ipsum consequat nisl vel pretium lectus.
Justo nec ultrices dui sapien. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Maecenas ultricies mi eget mauris. Mauris a diam maecenas sed enim. At quis risus sed vulputate. Nec ullamcorper sit amet risus nullam eget felis.
Sit amet dictum sit amet justo. Eu facilisis sed odio morbi quis commodo odio aenean.</p>
<br>
<p>Proin nibh nisl condimentum id venenatis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla ut morbi tincidunt augue interdum. Vehicula ipsum a arcu cursus vitae. Consequat nisl vel pretium lectus quam id leo in vitae.
Mattis rhoncus urna neque viverra justo nec ultrices. Commodo elit at imperdiet dui accumsan sit amet. Nunc sed id semper risus in. At erat pellentesque adipiscing commodo elit. Facilisi nullam vehicula ipsum a arcu cursus vitae. Scelerisque viverra
mauris in aliquam. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Euismod nisi porta lorem mollis aliquam ut porttitor leo.</p><br>
<!--<marquee><p class="divider">#*************************************************************************************************************************************************************************************************************************************</p></marquee>-->
</div>
<div class="social"><a><i class="fa fa-facebook" aria-hidden="true"></i></a><a><i class="fa fa-telegram" aria-hidden="true"></i></a></div>
</article>
<footer>
<div class="foot-container">
<div class="foot-section">
<h4>Android</h4>
Apps
Games
Tools<br>
</div>
<div class="foot-section">
<h4>Windows</h4>
Softwares
Games
Tools<br>
</div>
<div class="foot-section">
<h4>Others</h4>
WebTools
Source Code
O.S.<br>
</div>
<address>
MixHacxTricks<br>
Web Site: Soon Uploaded<br>
Developer:Priyanshu Agrawal<br>
Contact:-<br>Email:<br>priyanshu#mail2expert.com<br>
</address>
</div>
</footer>
</body>
</html>
You are loading the script tag in the Head without any delay. So when the page loads, it loads JS first then the body of the Page. I will suggest calling it after the body so that the whole page loads first and after that, the JS loads so that it can have access to the DOM otherwise it will not find any object. That is why it is not working. Load it like this:
</body>
<script src="name.js"></script>
</html>
After the body tag and it should work just fine.
This is mostly because your javaScript is loading before the completely loading of DOM.
there is two Way you can Solve this
1st By wrapping you js code with
window.onload = function() {
// Your code
}
2nd By placing your Script tag after body.
</body>
<script src="name.js"></script>
</html>

Parallax effect - force text block to behave like background-attachment: fixed

I'm attempting to create a simple parallax effect where each 100vh section scrolls up to reveal the next section (new background color, background image, and text block) while keeping the text block fixed relative to its parent container.
I've put together a static example of what I'm trying to achieve using screenshots of each section: static example. Of course I'd like the content to be dynamic rather than flat images.
Here's a simple version of my code thus far:
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
position: relative;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
section.first {
background: url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
background-color: rgba(74, 180, 220, .85);
}
section.second {
background: url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
background-color: rgba(103, 198, 180, .85)
}
section.third {
background: url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
background-color: rgba(5, 123, 188, .85);
}
section.fourth {
background: url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
background-color: rgba(187, 216, 100, .85)
}
.content {
position: relative;
height: 100vh;
width: 100%;
padding: 50px 0;
}
.copy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>
The parallax effect is achieved using CSS background-attachment: fixed and works just fine; the trouble is with the text blocks. I'd like to keep them "pinned" in place and centered within their section. If they are set to position: fixed they of course overlap each other and all show up in the first section. If they are set to any other position attribute, they will simply scroll like any other element.
Now, I realize that setting an element's position to fixed means it can no longer be relative to its parent element; it escapes the flow so to speak, but I'm trying to determine if there's a way to achieve the effect with some advanced CSS or even a JS alternative.
I've tried numerous HTML/CSS combinations (wrappers within wrappers, etc.) and I've also attempted various javascript solutions such as rellax, jarallax, and ScrollMagic, but everything I've come across is far too robust for my needs. I've searched around for the better part of the day hoping to find an example of what I'm attempting, but no luck.
In a previous question I did a similar effect with image and using some JS so am going to use the same technique to reproduce this using content as I don't think there is a pure CSS solution. So the idea is to simulate the fixed position by using absolute position and adjusting the top property dynamically on scroll.
Here is an example where I also adjusted some of the CSS to make it easier. I will also rely on CSS variables to make the JS code very light so we can manage everything with CSS.
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll + "px");
}
:root {
--scroll-var: 0px
}
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
overflow: hidden;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
position: relative; /*Mandatory for the overflow effect*/
height: 100vh;
}
section.first {
background: linear-gradient(rgba(74, 180, 220, .85), rgba(74, 180, 220, .85)), url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
/* the first section so top start from 0*/
top: calc((0 * 100vh) + var(--scroll-var));
}
section.second {
background: linear-gradient(rgba(103, 198, 180, .85), rgba(103, 198, 180, .85)), url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
/* the second section so we need to remove the height of top section
to have the same position so -100vh and we do the same for the other sections
*/
top: calc((-1 * 100vh) + var(--scroll-var));
}
section.third {
background: linear-gradient(rgba(5, 123, 188, .85), rgba(5, 123, 188, .85)), url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
top: calc((-2 * 100vh) + var(--scroll-var));
}
section.fourth {
background: linear-gradient(rgba(187, 216, 100, .85), rgba(187, 216, 100, .85)), url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
top: calc((-3 * 100vh) + var(--scroll-var));
}
.content {
position: absolute;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.copy {
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
max-width: 300px;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>
I have put up a little snippet, that works. But you need to figure out the exact math behind positioning yourself. And of course take care of the details
$( document ).ready(function() {
$(document).scroll(function() {
// get the position of my first slide, so I know where did I move
var rect = $(".first")[0].getBoundingClientRect();
// get height of viewport
var screenHeight = $( window ).height();
// setting offset for every .copy element on page, so they share
// the same offset from top (are on top of each other)
// Now you just need to figure out exact math here
$(".copy").offset({ top: screenHeight*1.5-rect.bottom});
});
});
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
position: relative;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
/* added overflow hidden, so that my boxes don't flow out of the slide */
overflow: hidden;
}
section.first {
background: url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
background-color: rgba(74, 180, 220, .85);
}
section.second {
background: url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
background-color: rgba(103, 198, 180, .85)
}
section.third {
background: url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
background-color: rgba(5, 123, 188, .85);
}
section.fourth {
background: url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
background-color: rgba(187, 216, 100, .85)
}
.content {
position: relative;
height: 100vh;
width: 100%;
padding: 50px 0;
}
.copy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>

How to set a bottom border for every row in a textarea?

I am trying to figure out how to add a border-bottom line for every row within a <textarea>, however I am only able to get the very bottom row's border-bottom to do this.
Is there a way to accomplish this?
.input-borderless {
width: 80%;
border-top: 0px;
border-bottom: 1px solid green;
border-right: 0px;
border-left: 0px;
background-color: rgb(241,250,247);
text-decoration: none;
outline: none;
display: block;
padding: 10px 0;
margin: 20px 0;
font-size: 1.6em;
}
<textarea rows="3" class="input-borderless" placeholder="Describe the project"></textarea>
You can use gradient as the background image to get an effect that looks like underline:
JSFiddle
textarea
{
line-height: 4ch;
background-image: linear-gradient(transparent, transparent calc(4ch - 1px), #E7EFF8 0px);
background-size: 100% 4ch;
}
The idea is to use layers, make the textarea as top layer, the multiple lines as bottom layer.
I'm using a pseudo element for the bottom layer, since :before and :after does not work on a textarea, so I set it on the container div element.
For the bottom lines, I simply use underscores _, with \A for a line break, you can have as many lines as needed with a number of \A. The height of each line will get updated automatically according to the font size.
Jsfiddle Example
.container {
width: 200px;
border: 1px solid green;
position: relative;
overflow: hidden;
}
.container:before, .container textarea {
font-family: sans-serif;
font-size: 20px;
}
.container textarea {
width: 100%;
box-sizing: border-box;
background-color: transparent;
border: 0;
outline: none;
display: block;
line-height: 1.2;
}
.container:before {
position: absolute;
content: "____________________\A____________________";
z-index: -1;
left: 0;
top: 0;
width: 100%;
color: silver;
line-height: 1.4;
}
<div class="container">
<textarea rows="3" placeholder="Hello"></textarea>
</div>
Last week I found out about contenteditable. This morning, this thought suddenly came to me: Using an SVG background in a textarea doesn't scroll without the help of Javascript, but I bet it would scroll just fine with a DIV. Voila!
#wrapper {
display: inline-block;
width: 10em;
height: 4em;
border: 1px solid gray;
overflow: auto;
}
#paper {
min-height: 4em;
line-height: 1em;
vertical-align: bottom;
background-size: 1px 1em;
background-repeat: repeat;
background-position: 0 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1em'%3E%3Crect id='background' height='1em' width='1' y='0' x='0' fill='%23f1faf7'/%3E %3Cline id='underline' y2='1em' x2='0' y1='1em' x1='1' stroke='%23008000' fill='none'/%3E %3C/svg%3E");
/*for placeholder, see https://codepen.io/flesler/pen/AEIFc */
}
<textarea id="TA"></textarea>
<div id="wrapper"><div contenteditable="true" id="paper">I am trying to figure out how to add a border-bottom line for every row within a, however I am only able to get the very bottom row's border-bottom to do this.</div></div>
Everything, minus the internal padding.
$(document).ready(function() {
$('textarea.styleme').scroll(function(event) {
$(this).css({'background-position': '0 -' + $(this).scrollTop() + 'px'})
})
})
textarea.styleme {
width: 80%;
border: 0px;
/*background-color: rgba(241,250,247, .5);
background-image: url('https://placehold.it/350x100');*/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'%3E%3Crect id='background' height='20' width='10' y='0' x='0' fill='%23f1faf7'/%3E %3Cline id='underline' y2='20' x2='0' y1='20' x1='10' stroke='%23008000' fill='none'/%3E %3C/svg%3E");
background-size: 10px 20px;
background-repeat: repeat;
background-position: 0 0;
text-decoration: none;
outline: none;
display: block;
/*padding: 10px 0;*/
margin: 20px 0;
font-size: 1.6em;
line-height: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea spellcheck="false" class="styleme" placeholder="Describe the project" rows="5">Vestibulum vel sem porttitor, suscipit odio sit amet, egestas arcu. Nam varius felis eu ligula pellentesque vestibulum. Pellentesque tempor, nisi sit amet fringilla consequat, ex erat malesuada dui, non dapibus nunc felis laoreet nibh. Maecenas elementum commodo enim quis hendrerit. Ut sit amet malesuada dui. Praesent dolor purus, mollis vel venenatis eget, malesuada sed nulla. Sed at dolor lobortis, malesuada tortor ut, ultrices enim. Nullam posuere dolor massa. Nullam dignissim, dolor at tempus sagittis, massa eros semper quam, a posuere massa massa et neque. Praesent finibus massa eu interdum auctor. Vestibulum id risus massa.</textarea>
How to underline all text in a <textarea>
Your question says you want a border-bottom line for every row within a <textarea>, so my answer may not exactly meet your needs. I'll post it in case it's useful to you or others.
textarea { text-decoration: underline; }
<textarea></textarea>
jsFiddle
Sample output:

CSS content and menu positioning

http://postimg.org/image/sadzaa0up/
I'm trying to get the JS navigation buttons to fall inline with a full width background/box so the buttons aren't just floating. When I try to set this in the CSS I find the buttons aren't in line with this background/box/container. They sit slightly above it. I've tried altering margins etc but had no luck.
I'm not sure if the issue is related but I'm finding I can't position the nav bar directly beneath the logo container/header. It's being pushed so it's a 150px or so below the logo with a big gap between.
Then finally, the main body content area won't stretch to the width on the left side. I've sorted the right side using margins, yet the left side won't get rid of the gap.
Any help on this is greatly appreciated.
document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='Index.html'>HOME</a></li>" +
"<li><a href='Customers.html'>SECTIONS</a></li>" +
"<li><a href='About.html'>HOWS</a></li>" +
"<li><a href='About.html'>OUR EXPERIENCE</a></li>" +
"<li><a href='About.html'>TESTIMONIALS</a></li>" +
"<li><a href='About.html'>NEWS</a></li>" +
"<li><a href='About.html'>CONTACT US</a></li>" +
"</ul>";
document.getElementById("foot01").innerHTML =
"<p>© lumi " + new Date().getFullYear() + " All rights reserved.</p>";
/* Check how to edit nav main background colour */
#container {
position: absolute;
top: 0px;
left: 0px;
background-color: #73008C;
background-image: url("banner.jpg");
background-size: 100%;
width: 100%;
height: 800px;
content: 60px padding: 5px;
border: 5px #73008C;
margin-left: 0px;
margin-right: 0px;
z-index: -2;
}
#header {
position: absolute;
opacity: 0.6;
background-color: #ffffff;
width: 100%;
height: 90px;
margin: auto;
z-index: -1;
}
#logo {
position: center top;
margin: 0;
z-index: 2;
}
ul#menu {
width: 100%;
height: 50px;
padding: 0px;
border: 0px;
border-color: #374754;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
ul#menu {
position: relative;
background-color: #374754;
padding: 0;
margin-top: 70px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
ul#menu li {
display: inline;
margin-right: 5px;
}
ul#menu li a {
background-color: #374754;
padding: 10px 10px;
text-decoration: none;
color: #ffffff;
border-radius: 4px 4px 4px 4px;
}
ul#menu li a:hover {
color: white;
font-style: bold;
background-color: #d83030;
}
body {
font-family: "Helvetica", Verdana, sans-serif;
font-size: 12px;
background-color: #ffffff;
color: #ffffff;
text-align: center;
padding: 0px;
}
#main {
position: absolute;
top: 600px;
padding: 10px;
padding-left: 200px;
padding-right: 200px;
background-color: #d83030;
background-position: top center;
margin: auto;
}
#h1 {
text-shadow: 5px 5px 5px ##374754;
font-family: Helvetica, sans-serif;
color: #ffffff;
text-align: center;
font-size: 24px;
}
#footer {
position: relative;
color: #ffffff;
margin-bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>LOREM IPSUM</title>
<link href="Site.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="logo">
<img src="logo.png" alt="CROWD" style="width: 305px; height125px">
</div>
<nav id="nav01"></nav>
</div>
<link href="Site.css" rel="stylesheet">
<div id="main">
<h1>Welcome to LOREM</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque est dui, aliquam non auctor eget, maximus eu ligula. Ut sed iaculis elit, ac pharetra sem. Nam ipsum sem, consectetur id bibendum vitae, faucibus at tellus. Mauris aliquam, justo efficitur luctus vehicula, velit arcu efficitur nunc, eu volutpat diam erat ut eros. Vestibulum nec mi tristique, blandit eros sit amet, porttitor urna. Ut vehicula elit ipsum, a rhoncus erat fermentum sed. Suspendisse non diam at ex tincidunt pharetra eu id sem.</h2>
<p>content</p>
<p>content</p>
<p>more content</p>
<p>data (more content)</p>
<footer id="foot01"></footer>
</div>
<script src="Script.js"></script>
</body>
</html>

Resizing divs depending on information inside

I have a container where I want to hold information (which would be updated regularly). But sometimes, I might want this information to be long or short, and for this I cant have a fixed height on my container, so depending on the amount of text/information it should resize. Here's my script.
HTML:
<html>
<head>
<title>LoL Champs</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- NAVIGATION -->
<div id="nav-bar">
<div id="nav-bar-title">LoL Champs</div>
<ul>
<li>Champs</li>
<li>Info</li>
<li>Guides</li>
<li>Model Viewer</li>
<li>Lists</li>
</ul>
</div>
<!-- END NAVIGATION -->
<div id="main-body">
<div id="nav-body-divider"></div>
<p id="home-body-title">News</p>
<!-- News Container -->
<div id="news-container">
</div>
</div>
</body>
</html>
And CSS:
/** MAIN PAGE CONFIG CSS **/
html, body {
width: 100%;
height: 100%;
margin: 0 auto;
max-width: 1920px;
max-height: 1050px;
font-size: 100%;
}
html {
background: url(../images/JinxBG.jpg) 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p {
color: white;
}
a:link {color: inherit;}
a:visited {color: inherit;}
a:active {color: inherit;}
a {text-decoration: none;}
/** MAIN CSS **/
/**NAVIGATION**/
#nav-bar {
width: 100%;
height: 10%;
background-color: #A62D2D;
position: fixed;
box-shadow: 0px 2px 9px black;
font-size: 100%;
max-height: 10%;
max-width: 100%;
}
#nav-bar-title {
font-family: 'Sansita One';
color: #262424;
position: absolute;
width: 20%;
height: 100%;
left: 0.3%;
font-size: 1.8em;
max-width: 16%;
margin-top: 1.2%;
}
#nav-bar ul {
list-style-type: none;
color: #2E2C2C;
font-family: 'Belleza';
font-size: 1.5em;
position: absolute;
top: 0;
max-width: 100%;
max-height: 100%;
left: 15%;
line-height: 0%;
margin-top: 0;
margin-bottom: 10%;
top: 50%;
}
#nav-bar li {
margin-right: 45px;
display: inline;
height: 100%;
-webkit-transition: color 0.5s ease;
}
#nav-bar li:hover {
color: #C7C7C7;
-webkit-transition: color 0.5s ease;
}
/** END NAVIGATION **/
/** MAIN TEXT BODY **/
#nav-body-divider {
width: 100%;
height: 1px;
background: #B55050;
}
#main-body {
max-width: 100%;
max-height: 90%;
background: #A62D2D;
width: 70%;
height: 100%;
margin: auto;
position: relative;
top: 10%;
}
/** MAIN BODY NEWS **/
#home-body-title {
font-size: 2.4em;
font-family: Belleza;
color: #C98A5D;
position: relative;
left: 3%;
top: 0%;
}
#news-container {
width: 45%;
height: 40%;
background: #CF4040;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
position: relative;
left: 3%;
}
I want to resize news-container so that it adapts to the amount of stuff in it, but resize it only on height. The width should stay the same. Also, if the div will be bigger, how can I move the objects that will be below that div to accommodate further down on the page and make space for the big container?
Cheers, Nick
You should never set a height on anything. Always let the content grow naturally. http://jsfiddle.net/LQkj3/
<div id="news-container">
<p>
This is the news section! height will automatically grow depending on the amount of data! you should NEVER control height with pixels or percentage! always let the content grow it automatically.
</p>
</div>
<style>
#news-container { width: 45%; background: #CF4040; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; position: relative; left: 3%; padding: .5em 1em; }
</style>
...Unless of course you need a scrollable container (like #griegs suggested). ;)
Then you could put a max-width: 10em; or something to that effect.
<div style="width:200px; border: 1px solid black; max-height: 400px; overflow: scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et iaculis dui, id dapibus nibh. Phasellus sollicitudin urna non elementum aliquam. Vivamus nec aliquet quam. Mauris eget sollicitudin tellus, at dictum tellus. Donec sed porttitor quam, in suscipit nisl. Praesent vestibulum auctor turpis quis vulputate. Quisque eget erat vel tellus pretium bibendum. Mauris feugiat urna nec pharetra bibendum. Integer consectetur nisl cursus aliquam rhoncus. Mauris vulputate pulvinar commodo. Mauris placerat enim erat, a dignissim metus laoreet quis. Aenean nec ipsum neque. Proin adipiscing tellus ut nisi rutrum tempus. Aliquam erat volutpat. In dignissim consectetur tellus sit amet sagittis. Nam ac quam id nunc adipiscing commodo.
</div>
Remove the overflow and the max-height if these are not important to you. I put them in to demonstrate that pure css should be all you need.
As the div grows, the elements below it will be pushed down so long as they are not positioned absolute or floated etc.

Categories