I have an api that will give a number of either 1-5 under "ratings" , i also have a list of 5 stars, depending on the rating these stars will either turn red or black on click of the button, red will be for each number in the Ratings . i.e a rating of 4 would turn 4 of the stars red and 1 black. so far i have the html and css created but when the button is pressed i recieve no data at all to test the button I added a basic alert and that worked. So far I have this:
DEMO:
$("#viewreview").click(function(){
$.ajax("api link").done(function(data){
$(".reviewblk").html('');
var htmlstr = '';
for(var i=0; i<data.length; i++){
var rating = parseInt(data[i]["rating"]);
var chk = ['', '', '', '', ''];
for(var j=0; j<rating && j<5;j++){
chk[j] = 'checked';
}
htmlstr += '<div class="preview"><img src="reviewicon1.jpg" alt="reviewpic" class="revImg" /><div class="stars"><p class="checked '+chk[0]+'"></p><p class="checked '+chk[1]+'"></p><p class="checked '+chk[2]+'"></p><p class="checked '+chk[3]+'"></p><p class="checked '+chk[4]+'"></p></div><h3 class="personName">'+data[i]["nickname"]+'</h3><div class="revtext"><p>'+data[i]["review"]+'</p></div></div><hr />';
}
$(".reviewblk").html(htmlstr);
});
})
.productreviews{ /*sets font*/
font-family: 'Roboto Condensed', sans-serif;
}
.preview{ /*sets padding for how the div is displayed*/
padding-left: 60px;
padding-top: 30px;
padding-bottom: 30px;
display: block;
position: relative;
}
.revImg{ /*gives images curved edges*/
border-radius: 10px;
display: inline;
}
.personName{ /*sets the person name so that it is to the right of the image and just below the stars*/
display: inline;
position: absolute;
padding-left: 30px;
padding-top: 20px;
width: 150px;
}
.stars{ /*sets stars elements to above name and to the right of the image*/
position: absolute;
width: 100px;
top: 30px;
left: 180px;
}
.revtext{ /* displays the text div so that it is to the right side of the preview box*/
display: inline;
width: 550px;
position: absolute;
right: 0;
font-size: 15px;
font-weight: 600;
top: 10px;
}
.revtext p{ /*i used word wrap to wrap the word onto the next line then used overflow to contain the overflowing text and then used text overflow so that any overflowing text would be shown as an ellipsis*/
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
}
.btnreview{ /* setting the padding for the buton aswell as the color so that the text is white and the button itself is red, aswell as giving it curved edges.*/
padding: 10px 25px;
background-color: #F0191C;
color: white;
border: none;
border-radius: 10px;
}
.btnreview:hover{ /*changing the button when hovering and changing the cursor to a pointer*/
background-color: #8a130b;
cursor: pointer;
}
.btnblk{/* padding the button inside its div*/
padding: 25px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="productreviews"> <!--list of product reviews-->
<hr />
<h1 id = "productreviewheader">Product Reviews <span class="checked">*****</span></h1>
<hr />
<div class="reviewblk">
<div class="preview">
<img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">*****</p>
</div>
<h3 class="personName">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr />
<div class="preview">
<img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">***<span class="unchecked">**</span></p>
</div>
<h3 class="personName">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
<div class="preview">
<img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">****<span class="unchecked">*</span></p>
</div>
<h3 class="personName">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
<div class="preview">
<img src="images/robot-juice-images/reviewicon2.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">*****</p>
</div>
<h3 class="personName">This juice just keeps me going..</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
</div>
<div class="reviewblk">
<div class="preview">
<img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">*****</p>
</div>
<h3 class="personName">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
</div>
<div class="btnblk">
<button class="btnreview" id="viewreview">READ ALL REVIEWS</button>
</div>
</article>
Please consider the following.
$("#viewreview").click(function() {
$.ajax("api link").done(function(data) {
$(".reviewblk").html('');
var rating, preview, stars;
$.each(data, function(i, el) {
preview = $("<div>", {
class: "preview"
}).appendTo(".reviewblk");
$("<img>", {
src: "reviewicon1.jpg",
alt: "Review Icon",
class: "revImg"
}).appendTo(preview);
stars = $("<div>", {
class: "stars"
}).appendTo(preview);
rating = parseInt(el.rating);
for (var i = 1; i <= 5; i++) {
$("<p>", {
class: (i <= rating ? "checked" : "unchecked")
}).appendTo(stars);
}
$("<h3>", {
class: "personName"
}).html(el.nickname).appendTo(preview);
$("<div>", {
class: "revText"
}).html("<p>" + el.review + "</p>").appendTo(preview);
$("<hr>").appendTo(preview);
});
});
});
We can use jQuery to create the elements and append them as they are created. Using $.each(), we can itereate each of the items in data. WE also know there will be 5 'check' items, so we can simply create a small loop to create them. A number of them, equal to the rating will be "checked", so we can add a condition to check each one and mark it as needed.
For example, if the rating was 3, we would see:
<p class="checked"></p>
<p class="checked"></p>
<p class="checked"></p>
<p class="unchecked"></p>
<p class="unchecked"></p>
i will be 1 on the first iteration, and 1 is less than 3. On the 3rd loop, i will be 3 and will still meet the condition. When i is 4 or 5, it is no longer true so unchecked is supplied.
Related
I've a navigation menu which dissappears when the breakpoint is 400px and icon bars appear. I added an eventListener and when I click on the icon I've my message in the console, but when I added if statements I've got an error message 'Cannot read property 'style' of null at HTMLBodyElement'.
I've already read similar questions but still I can't resolve the problem.
.cont-menu-a{
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 35%;
height: 62%;
#media only screen and (max-width: $sm) {
display : none;
}
}
.fa-grip-lines{
color: #212529;
font-size: 2rem;
margin-left: 5%;
margin-top: 5%;
#media only screen and (min-width: $sm) {
display : none;
}}
`<div class="about-page">
<div class="sous-menu-burger">
<i class="fas fa-grip-lines"></i>
</div>
<div class="cont-main">
<div class="cont-menu-a">
<div class="home-a">Home</div>
<div class="about-a">About</div>
<div class="skills-a">Skills</div>
<div class="projects-a">Projects</div>
<div class="contacts-a">Contacts</div>
</div>
<div class="cont-text">
<div class="titre">About</div>
<div class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A repellat natus praesentium ratione ullam ipsa, perspiciatis consectetur, optio excepturi id cum maxime recusandae corrupti nihil. Illo deleniti eaque quod enim.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil laudantium optio ex nobis. Voluptatibus optio inventore doloremque. Perspiciatis temporibus ipsa quisquam expedita officiis? Nulla quod perferendis maiores repudiandae, vero eaque!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis earum a impedit, laborum magni fugit molestias, modi possimus quod hic consequuntur ad rem sed. Repudiandae, cupiditate perspiciatis! Pariatur, quia voluptatem.
</div>
</div>
</div>
</div>`;
const contSousmenu = document.querySelector('.cont-menu-a');
document.body.addEventListener('click', function (e) {
if (e.target.matches('.fa-grip-lines')) {
console.log('toto');
if (contSousmenu.style.display === 'none') {
contSousmenu.style.display = 'block';
} else {
contSousmenu.style.display = 'none';
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="about-page">
<div class="sous-menu-burger">
<i class="fas fa-grip-lines"></i>
</div>
<div class="cont-main">
<div class="cont-menu-a">
<div class="home-a">Home</div>
<div class="about-a">About</div>
<div class="skills-a">Skills</div>
<div class="projects-a">Projects</div>
<div class="contacts-a">Contacts</div>
</div>
<div class="cont-text">
<div class="titre">About</div>
<div class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A repellat
natus praesentium ratione ullam ipsa, perspiciatis consectetur,
optio excepturi id cum maxime recusandae corrupti nihil. Illo
deleniti eaque quod enim. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Nihil laudantium optio ex nobis. Voluptatibus
optio inventore doloremque. Perspiciatis temporibus ipsa quisquam
expedita officiis? Nulla quod perferendis maiores repudiandae, vero
eaque! Lorem ipsum dolor sit amet consectetur adipisicing elit.
Perspiciatis earum a impedit, laborum magni fugit molestias, modi
possimus quod hic consequuntur ad rem sed. Repudiandae, cupiditate
perspiciatis! Pariatur, quia voluptatem.
</div>
</div>
</div>
</div>
<script>
const hamburger = document.querySelector(".fa-grip-lines");
const contSousmenu = document.querySelector(".cont-menu-a");
hamburger.addEventListener("click", function (e) {
console.log("toto");
if (contSousmenu.style.display === "none") {
contSousmenu.style.display = "block";
} else {
contSousmenu.style.display = "none";
}
});
</script>
</body>
</html>
im trying to make something like text rotator.
When i click on About tab i want to show only about info, when i click on projects i want to delete about text and replace it with project text and same with other depending which i actually press.
I can make it to appear one under another. But that's not what i want. Hope you guys understand what i want to do.
DON'T WRITE IT FOR ME! Just please tell me where i should look for it, should i use loop?
HTML:
<main>
<div class="menuContainer">
<ul>
<li class="about" id="about">
<h2>O mnie</h2>
</li>
<li class="projects" id="projects">
<h2>Projekty</h2>
</li>
<li class="empty">
<div class="circle"></div>
</li>
<li class="technology" id="technology">
<h2>Technologie</h2>
</li>
<li class="contact" id="contact">
<h2>Kontakt</h2>
</li>
</ul>
</div>
<div class="poleDoZmiany">
<p id="doZmiany" class="zmiana">
Welcome Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit culpa labore temporibus fugiat eum error hic illo perspiciatis dignissimos, corporis, aut sapiente sint numquam!
</p>
</div>
<p id="Tekst1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur, natus nam! Excepturi ipsam voluptates magni odio adipisci, officia consequuntur praesentium eos cumque exercitationem soluta, eveniet dolor sed reiciendis asperiores modi pariatur placeat animi, debitis ratione. Hic illo incidunt, praesentium excepturi vero perspiciatis corrupti maxime accusamus, iusto repellendus quam id. </p>
<p id="Tekst2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus sint modi quisquam autem perferendis maxime impedit sed. Doloremque, reprehenderit neque perspiciatis facere quia saepe architecto odio aspernatur, voluptas nobis blanditiis, quisquam beatae?
</p>
<p id="Tekst3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, facilis. Deserunt, in.
</p>
<p id="Tekst4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure fugiat sequi accusantium inventore asperiores magnam impedit sit maiores praesentium! Ea exercitationem, veritatis placeat blanditiis vitae iste, cupiditate asperiores voluptate cumque quisquam ipsam repellat accusamus debitis omnis aliquid! Iste rerum consectetur impedit porro molestias numquam. Facere eveniet at dolorum deleniti! Facilis nisi ut beatae laudantium nulla culpa amet neque inventore at minus. Reiciendis distinctio ab voluptas! Earum excepturi corporis odit?
</p>
CSS:
main {
width: 80%;
position: absolute;
left: 10%;
top: 35vh;
background: white;
-webkit-box-shadow: 0px 0px 34px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 34px 2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 34px 2px rgba(0,0,0,0.75);
}
main p {
margin-top: 90px !important;
margin: 25px;
padding: 25px;
text-align: center;
}
.media {
text-align: center;
}
.media > img {
padding: 10px;
}
p {
display: none;
}
#doZmiany {
display: block;
}
JAVASCRIPT:
let tekst1 = document.getElementById('Tekst1');
let tekst2 = document.getElementById('Tekst2');
let tekst3 = document.getElementById('Tekst3');
let tekst4 = document.getElementById('Tekst4');
var zmiana = document.getElementById('doZmiany');
const oMnie = document.getElementById('about');
const projekty = document.getElementById('projects');
oMnie.addEventListener('click', function(){
tekst1.classList.add('zmiana');
})
projekty.addEventListener('click', function(){
tekst2.classList.add('zmiana');
})
You're almost there. Keep in mind, that you need to hide all the paragraphs you don't want to show with every click. So a loop is a good idea.
And then show the one and only.
Here is a code snippet that does something like that a little different from your approach in case you get stuck. Go on with your solution!
document.getElementById('tablist').addEventListener('click', function(e){
const tabs = ['tab1', 'tab2'];
const ti = tabs.indexOf(e.target.id);
if(ti !== false){
for(let i = 0; i < tabs.length; i += 1) {
if(ti !== i){
document.getElementById(tabs[i]+'Txt').style.display = 'none';
}
}
document.getElementById(tabs[ti]+'Txt').style.display = 'block';
}
});
.hiddenText {
display: none;
}
<ul id="tablist">
<li id="tab1">tab1</li>
<li id="tab2">tab2</li>
</ul>
<p id="tab1Txt" class="hiddenText">
This is tab1Txt.
</p>
<p id="tab2Txt" class="hiddenText">
This is tab2Txt.
</p>
For your tabs, add a class called tab and for all of your content paragraphs, give them a class of tab-content.
Then create a click event for the class of tab. In the click event get the ID of what is being clicked on and use that to determine the content to be shown. First, hide ALL of tab-content paragraphs, then only show the paragraph based on the passed ID.
Like facebook, when hover over the image of the friend it shows drop menu out side the left sidebar of friends,
I gave the drop menu position absolute with respective to the app itself (position: relative), but the problem is when scrolling down the menu appear below its anchor tag, how can I fix it ?
here is the sample of the code that I have,
can I implement this with pure css or I need JS ?
.App {
position: relative;
}
nav {
overflow: auto;
max-height: 700vh;
}
.dropMenu {
position: absolute;
}
<div className="App">
<nav>
<ul>
<li>
<a onClick={this.showDropMenu}> ... </a>
</li>
<div className="dropMenu"></div>
</ul>
</nav>
</div>
Use position: sticky;
.App{
position: sticky;
}
nav {
overflow: auto;
max-height: 700vh;
}
.dropMenu {
position: absolute;
}
This is the simplest way you can do it using only CSS. You may have to implement other behaviors if you want to have a fully functional dropdown-menu.
$(".nav li").on("mousemove", evt => {
const li = $(evt.target);
const dropdown = $(evt.target).find('.dropdown-menu');
let liTop = li.offset().top;
liTop = liTop < 0 ? liTop * -1 : liTop;
dropdown.css('top', liTop + li.height());
})
ul {
list-style: none;
overflow-y: auto;
height: 100px;
width: 400px;
}
ul li {
margin: 20px 0;
}
ul li:hover .dropdown-menu {
display: block;
}
ul li .dropdown-menu {
position: absolute;
display: none;
width: 300px;
background-color: #fff;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav">
<li>
Lorem 1
<div class="dropdown-menu">
Lorem 1 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
</div>
</li>
<li>
Lorem 2
<div class="dropdown-menu">
Lorem 2 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
</div>
</li>
<li>
Lorem 3
<div class="dropdown-menu">
Lorem 3 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
</div>
</li>
<li>
Lorem 4
<div class="dropdown-menu">
Lorem 4 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
</div>
</li>
<li>
Lorem 5
<div class="dropdown-menu">
Lorem 5 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
</div>
</li>
</ul>
Please, run this snippet to better understand my issue
body{
background-color: #E13241;
font-family: sans-serif;
font-weight: 300;
}
#wrapper{
width: 1130px;
margin: 100px auto;
}
.box1, .box2, .box3, .box4{
width: 230px;
height: 200px;
overflow: hidden;
float: left;
word-break: break-all;
word-spacing: -1px;
margin-left: 15px; /* or 0px */
background-color: rgba(25, 25, 25, 0.2);
padding: 15px;
transition: all 0.5s ease-in;
}
h3{
text-align: center;
}
.box1:hover, .box2:hover, .box3:hover, .box4:hover{
width: 230px;
height: 300px;
margin-top: -50px;
overflow-y: scroll;
}
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {background-color: rgba(25, 25, 25, 0.2);}
::-webkit-scrollbar-thumb {background-color: rgba(25, 25, 25, 0.2);}
<div id="wrapper">
<div class="box1">
<h3>
Title Box 1
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, beatae! Sed assumenda cupiditate quasi officiis laborum, minima at error tempore. Voluptatibus facere iste qui? Fugit non perferendis, accusamus nostrum deleniti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus consequuntur laborum porro nemo, quisquam minus minima eius, deserunt similique, laboriosam dolorum tenetur et repudiandae rem fugit illum perspiciatis nam totam.
</p>
</div>
<div class="box2">
<h3>
Title Box 2
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, beatae! Sed assumenda cupiditate quasi officiis laborum, minima at error tempore. Voluptatibus facere iste qui? Fugit non perferendis, accusamus nostrum deleniti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus consequuntur laborum porro nemo, quisquam minus minima eius, deserunt similique, laboriosam dolorum tenetur et repudiandae rem fugit illum perspiciatis nam totam.
</p>
</div>
<div class="box3">
<h3>
Title Box 3
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, beatae! Sed assumenda cupiditate quasi officiis laborum, minima at error tempore. Voluptatibus facere iste qui? Fugit non perferendis, accusamus nostrum deleniti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus consequuntur laborum porro nemo, quisquam minus minima eius, deserunt similique, laboriosam dolorum tenetur et repudiandae rem fugit illum perspiciatis nam totam.
</p>
</div>
<div class="box4">
<h3>
Title Box 4
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, beatae! Sed assumenda cupiditate quasi officiis laborum, minima at error tempore. Voluptatibus facere iste qui? Fugit non perferendis, accusamus nostrum deleniti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus consequuntur laborum porro nemo, quisquam minus minima eius, deserunt similique, laboriosam dolorum tenetur et repudiandae rem fugit illum perspiciatis nam totam.
</p>
</div>
</div>
So, I have a box within a div. When I hover it, the box gets higher and it is possible to scroll inside the box. But I can't figure a way to automatically scroll back to the top of the box when I do not hover the box anymore.
I've tried multiple things, including this js code I found in another answer :
$('#box').show();
$('#box').scrollTop(0);
$('html,body, #box').animate({scrollTop: 0}, 100);
But it's just cancelling all my css and do not work in this specific scenario.
Any idea or direction to follow ?
Im using the following code from their website
<nav>
<div class="nav-wrapper">
<form>
<div center class="input-field">
<input id="search" type="search" required>
<label for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
Is there any way to search through the website, and highlight the words when the user types them?
You can use hilitor.js for that.
HTML:
<nav>
<div class="nav-wrapper">
<form>
<div center class="input-field">
<input id="search" type="search" required placeholder="Search...">
<label for="search"></label>
</div>
</form>
</div>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit praesentium ad placeat voluptates perspiciatis eaque odio non nisi impedit ea. Praesentium similique perferendis animi, cumque neque placeat deserunt facere ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit praesentium ad placeat voluptates perspiciatis eaque odio non nisi impedit ea. Praesentium similique perferendis animi, cumque neque placeat deserunt facere ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit praesentium ad placeat voluptates perspiciatis eaque odio non nisi impedit ea. Praesentium similique perferendis animi, cumque neque placeat deserunt facere ut.</p>
CSS:
::-webkit-input-placeholder {
color: #fff;
}
::-moz-placeholder {
color: #fff;
opacity: 1;
}
:-ms-input-placeholder {
color: #fff;
}
input {
margin: 0;
}
p {
margin: 0;
padding: 15px 60px;
background: #d66367;
color: #fff;
}
JS:
var myHilitor2;
document.addEventListener("DOMContentLoaded", function() {
myHilitor2 = new Hilitor("playground");
myHilitor2.setMatchType("left");
}, false);
document.getElementById("search").addEventListener("keyup", function() {
myHilitor2.apply(this.value);
}, false);
Here is a Codepen.
Don't forget to include hilitor.js.
Next time provide better topic name and tags, because your issue is not related to materialize or materializecss.