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>
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 have a sprite image containing 4 different pictures. They are 520px in height. I would like animate them sliding from the first picture to the last picture. I am able to get them to flip through images, however I cannot get them to slide smoothly. Also, when the last image is reached, I need to slide back to the first image. I am unsure how to do this, this is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<div id="leftArrow"</div>
<div id="rightArrow"></div>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","+=792px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-=792px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/`enter code here`
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;
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:
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.
Ok so when the user types in 'snow shark' into the textbox 'movie' and presses search, the poster should pop up. It won't in the div that I put the img in. Why is this?
Code:
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="movie" style="width: 400px; height: 20px; font-size: 120%; font-family: Verdana">
<div id="search" style="text-align: center; width: 100px; height: 25px; position: absolute; left: 450px; top: 8.5px; cursor: pointer; background-color: #3366FF; color: white"> Search </div>
<p id="donthavemovie"></p>
<div id="movie_poster_div" style="width: 200px; height: 300px; position: absolute; top: 300px; left: 20px; background-color: red"> <img id="movie_poster" style="max-width: 100%; max-height: 100%" src=""> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#movie_poster_div').hide();
})
$('#search').click(function() {
$snowshark = $('#movie_poster').attr('src','http://ecx.images-amazon.com/images/I/81lqmCozYwL._SL1500_.jpg');
if($('#movie').val() == 'snow shark') {
$snowshark.fadeIn('slow');
}
})
</script>
</body>
</html>
I can't get what you mean by 'pop up', the following code can display img correctly:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="movie" style="width: 400px; height: 20px; font-size: 120%; font-family: Verdana">
<div id="search" style="text-align: center; width: 100px; height: 25px; position: absolute; left: 450px; top: 8.5px; cursor: pointer; background-color: #3366FF; color: white"> Search </div>
<p id="donthavemovie"></p>
<div id="movie_poster_div" style="width: 200px; height: 300px; position: absolute; top: 300px; left: 20px; background-color: red"> <img id="movie_poster" style="max-width: 100%; max-height: 100%" src=""> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#movie_poster_div').hide();
})
$('#search').click(function() {
$('#movie_poster').attr('src', 'http://ecx.images-amazon.com/images/I/81lqmCozYwL._SL1500_.jpg');
if($('#movie').val() == 'snow shark') {
$('#movie_poster_div').fadeIn('slow');
}
})
</script>
</body>
</html>