I have a problem with my css menu.. It doesn't work....
I want to use a hover over a button, to switch a display attribute from another element.
I use CSS3 Grid-System. I don't know if that is the problem?
First things first, here is my code:
First a css part (only the affected):
.navigation{
grid-column: 1;
grid-row: 2 / 3;
justify-items: end;
justify-self: end;
width: auto;
margin: 0;
padding: 0;
background-color: rgba(0,0,0,0.7);
display: grid;
grid-template-columns: 1;
grid-template-rows: 50px 50px;
}
.navigationButton-icon{
display: none;
background-color: white;
border: 2px solid;
border-color: deepskyblue;
border-radius: 10px;
cursor: pointer;
margin-top: 5px;
padding-left: 50px;
padding-right: 50px;
}
.navigation #butInsert{
grid-column: 1;
grid-row: 1 / 2;
justify-self: start;
width: 100%;
}
.navigation #butCreate{
grid-column: 1;
grid-row: 2 / 3;
justify-self: start;
width: 100%;
}
#butMenu:hover .navigationButton-icon{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Surveys</title>
<link rel="stylesheet" type="text/css" href="styles/inline.css">
<link rel="stylesheet" type="text/css" href="styles/fontello.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400" rel="stylesheet">
</head>
<body>
<container class="container">
<header class="header">
<h1 class="headerTitle">Surveys</h1>
<div class="headerButton">
<button id="butRefresh" class="headerButton-icon"><i class="icon-arrows-cw"></i></button>
<button id="butMenu" class="headerButton-icon"><i class="icon-th-list"></i></button>
</div>
</header>
<main class="main">
<?php include('snippets/survey.php'); ?>
</main>
<navigation class="navigation">
<button id="butInsert" class="navigationButton-icon">Insert</button>
<button id="butCreate" class="navigationButton-icon">Create</button>
</navigation>
<footer class="footer">
<a class="impressum">IMPRESSUM</a>
</footer>
<div class="loader" hidden>
</div>
</container>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script src="scripts/app.js" async></script>
</body>
</html>
I hope you can help me. I tried it for like 3 hours now..
I can manipulate attributes from the hover element but it doesn't work for other elements of the dom.
Greetings
That's not how CSS works. #butMenu:hover .navigationButton-icon means #butMenu has to be an ancestor of .navigationButton-icon element.
You need JavaScript.
// jQuery
$('#butMenu').hover(
function () {
$('.navigation').addClass('butMenu-hover');
}, function () {
$('.navigation').removeClass('butMenu-hover');
}
);
// Vanilla JS
(function () {
var butMenu = document.getElementById('butMenu');
var navigation = document.getElementsByClassName('navigation')[0];
butMenu.onmouseenter = function () {
navigation.classList.add('butMenu-hover');
};
butMenu.onmouseleave = function () {
navigation.classList.remove('butMenu-hover');
};
})();
And in your CSS:
.navigation.butMenu-hover .navigationButton-icon {
display: block;
}
Related
I am trying to create a search function for a FAQ that I am assembling.
I am very new to HTML, CSS, JS, etc., so please, I need help here! :-)
I created an HTML Code, grabbing from here and there from the Internet, until I managed to do something decent visually.
I don't know how to make searchable out my code, or I am not sure what to change, in order to use a JS file to be able to search and show me the Question and the Answer, of what's being searched on.
Here is my HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ PAGE</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./accordion.css">
<link rel="stylesheet" href="./files/bootstrap.min.css">
</head>
<body>
<main>
<h1 class="faq-heading">FAQ'S</h1>
<div id="accordion_search_bar_container">
<input type="search" id="accordion_search_bar" placeholder="Search"/>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="faq-one">
<!-- faq question -->
<h1 class="faq-page">What is an FAQ Page?</h1>
<!-- faq answer -->
<div class="faq-body">
<p>This is a FAQ test question</p>
</div>
</div>
<hr class="hr-line">
<div class="faq-two">
<!-- faq question -->
<h1 class="faq-page">Why do you need an FAQ page?</h1>
<!-- faq answer -->
<div class="faq-body">
<p>You need a FAQ to help your users</p>
</div>
</div>
<hr class="hr-line">
<div class="faq-three">
<!-- faq question -->
<h1 class="faq-page">Does it improves the user experience of a website?</h1>
<!-- faq answer -->
<div class="faq-body">
<p>It helps your users on a 24/7 basis</p>
</div>
</div>
</div>
</main>
<script src="./main.js"></script>
<script src="./script.js"></script>
<script src="./files/jquery.min.js"></script>
<script src="./files/bootstrap.min.js"></script>
</body>
</html>
This is my CSS
body{
font-family: 'Work Sans', sans-serif;
}
.faq-heading{
border-bottom: #777;
padding: 20px 60px;
}
.faq-container{
display: flex;
justify-content: center;
flex-direction: column;
}
.hr-line{
width: 60%;
margin: auto;
}
/* Style the buttons that are used to open and close the faq-page body */
.faq-page {
/* background-color: #eee; */
color: #444;
font-size: 20px;
cursor: pointer;
padding: 10px 20px;
width: 60%;
border: none;
outline: none;
transition: 0.4s;
margin: auto;
}
.faq-body{
margin: auto;
/* text-align: center; */
width: 57%;
padding: auto;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.faq-page:hover {
background-color: #F9F9F9;
}
/* Style the faq-page panel. Note: hidden by default */
.faq-body {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.faq-page:after {
content: '\02795';
/* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796";
/* Unicode character for "minus" sign (-) */
}
And this is a JS I found for search, but I cannot make it to work for my HTML code :'(
(function(){
var searchTerm, panelContainerId;
// Create a new contains that is case insensitive
$.expr[':'].containsCaseInsensitive = function (n, i, m) {
return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
$('#accordion_search_bar').on('change keyup paste click', function () {
searchTerm = $(this).val();
$('#accordion > .panel').each(function () {
panelContainerId = '#' + $(this).attr('id');
$(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + '))').hide();
$(panelContainerId + ':containsCaseInsensitive(' + searchTerm + ')').show();
});
});
}());
Any help will be greatly appreciated.
Thanks a lot!
I have an issue. I have 4 divs within a div container and i am using the grid system. For some reason the third div in the grid does not respond how it should. When i give it a margin bottom, instead of pushing the div from the bottom it will just push the fourth div beneath it down even further. Any ideas on what I'm missing here?
<!DOCTYPE html>
<html>
<head>
<link rel = "shortcut icon" href = "images/icon.png">
<title>News: U.S and World News Headlines: VPR</title>
<link rel = "stylesheet" type = "text/css" href = "css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Actor&family=Lato&family=Secular+One&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Actor&family=Lato&family=Raleway:wght#200&family=Secular+One&display=swap" rel="stylesheet">
</head>
<body>
<div class = "section1-container">
<div class = "item main-story">
<img class = "vinland-s2" src = "images/vinland-s2.jpg">
<h4>Anime</h4>
<h3>Vinland Saga Season 2 Announced</h3>
</div>
<div class = "item sub-story">
<img class = "witcher-s2" src = "images/witcher-s2.jpeg">
<h4>Movies/TV</h4>
<h3>First Look At The Witcher Season 2<br>See The Cast Return As Their Beloved Characters<br>
And Which Date They Will Be Appearing Again.
</h3>
</div>
<div class = "item third-story">
<h4>Japan</h4>
<h3>Japan Animation Industry Sales Fall 1.8% In 2020,<br> First Drop In Decade. How Does This Affect
The Future Of Anime?<br> A Lot Of Big Named Studios Share Their Thoughts And Plans.</h3>
</div>
<div class = "item fourth-story">
<img class = "follow" src = "images/follow.jpg">
<h3>Got anything you want to share?</h3>
<p>At VRP, we welcome your tips and stories, get started today by taking out your phone<br>
and visiting our offical journalist site to apply for a course!
</p>
</div>
</div>
</body>
</html>
*
{
margin:0;
padding:0;
box-sizing: border-box;
}
body
{
background-color: rgb(237, 236, 232);
}
.section1-container
{
width: 70%;
display: grid;
margin:300px 300px;
grid-template-columns: 1fr 1fr;
padding:2%;
overflow:auto;
background-color: white;
border:1px solid lightgrey;
padding-top: 5%
}
.sub-story
{
margin-left: 10%;
}
.third-story
{
grid-column-start: 2;
grid-column-end: 3;
margin-bottom:100px
}
.fourth-story
{
grid-column-start: 1;
grid-column-end: 3;
background-color: lightgrey;
text-align: center;
}
.vinland-s2
{
width: 586px;
height: 346px;
padding-bottom: 5%
}
.witcher-s2
{
width: 310px
}
Instead of using margin, you could use the gap property to separate the rows/columns.
Is this what you're looking for ? Here's the snippet.
*
{
margin:0;
padding:0;
box-sizing: border-box;
}
body
{
background-color: rgb(237, 236, 232);
}
.section1-container
{
width: 70%;
display: grid;
margin:300px 300px;
grid-template-columns: 1fr 1fr;
padding:2%;
overflow:auto;
background-color: white;
border:1px solid lightgrey;
padding-top: 5%;
grid-gap: 50px;
}
.sub-story
{
/* margin-left: 10%; */
}
.third-story
{
grid-column-start: 2;
grid-column-end: 3;
/* margin-bottom:100px */
}
.fourth-story
{
grid-column-start: 1;
grid-column-end: 3;
background-color: lightgrey;
text-align: center;
}
.vinland-s2,.witcher-s2
{
max-width: 100%;
height: auto;
margin-bottom: 50px;
}
<div class="section1-container">
<div class="item main-story">
<img class="vinland-s2" src="https://images.unsplash.com/photo-1580477667995-2b94f01c9516?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" />
<h4>Anime</h4>
<h3>Vinland Saga Season 2 Announced</h3>
</div>
<div class="item sub-story">
<img class="witcher-s2" src="https://images.unsplash.com/photo-1580477667995-2b94f01c9516?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" />
<h4>Movies/TV</h4>
<h3>
First Look At The Witcher Season 2<br />See The Cast Return As Their
Beloved Characters<br />
And Which Date They Will Be Appearing Again.
</h3>
</div>
<div class="item third-story">
<h4>Japan</h4>
<h3>
Japan Animation Industry Sales Fall 1.8% In 2020,<br />
First Drop In Decade. How Does This Affect The Future Of Anime?<br />
A Lot Of Big Named Studios Share Their Thoughts And Plans.
</h3>
</div>
<div class="item fourth-story">
<img class="follow" src="images/follow.jpg" />
<h3>Got anything you want to share?</h3>
<p>
At VRP, we welcome your tips and stories, get started today by taking
out your phone<br />
and visiting our offical journalist site to apply for a course!
</p>
</div>
</div>
I am trying to achieve the card slide in effect, but when I click on the button the topbar I have changes height and is buggy.
If, however I don't use jQuery UI everything's fine but the animation of sliding is not available.
$("#abc").click(function() {
$(".route-card").show("slide");
});
$("#def").click(function() {
$(".list-card").show("slide");
});
$("#ghi").click(function() {
$(".details-card").show("slide");
});
/* === GLOBAL STYLES === */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-family: "Inter", sans-serif;
background-color: #ccc;
padding: 18px;
display: grid;
grid-template-columns: 0.8fr 1.5fr 2fr 2fr;
grid-template-rows: 0.12fr 1fr 1fr;
grid-gap: 18px;
grid-template-areas:
"sidenav route-card topbar topbar"
"sidenav route-card list-card details-card"
"sidenav route-card list-card details-card";
}
body > div {
background-color: #fff;
}
/* === (SIDENAV) COMPONENT STYLES === */
.sidenav {
grid-area: sidenav;
}
/* === (ROUTE-CARD) COMPONENT STYLES === */
.route-card {
grid-area: route-card;
display: none;
}
/* === (LIST-CARD) COMPONENT STYLES === */
.list-card {
grid-area: list-card;
display: none;
}
/* === (DETAILS-CARD) COMPONENT STYLES === */
.details-card {
grid-area: details-card;
display: none;
}
/* === (TOPBAR) COMPONENT STYLES === */
.topbar {
grid-area: topbar;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Web Page Metadata -->
<meta charset="utf-8">
<!-- Web Page Title -->
<title>English Zone | Dashboard</title>
<!-- Web Page Fonts & Stylesheets -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700&display=swap">
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/main.css">
<!-- Web Page Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="sidenav">
<button id="abc">CLICK ME</button>
</div>
<div class="route-card">
<button id="def">CLICK ME</button>
</div>
<div class="list-card">
<button id="ghi">CLICK ME</button>
</div>
<div class="details-card">
</div>
<div class="topbar">
<button>asd</button>
</div>
</body>
</html>
How do you think I could solve this? I would be grateful if you give me a hand in this issue.
I've built a basic image slider using HTML, CSS, and JS (Jquery). There are 5 images in total and users can switch between them using arrows, everything works fine so far but I want the right arrow to disappear if it reaches the last image and that's where I get stuck. The problem is that the right arrow disappears right after I reach the second image. Any idea on how to fix that? Thanks in advance!
IMG of the slider
IMG of my problem (the right arrow disappears immediately when I reach the second image, that's supposed to happen only with the last image.)
Here is the code
$(document).ready(function() {
$('.next').on('click',function(event) {
var images = $('.slider-inner').find('img');
var currentImg = $('.active')
var nextImg = currentImg.next();
var lastImg = images.last();
var rightArrow = $('.next');
images.not(':first').hide();
if (nextImg.length) {
currentImg.removeClass('active');
nextImg.addClass('active');
nextImg.fadeIn();
}
if (lastImg.length) {
rightArrow.hide();
}
event.preventDefault();
});
$('.prev').on('click',function() {
var currentImg = $('.active')
var prevImg = currentImg.prev();
if (prevImg.length) {
currentImg.removeClass('active');
prevImg.addClass('active');
}
});
});
*,*::before,*::after {box-sizing: border-box;}
body {
background-image: url("../images/bg.png");
background-size: 100%;
font-size: 100%;
font-family: "Roboto",sans-serif;
color: white;
}
.container {
max-width: 1250px;
margin: 0 auto;
overflow: auto;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #fff;
text-decoration: none;
}
.slider-inner {
margin: 0 auto;
max-width: 1200px;
max-height: 675px;
position: relative;
overflow: hidden;
float: left;
padding: 0.1875em;
border: black solid 7px;
}
.slider-inner img {
display: none;
}
.slider-inner img.active {
display: inline-block;
}
.prev, .next {
margin-top: 18.75em;
float: left;
cursor: pointer;
}
.prev {
z-index: 100;
margin-right: -2.8125em;
position: relative;
}
.next {
margin-left: -2.8125em;
z-index: 100;
position: relative;
}
.nadpis {
font-weight: 400;
text-align: center;
}
.podnadpis {
text-align: center;
font-weight: 100;
font-size: 3em;
margin-top: 2em;
}
.img-slider {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vlastna responzivna stranka</title>
<link rel="stylesheet" href="css/styles2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="nadpis">Take zaujimave veci, ktore sa daju spravit s JS a JQuery</h1>
<h2 class="podnadpis">Image Slider</h2>
<div class="slider-outer">
<img src="img-slider/arrow-left.png" alt="left arrow" class="prev">
<div class="slider-inner">
<img src="img-slider/john-jpg.jpg" class="active" alt="A game character witha quote saying Dont you kids watch horror movies?, you never, ever, split up.">
<img src="img-slider/butterflies-jpg.jpg" alt="A game character looking at an enthogy">
<img src="img-slider/andrew-jpg.jpg" alt="Three characters, one from the future, one from the present and one from the past">
<img src="img-slider/taylor-jpg.jpg" alt="Three characters, one from the future, one from the present and one from the past"">
<img src="img-slider/vince-.jpg.jpg" alt="A bar with a guy sitting there">
<img src="img-slider/conrad.jpg" alt="Conrad">
</div>
<img src="img-slider/arrow-right.png" alt="next arrow" class="next">
</div>
</div>
<script src="javascript/jquery.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
if (lastImg.hasClass("active")) {
rightArrow.hide();
}
I am trying to create a wholy grail template using flexbox and css. I'm new to this...
I have tried everything but i can not get the code to display in graphics (if that make sense). Please advise.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="flex-header">
HEADER
</header>
<main class="flex-main">
<nav class="flex-nav">
SIDENAV
</nav>
<article class="flex-article">
MAIN CONTENT
</article>
<aside class="flex-aside">
SIDEBAR
</aside>
</main>
<footer class="flex-footer">
FOOTER
</footer>
</body>
</html>
css file:
* {
margin: 2px;
}
body {
font-size: 24px;
color: white;`
height: 100vh;
text-align: center;
}
.flex-header {
background-color: #5070B5;
padding-top: 3rem;
padding-bottom: 3rem;
}
.flex-main {
}
.flex-nav {
background-color: #B95F21;
padding-top: 3rem;
}
.flex-article {
background-color: #81A43C;
padding-top: 3rem;
}
.flex-aside {
background-color: #B95F21;
padding-top: 3rem;
}
.flex-footer {
background-color: #5070B5;
padding-top: 3rem;
scroll-padding-bottom: 3rem;
}
It shows the text only, no graphics.
Please check line 6 of your CSS color: white;`.
There is an invalid character ` at the end of the line. Such errors may cause browser to stop processing any further CSS.