how to connect some boxes element together with wavy line? - javascript

I have some boxes who sort 3 by 3.
I want to connect them together with wavy line.
I know it is possible to download SVG wavy line and use it between boxes, but is there any idea to do it with CSS or JavaScript and create that lines randomly (it's ok if all lines has same view) ?
This is what I mean :

this would be one solution as taken from https://erikmartinjordan.com/style-hr-line-wavy
<!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>
</head>
<body>
<hr>
</body>
<style>
hr{
border: none;
}
hr:after{
content: '∿∿∿∿∿∿∿∿';
/* Ratio -> font-size/letter-spacing = 6.25 */
letter-spacing: -9.6px;
font-size: 60px;
}
</style>
</html>

Related

How to convert unit into rem dynamically in css [duplicate]

This question already has an answer here:
How to use a unitless CSS variables and later add the needed unit?
(1 answer)
Closed 5 months ago.
Hi i'm facing the problem of converting unit into rem dynamically in css
i will set root font-size as 23px
my current font-size is 16px
my expected result should be 16 / 23 => 0.695rem
Question: i want to do this calculation in css 16 / 23 => 0.695rem which is not working
here is how i tried css:
#im_p{
font-size: calc(var(--im-p-font / 16)) rem;
}
here is what i have tried:
const root = document.documentElement;
root.style.setProperty('--im-p-font',23);
#im_p{
font-size: calc(var(--im-p-font / 16)) rem;
}
<!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>
</head>
<body>
<p id="im_p">I'm Paragraph<p>
</body>
</html>
Note: above code css is not working
The problem is the format for a CSS calc.
Be careful of how you match brackets (the var needs matching brackets) and put the rem in as a multiplier within the calc:
font-size: calc((var(--im-p-font) / 16) * 1rem);
const root = document.documentElement;
root.style.setProperty('--im-p-font', 23);
#im_p {
font-size: calc((var(--im-p-font) / 16) * 1rem);
}
<!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>
</head>
<body>
<p id="im_p">I'm Paragraph
<p>
</body>
</html>

Having problem with my websites nav bar redirect button

Video:
https://youtu.be/aOtayR8LOuc
Essential when I click a button on my nav it will go there but since I have the same nav bar on each page it will try to go to pages/about even if im already there (ex. pages/about/pages/about)
HTML:
<!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>FFA Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="">Home</a>
News
Animals
About Me
Credits
</div>
</body>
</html>
CSS:
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
Replace your HTML code like below:
<!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>FFA Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="">Home</a>
News
Animals
About Me
Credits
</div>
</body>
</html>
this is not working as you expected because you provided false paths since the pages files are in a different folder not the parent so here is what you need to do
for the index.html:
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="/src/index.html">Home</a>
News
Animals
About Me
Credits
</div>
</body>
for any other page inside the pages folder for example News.html:
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="../index.html">Home</a>
News
Animals
About Me
Credits
</div>
<h1>News</h1>
</body>
Well there seems no issues with your index.html file except missing the .html extension after each page name, and you just need to fix the redirection in the pages/News , pages/Animals , pages/About, pages/Credits html files, as when you click on any one of them you are no longer in the root of your project instead you are inside pages/ so the redirection changes.
so your other pages(About/Credits/Animals/News) should look like this.
make whatever page you wish to make active.
<!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>FFA Website</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<script src="../app.js"></script>
<div class="topnav">
<a class="active" href="">Home</a>
News
Animals
About Me
Credits
</div>
</body>
</html>
Can you try adding "../" before the path? So News ...
Maybe this works?

Cannot display the top property

Hey everyone i am trying to console.log top property of an element in javascript but i only thing i see in the console is a blank line.
Also when i try to console.dir element i the top property is an empty string even though i set the top property to 100px.
Question is how do i display the top propert of an element using .style.top
CSS
img {
width: 100px;
position: absolute;
top: 100px;
left: 10px;
}
HTML
<!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>Coin Game Starter</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<img id="player" src="https://media.tenor.com/images/0791eb3858075aca85eed5ecfe08c778/tenor.gif" alt="">
<img id="coin" src="https://myrealdomain.com/images/gold-coin-gif-1.gif" alt="">
<script src="app.js"></script>
</body>
</html>
JS
let player = document.querySelector("#player").style.top
console.log(player)
To get the CSS properties to Javascript.
var element = document.getElementById('player');
var styles = window.getComputedStyle(element);
var top = styles.getPropertyValue('top');
console.log(top); // 100px

create a button element

I'm creating a button element with these features but i seem stuck and i dont know why. Here is the question
Create a BUTTON element with ID of filter-query, and give it a CSS class of mdc-icon-button and material-icons. Set its text to filter_list.
This is what i did
<!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>Mini App</title>
<button id = "filter-query" class ="mdc-icon-button material-icons">
filter_list
</button>
<style>
body{
background-color: white;
}
but its not running. could anyone please help me out
Clearly, the shortest answer to the question as posed is:
<button id='filter-query' class='mdc-icon-button material-icons'>filter_list</button>
Naturally, another valid answer is javascript:
var btn = document.createElement('button');
btn.id = 'filter-query';
btn.classList.add('mdc-icon-button');
btn.classList.add('material-icons');
btn.textContent = "filter_list";
#Boycott Dev and others, you guys are correct but it seems you guys are forgetting the other part of the question which state : "and give it a CSS class of mdc-icon-button and material-icons"
i think you should add a css style
The code you shared was incomplete and out of order. I completed and ordered it, but I dont know if this is exactly what youre trying to do. Please add more detail.
<!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>Mini App</title>
<style>
body{
background-color: white;
}
</style>
</head>
<body>
</body>
<button id = "filter-query" class ="mdc-icon-button material-icons">
filter_list
</button>
</html>

How do i make a simple effect dropdown go up?

Does anyone have a min to help me with this code?
http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/
Basically, I want to have the dropdown dropup instead . . . I have tried setting
bottom: 100%;
and some other stuff, but i can't figure it out. Any thing is appreciated.
Thanks!
add or edit this css class:
.cd-dropdown ul {
top: auto;
bottom: 100%;
width: 100%;
}
if you add it make sure it's after the css file of the exemple
example using the file index.html on the provided files :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Effects for Drop-Down Lists</title>
<meta name="description" content="Simple Effects for Drop-Down Lists" />
<meta name="keywords" content="drop-down, select, jquery, plugin, fallback, transition, transform, 3d, css3" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script src="js/modernizr.custom.63321.js"></script>
</head>
<body>
<style>
.cd-dropdown ul {
top: auto;
bottom: 100%;
width: 100%;
}
</style>
you can add this snippet after the body of eache example files : index2.htnml...
or at the end of the srtyle*X*.css files
don' t forget to clear the cache of the browser!
Maybe you need to make the bottom: 0px; not 100%!

Categories

Resources