For some reason the video and sidebar div keep pushing each other outside of the wrapper div. In addition, it seem like the main wrapper div is not being defined for some reason. I been messing around for hours now and it seem like nothing work . Can some give me some pointer.
https://jsfiddle.net/4z5wwq2j/
Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#wrapper{
width: 100%;
height: 500px;
white-space: nowrap;
display: inline-block;
}
#sidebar{
height: 420px;
width: 10%;
background-color: red;
}
#video{
border-radius: 25px;
background: #C5EFF7;
border: 5px solid #19B5FE;
padding: 20px;
width: 65%;
height: 420px;
display: inline-block;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar"></div>
<div id="video"></div>
</div>
</body>
</html>
You have to set display: inline-block; for the #sidebar div as well:
https://jsfiddle.net/4z5wwq2j/1/
#sidebar{
height: 420px;
width: 10%;
background-color: red;
display:inline-block;
}
Set the vertical-align as well for both of them as you need.
Related
I am trying to make a project and I want button to create a div when it is clicked.But on my second click; system creates the div on top of another.
#Car-adder-div{
width: 250px;
height: 300px;
border: 2px solid #d3d3d3;
position: absolute;
left: 10px;
}
#Car-name-text{
font-family: sans-serif;
font-size: 18px;
position: absolute;
left: 98px;
}
#Car-name{
position: absolute;
top: 40px;
left: 40px;
border-radius: 15px;
border: 2px solid lightgray;
}
#Car-price-text{
font-family: sans-serif;
font-size: 18px;
position: absolute;
left: 98px;
top: 90px;
}
#Car-price{
position: absolute;
top: 130px;
left: 40px;
border-radius: 15px;
border: 2px solid lightgray;
}
#Submit-button{
background-color: black;
color: white;
border-radius: 15px;
width: 100px;
font-family: sans-serif;
position: absolute;
top: 180px;
left: 70px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='Auto_gallery_page.css'>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<div id="Car-adder-div">
<!--Name input-->
<h1 id="Car-name-text">Name</h1>
<input id="Car-name" type="text">
<!--Car price input-->
<h1 id="Car-price-text">Price</h1>
<input id="Car-price" type="text">
<!--Submit button-->
<input id="Submit-button" type="button" onclick="Addcar();" value="Add a car">
</div>
<script>
function Addcar(){
var car_name=$("#Car-name").val();
var car_price=$("#Car-price").val();
var car_div=document.createElement("div");
car_div.style.position="absolute";
car_div.style.width="320px";
car_div.style.height="80px";
car_div.style.left="300px";
car_div.style.top="20px";
car_div.style.top+=car_div.style.top;
car_div.style.border="2px solid #d3d3d3";
document.body.appendChild(car_div);
}
</script>
</body>
</html>
You are absolute positioning the new divs with the exact same absolute co-ordinates for each of them. Use relative positioning instead for the created divs, and instead of setting the width/height via the style attribute, set a class on the new divs and apply styles via a stylesheet.
I fetched an html file using fetch api and took the div components and embedded them into another html file. The css is not being applied after the process is complete. Nor is the javascript file being called. I checked the file paths and they are correct. Does the css and javascript tags not transfer over when they are fetched using the fetch api?
***Main script.js***
let testSide = document.querySelector('#test-sidebar')
let htmlUrl = './TextBox/index.html'
fetch(htmlUrl)
.then((result)=>{
return result.text()
}).then((html)=>{
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html')
var doDo = doc.querySelector('.parent-container')
testSide.appendChild(doDo)
}).catch((error)=>{
console.log(error)
})
***Main HTML File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>To Do</title>
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="test-sidebar">
</div>
<script src="script.js"></script>
</body>
</html>
***Second Html File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notbox</title>
<link rel="stylesheet" href="style.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="parent-container">
<!---Select items------>
<div class="container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<ul class="list" id="list">
</ul>
</div>
<button type="button" class="create-text-box">Create Text Box</button>
</div>
</div>
<!--Display notebox-->
<div class="notebox-container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<textarea class="list" id="noteList" ></textarea>
</div>
<button type="button" class="copy-text">Copy Text</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
***CSS of second html file***
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
width: 100%;
height: 100vh;
font-family: 'Titillium Web', sans-serif;
}
/*------------------------container-----------------------*/
.parent-container{
position: relative;
width: 100%;
height: 540px;
max-height: 5400px;
}
/*------------------------container-----------------------*/
.container{
position: absolute;
top: 0;
left: 10px;
width: 400px;
margin: 0 auto;
box-shadow: 5px 5px 8px rgb(171, 178, 185);
border-radius: 15px 15px 0 0;
}
/*--------------------------header-----------------------*/
.header{
position: relative;
width: 100%;
height: 150px;
background-color: #2E86C1;
border-radius: 15px 15px 0 0;
}
/*---------------------------content------------------------*/
.content{
position: relative;
width: 100%;
height: 390px;
max-height: 390px;
background-color: #EAEDED;
overflow: hidden;
}
.content::-webkit-scrollbar{
display: none;
}
.content ul{
padding: 0;
margin: 0;
}
.items-content{
position: relative;
width: 100%;
height: calc(100% - 35px);
max-height: calc(100% - 35px);
overflow: auto;
border-bottom: 1px solid #D6DBDF;
}
.item{
position: relative;
border-bottom: 1px solid #EBEDEF;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 45px;
min-height: 45px;
background-color: white;
display: flex;
align-items: center;
cursor: pointer
}
.item:hover{
background-color: #EAECEE
}
.item p{
position: absolute;
padding-left: 35px;
height: 45px;
line-height: 45px;
width: 100%;
white-space: nowrap;
}
/*--------------------------Create Text Box--------------------------*/
.create-text-box{
position: absolute;
border: none;
outline: none;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: #21618C;
color: white;
cursor: pointer
}
/*For note box*/
/*------------------------notbox container-----------------------*/
.notebox-container{
position: absolute;
top: 0;
right: 10px;
width: 400px;
margin: 0 auto;
box-shadow: 5px 5px 8px rgb(171, 178, 185);
border-radius: 15px 15px 0 0;
}
/*--------------------------header-----------------------*/
.notebox-container .header{
position: relative;
width: 100%;
height: 150px;
background-color: #2E86C1;
border-radius: 15px 15px 0 0;
}
/*---------------------------content------------------------*/
.notebox-container .content{
position: relative;
width: 100%;
height: 390px;
max-height: 390px;
background-color: #EAEDED;
overflow: hidden;
}
#noteList
{
resize: none;
font-size: 15px;
font: serif;
color: #28B463;
text-align: center;
/*font-weight: bold;*/
border: none;
height: calc(100% - 35px);
width: 100%;
}
.notebox-container .content::-webkit-scrollbar{
display: none;
}
.notebox-container .content ul{
padding: 0;
margin: 0;
}
.notebox-container .items-content{
position: relative;
width: 100%;
height: calc(100% - 35px);
max-height: calc(100% - 35px);
overflow: auto;
border-bottom: 1px solid white;
}
.notebox-container .item{
position: relative;
border-bottom: 1px solid white;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 45px;
min-height: 45px;
background-color: white;
display: flex;
align-items: center;
}
.notebox-container .item p{
position: absolute;
padding-left: 35px;
height: 45px;
line-height: 45px;
width: 100%;
white-space: nowrap;
text-align: center;
}
/*--------------------------Create Text Box--------------------------*/
.notebox-container .copy-text{
position: absolute;
border: none;
outline: none;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: #21618C;
color: white;
cursor: pointer
}
.notebox-container #remove{
color: #28B463;
}
The issue I believe is due to the use of href
href linking is the method for including an external style sheet on your web pages. It is intended to link your page with your style sheet. Whereas importing allows you to import one style sheet into another.
Use:
<style>
#import url(YOUR/FILE/PATH)
</style>
Its good practice to place css files in a subfolder located within the main folder your html is stored. This subfolder is labelled static
e.g. main folder
main folder
index.html
static
style.css
<style>
#import url("static/style.css")
</style>
Try replacing your fetch code with this:
fetch(htmlUrl)
.then((result)=>{
return result.text()
})
.then((html)=>{
var doc = document.createRange().createContextualFragment(template);
testSide.appendChild(doc);
}).catch((error)=>{
console.log(error)
})
createContextualFragment renders the Second Html File and load all its scripts
Load .css from Main Html file will work fine.
var doDo = doc.querySelector('.parent-container') here you load only parent-container div element. No css found on here. so if you want to load css from Second Html file then you should write/load css and javascript inner side of parent-container div. ex:
<div class="parent-container">
<link rel="stylesheet" href='style.css'> <!---change here[2]------>
--------
-------
If you try this on local machine you may face this error
Fetch API cannot load file:///C:/....*.html. URL scheme "file" is not supported.
Try in on Localhost or on an online server. you may not found this problem.
Main HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="test-sidebar">
</div>
<script>
let testSide = document.querySelector('#test-sidebar');
let htmlUrl = 'index.html';
fetch(htmlUrl)
.then((result) => {
return result.text()
}).then((html) => {
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html')
var doDo = doc.querySelector('.parent-container')
console.log('doc', doDo)
testSide.appendChild(doDo)
}).catch((error) => {
console.log(error)
})
</script>
<link rel="stylesheet" href='style.css'> <!---change here[1]------>
</body>
</html>
Second Html File
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notbox</title>
<link rel="stylesheet" href="style.css"> <!-- change here[2] -->
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="parent-container">
<link rel="stylesheet" href="style.css"> <!---change here[2]------>
<!---Select items------>
<div class="container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<ul class="list" id="list">
</ul>
</div>
<button type="button" class="create-text-box">Create Text Box</button>
</div>
</div>
<!--Display notebox-->
<div class="notebox-container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<textarea class="list" id="noteList" ></textarea>
</div>
<button type="button" class="copy-text">Copy Text</button>
</div>
</div>
</div>
</body>
</html>
Output:
I have an issue that should be fixed through the CSS/Query only - HTML change is not possible because HTML is implemented on thousands of the pages on the website.
screenshot (1)
It works fine if the width is less, but when scrollbar is visible, and I move it to the right to see the code, then "COPY" button also shifted to the left,
creenshot (2)
I added the copy button using the script and it is working fine with thousands of the pages. Unable to fix the issue.
HTML:
<pre class="i3-code">
--example code--
</pre>
SCRIPT:
<script type="text/javascript">
function cpy(t){var e=t.innerText,n=document.createElement("textarea");n.setAttribute("class","invisible"),n.setAttribute("id","cpytxtbox"),n.textContent=e,document.body.append(n),n.select(),document.execCommand("copy"),document.getElementById("cpytxtbox").outerHTML=""}var $input=$('<div class="copy-btn"><input type="button" value="Copy"/></div>');$input.prependTo($(".i3-code")),$(".copy-btn").click(function(){cpy(this.parentElement)});
</script>
CSS:
.i3-code {
background-color: #fefbed;
font-size: 1em;
line-height: 1.2;
}
.copy-btn {
text-align: right;
margin-left: -8px;
margin-right: -8px;
margin-top: -8px;
margin-bottom: 5px;
background-color: #f4f4f4;
}
.copy-btn input {
background: #e1e1e1;
color: #000;
border: none;
font-weight: 500;
padding: 7px;
transition: background 1s;
}
A live test can be done with this URL (on any example code), by resizing the window screen
https://www.includehelp.com/python/date-toordinal-method-with-example.aspx
This should do the trick:
.copy-btn {
text-align: right;
margin-left: -8px;
margin-right: -8px;
margin-top: -8px;
margin-bottom: 5px;
background-color: #f4f4f4;
position: sticky;
top: -8px;
left: -8px;
right: -8px;
overflow: hidden;
}
It implements position: sticky.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
</head>
<body>
<pre class="float-right position-sticky">
</pre>
</body>
</html>
I want to show my own description over 'mousemove' event which will move along with my mouse pointer when I move my mouse over an image.
But it is not working
Below is the html code
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<div>
<img src="images/wolwerine.jpg" alt="Wolverine" hovermytext="She is doubting my capabilities." class="wolverineClass" id="wolverineId" />
</div>
<div class="wolverineHoverText">
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
Below is the custom.css code
.wolverineHoverText{
height: 40px;
width: 300px;
position: absolute;
padding: 40px 80px;
border: 1px solid #106c90;
background: #da8808;
display: none;
color: #ffffff;
font-size: 20px;
top:20px;
left:20px;
}
img{
height: 600px;
width: 900px;
opacity: 0.5;
}
Below is the custom.js code
$(document).ready(function(){
$('.wolverineClass').mousemove(function(y){
var x = $(this).attr('hovermytext');
$('#wolverineHoverText').text(x).show();
$('#wolverineHoverText').css('top',y.clientY+10).css('left',y.clientX+10);
}).mouseout(function(){
$('#wolverineHoverText').hide();
});
});
Here is a link for that https://www.youtube.com/watch?v=_GrWaN05-Vs&index=51&list=PL6B08BAA57B5C7810
I am a beginner in jquery.
Please comment below for any query.
Here's a working solution. Hope it helps!
$(document).ready(function(){
$('.wolverineClass').mousemove(function(y){
var x = $(this).attr('hovermytext');
$('#wolverineHoverText').text(x);
$('#wolverineHoverText').css('top',y.clientY+10).css('left',y.clientX+10).show();
}).mouseout(function(){
$('#wolverineHoverText').hide();
});
});
.wolverineHoverText{
height: 40px;
width: 300px;
position: absolute;
padding: 40px 80px;
border: 1px solid #106c90;
background: #da8808;
display: none;
color: #ffffff;
font-size: 20px;
top:20px;
left:20px;
}
img{
height: 150px;
width: 400px;
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div>
<img src="images/wolwerine.jpg" alt="Wolverine" hovermytext="She is doubting my capabilities." class="wolverineClass" id="wolverineId" />
</div>
<div id="wolverineHoverText" style="display:none"></div>
So I just got done making my first JQuery project which is a simple full width slider. (Getting back to HTML & CSS & im currently working in C#)
Here is the issue; I dont want to be able to scroll on the page I want it to be autofit to the webpage.
Lets say I open the webpage right now, I want resize it how ever I want its responsive & its working like a charm. but you can still scroll down.
(Feel free to try it yourself with my code)
I remember this being really simple to fix but for some reason I cant remember how I did it back in the day. I'm pretty sure I will have to change something with the height; it in the CSS file or inside the body of the HTML source.
Here is the fiddle
My CSS file is completly empty.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
*{padding: 0; margin: 0;}
body {font-family: Sans-Serif;}
img {max-width: 100%;}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next{right: 10%;}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
position: top;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
</style>
</head>
<body>
<div class="container">
<!-- Full Width Responsive Slider -->
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/Untitled.png">
<img src="images/wp.png">
<img src="images/wp2.png">
</div>
<!-- Full Width Responsive Slider -->
</body>
</html>
try this code.
html,body,img {padding: 0; margin: 0;height:100%;width:100%}
body {font-family: Sans-Serif;}
.container{height:100%;width:100%;overflow: hidden;}
.cycle-slideshow {
height: 100%;
where
*{padding: 0; margin: 0;}
body {font-family: Sans-Serif;}
img {max-width: 100%;}
.cycle-slideshow {
and if you want to change the size, just change .container