I'm trying to create a client-sided search bar using javascript and I'm not sure how to do that and get it to function properly. I'm trying to create one without using PHP since I have no experience with server-sided programming. How would you create one that works with the client-side? Do you need an index for the search results and an API as well? And how would you use an index and an API? The goal of the search bar is to find terms or words that are present on the webpage is what I'm trying to achieve with it. It's to give the user a chance to search for the name of an article present in the webpage. Here is my current code if you want to see it: https://jsfiddle.net/snt87eg9/1/
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="header">
<div id ="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Articles</h2>
</div></div><br>
<div class="row">
<div class="leftcolumn">
<div class="card">
<div id="Title">
<h2>Article 1</h2>
<h5>Date</h5>
<p>Some text over there.,.. </p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<h2>Article 2</h2>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
```
You need a way to select the searchbar, articles and article titles,
lets say you give classes article and article-title and give the searchbar id="searchbar"
Document should look like this:
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search" id="searchbar">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="header">
<div id="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Articles</h2>
</div>
</div><br>
<div class="row article">
<div class="leftcolumn">
<div class="card">
<div id="Title">
<a href="#">
<h2 class="article-title">Article 1</h2>
</a>
<h5>Date</h5>
<p>Some text over there.,.. </p>
</div>
</div>
</div>
</div>
<div class="row article">
<div class="card">
<div id="Title2">
<a href="#">
<h2 class="article-title">Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
Here's the way to filter out what you wrote in the searchbar:
<script>
$('#searchbar').keyup(function(){
let articles = $('.article'); //get all elements with class="article"
let keyword = $(this).val().toLowerCase(); //get the content of the searchbar
if(keyword == "") //show all elements if searchbar is empty
articles.show();
else{ //else loop through articles and check if the keyword is in the title div
articles.each(function(element) {
let title = $(this).find('.article-title').text().toLowerCase();
(title.indexOf(keyword) >= 0) ? $(this).show() : $(this).hide();
});
}
});
</script>
The script uses jQuery , you can put this before the script if you don't have it already imported :
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
I just took the time to make a client-side search javascript function. But if you are not too familiar with javascript try to learn a little bit more before implementing this type of things.
$(document).ready(function() {
$("#header").hide().fadeIn(2000);
});
$(document).ready(function() {
$("#title").hide().fadeIn(2000);
});
$(document).ready(function() {
$("#footer").hide().fadeIn(2000);
});
function searchInArticles(word) {
const articles = document.querySelectorAll(".card");
articles.forEach(article => {
if (article.innerHTML.includes(word)) {
article.style.display = "block";
article.scrollIntoView();
} else {
article.style.display = "none";
}
})
}
searchInArticles("Yes");
//searchInArticles("Some");
/* Add a gray background color with some padding */
body {
font-family: Arial;
padding: 20px;
background: #32cd32;
}
/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: #7df9ff;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 100%;
}
/* Add a card effect for articles */
.card {
background-color: #87ceeb;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #00bfff;
margin-top: 20px;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
#media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a,
.topnav input[type=text],
.topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- My link -->
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="header">
<div id="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Articles</h2>
</div>
</div><br>
<div class="row">
<div class="leftcolumn">
<div class="card">
<div id="Title">
<a href="#">
<h2>Article 1</h2>
</a>
<h5>Date</h5>
<p>Yes text over there.,.. </p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Yes text over here..... </p>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
<div class="footer">
<div id="footer">
</div>
</div>
</body>
</html>
Related
I am stuck in some unusual situation. I want to redirect button to the specific page where there are multiple category filters of bike models and similar category models description is mentioned in another page with same kind of filter but the inside filter, there are multiple accordions according to models.
Whenever I am trying to redirect link to particular models and its accordion should open but it is redirecting to only first element. Here is code
I have tried with adding id after link but its not working because there is filter in between
// add attempt here
$(document).ready(function() {
$(".rm-box").hide();
});
$(document).ready(function(){
$(".button").click(function(){
var value = $(this).attr("data-filter");
if (value == "all")
{
$(".filters").hide('1000');
}
else
{
$(".filters").not("." + value).hide("1000");
$(".filters").filter("." + value).show("1000");
}
$("ul .button").click(function(){
$(this).addClass('active').siblings().removeClass('active');
})
})
})
$(document).ready(function() {
var hash = window.location.hash;
hash && $('ul.myfilter a[href="' + hash + '"]').panel-body('show');
});
/* add helpful css here */
ul.myfilter {
padding: 0;
position: relative;
width: 100%;
margin: 10px 10px 30px;
}
.myfilter>li {
list-style: none;
float: left;
padding: 10px 20px;
color: #ffffff;
margin-right: 15px;
font-family: 'Oswald';
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
font-size: 24px;
}
.myfilter>li:hover, .active {
color: #ff6501!important;
font-size: 30px!important;
}
.filter-cont{
padding: 0 30px;
position: relative;
padding: 30px;
box-sizing: border-box;
background-color: #000000;
width: 100%;
margin: 0;
}
.iron-883{
height:400px;
width: 100%;
background-size: cover;
background-position: 50%;
}
.acco-title:hover {
text-decoration: none;
}
.acco-title {
font-family: 'Montserrat';
font-weight: 700;
color: #ff6501 !important;
font-size: 24px;
text-transform: uppercase;
}
.colorview{
position: relative;
background-color: #363636;
width: 40%;
height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul class="myfilter">
<li class="button active" data-filter="sportster">Sportster</li>
<li class="button" data-filter="street">Street</li>
<li class="button" data-filter="softail">Softail</li>
<li class="button" data-filter="touring">Touring</li>
<li class="button" data-filter="cvo">Cvo</li>
<div style="clear: both;"></div>
</ul>
<div class="box filters sportster">
<div class="row">
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img iron-883">
</div>
<div class="col-md-2 cmn-fit-txt wh-rhs">
<h4>IRON 883</h4>
<a class="orng-btn filt-bike-link" href="hdmodels.html#collapse1">Know More</a>
</div>
</div>
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img forty-8">
</div>
<div class="col-md-2 cmn-fit-txt orng-rhs">
<h4>FORTY EIGHT</h4>
<a class="white-btn filt-bike-link" href="hdmodels.html#collapse2">Know More</a>
</div>
</div>
</div>
<div class="row hd-sportster">
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img custom-1200">
</div>
<div class="col-md-2 cmn-fit-txt orng-rhs">
<h4>1200 CUSTOM</h4>
<a class="white-btn filt-bike-link" href="hdmodels.html#collapse3">Know More</a>
</div>
</div>
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img hd-roadster">
</div>
<div class="col-md-2 cmn-fit-txt wh-rhs">
<h4>ROADSTER</h4>
<a class="orng-btn filt-bike-link" href="hdmodels.html">Know More</a>
</div>
</div>
</div>
</div>
<ul class="myfilter">
<li class="button active" data-filter="street">Street</li>
<li class="button" data-filter="sportster">Sportster</li>
<li class="button" data-filter="softail">Softail</li>
<li class="button" data-filter="touring">Touring</li>
<li class="button" data-filter="cvo">Cvo</li>
<div style="clear: both;"></div>
</ul>
<div class="box filters street">
<div class="panel-group" id="streetaccordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#streetaccordion" href="#collapse1" class="acco-title">Harley-Davidson Street-750</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
Some Code
</div>
</div>
</div>
</div>
</div>
I am not going to try to figure out ALL your functionality but just address the question. Note where the element with id collapse2 is open when this is ran.
I used this reference: https://getbootstrap.com/docs/4.0/components/collapse/
I altered some CSS etc. just to show it better in this limited context more clearly. You were close but the key is the selector and then trigger the show event. These are the key lines: (comments in the code, note where they are placed)
let hash = window.location.hash;
$('#' + hash).collapse('show');
Side note, I moved these outside the UL since a UL can only contain li or a nested list item and added a class instead of in-line style:
<div class="clear-things"></div>
Reference https://www.w3.org/TR/html401/struct/lists.html#h-10.2
$(function() {
//$(".rm-box").hide();
$("ul.myfilter").find(".button").on('color-siblings', function(event) {
$(this).addClass('active').siblings().removeClass('active');
}).on('click', function(event) {
let filters = $(".filters");
let value = $(this).data("filter");
if (value == "all") {
filters.hide('1000');
} else {
filters.not("." + value).hide("1000");
filters.filter("." + value).show("1000");
}
$(this).trigger('color-siblings');
});
// code that toggles the collapse in the document ready event handler
// could also be a custom event trigger like I show for the color above
let hash = window.location.hash;
hash = "collapse2"; // just to test - get hash as above
// assumption of ID here thus the '#', ID MUST be unique so that is OK
$('#' + hash).collapse('show');
});
/* add helpful css here */
div>ul.myfilter {
background-color: #333333;
border: solid 1px lime;
}
/*so we see it */
ul.myfilter {
padding: 0;
position: relative;
width: 100%;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 30px;
}
.myfilter>li {
list-style: none;
float: left;
padding-top: 1em;
padding-right: 1.2em;
color: #0165ff;
margin-right: 0.25em;
font-family: 'Oswald';
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
font-size: 1.2em;
}
.myfilter>li:hover,
.active {
color: #ff6501!important;
}
.filter-cont {
padding: 0 30px;
position: relative;
padding: 30px;
box-sizing: border-box;
background-color: #000000;
width: 100%;
margin: 0;
}
.iron-883 {
height: 10px;
width: 100%;
background-size: cover;
background-position: 50%;
}
.acco-title:hover {
text-decoration: none;
}
.acco-title {
font-family: 'Montserrat';
font-weight: 700;
color: #ff6501 !important;
font-size: 24px;
text-transform: uppercase;
}
.colorview {
position: relative;
background-color: #363636;
width: 40%;
height: 500px;
}
.clear-things {
clear: both;
}
.panel-body {border:solid blue 1px;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="accordion" id="accordionExample">
<ul class="myfilter">
<li class="button active" data-filter="sportster">Sportster</li>
<li class="button" data-filter="street">Street</li>
<li class="button" data-filter="softail">Softail</li>
<li class="button" data-filter="touring">Touring</li>
<li class="button" data-filter="cvo">Cvo</li>
</ul>
<div class="clear-things"></div>
<div class="box filters sportster">
<div class="row">
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img iron-883">
</div>
<div class="col-md-2 cmn-fit-txt wh-rhs">
<h4>IRON 883</h4>
<a class="orng-btn filt-bike-link" href="#collapse1">Know More</a>
</div>
</div>
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img forty-8">
</div>
<div class="col-md-2 cmn-fit-txt orng-rhs">
<h4>FORTY EIGHT</h4>
<a class="white-btn filt-bike-link" href="#collapse2">Know More</a>
</div>
</div>
</div>
<div class="row hd-sportster">
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img custom-1200">
</div>
<div class="col-md-2 cmn-fit-txt orng-rhs">
<h4>1200 CUSTOM</h4>
<a class="white-btn filt-bike-link" href="hdmodels.html#collapse3">Know More</a>
</div>
</div>
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img hd-roadster">
</div>
<div class="col-md-2 cmn-fit-txt wh-rhs">
<h4>ROADSTER</h4>
<a class="orng-btn filt-bike-link" href="#collapse3">Know More</a>
</div>
</div>
</div>
</div>
<ul class="myfilter">
<li class="button active" data-filter="street">Street</li>
<li class="button" data-filter="sportster">Sportster</li>
<li class="button" data-filter="softail">Softail</li>
<li class="button" data-filter="touring">Touring</li>
<li class="button" data-filter="cvo">Cvo</li>
</ul>
<div class="clear-things"></div>
<div class="box filters street">
<div class="panel-group" id="streetaccordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#streetaccordion" href="#collapse1" class="acco-title">Harley-Davidson Street-750</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
Some Code 750 CC
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#streetaccordion" href="#collapse2" class="acco-title">Harley-Davidson Forty Eight</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse in">
<div class="panel-body">
Some Code Forty Eight Cheese bits
</div>
</div>
</div>
</div>
</div>
</div>
How do I creating a voting system that uses checkboxes for 1 star, 2 stars, 3 stars, 4 stars and 5 stars. According to what the user picks it will generate an average user rating from the given votes and display the number of stars required.
I am not sure where exactly to start in terms of gathering the input from the user etc...This is all the code I have for now
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
margin: 0 auto; /* Center website */
max-width: 800px; /* Max width */
padding: 20px;
}
.heading {
font-size: 25px;
margin-right: 25px;
}
.fa {
font-size: 25px;
}
.checked {
color: orange;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: right;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 100%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Individual bars */
.bar-5 {width: 60%; height: 18px; background-color: #4CAF50;}
.bar-4 {width: 30%; height: 18px; background-color: #2196F3;}
.bar-3 {width: 10%; height: 18px; background-color: #00bcd4;}
.bar-2 {width: 4%; height: 18px; background-color: #ff9800;}
.bar-1 {width: 15%; height: 18px; background-color: #f44336;}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
#media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
</style>
</head>
<body>
<span class="heading">User Rating</span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<p>4.1 average based on 254 reviews.</p>
<hr style="border:3px solid #f1f1f1">
<div class="row">
<div class="side">
<div>5 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-5"></div>
</div>
</div>
<div class="side right">
<div>150</div>
</div>
<div class="side">
<div>4 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-4"></div>
</div>
</div>
<div class="side right">
<div>63</div>
</div>
<div class="side">
<div>3 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-3"></div>
</div>
</div>
<div class="side right">
<div>15</div>
</div>
<div class="side">
<div>2 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-2"></div>
</div>
</div>
<div class="side right">
<div>6</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-1"></div>
</div>
</div>
<div class="side right">
<div>20</div>
</div>
</div>
</body>
</html>
Usually a 5-star polling system will require a database and a backend programming language. i.e. Mysql and PHP.
Here is an example:
https://www.script-tutorials.com/how-to-create-own-voting-system/
I'm having an issue with HTML sections. As shown in the screenshot the blue spot are the sections and they should include the grey space. The white space is what lays inside the section tags in HTML.
The problem was discovered when trying to add some space between each section, but everything we tried it wouldn't do anything.
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
let mainNavLinks = document.querySelectorAll("nav ul li a");
let mainSections = document.querySelectorAll("main section");
let lastId;
let cur = [];
// This should probably be throttled.
// Especially because it triggers during smooth scrolling.
// https://lodash.com/docs/4.17.10#throttle
// You could do like...
// window.addEventListener("scroll", () => {
// _.throttle(doThatStuff, 100);
// });
// Only not doing it here to keep this Pen dependency-free.
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
html {
scroll-behavior: smooth;
}
body {
margin: 0;
display: grid;
grid-template-columns: min-content 1fr;
font-family: 'Roboto';
background-color: grey;
/* this breaks position sticky in Firefox */
/* overflow-x: hidden; */
}
header {
grid-column: 1 / 3;
background: #5D5C61;
background-image: url("../Assets/Images/headerImage.jpg");
image-resolution: 1200x1400;
color: white;
padding: 4rem;
text-align: center;
font-family: 'Chivo';
font-size: 22px;
}
header a {
padding-right: 20px;
color: white;
text-decoration: underline;
}
header h1 {
color: #fb6542;
}
nav {
white-space: nowrap;
background: #37474F;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Only stick if you can fit */
#media (min-height: 300px) {
nav ul {
position: sticky;
top: 0;
}
}
nav ul li a {
display: block;
padding: 0.5rem 1rem;
color: white;
font-size: 20px;
text-decoration: none;
}
nav ul li a.current {
background: #51656E;
}
main {
padding-top: -30px;
}
section {
padding: 2rem;
margin: 0 0 10% 0;
background-color: lightblue;
display: block;
}
footer {
grid-column: 1 / 3;
background: #252E39;
padding: 5rem 1rem;
}
a {
color: black;
text-decoration: none;
}
main a {
display: inline-block;
padding-bottom: 20px;
}
a:hover {
color: #6B7B83;
text-decoration: underline;
}
a:active {
color: #6B7B83;
}
.socialIcon {
height: 20px;
width: 20px;
}
#socialMedia {
text-align: center;
}
.CALink:hover {
color: #202F36;
}
.container {
width: 70%;
height: 100%;
float: left;
display: inline-block;
flex-wrap: wrap;
font-family: 'Alegreya Sans', sans-serif;
}
.control-group {
display: inline-block;
vertical-align: top;
background: #FFFFFF;
text-align: left;
box-shadow: 0px 1px 2px rgba(0.2, 0.2, 0, 0.2);
padding: 30px;
width: 100%;
height: 100%;
margin: 1%;
align-items: center;
}
.containerRight {
width: 20%;
height: 20%;
float: right;
display: inline-block;
flex-wrap: wrap;
font-family: 'Alegreya Sans', sans-serif;
}
.control-groupRight {
display: inline-block;
vertical-align: top;
background: #FFFFFF;
text-align: center;
box-shadow: 0px 1px 2px rgba(0.2, 0.2, 0, 0.2);
width: 100%;
height: 100%;
align-items: center;
margin: 4% 1% 1% 1%;
}
.navTitle {
text-decoration: underline;
}
.endOfModule {
margin-bottom: 20px;
}
.sectionHolder {
width: 100%;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css"/>
<link href="CSS/linkHover.css" rel="stylesheet" type="text/css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="icon" href="Assets/Images/faviconTTT.png"/>
<title>Silverflame</title>
</head>
<body>
<header>
<div id="socialMedia">
<img class="socialIcon" src="Assets/Images/mark-github.svg" alt="logo" />
<img class="socialIcon" src="Assets/Images/twitterSVG.svg" alt="twitter logo"/>
</div>
<h1>SilverFlame</h1>
<h5>Jesper Christensen</h5>
<a target="headerLink" href="https://www.thesilverflame.dk/">Home</a>
<a target="headerLink" href="https://www.thesilverflame.dk/CA.html">CA</a>
<a target="headerLink" href="">About</a>
Contact
</header>
<nav>
<ul>
<li>Module 1</li>
<li>Maven</li>
<li>Network and HTTP</li>
<li>JavaScript & CA1</li>
<li>Module 2</li>
<li>ORM with JPA</li>
<li>Rest webservices with JAX-RS</li>
<li>JavaScript</li>
<li>CA2</li>
<li>Module 3</li>
<li>SYS 1</li>
<li>?</li>
<li>SYS 2</li>
<li>Module 4</li>
<li>SPA with React (TBD)</li>
<li>React routing, Security and RN</li>
<li>CA3 (TBD)</li>
<li>Module 5</li>
<li>Project - Week 1</li>
<li>Project - Week 2</li>
<li>Project - Week 3</li>
</ul>
</nav>
<main>
<section id="section-1">
<div class="container">
<div class="control-group">
<h2>Module 1 - Maven, Test & Network</h2>
</div>
</div>
</section>
<section id="section-2">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Maven</h2>
<div class="tooltip">
Simple Calculator
<span class="tooltiptext">Github link</span>
</div>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-3">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Network & HTTP</h2>
Exercises - Network stack
<br>
Exercise HTTP
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-4">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>JavaScript and CA1</h2>
The JS array
<br>
JavaScript Exercice 1
<br>
Course Assignment 1
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-5">
<div class="container">
<div class="control-group">
<h2>Module 2 - Webstack</h2>
</div>
</div>
</section>
<section id="section-6">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>ORM with JPA</h2>
<h2>Study Point Exercise 3 - JPA, JPQL and Testing </h2>
<h3>Part 1</h3>
Exercise - JPA Entity Mappings - 1
<br>
Exercise - Java Persistence - Querying - 3
<h3>Part 2</h3>
Studypoint part two
<h3>Part 3</h3>
Exam Preparation Exercise on relations and queries
<br>
Exam Preparation Exercise on JPQL
<br>
Object Relational Mapping and Inheritance
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-7">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Rest webservices with JAX-RS</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-8">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>JavaScript</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-9">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Course Assignment 2</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-10">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>ORM with JPA</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
</main>
<footer>
©2022
</footer>
<script src="Assets/JS/hoverEffect.js" type="text/javascript"></script>
<script src="Assets/JS/frontpage.js" type="text/javascript"></script>
</body>
</html>
You are applying a float to the container which takes the item out of the document flow. Consider using flexbox instead of floats for layout.
.sectionHolder {
width: 100%;
margin: auto;
display: flex;
}
.container {
flex: 1 1 70%;
height: 100%;
font-family: 'Alegreya Sans', sans-serif;
}
.containerRight {
flex: 0 0 20%;
height: 20%;
font-family: 'Alegreya Sans', sans-serif;
}
This is a well-known issue when working with floated content. The height of the section elements are not being properly calculated because the floated content is not in the normal document flow.
Add overflow:auto; to the section elements which should correct the issue by forcing the rendering engine to recalculate the height of the element and once it does that, it should recognize the child content and factor it in.
Here's more on the issue and other solutions.
I am trying to create a content slider, and am having difficulties with it functioning appropriately. Specifically when testing locally the aspect that is not working is: (When you click the arrows left or right the current-slide fades out and fades back in but the slide content does not switch to the next block of content.)
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<html lang="en-US">
<meta charset="UTF-8">
<title>PLACEHOLDER</title>
<meta name"keywords" content="PLACEHOLDER" />
<meta name"description" content="PLACEHOLDER" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="code.js"></script>
<link type="text/css" rel="stylesheet" href="style2.css" />
</head>
<body>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 id="welcome">FIRST SLIDE HEADER</h1>
<div id="img1">
<img src="######.png" width="450" height="250" />
</div>
<div id="intro">
<p>FIRST SLIDE CONTENT</p </div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Slide2</h1>
<p>Slide 2 stuff.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 3</h1>
<h2>Slide3</h2>
<p>Slide3 content</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 4</h1>
<p>slide 4 content</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="ARROW LEFT IMAGE">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="ARROW RIGHT IMAGE">
</a>
</div>
Here is my JS:
var main = function () {
$('.arrow-next').click(function () {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next()
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function()
{
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev()
if(prevSlide.length == 0)
{
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);
HERE IS MY CSS(Just to tie it all together):
.slider {
position: relative;
width: 50%;
height: 470px;
margin-left: 25%;
border-bottom: 1px solid #ddd;
margin-top: -8%;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
margin-top: 30%;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
NOTE: I only put the sections of html/js/css that matter for this case. And I used placeholders for some text and images. On my local machine those placeholders are replaced with correct content.
if you look at the HTML closely, you'll see that the slider div's are not positioned properly. all the other div's with the class '.slide' are enclosed inside <div class="slide active-slide"> whereas they should be independent of each other.
the javascript code is not able to find the next() slide since they're all contained in one single parent which is the 'active-slide'
you need to update your HTML to the following
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 id="welcome">FIRST SLIDE HEADER</h1>
<div id="img1">
<img src="######.png" width="450" height="250" />
</div>
<div id="intro">
<p>FIRST SLIDE CONTENT</p </div>
</div>
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Slide2</h1>
<p>Slide 2 stuff.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 3</h1>
<h2>Slide3</h2>
<p>Slide3 content</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 4</h1>
<p>slide 4 content</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="ARROW LEFT IMAGE">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="ARROW RIGHT IMAGE">
</a>
</div>
here's a working JSFIDDLE for the same. hope this helps
You just need to include the jQuery library from here: http://jquery.com/download/
You will get this error if you haven't included jquery file or you are getting conflicts in jquery.
ReferenceError: $ is not defined
Add following in Head section of your code:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
I have created 2 menus:prod & prod2, I find when the mouse focus on prod2, the background color is changed but when the mouse focus on prod1 the background color doesn't change.
Why it doesn't change?
Styles:
ul.hMenu {
margin: 0;
padding: 0;
z-index: 1;
}
ul.hMenu > li {
margin: 0;
padding: 0;
list-style: none;
float: left;
width:140px;
}
ul.hMenu li a {
display: block;
text-align: left;
text-decoration: none
}
ul.hMenu li > div {
position: absolute;
display: none;
}
ul.hMenu div a {background: yellow;
}
div.lay1{ float:left;}
div.lay1 br{line-height:50%}
.topMenu{font:bold 12px arial;color:#169e39;text-decoration: none;}
.secondMenu{font:12px arial;color:#000000;text-decoration: none;}
.arrow_box {
position: relative;
background: red;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(149, 213, 53, 0);
border-bottom-color: red;
border-width: 13px;
left: 10%;
margin-left: -13px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 19px;
left: 10%;
margin-left: -19px;
}
Script:
function showMenu(obj){
var a=obj.children[0];
a.style.color="blue";
var div = obj.children[1];
obj.style.backgroundColor="yellow";
div.style.display="block";
}
function hideMenu(obj){
var a=obj.children[0];
a.style.color="red";
var div = obj.children[1];
div.style.display="none";
obj.style.backgroundColor="";
}
HTML:
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod</a>
<div><br/>
<!-- here-->
<div class="arrow_box" >
<div class="lay1">
<div>Manage Content<br> Message </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<div class="lay1">
<div>Manage Content<br> Message <br> Help </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</li>
</ul>
<br/><br/><br/><br/><br/>
Test
Problem In JsFiddle
I tested your code and it worked! what is your browser? please place a demo and also add this code as well
a.setAttribute('style','background-color:blue');
some browsers have incompatibility with element.style
give CSS Like this
.arrow_box{ position:absolute; white-space:nowrap}
Check this
http://jsfiddle.net/zz5XJ/2/
try the below HTML:
<body>
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod</a>
<div class="arrow_box" >
<div class="lay1">
<div>Manage Content<br> Message </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<div class="lay1">
<div>Manage Content<br> Message <br> Help </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</li>
</ul>
<br/><br/><br/><br/><br/>
Test
</body>
Please check your HTML :
Because you execute same function for both Pord or Pord2 but the Inner html is different for both li. so function showMenu() works different for both Pord or Pord2:
HTML:
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;"
href="javascript:void(0);">prod</a>
<div class="arrow_box">
<br />
<div class="lay1">
<div>
Manage Content<br>
Message
</div>
<br />
<br />
<div>
Manage Assignment<br>
User Inquiry</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;"
href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<br />
<div class="lay1">
<div>
Manage Content<br>
Message
<br>
Help
</div>
<br />
<br />
<div>
Manage Assignment<br>
User Inquiry</div>
</div>
</div>
</li>
</ul>
Try This
UPDATED
Put <br /> before arrow_box div for both li and some change into Javascript:
var div = obj.children[2];
Javascript -
function showMenu(obj){
var a=obj.children[0];
a.style.color="blue";
var div = obj.children[2];
obj.style.backgroundColor="yellow";
div.style.display="block";
}
function hideMenu(obj){
var a=obj.children[0];
a.style.color="red";
var div = obj.children[2];
div.style.display="none";
obj.style.backgroundColor="";
}
Updated Jsfiddle