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.
Related
when you trying to copy some code from vs code (made with electron js) like this and paste it on HTML textarea or any text field of any software like this then it works like normal text copy but when you paste it on a div which is contentEditable="true" then you find like this . I think this is a default algorithm on chromium or other browsers.
Anyway my problem is when i doing same things with this i want this but i got this. you can clearly see that the innerHtml are totlly differnt need properly structured div but got lot of individual spans.
help me to copy and paste like vs code does please.
my code is below.
<!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>Document</title>
<style>
.sum{
font-family: serif;
font-size: 30px;
/* user-select: all; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* line-height: 1; */
}
/* .sum>:nth-child(1){
line-height: 0.8;
font-size: 2em;
}
.sum>:nth-child(2){
} */
/* .sum>:nth-child(3){
line-height: 0.8;
font-size: 2em;
} */
.sigma{
font-size: 3em;
font-weight: 100;
line-height: 0.8;
/* line */
}
/* .sum>span{
display: block;
} */
::selection{
/* background-color: rgba(116, 176, 255, 1); */
}
</style>
</head>
<body oncopy="">
<span id="km">a^2+b^2=0</span><hr>
<span id="tag" mom="km" style="color: red;" contenteditable="true"></span> <br> -->
<span class="dp">a<sup>2</sup>+b<sup>2</sup> = 0</span>
<span contenteditable="true">
<div class="sum">
<span>n</span>
<span class="sigma">Σ</span>
<span>r=0</span>
</div>
</span>
<div contenteditable="true">
fgg
<!-- <div style="background-color: aqua;" ><<span style="color: green; background-color: inherit;">45</span>
<span style="color: blue;">45</span>
</div> -->
</div>
<!-- <div contenteditable="true">
gfdgd
</div>
<textarea>
chgdshjfas
</textarea>
<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div> -->
<script>
const main = document.querySelector('#km');
const tag = document.querySelector('#tag');
tag.innerHTML = main.innerText.replaceAll(/\^(?<s>2)/g, `<sup>$<s></sup>`)
const source = document.querySelector('#tag');
source.addEventListener('copy', (event) => {
// const selection = document.getSelection();
// var txt = selection.toString().replaceAll('a', 'f')
// console.log(selection.getRangeAt(0).commonAncestorContainer)
// event.clipboardData.setData('text/plain', txt);
//selection.toString().toUpperCase()
// event.preventDefault();
});
</script>
</body>
</html>
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 been developing a largish single page application that will be running on a local lan - ie not open to the public. That has to support the Chrome browser and iPads.
I've got large sections working on Chrome, but I ran across a problem with an iPad with the following section (this full app is made of web components - I've tried to make a fairly minimal test case.
In the scenario - in Chrome (78) the two date input fields are positioned at the top of a "menu card" in the second quarter in - below that is 16 buttons in a 4 x 4 grid.
The problem is - the same page in Safari (on my Mac (v13.0.3) and on my iPad - running IOS 13.1.3) displays all the components of the grid one over the other. There is a small difference between the Mac, and the iPad. On the latter the dates fields appear to actually be taller than the rest, whereas on the Mac the are entirely hidden.
I've searched for differences between chrome and safari and I can not find any.
Have I got the syntax of the CSS wrong? and then Chrome accepts it and Safari doesn't?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Grid Issue</title>
<base href="/concepts/">
<link rel="shortcut icon" sizes="32x32" href="../images/pas-icon-32.png">
<style>
html {
background: #ffffff;
}
body {
margin: 0;
min-height: 100vh;
font-family: sans-serif;
line-height: 1.5;
letter-spacing: 0.1em;
background-color: #fafafa;
color: #333;
}
</style>
</head>
<body>
<style>
:root {
--pas-button-menu-height: 70px;
--pas-button-menu-width: 225px;
}
.menu-card {
grid-template-rows: auto repeat(auto-fit, minmax(var(--pas-menu-button-height), max-content));
}
.three {
grid-template-columns: repeat(4,var(--pas-menu-button-width));
grid-template-areas:
". selector . ."
"covstat covstatnotx surgstat treat"
"enqstats embassy notreat surgpay"
"surgnopre prebook pricebreak bookstats"
"bookfirst bookclinic bookappt bookdet";
}
.selectors {
display: flex;
flex-direction: column;
}
.three .selectors {
grid-area: selector;
}
#covstat_portrait {
grid-area: covstat;
}
#covstatnotx_portrait {
grid-area: covstatnotx;
}
#surgstat_portrait {
grid-area:surgstat;
}
#treat {
grid-area: treat;
}
#enqstats {
grid-area: enqstats;
}
#embassy {
grid-area: embassy;
}
#notreat {
grid-area: notreat;
}
#surgpay {
grid-area: surgpay
}
#surgnopre {
grid-area: surgnopre;
}
#prebook {
grid-area: prebook;
}
#pricebreak {
grid-area: pricebreak;
}
#bookstats {
grid-area: bookstats;
}
#bookfirst {
grid-area: bookfirst;
}
#bookclinic {
grid-area: bookclinic;
}
#bookappt {
grid-area: bookappt;
}
#bookdet {
grid-area: bookdet;
}
section.menu-container {
display: flex;
flex-direction: column;
align-items: center;
}
section.menu-container > .menu-card {
margin: 40px 0 20px 0;
border-radius: 10px;
padding: 20px;
box-shadow: 0px 0px 38px -2px rgba(0,0,0,0.5);
background-color: white;
display: grid;
grid-gap: 30px;
}
</style>
<section class="menu-container">
<div class="menu-card three">
<div class="selectors">
<input id="startdate" type="date" label="Start Date" .value="1/11/2019"></input>
<input id="enddate" type="date"label="End Date" .value="30/11/2019" ></input>
</div>
<button id="covstat_portrait" >Conversion Statistics</button>
<button id="covstatnotx_portrait">Conversion Statistics (inc No Tx)</button>
<button id="surgstat_portrait">Surgery Statistics</button>
<button id="treat" >Treatments By Surgeon/Clinic</button>
<button id="enqstats">Enquiry and New Patient Stats</button>
<button id="embassy">Special Embassy Patients</button>
<button id="notreat">No Treatment/Not Suitable By Clinic</button>
<button id="bookclinic">Bookings By Clinic</button>
<button id="bookstats">Bookings Summary</button>
<button id="surgnopre">Surgery Booked with no Pre Op Assess done</button>
<button id="prebook">Pre Op Booking Analysis</button>
<button id="bookfirst">Bookings By Date First Booked</button>
<button id="bookappt">Bookings By Appointment Date</button>
<button id="bookdet">Booking By Appointment Date (Detail)</button>
<button id="pricebreak">Price Break Analysis</button>
<button id="surgpay">Surgeon Payments</button>
</div>
</section>
</body>
</html>
I came across this solution by chance. It seems to work
In my html the <metadata name="viewport" ... I should add shrink-to-fit=no
So the whole thing becomes
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
I found the solution in this article https://bitsofco.de/ios-safari-and-shrink-to-fit/
In the following code, I want to display See Example next to the label but it always shows in new line. Why? Following is the demo - https://codepen.io/manuchadha/pen/PBKYBJ
The code is
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<title>Example</title>
<!--meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"-->
<link rel="stylesheet" media="screen" href="fiddle.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="css-grid-container"> <!-- 3 rows, 1 column-->
<div id="app-nav-component" class=" common-styles-div--white">NAV</div> <!-- 1st row of css-grid-containerr-->
<div id="form-div" class="body__div--background">
<form id="new-form" novalidate>
<!-- label and small in same line. select in a new line, thus enclosed select in a div-->
<div class="form-group">
<label for="language-selector" class="control-label required">Select Language </label>
<small id="help" class="form-text text-muted">See Example</small>
<div>
<select id="language-selector" class="selectpicker" multiple>
<option>Eng</option>
<option>French</option>
<option>German</option>
</select>
</div>
</div>
<button type="submit" id="submit-button" class="content-div__button--blue"> Submit! </button>
</form>
</div>
<div id="app-footer-component" class="common-styles-div--white">FOOTER</div> <!-- 3rd row of css-grid-containerr-->
<!-- grid child -->
</div>
</body>
CSS
body{
margin:0px;
}
.css-grid-container{
height:100vh; /*height of the container is same ahs height of the view port.*/
display: grid;
grid-gap:20px;
grid-template-columns: 1fr; /* 1 columns*/
grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}
.body__div--background {
background: linear-gradient(45deg,#33b1f8 37%,#6e90f6 100%); /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
color:#555555;
font-family: Helvetica;
line-height:1.5;
font-size: 11px;
letter-spacing: 0.25px;
}
div#app-nav-component{ /*1st row, all columns*/
grid-column:1/-1;
grid-row:1/2;
}
div#homepage-top-div{ /*2nd row, all columns*/
grid-column:1/-1;
grid-row:2/3;
}
div#app-footer-component{ /*3rd row, all columns*/
grid-column:1/-1;
grid-row:3/4;
}
small #help {
display:inline;
}
/*specify height of both to make the form take entire space.*/
form #form-div #new-question-form{
height:100%;
}
Found the issue. The selector wasn't correct. There shouldn't be any space between small and #. The selector should look like this:
small#help {
display: inline;
}
It is because form-text is set to display: block , hence starting from the next line.
.form-text {
display: inline-block;
margin-top: .25rem;
}
Either remove this style or change it to display: inline-block
body {
margin: 0px;
}
.css-grid-container {
height: 100vh;
/*height of the container is same ahs height of the view port.*/
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr;
/* 1 columns*/
grid-template-rows: auto 15fr 1fr;
/* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}
.body__div--background {
background: linear-gradient(45deg, #33b1f8 37%, #6e90f6 100%);
/*syntax linear-gradient(direction, color1 limit, color2 limit)*/
color: #555555;
font-family: Helvetica;
line-height: 1.5;
font-size: 11px;
letter-spacing: 0.25px;
}
div#app-nav-component {
/*1st row, all columns*/
grid-column: 1/-1;
grid-row: 1/2;
}
div#homepage-top-div {
/*2nd row, all columns*/
grid-column: 1/-1;
grid-row: 2/3;
}
div#app-footer-component {
/*3rd row, all columns*/
grid-column: 1/-1;
grid-row: 3/4;
}
small #help {
display: inline;
}
/*specify height of both to make the form take entire space.*/
form #form-div #new-question-form {
height: 100%;
}
.form-text {
display: inline-block !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<title>Example</title>
<!--meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"-->
<link rel="stylesheet" media="screen" href="fiddle.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="css-grid-container">
<!-- 3 rows, 1 column-->
<div id="app-nav-component" class=" common-styles-div--white">NAV</div>
<!-- 1st row of css-grid-containerr-->
<div id="form-div" class="body__div--background">
<form id="new-form" novalidate>
<!-- label and small in same line. select in a new line, thus enclosed select in a div-->
<div class="form-group">
<label for="language-selector" class="control-label required">Select Language </label>
<small id="help" class="form-text text-muted">See Example</small>
<div>
<select id="language-selector" class="selectpicker" multiple>
<option>Eng</option>
<option>French</option>
<option>German</option>
</select>
</div>
</div>
<button type="submit" id="submit-button" class="content-div__button--blue"> Submit! </button>
</form>
</div>
<div id="app-footer-component" class="common-styles-div--white">FOOTER</div>
<!-- 3rd row of css-grid-containerr-->
<!-- grid child -->
</div>
</body>
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;
}