We Keep Coding

CSS to create a outline transition from right to left? [closed]

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 1 year ago.
Improve this question
I have one search field. When click on on that field (focused), it should provide solid blue colored outline and while forming this outline, it should transition from right to left as provided in the image.

I've made a solution that uses a little more HTML...
.text-input {
margin: 3px;
width: 200px;
}
.parent-border{
background-color: blue;
width: 215px;
border-radius: 6px;
}
.border {
background-color: white;
width: 100%;
transition: 0.5s;
border-radius: 5px;
}
.border:focus-within{
width: 0%;
}
*:focus {
outline: none;
}
<div class="parent-border">
<div class="border">
<input class="text-input"></input>
</div>
</div>

How to make a progress bar with image [closed]

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 2 years ago.
Improve this question
I'm going to make a progress bar.
When it's 0%, you can't see anything. From 1%, I would like to put a flag on the progress bar and let you know how far it has progressed. At 100 percent, this flag disappears. This flag is in image form and I don't know how to code it. Progress is received in JavaScript. Should I write position:relative, position:absolute in the div container?

.progressbar {
width: 100%;
border: 1px solid black;
border-radius: 5px;
height: 24px;
}
.icon {
width: 24px;
height: 24px;
position: absolute;
right: -12px;
opacity: .5;
}
.progress {
width: 50%;
background-color: green;
position: relative;
height: 24px;
}
<div class="progressbar">
<div class="progress">
<img class="icon" src="https://loremicon.com/ngon/128/128/811932708408/jpg">
</div>
</div>
Here's the gist. Style as you please.

Change List Item Color When Checkbox is Selected in Contact Form 7

I've been wracking my brain about this problem for a few days now. I'm working on a wordpress site that uses Contact Form 7 (CF7). Basically, I'm trying to change have each list item change color when the checkbox is selected.
This topic has been my main inspiration so far: https://www.sitepoint.com/community/t/on-click-of-check-box-my-div-border-and-text-color-should-be-in-blue/276230/3
But I'm unsure of how to get the code to work within the CF7 editor (I've tried the support forums in that plugin, but no one answered me there haha).
Relevant code in CF7:
<span onclick="UpdateFeatures(this,false);"> [checkbox* InterestsAndGoals id:getStartedInterestsAndGoals use_label_element "Growth" "Marketing Exposure" "Increase in overall traffic" "Edge over your competition" "Increase in low season traffic"]</span>
Javascript used in CF7:
<script>
function UpdateFeatures(checkbox) {
console.log(document.querySelector(".wpcf7-list-item"));
document.querySelector(".wpcf7-list-item").classList.remove("changeColor");
if (checkbox.checked) {
document.querySelector(".wpcf7-list-item").classList.add("changeColor");
}
}
</script>
CSS:
#getStartedInterestsAndGoals input[type=checkbox] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
span.wpcf7-list-item {
display: inline-block;
margin: 0 0 15px 0;
}
.wpcf7-list-item {
margin: 0 0 20px 1em;
border: 1px solid #f26922;
border-radius: 40px;
text-transform: uppercase;
font-size: 16px;
padding: 10px;
width: 100%;
}
.wpcf7-list-item:hover {
background-color: #f26922;
border-color: #333333;
color: #ffffff;
}
.changeColor {
background-color: #f26922;
border-color: #333333;
color: #ffffff;
}
JSFiddle to demonstrate code made from CF7:
https://jsfiddle.net/p9wrdsmo/1/
Any help with this would be greatly appreciated! I'm not very good at JavaScript and would have preferred pure HTML/CSS, but I don't believe it's possible.
Thank you!!

Display a one-time button only [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I couldn't get this right. I'm doing my business website for our project this coming finals. What I wanted to do is that when the user clicks the homepage for the first time (home.html), it will load a centered button on the middle of the page and the main content is opaque. I tried an IF statement for JS but I couldn't get the logic. Everytime I click the homepage, it continues to load the button. I just wanted it to load once whenever the home.html file is opened.
<style>
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 3%;
margin-bottom: 0;
font-size: 13px;
}
ul#features li::before {
content: "\2713 "; /* inserts a check mark */
color: green;
font-weight: bold;
font-size: 14px;
}
ul#features {
list-style-type: none;
}
#textOpener {
display:none;
position: absolute;
/* all four properties tries to center the button in the middle */
top: 40%;
bottom: 40%;
left: 40%;
right: 40%;
}
div#mainContent {
opacity: 0.2;
visibility: visible;
background-color: gray;
}
</style>
</head>
<body>
<script>
if(!localStorage["firstLoad"]) {
document.getElementById("textOpener").style.display = "block";
localStorage["firstLoad"] = true;
}
</script>
<p id="textOpener">Proceed to site</p> <!-- this would show up first before the rest of the content -->
<div id="mainContent">
jsfiddle

Here's how you could do it with localStorage:
if(!localStorage["firstLoad"]) {
document.getElementById("textOpener").style.display = "block";
localStorage["firstLoad"] = true;
}
In the CSS set display:none; on the textOpener div:
#textOpener {
display:none;
position: absolute;
/* all four properties tries to center the button in the middle */
top: 40%;
bottom: 40%;
left: 40%;
right: 40%;
}
This code checks to see if there's a key called firstLoad in localStorage, if there's not, then the button is displayed and the key is created(so that the next time the person visits the site, providing they haven't cleared their cache, the code that displays the button will not fire).
JSFiddle

Well, the script is executed before the dom is ready.
$(document).ready(function(){
//do your code here.
})
Otherwise, document.getElementById("textOpener") returns nothing.

bad display in Chrome [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have problem with position of element in Chrome.
Site: http://isedo.pl/projekty/gladness/
Navigation to slider with team running down. But when click on link in header and other link on site presses the element at a good place.
In Firefox is OK.
#edit
slider + navigate code: http://pastebin.com/ckPUeBaG
css:
#teamSlider{
margin: 20px 0 0 0;
float: left;
}
#snav{
float: right;
width: 35px;
height: 250px;
background: #818181;
margin: 20px 0 0 0;
}
#snavl{
background: url('../images/cnav_left.png') no-repeat top left;
height: 48px;
width: 35px;
cursor: pointer;
}
#snavr{
background: url('../images/cnav_right.png') no-repeat top left;
height: 48px;
width: 35px;
cursor: pointer;
}

.teamSlider is too big. It has a width of 3800px. This doesn't leave any room for .snav. I would make a container and then set the position of .snav absolutely.