I'm trying to figure out how to create up to 4 vertical stripes on the background of a DIV. Each stripe is 4 pixels wide and is the same h=height as the div. Also I need to have the stripes be dynamic. There could be any number of the 4 stripes visible at runtime based on some data in an object.
Here's an image of the general idea.
I've been trying to implement this with css and sass as well as javascript but not making progress. Any help would be greatly appreciated.
Thanks
If I am correctly understanding your question, box-shadow might help you solve this problem. Here is what I have tried,
Initialize a div with some height and width
Now we have psuedo elements :before and :after use it to create strips, i.e 2 strips will appear.
Now, box-shadow comes into picture for every strip you can n number of strips using box-shadow .
Here is my attempt.
.progress{
width:140px;
height:40px;
background-color:white;
border:2px solid black;
}
.progress::after{
content:'';
position:absolute;
width:4px;
height:inherit;
background-color:red;
box-shadow:4px 0 lightgreen
}
.progress::before{
content:'';
position:absolute;
width:4px;
height:inherit;
background-color:blue;
left:18px;
box-shadow:4px 0 pink
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="progress"></div>
</body>
</html>
Hope it helps you.
Related
*To the reader looking from help: Each of the first 4 solutions worked for me, and the suggested question shows potential. I picked Hunsnul Amand's code because it allows for easy expansion of colors in a JavaScript string, and toggles through all three colors mentioned in the problem below. I like the way this sets up the possibility of additional or random colors later. The other three solutions on this page rely on various snippets of JavaScript toggling between additional classes made in CSS. Ranjeep and Keith's snippets use this in very simple and clean code that's easy to follow. Jateen makes use of the .toggle and ++> elements, which are useful as well. His code was also easy to follow. *
Thank You for checking this out. I'm trying to do something that seems like a very basic skill, but am having trouble finding the specific syntax or code that will cause a webpage to repeatedly toggle the background color of a circular div on a click rather than on a button using Vanilla JavaScript. I've tried too many iterations to post here, and received various effects from trying to modify similar projects to my needs, but haven't been able to get the div's background color to toggle.
background: I started with a sample project that lets you cause a div shaped in a circle with a red background to disappear by setting the background color to "none." I'd like to change the code to something that will instead allow a repeated toggle of the circular div's background color between either red to blue, or at least from red to none and back again.
<!-- This document should let you toggle a circle's color between
red and blue using vanilla JavaScript, HTML, and CSS.
The circle is an HTML div shaped and colored in CSS,
and given the toggle function that changes the div's color
in JavaScript.
Biggest need: A JavaScript toggle funciton that alternates
the color of a div when the user clicks on the div.-->
Mini Challenge: Disappearing Circles
minichallenge.html!
<!doctype html>
<html>
<head>
<title>Learning Javascript</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#circle {
width:200px;
height:200px;
border-radius:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="circle"></div>
<script type="text/javascript">
/*original JavaScript Project*/
document.getElementById("circle").onclick=function() {
document.getElementById("circle").style.display="none";
}
/* New JS: Purpose: A JavaScript toggle funciton that alternates
the color of a div when the user clicks on the div.-
var userClick = document.getElementById("circle").onclick=function() {
var noDiv = document.getElementById("circle").style.display="blue";
var redDiv = document.getElementById("circle").style.display="red";
-Pseudocode-:
if userClick
noDiv
else redDiv; */
</script>
</body>
</html>
Thanks Again.
Here is one of many solutions. In your script try this.
let i = 0;
const colors = ["blue", "red", "transparent"];
document.getElementById("circle").onclick = function () {
document.getElementById("circle").style.backgroundColor = colors[i];
i++;
if (i == colors.length) i = 0;
};
This way you can add as many colors as want to the colors array and it will work.
You can create a .bg-none class in you css. Then toggle that class onclick of the element. I have updated the code, please chekc
<style>
.bg-none{
background-color: transparent !important;
}
</style>
<script>
document.getElementById("circle").onclick=function() {
document.getElementById("circle").classList.toggle("bg-none");
}
</script>
Using CSS here, and the classList toggle method is the simplest way.
eg.
document.getElementById("circle").onclick=function() {
document.getElementById("circle").classList.toggle('toggle');
}
#circle {
width:200px;
height:200px;
border-radius:100px;
background-color:red;
}
#circle.toggle {
background-color:blue;
}
<div id="circle"></div>
I have moved your background-color CSS to 2 new classes, which would toggle as you click on the div. I hope this resolved your query.
<!doctype html>
<html>
<head>
<title>Learning Javascript</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#circle {
width:200px;
height:200px;
border-radius:100px;
}
.bg-red {
background-color: red;
}
.bg-blue {
background-color: blue;
}
</style>
</head>
<body>
<div id="circle" class="bg-red"></div>
<script type="text/javascript">
const circleDiv = document.getElementById("circle");
circleDiv.addEventListener('click', () => {
circleDiv.classList.toggle('bg-red');
circleDiv.classList.toggle('bg-blue');
});
</script>
</body>
</html>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I am using Fluid web design taking widths in "Percentages". I also reset all Margins and Paddings to default 0px. There is no border in any div. Still, why be default these are not aligned in same line???
Example:
<html>
<head>
<style>
*{margin:0px;padding:0px;}
div{display:inline-block;}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}
</style>
</head>
<body>
<div class="divOne">One</div>
<div class="divTwo">Two</div>
<div class="divThree">Three</div>
</body>
</html>
Please, someone help me out. How in world is this not aligned in same line. But if I reduce % of any of these to go below 100% (like 98% or less), then these get aligned. But, if there is no margin, no padding. Why is this gap of width required?
You need to add HTML comments between your divs to cancel the whitespace interpreted by the browser :
*{margin:0px;padding:0px;}
div{display:inline-block;}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}
<div class="divOne">One</div><!--
--><div class="divTwo">Two</div><!--
--><div class="divThree">Three</div>
Weird space that inline-blocks give.
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
You can have those three divs in one row to avoid any hacks/tricks.
https://jsfiddle.net/dghkcg04/
<div class="divOne">One</div><div class="divTwo">Two</div><div class="divThree">Three</div>
The browser interprete de div like a white space so doing this to get it:
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
div{
display:inline-block;
margin:0;
padding:0;
}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}
</style>
</head>
<body>
<div class="divOne">One</div><div class="divTwo">Two</div><div class="divThree">Three</div>
</body>
</html>
I have a simple JQuery thing that activates when the page is ready. Two strings would slide down at different times.
The problem is that in the first string, only the first half of the word slides down but the second half is delayed for a split second.
Can someone tell me why?
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The KGV Connection</title>
<script src="../jquery-2.1.1.min.js"></script>
<style>
.header{
background-color:#007B4C;
width:1280px;
height:70px;
position:fixed;
left:0px;
top:0px;
z-index:10;
}
.body{
width:1267px;
position:relative;
left:-12px;
height:1010px;
background-color:#EDF0F5;
top:25px;
z-index:9;
}
.footer{
background-color:#007B4C;
width:1267px;
position:relative;
left:-12px;
height:200px;
top:25px;
z-index:9;
}
.message{
font-family:"MS PGothic";
width:1200px;
font-size:40px;
text-align:center;
position:relative;
left:50px;
color:#333333;
top:200px;
display:none;
}
.congratulations{
position:relative;
font-family:"MS PGothic";
width:300px;
left:450px;
top:200px;
color:#333333;
font-size:60px;
display:none;
}
</style>
</head>
<body>
<div class="header">
<img src="../Pictures/Logo.png" width="291" height="70" />
</div>
<div class="body">
<h1 class="congratulations">Congratulations!</h1>
<p class="message"><b>Your account has been successfully activated!</b></p>
</div>
<script>
$(document).ready(function(e) {
$(".congratulations").slideDown(400);
$(".message").delay(1000).slideDown(400);
});
</script>
<div class="footer"></div>
</body>
</html>
</body>
</html>
It is because the h1 element containing your string "Congratulations!" is smaller than it's rendered text and jQuery apparently applies the animation on the h1 element at first, which crops just a fraction of the string.
Either remove width property of .congratulations class or make it wider than the text.
I suggest you to use "inspect elemnt" tool in your browser to debug strange things like this.
The reason for CONGRATULATIONS to cut out while sliding is because of the width given for .congratulations in CSS.
The first half that slides will be equal to the width that is set. Reducing would keep the first part smaller and increasing would keep it larger.
Keeping the width:100% is the solution to your problem.
hi the problem comes from css class .congratulations
increase to width:500px //this will fix the problem with half word slide
This is pretty wild, slideDown is sliding down only the portion you specified in the width, 300px. The rest is displayed after the slideDown finishes.
Remove width from congratulations CSS class.
i need a way to create a wall made of blocks.
The idea was: i get the informations via php, then i echo them in a div.
Stylesheet
.block{
min-height:100px;
min-width:190px;
background-color:#999;
float:left;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}
.holder{
width:800px;
height:100%;
margin: 0 auto;
}
Here the html:
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class='holder'>
<? *connect to the db*
my_query=mysql_query("SELECT * FROM news");
while($array=mysql_fetch_array(my_query)){
echo "<div class='block' id='block_".$array['id']."'>".$array['text']."<div>";
}
?>
</div>
</body>
</html>
Now, the problem is that obviously the blocks have not the same height nor the same width, and so the float left create horrible margin between the blocks and the right side of the holder.
How they should be
http://img17.imageshack.us/img17/1813/cy44.png
How they display
http://img716.imageshack.us/img716/9703/lnyr.png
Ideas: For the width I could use jquery maybe creating id by echo.
if($('#block_'+id).css('width')>590){$('#block_'+id).css('width','790')}
if($('#block_'+id).css('width')>390){$('#block_'+id).css('width','590')}
if($('#block_'+id).css('width')>190){$('#block_'+id).css('width','390')}
This should do the trick for the width, but what about the height? Should i try to create a function set the absolute position of all the element based on the height of the element that are before?
I not clearly understand your requirement. But you can do one thing set comman class for all elements say '.elements' and once rendered you can get all elements you can all elements like this below commands.
$(document).ready(function(){
$('.elements') // and you do want you want to do.
})
Hungerstar pointed out that already exist Masonry. It did the trick.
I have a question regarding image alignment with CSS. For example I have created a css class as below:
.link {
background: url("images/image1.gif") scroll right;
}
and below is the markup
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<p class="link">This is a link</p>
</head>
<body>
</body>
</html>
When I check in the browser I get the image on the text. I want it after the text i mean
This is a link (this is where I want the image to appear)
Try
.link {
background: url("images/image1.gif") top right no-repeat;
padding-right: 32px; /* or the width of your image */
}
Not sure if I understand right, but assuming you trying to display image right after text ends you might try something like that:
.link {
background: url("images/image1.gif") scroll right;
padding-right: 20px; /* adjust to fit nicely with your design */
}
hope it helps :)
shouldn't it be position right not scroll right?
You can also give the link text some padding to clear the background picture.