I am trying to fit a single character font-size to its parent div. is it possible?
Maybe it's a Font scaling based on width of container
by #Francesca duplicate?
But my context is a Single Character so maybe it is possible but font can be normal font-family or iconic font like font-awesome.
I appreciate a fiddle work
body {
font-size: 10px;
font-family: Arial
}
.box1 {
border: 1px solid red;
margin: 10px;
width: 50px;
height: 50px;
font-size: 4vw;
}
.box2 {
border: 1px solid blue;
margin: 10px;
width: 200px;
height: 200px;
font-size: calc(3vw + 3vh);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box1">x</div>
<button class="box1">x</button>
<div class="box2"><i class="fa fa-remove"></i></div>
<button class="box2"><i class="fa fa-remove"></i></button>
I have try it with some js code but its depend on parents width or height.
var fontSize = parseInt($(".box1").height())+"px";
$(".box1").css('font-size', fontSize);
var fontSize = parseInt($(".box2").height())+"px";
$(".box2").css('font-size', fontSize);
body {
font-size: 10px;
font-family: Arial
}
.box1 {
border: 1px solid red;
margin: 10px;
width: 50px;
height: 50px;
text-align:center;
line-height: 45px;
}
.box2 {
border: 1px solid blue;
margin: 10px;
width: 200px;
height: 200px;
text-align:center;
}
.box2 i {
display: block;
line-height: 97%;
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box1">x</div>
<button class="box1">x</button>
<div class="box2"><i class="fa fa-remove"></i></div>
<button class="box2"><i class="fa fa-remove"></i></button>
Related
Can anyone help. I want to make a div which expands its width continuously till it reaches a certain width.
The max width it can reach is 540px. And it should start at 75px. I have tried making it, but I can't here's html and css.
.Loading-Screen {
background-color: black;
color: aliceblue;
height: 400px;
width: 600px;
border-radius: 45px 45px 45px 45px;
font-size: large;
font-family: monospace;
margin: auto;
}
.Loading-Box {
background-color: gray;
color: aliceblue;
height: 75px;
width: 550px;
border-radius: 25px 25px 45px 45px;
font-size: large;
font-family: monospace;
margin: auto;
}
.Loading-Line {
background-color: #1a1a1a;
color: aliceblue;
height: 65px;
width: 75px;
max-width: 540px;
border-radius: 25px 25px 45px 45px;
font-size: large;
font-family: monospace;
margin-top: -2.5%;
float: left;
margin-left: 1%;
}
.Loading-Screen a {
transition: 0.3s;
}
.LoadOK {
height: 50px;
width: 135px;
color: tomato;
background-color: #1a1a1a;
border: 0;
border-radius: 10px 10px 10px 10px;
transition: 0.3s;
}
.LoadOK:hover {
height: 70px;
width: 175px;
margin-top: -2.5%;
}
.Loading-Screen a:hover {
font-size: 40px;
}
<body bgcolor="#1a1a1a">
<center>
<div class="Loading-Screen"><br><br><br><br>
<h1><a>Web OS</a></h1>
<br><br>
<button class="LoadOK" onclick="">Load...</button><br><br><br><br><br>
<div class="Loading-Box"><br>
<div class="Loading-Line" id="Load"></div>
</div>
</div>
</center>
</body>
When loadOK is clicked, loading-line should expand till 540px. Hopefully you understand my query. Thank you for your time.
By 'expanding its width' are you talking about when the size of the browser is changed? If so, then you will want to adjust your css so that it is responsive (the content will adjust based on the size of the browser/device).
For example:
#media screen and (max-width: 900px){
and everything put within here will respond to the browser/device changes
}
Take a look at this for further clarification:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Try this, Hope you need this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div {
width: 75px;
height: 100px;
background: red;
transition: width 2s;
}
</style>
<script>
$(document).ready(function(){
$("#button").click(function(){
$('#expand').css({
'width':'540px',
})
});
});
</script>
</head>
<body>
<div id="expand"></div>
<button id="button">Expand</button>
</body>
</html>
you can check the codepen here https://codepen.io/asad7880/pen/JjKpBdN
HTML
<button class="LoadOK" onclick="loading()">Load...</button>
CSS:
.Loading-Line {
....
transition: 1s width;
}
.Loading-Line.active {
width: 540px;
}
JS
function loading() {
const load = document.getElementById('Load');
load.classList.add('active');
}
https://jsfiddle.net/ttquang1063750/6vygkxha/4/
width: will set element width to the given value.
min-width: will make sure your width doesn't go below some values.
First set min-width to 75px instaed of only width. Add transition: width 2s ease-in-out; max-width: 540px; to the element and you can manipulate it's width by javascript function;
function load(){
document.getElementById('Load').style.width = '100%'
}
load();
.Loading-Line{
max-width: 540px;
min-width: 75px;
background-color: #1a1a1a;
color: aliceblue;
height: 65px;
border-radius: 25px 25px 45px 45px;
font-size: large;
font-family: monospace;
margin-top: -2.5%;
float: left;
margin-left: 1%;
transition: width 2s ease-in-out;
}
I am working on a chatbot at the moment and trying to connect a GUI I have been working with to the project.
It is running smooth but my output is a little messed up; in particular, the chat boxes should alternate between the user and the BOT, but they are stacking on top and not formatting correctly.
I want to fix this issue, but keep the screen dividing in half down the middle so that the bot outputs are on the right and the users on the left. I just need to get them to alternate back and forth.
I've tried anchoring the newest box with a margin-top, tried setting a counter variable to update the placement of each new box, etc., but am having trouble spacing them relative to each other.
Below is the code without the backend work. So, this won't run perfect but it should get the setup I have across...
Here is the CSS code:
body {
font-family: Cambria;
color: rgb(122, 4, 4);
background-color: rgb(136, 175, 175);
}
h1 {
color: black;
margin-bottom: 0;
margin-top: 0;
text-align: center;
font-size: 40px;
}
h2 {
color: black;
font-size: 20px;
margin-top: 3px;
text-align: center;
}
#user_chatbox {
margin-left: 0;
margin-right: auto;
width: 50%;
margin-top: 30%;
}
#bot_chatbox {
margin-left: 50%;
margin-right: auto;
width: 50%;
margin-top: 10%;
/* height: 80%; */
/* background-color: pink; */
/* border-radius: 10px; */
}
#userInput {
margin-left: auto;
margin-right: auto;
width: 95%;
margin-top: 150px;
}
#textInput {
width: 92%;
border: 3px solid Black;
border-bottom: 3px solid #660096;
font-family: Cambria;
font-size: 16px;
}
#buttonInput {
padding: 10px;
font-family: Cambria;
font-size: 72;
}
.userText {
color: rgb(0, 0, 0);
font-family: Georgia;
font-size: 16px;
text-align: left;
line-height: 20px;
}
.userText span {
display:block;
width:auto;
background-color: rgb(87, 201, 152);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
.botText {
color: Black;
font-family: Consolas, monaco, monospace;
font-size: 16px;
text-align: left;
/* line-height: calc(29 + var(--chatbox_spacing))px; */
line-height: 20px;
}
.botText span {
display:block;
width:auto;
background-color: rgb(73,196,199);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
... and here are the .html with .js code (within index.html) that is updating the blocks to be printed out with new information (input from the user and a reply from the bot):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Analysis Chatbot</h1>
<!-- The main chat environment for interacting with the bot. -->
<div>
<!-- The text of the bot. -->
<div id="bot_chatbox">
<p class="botText"><span>Welcome! How can I help you analyze your dataset?</span></p>
</div>
<div id="user_chatbox"></div>
<!-- The input text of the user interacting with the bot. -->
<div id="userInput">
<input id="textInput" type="text" name="msg" placeholder="Message">
<input id="buttonInput" type="submit" value="Send">
</div>
<script>
function getBotResponse() {
var rawText = $("#textInput").val();
var userHtml = '<p class="userText"><span>' + rawText + '</span></p>';
$("#textInput").val("");
$("#user_chatbox").append(userHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
$.get("/get", { msg: rawText }).done(function(data) {
var botHtml = '<p class="botText"><span>' + data + '</span></p>';
$("#bot_chatbox").append(botHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
});
}
$("#textInput").keypress(function(e) {
if(e.which == 13) {
getBotResponse();
}
});
$("#buttonInput").click(function() {
getBotResponse();
})
</script>
</div>
</body>
</html>
Nothing breaks, but I have attached some images below of the current output. Again, it isn't as much that the replies are basic right now, but rather that I want the displayed text blobs to be alternating from the bot (right side) to the user (left side) while keeping the screen split in the middle.
I want that image to be: the top blue on the right (Welcome...) then the first green on the left (can you find me sales in...) then next blue on right and so on so forth...
I put together a basic example of what you're trying to do using a 100% width wrapper that holds the message inside. The wrapper has display:flex; so that the <div>s inside don't expand. Check it out:
$(document).ready(function() {
$('#sendUser').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message user"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
$('#sendBot').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message bot"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
});
#chatbox{
width: 300px;
height: 400px;
border: 1px solid black;
margin: auto;
margin-top: 20px;
overflow-y: scroll;
}
#inputs{
display: grid;
padding: 10px 0;
width: 300px;
margin: auto;
grid-template-columns: auto 40px 40px;
grid-gap: 4px;
}
.button{
text-align: center;
border: 1px solid #a0a0a0;
cursor: pointer;
}
.button:hover{
background-color: grey;
color: white;
}
.message{
display: flex;
}
.message.user{
text-align: left;
}
.message > div{
margin: 10px 10px 0;
padding: 6px 8px;
border-radius: 15px;
color: white;
}
.message.bot > div{
margin-left: auto;
background-color: teal;
}
.message.user > div{
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chatbox">
<div class="message bot">
<div>
hello
</div>
</div>
<div class="message user">
<div>
hello!
</div>
</div>
</div>
<div id="inputs">
<input type="text" id="userText">
<div class="button" id="sendBot">Bot</div>
<div class="button" id="sendUser">User</div>
</div>
Here's the CodePen if you wanted to mess with it.
If click on button some boxes are append. next you will click on that boxes gradient box will append but gradient boxes are not appending.its append only first box if click on another box gradient box doesn't append
My Fiddle
<script src="https://cdn.office24by7.com/add-templates/gradX.js"></script>
<button class="clbtn" name="button" value="button">button</button>
<div class="appenddiv">
</div>
<script>
$(document).ready(function(){
var i = 0;
$(".clbtn").click(function(el){
$.fn.myFunction = function(){
gradX("#clrpik", {
targets: [".target"]
});
}
$(".appenddiv").append('<div class="target"><div class="target_text">Click Here for gradient</div></div>');
$(".target").click(function(){
$(".appenddiv").append('<div id="clrpik"></div>').myFunction();
});
});
});
</script>
Gradient box appending on other div click but it's stick to first div
use this to set:
$(this).append('<div id="clrpik"></div>').myFunction();
});
$(document).ready(function(){
var f = 0;
$(".clbtn").click(function(el){
$.fn.myFunction = function(){
gradX("#clrpik", {
targets: [".target"]
});
//f++;
}
$(".appenddiv").append('<div class="target"><div class="target_text">Click Here for gradient</div></div>');
$(".target").one('click', function(){
$(this).append('<div id="clrpik"></div>').myFunction();
});
});
});
.targets {
margin:0 auto;
text-align: center;
border: 1px solid #ccc;
background: #f8f8f8;
margin: 0 auto;
border-radius: 4px;
width:auto;
padding:10px;
}
.target_text {
margin: 0px auto;
margin-top: 40%;
background: #f8f8f8;
width: 70px;
border: 1px solid #ddd;
padding: 2px;
border-radius: 2px;
color: #111;
}
.target {
border: 1px solid;
margin: 0px 10%;
width: 150px;
height: 150px;
display:inline-block;
}
#target {
border-radius: 150px;
}
.result {
text-align: center;
text-transform: uppercase;
font-weight: bold;
padding:12px;
padding-left: 15px;
margin: 10px 0px;
border: 1px solid #ddd;
background: #f8f8f8;
}
.clrpik {
height: 200px;
margin: 100px 34%;
}
<link href="https://cdn.office24by7.com/add-templates/colorpicker.css" rel="stylesheet"/>
<link href="https://cdn.office24by7.com/add-templates/gradX.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://codologic.com/page/sites/all/files/gradx/dom-drag.js"></script>
<script src="https://codologic.com/page/sites/all/files/gradx/colorpicker/js/colorpicker.js"></script>
<script src="https://cdn.office24by7.com/add-templates/gradX.js"></script>
<button class="clbtn" name="button" value="button">button</button>
<div class="appenddiv">
</div>
So I'm trying to make a website for a company of mine, and the idea is that my main page is going to have a giant image with a button in the center (horizontally and vertically) that says "More!" but the button will not center nor will the text inside of the button, Below I'll put my HTML code as well as my CSS code too.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biostone Interactive | Main</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header-image">
<div id="header-button">
More!
</div>
</div>
<div id="nav">
</div>
<div id="container">
</div>
</body>
</html>
And here is my CSS:
* {
padding: 0;
margin: 0;
font-family: Lucida Sans Unicode, Tahoma, Arial;
}
#header-image {
width: 100%;
height: 600px;
background-color: black;
}
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
}
#header-button-text {
text-align: right;
text-decoration: none;
color: white;
}
(Note this code isn't complete because I deleted some of it to try and fix it)
Please help me and tell me what I did wrong! Thanks :D
To center text within a container, use text-align:center;
To center a container, use margin-left:auto;margin-right:auto;
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
text-align: center;
margin-left: auto;margin-right:auto;
}
#header-button-text {
text-decoration: none;
color: white;
}
change the header button css to:
#header-button {
position:absolute;
top:50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
}
The margin values need to be half of the dimension attributes, so if you change width and height you have to update the margins.
Every part of the following code player works fine expect the CSS part of it.
It can display HTML and JS without problem. I've tried to fix it but I couldn't. even Chrome console is not pointing to any error. I think the problem is here:
$("#runButton").click(function() {
$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());
document.getElementById('resultFrame').contentWindow.eval( $
('#js').val() );
});
And here is all of the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sadegh's code player</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
#menubar {
width: 100%;
height: 40px;
background-color: #6C4141;
}
#logo {
padding: 10px 0 0 15px;
font-weight: bold;
font-size: 1.15em;
float: left;
color: white;
text-shadow: 1px 1px 3px gray;
}
#button {
float: right;
padding: 5px 20px 0 0;
}
#runButton {
font-size: 1.15em;
font-weight: bold;
height: 30px;
width: 60px;
border-radius: 4px;
color: #875D5D;
border: 1px solid #8E7272;
background-color: white;
text-shadow: 1px 1px black;
}
#runButton:hover {
background-color: #8E7272;
color: white;
border: 1px solid white;
}
#toggles {
width: 400px;
margin: 0px auto;
height: 100%;
}
#toggles ul {
list-style-type: none;
}
.toggleLi {
display: inline-block;
padding: 7px 5px 5px 5px;
border: 1px solid white;
border-radius: 5px 5px 0 0;
background-color: #8E7272;
height:30px;
margin-top: 10px;
width: 95px;
text-align: center;
border-bottom: 0;
color: white;
font-weight: bold;
}
.selected {
background-color: white;
color: #875D5D;
border: 1px solid gray;
}
.clear {
clear: both;
}
.codeContainer {
width: 25%;
float:left;
height: 100%;
position: relative;
}
.codeContainer textarea {
width: 100%;
height: 100%;
border: none;
border-right: 1px ridge #875D5D;
padding: 15px;
font-family: Console, Lucida, monospace;
font-size: 18px;
}
.codeLable {
position: absolute; top: 10px; right: 10px;
border-bottom: 1px solid #875D5D;
padding: 0 2px 2px 2px;
}
#resultFrame {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="menubar">
<div id="logo">Code Player</div>
<div id="button">
<button type="button" id="runButton">Run</button>
</div>
<div id="toggles">
<ul>
<li class="toggleLi selected">HTML</li>
<li class="toggleLi selected">CSS</li>
<li class="toggleLi selected">JS</li>
<li class="toggleLi selected">Result</li>
</ul>
</div>
<div class="clear"></div>
<!-- html container -->
<div class="codeContainer" id="HTMLContainer">
<div class="codeLable">HTML</div>
<textarea name="textarea" id="html">Some text</textarea>
</div>
<!-- css container -->
<div class="codeContainer" id="CSSContainer">
<div class="codeLable">CSS</div>
<textarea name="textarea" id="css">body {
background-color: red;
}
</textarea>
</div>
<!-- javascript container -->
<div class="codeContainer" id="JSContainer">
<div class="codeLable">JavaScript</div>
<textarea name="textarea" id="js">alert('Thatsit')</textarea>
</div>
<!-- result iframe -->
<div class="codeContainer" id="ResultContainer">
<div class="codeLable">Result</div>
<iframe id="resultFrame"></iframe>
</div>
</div><!-- end of #menubar -->
</div><!-- end of page wrapper -->
<script type="text/javascript">
var windowHeight = $(window).height();
var menubarHeight = $("#menubar").height();
var codeContainerHeight = windowHeight - menubarHeight;
$(".codeContainer").height(codeContainerHeight + "px");
$(".toggleLi").click(function(){
$(this).toggleClass("selected");
var activeDiv = $(this).html();
$("#"+activeDiv+"Container").toggle();
var showingDivs = $(".codeContainer").filter(function() {
return $(this).css("display") !== "none";
}).length;
var width = 100 / showingDivs;
$(".codeContainer").css("width",width + "%");
});
$("#runButton").click(function() {
$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());
document.getElementById('resultFrame').contentWindow.eval( $
('#js').val() );
});
</script>
</body>
</html>
$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());
The $("#html").val() will return only text not include tags,so when user input something in <textarea name="textarea" id="html">Some text</textarea>
you need to wrap into a tag,for example:user input(Some text),wrap to <p>Some text</p>or wrap inside a body tag.Hope this help you.