Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want to make a chat box for my website and it should be fixed at the bottom right position of page. When someone clicks on it that it should slide up and details are visible in it.
I am using html,css,jquery.
Suggest help from these only.
You can look at examples of socket.io for chat.
https://socket.io/get-started/chat/
Desing:
https://codepen.io/oktaykose/pen/aypyvg
.chat-box{
position: absolute;
bottom: 0;
right: 0;
}
.box{
transition: height 1s ease-out;
width: 300px;
height: 0px;
background: red;
z-index: 9999;
}
.open:hover>.box{
height:400px;
transition: height 1s ease-out;
}
.open {
text-align: center;
font-size: 20px;
border: 2px solid #3F51B5;
background: #673AB7;
color: #eaeaea;
}
<div class="chat-box">
<div class="open">Open
<div class="box">
<br>
Test
<br>
</div>
<div>
<div>
Below is the sample as per your requirement.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.LiveChat{
position:absolute;
bottom:0%;
height:10%;
background-color:red;
}
</style>
<script>
$(document).ready(function()
{
$("#chatBtn").click(function()
{
$(".LiveChat").css("height","30%");
});
});
</script>
</head>
<body>
<div class="LiveChat">
<button id="chatBtn">Live chat</button>
<p>rest of details below</p>
</div>
</body>
</html>
Please mark it as answer if its matching your need.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
The code I have is this one below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
</style>
</head>
<body>
<h1>click/put your mouse in the square</h1>
<div class="zoom"></div>
</body>
</html>
What I'm trying to do here is to write something in the box, how can I possibly do that?
NOTE: I don't want people to write on it, i want to write on it
Simply put it in between the tags:
<div class="zoom">Type whatever you want here</div>
You can do this with most other tags too:
<p>Some text</p>
<h1>Some more text</h1>
From your example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
</style>
</head>
<body>
<h1>click/put your mouse in the square</h1>
<div class="zoom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am brand spanking new to HTML so please excuse the lack of knowledge. I am currently trying to set up a little website and I want to have three sections that a user can click on that will route the user to a different part of the website. Simply put, I want three sections, aligned left, center, and right that is able to be shown on the same line. Every time I am attempting this however, I set up one section on the left, and then I can get a section on the center and the right, but it is going on another line horizontally.
How can I get all three sections to be on the same horizontal line and simply just left, right and center?
The trick is to use display: inline-block although there are many ways to do this.
Suggest you look into flexbox as this will make your future coding life a lot easier.
#container {
width: 100%;
height: 500px;
text-align: center;
}
#left,
#center,
#right {
width: 20%;
height: 100%;
display: inline-block;
}
#left {
background-color: red;
}
#center {
background-color: green;
}
#right {
background-color: blue;
}
<div id='container'>
<div id='left'></div>
<div id='center'></div>
<div id='right'></div>
</div>
<html>
<head>
<style>
#parent-container {
width: 100%;
height: 500px;
text-align: center;
}
#left,
#center,
#right {
width: 20%;
height: 100%;
position: relative;
display: inline-block;
}
#left {
background-color: red;
}
#center {
background-color: yellow;
}
#right {
background-color: green;
}
</style>
</head>
<body>
<div id='parent-container'>
<div id='left'>
Left
</div>
<div id='center'>
Center
</div>
<div id='right'>
Right
</div>
</div>
</body>
</html>
Use bootstrap to align your divs.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
https://getbootstrap.com/docs/4.0/layout/grid/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to convert a html view to a image. This is the div code
<html>
<div class="row">
<!--image div -->
<div id="imgspace1" class="container cropit-image-preview1" class="col-md-12" style="border: 1px solid black; height: 250px; position: absolute; top: 10px; right: 10px; left: 10px; background-size: cover;">
convert this div to a image.</div></div>
</html>
i want to convert this html view to a image. does anyone know ?
You can use html2canvas library:
function convertImg() {
html2canvas(document.querySelector('.row'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
$('button').click(convertImg);
.row > div {
background: red;
color: white;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<button>Convert page as img.</button>
<div class="row" style='height:260px; position:relative; top:10px;'>
<div id="imgspace1" class="container cropit-image-preview1" class="col-md-12" style="border: 1px solid black; height: 250px; position: absolute; top: 10px; right: 10px; left: 10px; background-size: cover;">
convert this div to a image.</div>
</div>
There's a library that converts HTML to HTML-Canvas. This Canvas can be saved as an image afterwards. Check out the examples:
http://html2canvas.hertzen.com/
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
If i have a div 100px x 100px.
And i define 10x child divs that should fit next to each other with 10px x 10px.
Why do they not?
try it with your browser: http://dwaves.de/prozentuale-angaben-check.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Statisches Layout</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border: 0px;
}
html,body {
height: 100%;
width: 100%;
}
.container {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
top: 0px;
}
.relative {
width: 10%;
height: 10%;
background: yellow;
position: relative;
float: left;
}
.fixed {
height: 10px;
width: 10px;
background: blue;
position: relative;
float: left;
}
</style>
<body>
<div class="container">
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
</div>
</body>
</html>
In the link you posted, you have 12, not 10 <div> elements. Also, you have an unnecessary <br/> tag. Fix those two issues and they will fit in one row.
JSFiddle demo here (with <br> and two last <div> tags removed).
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I am not sure why the last image 6.png is selected, when all the images are direct descendants of the div shape. Thanks for your help its much appreciated.
From what I understand it should select all the divs because they are all direct descendants of the div #shape.
<!DOCTYPE html>
<html>
<head>
<title>3D image</title>
<style>
body,html{
width:100%;
height:100%;
overflow:hidden;
}
body{
background:-webkit-gradient(radial,800
64,950, 500, 400, 40, from(#1F1F1F), to(#FFFFFF));
}
#container{
width:100%;
}
#shape{
position:relative;
top:160px;
margin: 0 auto;
width:200px;
height:200px;
}
#shape > div{
position:absolute;
height:200px;
width:200px;
border:1px solid #e3e3e3;
-webkit-border-radius:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="shape">
<div class="one"><img src="images/2.png"></div>
<div class="two"><img src="images/3.png"></div>
<div class="three"><img src="images/4.png"></div>
<div class="four"><img src="images/1.png"></div>
<div class="five"><img src="images/5.png"></div>
<div class="six"><img src="images/6.png"></div>
</div>
</div>
</body>
</html>
All of them are selected.
They are overlapping eachother, as in they all have the same position.
Replace
#shape > div{
position:absolute;
height:200px;
width:200px;
border:1px solid #e3e3e3;
-webkit-border-radius:10px;
}
for
#shape > div{
position:relative;
float: left;
height:200px;
width:200px;
border:1px solid #e3e3e3;
-webkit-border-radius:10px;
}
And you should see the difference.