I use a popup for Youtube videos. Accordingly, I use the "yotubevid" class.
My HTML code looks like this:
<a class="youtubevideo" href="https://youtu.be/">
<img class="youtubevideo-poster" src="example.com/image.png" width="100%" height="auto"></a>
This class and div trigger a popup in the background. And it works well. How can I add a custom play button without breaking this class structure?
I think this is what you exacty needed...!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.playBtn{
width: 2em;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
vertical-align: middle;
z-index:1;
}
a{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
</style>
<body>
<a class="youtubevideo" href="https://www.youtube.com/">
<img class="playBtn" src="https://www.pngitem.com/pimgs/b/255-2554901_recording-icon-png.png" alt="">
<img class="youtubevideo-poster" src="https://picsum.photos/200/300" width="100vw" height="auto">
</a>
</body>
</html>
Related
I want to get rid of all white spaces from my website in html , the more I move my text to the right the more the space whitespace it creates on the right side of the page. Like you see in the photos there are a lot of whitespaces I suspect it is the elements creating these spaces , can someone tell me how to get rid of it . if anyone can help me please do so.
.btn_earnmoney {
height: 100px;
width: 100px;
position: relative;
top: 350px;
left: 710px;
padding: 0;
border: none;
background: none;
}
.Balance_Text {
font-size: 150%;
position: relative;
top: -800px;
left: 10px;
background-repeat: no-repeat;
}
* {
margin: 0;
padding: 0;
background-color: #f1dd84;
background-repeat: no-repeat;
}
.Background_img {
/* non available image replaced with dummy image */
background-image: url("https://dummyimage.com/300x300/d936d9/000000&text=some+background+image");
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
background-color: #f1dd84;
}
<!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>BuzzMoney</title>
</head>
<body>
<button class="btn_earnmoney" onclick="button_pressed()">
<!-- non available image replaced with dummy image -->
<img class="Image_of_btn" src="https://dummyimage.com/50x50/a6ff00/000000&text=earn+money" alt="EARN MONEY" height="100px" width="100px" />
</button>
<button class="btn_withdraw" onclick="withdraw_button_pressed_()"> </button>
<div class="Background_img"></div>
<p class="Balance_Text" id="Balance">0 $</p>
<script type="text/javascript" src="earnmoney.js"></script>
<script type="text/javascript" src="disableRightClick.js"></script>
</body>
</html>
What I would do:
index.html
<!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>BuzzMoney</title>
</head>
<body>
<button class="btn_earnmoney" onclick="button_pressed()">
<!-- non available image replaced with dummy image -->
<img class="Image_of_btn" src="https://dummyimage.com/50x50/a6ff00/000000&text=earn+money" alt="EARN MONEY" height="100px" width="100px" />
</button>
<button class="btn_withdraw" onclick="withdraw_button_pressed_()"> </button>
<p class="Balance_Text" id="Balance">0 $</p>
<script type="text/javascript" src="earnmoney.js"></script>
<script type="text/javascript" src="disableRightClick.js"></script>
</body>
</html>
style.css
body {
background-image: url("yourUrlHere");
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
You can find those properties for the background in this W3 link
I wanted to know if there is anything related to media queries i'm not aware of that is making my web projects look different on the dev tools and on a mobile device.
To be clear, I made a webpage and started adding media queries to make it responsive. I used chrome dev-tools to choose the iphone se as target and started re arranging each element till it looked as I expected. something like this :
enter image description here
but when I open the webpage on the actual phone it looks something like this :
enter image description here
here is the css:
#media screen and (max-width: 330px ){ /*for iphone 5/se */
#burter{
top: 19vh;
left: 24vw;
font-size: 9vw;}
#logo{
width: 23vw;
top: 17vh;
left: 0vw;}
#navtabs{
top: 30vh;
left: 2vw;
flex-direction: row;
height: 14vw;
width: 88vw;}
.divisor{
width: 8%;}
.tab{
font-size: 4vw;}
#imgside{
display: none;}
#sponsors{
width: 88vw;
height: 15vw;
top: 40vh;
left: 2vw;
flex-direction: row;
}
.sponsimg{
width: 14%;}
#welcome{
left: 28vw;}
#welcome h2{
font-size: 13vw;}
#welcome p{
width: 67vw;}
.homecontainer{
width: 64vw;
left: 9vw;
height: 43vh;
top: 57vh;}
.homeheader{
font-size: 6vw;}
.hometext{
font-size: 3vw;
line-height: 1.5;}
#map{
width: 70vw;
left: 12vw;
top: 53vh;
height: 30vh;}
#contactus{
left: 26vw;
top: 82vh;}
#divmedia{
width: 80vw;
left: 7.7vw;
bottom: 3vh;}
.media{
font-size: 9vw;}
#menucontainer{
top: 48vh;
height: 75vh;
width: 121vw;
left: -14vw;
justify-content: space-evenly;
}
}
and the html but most of the tings are created via vanilla js:
<!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">
<script defer src="./main.js"></script>
<title>Burter Burguer Inc.</title>
<link rel = "icon" href =
"../images/burguerlogo/logo.png"
type = "image/x-icon">
<link rel="stylesheet" href="stylesheet.css">
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA89atXDJHDp5fVs2YF-DB1fQXVbn3GgZM&callback=initMap">
</script>
</head>
<body id="body">
<div id="header">
<img id="logo" src="../images/burguerlogo/logo.png">
<h1 id="burter">BURTER INC.</h1>
<div id="navtabs">
<button id="homebutton" class="tab">HOME</button>
<div class="divisor"></div>
<button id="menubutton" class="tab">MENU</button>
<div class="divisor"></div>
<button id="contactbutton" class="tab">CONTACT</button>
</div>
<div class="removable" id="welcome">
<h2>WELCOME</h2>
<p>To your new favourite food...</p>
</div>
<img id="imgside" src="../images/Clever Photo Mashups by Stephen McMennamy.jpeg">
<div id="sponsors">
<img class="sponsimg" src="../images/mc_cain-removebg-preview.png">
<img class="sponsimg" src="../images/cocacola-removebg-preview.png">
<img class="sponsimg" src="../images/corona-removebg-preview.png">
<img class="sponsimg" src="../images/heinz.png">
</div>
</div>
<div style="display: none;" id="map"></div>
</body>
</html>
I looked for answers but couldn't find anything that could help me so I would really apreciate your help in order to fix these because I'm trying to build a portfolio but non responsive webs don't look good at all. Thank you !
It might be because your positioning of the elements are based on viewport size, but the actual size of the elements aren't shrinking/expanding based on viewport. I personally wouldn't use vh units, but if you must, try shrinking the elements slightly as viewport dimensions get smaller.
My main.html displays the menu.htm and welcome.htm using frameset. Drop down menu buttons "Admin..." and "Scheduler..." suppose to show dropdown content on mouse hover. Since welcome.htm is on top of menu.htm therefore content of the dropdown button doesn't show up.
However, All menu button work as expected when open the menu.htm as standalone page(see attached pic)menu.htm But drop-down buttons content does not show up when open in main.html using frame tags.
main.html
<html>
<head>
<title>Main Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
<meta http-equiv="cache-control" content="max-age=0" />
</head>
<frameset rows = "25,*" >
<frame frameborder="0" marginheight="0" marginwidth="0" scrolling="no" id="menu_frame1"
name="menu_frame" src="menu.htm" />
<frame frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"
id="content_frame1" name="content_frame" src="welcome.htm" />
</frameset>
</html>
Here is menu.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Main Menu</title>
<style type="text/css">
body
{
background-color: #333;
border: 0px;
margin: 0px;
padding: 0px;
FONT-SIZE: 15px;
FONT-FAMILY: sans-serif;
}
.topnav
{
overflow: hidden;
background-color: green;
}
.topnav a
{
float: left;
color: #fec10d;
font-size: 15px;
text-align: center;
text-decoration: none;
font-weight: none;
padding-left: 10px;
padding-right: 10px;
}
.topnav a:hover
{
background-color: #ddd;
text-decoration: underline;
color: black;
}
.topnav a.active
{
margin-top: 5px;
}
.topnav-right
{
float: right;
}
.dropdown
{
float: left;
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 15px;
border: none;
outline: none;
color: #fec10d;
padding: 5px 7px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #fec10d;
color: white;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 90px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
float: none;
background-color: #582c83;
color: white;
padding: 5px 7px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #fec10d;
}
.dropdown:hover .dropdown-content
{
display: block;
}
</style>
<script type="text/javascript">
function open_in_content(url)
{
parent.document.getElementById("content_frame").src = url;
}
function open_in_new(url)
{
window.open(url);
}
</script>
</head>
<body>
<div class="topnav">
<a class="active" href="/mainmenu" target="_top">Home</a>
<a class="active" href="/acctlist" target="content_frame">Accounts</a>
<a class="active" href="/reports/main" target="content_frame">Customers</a>
<div class="dropdown">
<button class="dropbtn">Admin...<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Add Account
Files
Add Rule
Account Update
Ref Upload
Check stats
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Scheduler...<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
New Job
Remove Job
Add checkpoint
</div>
</div>
<a class="active" href="help/index.htm" target="content_frame">Help</a>
</div>
</body>
</html>
Here is welcome.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>
Main Menu Welcome Page
</TITLE>
</HEAD>
<BODY>
Use the links at the top of the menu to navigate.
</BODY>
</HTML>
first of all Why not use html5?
You should use iframe instead of frame
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
after, you add id to iframe and you add display option or you add "position:absolute;z-index" these iframes with css.
after, then was mouseover in iframe you change z-index option with javascript
I help you but first
Can you review jquery.load()
https://api.jquery.com/load/
I think it might be easier for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="divMenu"></div>
</body>
</html>
<script>
$(document).ready(function(){
$("#divMenu").load("./menu.html");//.txt or html or url
});
</script>
try this
Even if the scroll page, the menu will remain at the top.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body{background-color:#333}
*{margin:0;padding:0;border:0}
.menuBar{width:100%;height:50px;position:fixed;left:0;top:0;z-index:999;background-color:#111;}
.content{float: left;width:100%;margin-top:50px;height:100vh;}
</style>
</head>
<body>
<iframe class="menuBar" src="./menu.html" ></iframe>
<iframe class="content" src="./welcome.html" ></iframe>
</body>
</html>
try this
I made the "manubar "background transparent and when mouseover and manubar the height will automatically 300px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body{background-color:#333}
*{margin:0;padding:0;border:0}
.menuBar{width:100%;height:50px;position:fixed;left:0;top:0;z-index:999;background-color:transparent;}
.content{float: left;width:100%;margin-top:50px;height:100vh;}
</style>
</head>
<body>
<iframe class="menuBar" src=".menu.html" ></iframe>
<iframe class="content" src="./welcome.html" ></iframe>
</body>
</html>
<script>
var menuBar = document.querySelector(".menuBar")
menuBar.onmouseover = function(){
menuBar.style.height="300px"
}
menuBar.onmouseout = function(){
menuBar.style.height="50px"
}
</script>
sorry for this dumb question but i can't figure it out, can someone help me to make the picture float over the particle effect?
If a link can be added to this image it will be nicer.
Here is my code
<!doctype html>
<html>
<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">
<title>jQuery Particles.js Example Page</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 { position:absolute; top:30px; left:100px; color:#fff;}
.jquery-script-ads { position:absolute; top:150px; left:100px;}
canvas {
position: absolute;
}
.background {
background-image: url('1.jpg');
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body class="background">
<h1>jQuery Particles.js Example Page</h1>
<canvas class="canvas"></canvas>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="dist/jquery.particles.js"></script>
<script>
$(document).ready(function() {
$('.canvas').particles({
connectParticles: true,
color: '#ffffff',
size: 3,
maxParticles: 80,
speed: 1.8
});
});
</script>
<IMG class="displayed" src="image.png" height="400" width="400">
</body>
</html>
I find a way by adding :
IMG.displayed {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
I've used a javaScript function to "build" a widget, call it on an HTML page and make it responsive using CSS.
Now, I've to use that same widget on an mvc.net application and i can't make it work like i want it. In the image shown bellow "aluger","venda", "compra" and "permuta" all show up in the same line, and I want them to show up on different lines. I've used display:block and nothing happend.
Those options are loaded automatic.
Can some one please help me?
CSS of DIV:
#div_maior {
display:block;
width: 100%;
height: 100%;
background-color: #ffffcc;
clear: both;
min-height: 50px;
max-height: 200px;
}
#div_global {
clear:left;
display:block;
float:left;
padding: .5%;
border-color: transparent;
height: 100%;
width: 30%;
// overflow: auto;
}
HTML OF THE WIDGET:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<body id="body" onload="getFacetasAJAX()">
<label id="div_maior">
<label id="div_global" style="display: inline-block">
</label>
<label id="div_resultados" style="display: inline-block">
</label>
</label>
</body>
</html>