I want to absolutely position my buckles for animation and this is my html:
<div id="about">
<div id="weare">lorem.ipsum</div>
<div id="who"><span id="whospan"><B>LOREMSIT.DOLOR</B></span></div>
<div id="what"><div id="klamra_l">[</div><div id="klamra_r">]</div><span id="whatspan">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>
I am using for it jQuery:
function ustawklamry()
{
var w_what = parseInt($("#what").outerWidth(true));
var w_whatspan = parseInt($("#whatspan").outerWidth(true));
var left = parseInt((w_what - w_whatspan)/2);
var right = parseInt(left + w_whatspan);
$("#klamra_l").css("left",left);
$("#klamra_r").css("left",right);
console.log(w_what + ";" + w_whatspan + ";" + left + ";" + right);
}
ustawklamry();
And what I get is:
And in console I see:
964;596;184;780
What is more, the space between buckles is equal to #whatspan (green field).
I have no idea why it is not working. I tried width, outerWidth, innerWidth and no one is working.
Please for help, if you want any additional data - ask.
First, I will address your following problem.
Oh my god, I see it is working good on fiddle but on my website not... I thought about problem while page is loading and I used $(document).ready(function(){... but it is not working too. Where is the problem?
This is because code from other parts of the page are be interfering with your code for this part of the page. If you can't find it anywhere in your javascript, then it must be in your CSS. Try opening up the dev tools (inspecting the page) and see what CSS values that menu is inheriting from its parent element in your production page. Then, try inspecting the JSfiddle page. Finally, try to get the CSS inherited from the parent element on the production page to be the same as the CSS inherited from the parent element on the JSFiddle page. Now it should work. Also, pay very close attention to !important tags. I have a sneaking suspicion that they might be the culprit.
To the next issue: you don't actually need javascript. Also, your layout is inflexible, it will look good on some devices, and bad on others because you don't make the size adaptive to the user's screen size. Here is a demo that works in IE9 and automatically resizes based on the user's screen size by using vw units in the font size, and transform: translateY(.125em) to center the brackets. Also, you could cut down on your DOM usage. Considering all these things, I hope you find this very useful:
#about {
border: 2vw solid #FFF;
padding: 3vw;
//border-radius: 50% / 50%;
display: inline-block;
background-color: black;
max-width: 80vw;
outline: 99vh solid black;
box-shadow: 0 0 0 99vw black;
overflow: hidden;
position: fixed;
top:0;bottom:0;
left:5vw;right:5vw;
margin: auto 0;
height: 17.5vw;
}
#weare {
color: #FFF;
font-size: 3vw;
margin: 0 auto;
text-align: center
}
#who {
color: #FFF;
font-size: 9vw;
margin: 0 auto;
font-family: Oswald, sans-serif;
text-align: center;
letter-spacing: 133%;
font-weight: bold;
}
#what {
color: #FFF;
font-size: 2.5vw;
margin: 0 auto;
font-weight: 300;
text-align: center;
vertical-align: middle;
background-color: red;
}
#greenbackground::before {
direction: rtl;
}
#greenbackground::after, #greenbackground::before {
content: ']';
font-size: 2em;
transform: translateY(.125em);
background: none;
line-height: 0;
display:inline-block;
color: white;
width: 0;
}
#greenbackground {
background:green;
display:inline-block;
height: 100%;
}
<div id="about">
<div id="weare">lorem.ipsum</div>
<div id="who">LOREMSIT.DOLOR</div>
<div id="what"><span id="greenbackground">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>
JSFiddle Link
To add some snazzy roundness to it, all you need is 1 extra line of code.
#about {
border: 2vw solid #FFF;
padding: 3vw;
border-radius: 50% / 50%;
display: inline-block;
background-color: black;
max-width: 80vw;
outline: 99vh solid black;
box-shadow: 0 0 0 99vw black;
overflow: hidden;
position: fixed;
top:0;bottom:0;
left:5vw;right:5vw;
margin: auto 0;
height: 17.5vw;
}
#weare {
color: #FFF;
font-size: 3vw;
margin: 0 auto;
text-align: center
}
#who {
color: #FFF;
font-size: 9vw;
margin: 0 auto;
font-family: Oswald, sans-serif;
text-align: center;
letter-spacing: 133%;
font-weight: bold;
}
#what {
color: #FFF;
font-size: 2.5vw;
margin: 0 auto;
font-weight: 300;
text-align: center;
vertical-align: middle;
background-color: red;
}
#greenbackground::before {
direction: rtl;
}
#greenbackground::after, #greenbackground::before {
content: ']';
font-size: 2em;
transform: translateY(.125em);
background: none;
line-height: 0;
display:inline-block;
color: white;
width: 0;
}
#greenbackground {
background:green;
display:inline-block;
height: 100%;
}
<div id="about">
<div id="weare">lorem.ipsum</div>
<div id="who">LOREMSIT.DOLOR</div>
<div id="what"><span id="greenbackground">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>
JSFiddle Link
Related
Trying to make counter(till 9) by javascript.
Hid the counting of 1 to 9. So, when the user enters the target then scroll the counter by its height so the hidden numbers will be shown. Used two set intervals in the code maybe that's why code not running according to expectation.
codepen link --> https://codepen.io/aryansharma-2002/pen/GRyZJJv
same code pasted here:-
HTML CODE
<div class="input">
<h1 class="heading">Enter a value between 0 and 9</h1>
<div class="left">
<input type="number" id="count" placeholder="Enter Number">
</div>
<div class="right">
<button class="submit-btn" id="submit-btn">Start Counter</button>
</div>
</div>
<div class="output">
<div class="count-output" id="count-output">
<span class="zero" data-count="0">0</span>
<span class="one" data-count="1">1</span>
<span class="two" data-count="2">2</span>
<span class="three" data-count="3">3</span>
<span class="four" data-count="4">4</span>
<span class="five" data-count="5">5</span>
<span class="six" data-count="6">6</span>
<span class="seven" data-count="7">7</span>
<span class="eight" data-count="8">8</span>
<span class="nine" data-count="9">9</span>
</div>
</div>
NO NEED TO READ FULL CSS CODE. THE MAIN CSS is that to div.count-output is given some fixed height and width and then the span tag inside it, is giving 100% height and width so that only one number shown at a time. And all the other numbers is hidden by using overflow: hidden; css rule. So, we will scroll the .count-output by using javascript.
CSS CODE
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Roboto', sans-serif;
}
.input{
width: 90%;
margin: 10px auto;
padding: 50px;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(44,177,204,0.5374883229659051) 0%, rgba(255,0,218,0.32180204845610116) 100%);
}
.heading{
color: white;
word-spacing: 4px;
font-weight: 700;
margin-bottom: 25px;
text-align: center;
}
.left{
float: left;
width: 50%;
/* border: 2px solid black; */
text-align: center;
}
.right{
width: 50%;
float: right;
/* border: 2px solid black; */
text-align: center;
}
.input::after{
content: "";
display: block;
clear: both;
}
.input input[type="number"]{
width: 50%;
font-size: 20px;
padding: 3px 5px;
outline: none;
border: none;
}
.submit-btn{
background: white;
font-size: 18px;
font-weight: 700;
padding: 10px;
border: none;
border-radius: 15px;
box-shadow: 0px 0px 10px 0px white;
}
.output{
width: 80%;
margin: 20px auto;
background: rgba(0, 0, 0, 0.685);
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
.output .count-output{
/* border: 2px solid white; */
width: 75px;
/* height: 75px; */
height: 75px;
background: white;
box-shadow: 0px 0px 5px 0px white;
overflow: hidden;
}
.count-output span{
display: inline-block;
width: 100%;
height: 100%;
border-top: 2px solid red;
font-size: 70px;
/* text-align: center; */
display: flex;
justify-content: center;
align-items: center;
/* font-weight: 700; */
}
JS CODE
// when we click the submit button then take the data of the count, then start the counter and from 1 to 9 data hidden there so by js scroll it after 1sec when the target reaches stop and show alert
var input=document.getElementById("count");
var btn=document.getElementById("submit-btn");
var counter=document.getElementById("count-output");
console.log(input);
console.log(btn);
console.log(counter);
var scrollTillTarget=function (target) {
let count=0;
var heightCounter=counter.clientHeight;
console.log(heightCounter);
let intervalId=setInterval(function () {
if (count==target) {
alert("Target has reached");
clearInterval(intervalId);
counter.scrollTo(0,0);
return;
}
// By this line scrolling occurs instantly so the scrolling is not shown. So, used the setInterval so that do small scrolling in small time till the height of counter.
// counter.scrollBy(0,heightCounter);
let currentScroll=0;
let scrollId=setInterval(function () {
if (currentScroll==heightCounter) {
clearInterval(scrollId);
return;
}
counter.scrollBy(0,1);
currentScroll++;
},1);
count++;
},1000);
}
btn.addEventListener("click",function (event) {
var targetCount=input.value;
console.log(targetCount);
// now start the counter and scroll the count-output div to the span where the data-count attribute of span is equal to the targetCount
scrollTillTarget(targetCount);
});
Problem - Want that scrolling must show and also in 1 second. Then next scrolling till the target count.
This problem occuring maybe because the call stack is blocked by the setInterval callback function.
Solved this question by some other technique but want the answer why the above code is having some problem.
Solved Link- https://codepen.io/aryansharma-2002/pen/MWrjELL
I'm working on an accordion. I've used jQuery for the animation. When I click on the accordion head the border that holds the + reduces in size. I only want the plus sign to change and the border to stay the same size.
$(document).ready(function() {
//toggle the component with class accordion_body
$(".accordion_head").click(function() {
$(this).removeClass('coll-back');
if ($('.accordion_body').is(':visible')) {
$(".accordion_body").slideUp(400);
$("plusminus").text('+');
$(this).removeClass('coll-back');
$('.rmv-cls').removeClass('coll-back');
}
if ($(this).next(".accordion_body").is(':visible')) {
$(this).next(".accordion_body").slideUp(400);
$(this).children("plusminus").text('+');
$(this).removeClass('coll-back');
} else {
$(this).next(".accordion_body").slideDown(400);
$(this).children("plusminus").text('');
$(this).children("plusminus").append('<hr class="hr-clc">');
$(this).toggleClass('coll-back');
$(this).addClass('rmv-cls');
}
});
});
$('plusminus').on("click", function() {
$(this).toggleClass('active');
$(this).text() == "+" ? $(this).text("-") : $(this).text("+");
});
.plusminus {
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 15px 25px;
font-size: 36px;
-webkit-font-smoothing: subpixel-antialiased;
}
#plus-1 {
position: relative;
top: 5px;
left: -27%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="start">
<div class="acc-main">
<div class="container">
<div class="kind">
<div class="accordion_container">
<div class="accordion-main">
<div class="accordion_head"><span class="plusminus" id="plus-1">+</span>Because She Matters
</div>
<div class="accordion_body" id="a1" style="display: none;">
<p class="para-acc">
</p>
</div>
</div>
</section>
The font used has its characters with different width, that is the characters + and - have different width. So when they switch, it affects the total width of the block.
You can solve it using a monospaced font, such as Monospace, Courier, Courier New or Lucida Console.
Another solution would be set a fixed width for the block.
First, the <span> must be an block element. You add to it display: inline-block. Then padding will be considered within total width as default, so you have 25px padding for left and right. Your block is about 72px (when +), then you can add width: 22px (50px + 22px = 72px fixed width).
.plusminus {
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 15px 25px;
font-size: 36px;
-webkit-font-smoothing: subpixel-antialiased;
display: inline-block; /* add this */
width: 22px; /* add this */
}
A little bit the height of the accordion head will change with that, but nothing big.
Add the following css code
.plusminus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
line-height: 70px;
box-sizing: border-box;
}
You have already added .active class to .plusmimus class on click of the accordion. I have added some extra CSS code to make it look better as you required.
$(document).ready(function() {
$('.plusminus').on("click", function() {
$(this).toggleClass('active');
});
});
.plusminus {
display: inline-block;
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 30px;
cursor: pointer;
position: relative;
}
.plusminus::before,
.plusminus::after {
position: absolute;
content: '';
width: 16px;
height: 2px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #FFF;
transition: 0.15s ease-out all;
}
.plusminus::after {
width: 2px;
height: 16px;
}
.plusminus.active::before {
transform: rotate(180deg);
}
.plusminus.active::after {
transform: rotate(90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="plusminus"></span>
Please let me know if this helps.
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.
I wonder what is the best way to do it like img. I mean block alignment
from left to right and taking the maximum length of the row.
Which is better, write a script specifying and adapting the block size to the container size, or do it somehow using the css grid. I don't want a ready solution, just tips. Regarding the code, I wrote only so much and I think how to transform it. That's why I'm looking for a hint (What I want to get https://i.ibb.co/jkgTrzT/how-to-create-a-row-of-elements-of-different-width-inside-grid.png)(what I got https://i.ibb.co/p0NkD8K/what-I-got.png)
HTML:
<div class="tags">
food
photography
web design
art
love
business
</div>
CSS:
.tags {
padding: 20px 0;
}
.tags a {
padding: 12px 24px;
font-size: 13px;
text-transform: uppercase;
border: 1px solid rgba(144, 144, 144, .5);
color: black;
margin: 0 15px 15px 0;
display: inline-block;
transition: .5s ease;
}
You need to display the tags in flexbox. When the tags have flex: 1;, they will fill up remaining space.
.tags {
display: flex;
flex-wrap: wrap;
}
.tag {
display: block;
flex: 1;
min-width: something;
white-space: nowrap;
}
If you know what widths to expect in your a elements, you could just use float and clear styles, something like this:
.tags {
width: 270px;
padding: 20 px 0;
}
.tags a {
padding: 12px 24px;
font-size: 13px;
text-transform: uppercase;
border: 1px solid rgba(144, 144, 144, .5);
color: black;
display: inline-block;
transition: .5s ease;
}
.left { float: left; margin: 0 15px 15px 0; }
.right { float: right; margin: 0 15px 15px 0; }
.clear{ clear: both; }
<div class="tags">
<div class="clear">
<div class="left">food</div>
<div class="right">photography</div>
</div>
<div class="clear">
<div class="left">web design</div>
<div class="right">art</div>
</div>
<div class="clear">
<div class="left">love</div>
<div class="right">business</div>
</div>
</div>
I wrote the code below and I was wondering if I could, in any way, make the white space of the body bigger. As of right now, I have the header color #444 and, I thin,k about 130px from the top and the footer is the same color and about 260px from the bottom. In the middle, I have the little tiny white space for the body. Is there any way to open that up with still keeping my header and footer the size they are — just moving the footer down? Then my next problem is that my text in my div tags, in my body will spawn behind my header and/or footer when they are in the body. Is there a way I can limit that so that they will have to spawn between my header and footer in the white space? Thanks for your help and time!
<!doctype html>
<html>
<title>Joes Nose</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<body>
<header>
<div class="zebusoft-logo">
<img src="images/logo-3.png" alt="">
</div>
</header>
<div class="body-text">
<h1>Software Devlopment Company</h1>
</div>
</body>
<footer>
<div class="about-zebu">
<p>About ZebuSoft</p>
</div>
<div class="fast-nav">
<p>Nav</p>
</div>
</footer>
</html>
html, body {
padding: 0;
margin:0;
background: #444;
}
header {
position:fixed;
top:0;
width:100%;
height:102px;
background-color:#222;
padding:20px;
}
footer {
background: #222;
width: 100%;
height: 370px;
bottom: 0;
position: fixed;
}
.zebusoft-logo {
padding: 0;
top: 0;
position: fixed;
margin-left: 400px;
}
.body-text {
font-family: "Museo Sans",sans-serif;
color: #300000;
margin-top: 150px;
text-align: center
}
.about-zebu {
font-family: "Museo Sans",sans-serif;
font-size: 20px;
color: #606060;
font-weight: 300;
padding-bottom: .1em;
margin-bottom: .8em;
margin-right: 1570px;
border-bottom: 1px solid #131313;
margin-left: 120px;
}
.fast-nav {
font-family: "Museo Sans",sans-serif;
font-size: 20px;
color: #606060;
font-weight: 300;
padding-bottom: .1em;
margin-bottom: .9em;
margin-right:;
border-bottom: 1px solid #131313;
margin-left: 390px;
}
jsFiddle
Solution
jsFiddle
Here I made the changes to your HTML, you need to nest footer into the body, I have also made changes to your CSS.
So now your footer will stick to the bottom and if there is overflow of text in the middle it will scroll.
Good luck..
old
I am not 100% sure what you have asked but here is the sample:
jsFiddle
I have added a large paragraph and everything seems to be correct.
I have changed your <div> into a section and used <p> to add text. Tell me what is wrong with the page in the link? Thanks
ADDED CSS
.about-zebu {
font-family: "Museo Sans",sans-serif;
font-size: 20px;
color: #606060;
font-weight: 300;
padding-bottom: .1em;
border-bottom: 1px solid #131313;
width: 75%;
float:left;
}
.fast-nav {
font-family: "Museo Sans",sans-serif;
font-size: 20px;
color: #606060;
font-weight: 300;
padding-bottom: .1em;
border-bottom: 1px solid #131313;
width: 25%;
float:left;
}