Hello I am working in the following small page, I have two buttons, one to hide a textarea and the other to show it, in fact they work well however I would like to color the buttom called: Hide in green, in order to do it I tried:
<div class="wrapper">
<button class="button buttom2" style="vertical-align:middle" onclick="hide()" background-color= "green"; ><span>Hide</span></button>
</div>
but It doesn't affect the behavior of my button, I would like to appreciate any suggestion to fix the problem, I created the following jsfiddle file to show the problem:
https://jsfiddle.net/12bkgd4q/9/
You are setting background-color= "green"; outside style attribute, you need to put it inside style attribute
<button class="button buttom2" style="vertical-align:middle;background-color:green" onclick="hide()";><span>Hide</span></button>
JSFIDDLE
background-color is a style property, and the colour green is the property-value of that style property; as they're style properties they should be in the style attribute along with the other style(s):
<button class="button buttom2" style="vertical-align:middle; background-color: green;" onclick="hide()"><span>Hide</span></button>
What you may have been trying to use, but mis-remembering, is the old (now obsolete) bgcolor attribute, which would also set the background-color of an element.
flip around background color and the JavaScript call, like this:
style="vertical-align:middle; background-color:green;" onclick="hide();"
OBSERVATIONS:
Declaring inline-style css works, but the best approach is to use external css to separate style from content as well as using unobstrusive javascript to bind events.
SOLUTION:
Change misspelling in "buttom2" to "button2".
Remove inline-styles. (Remove style attribute from buttons tag). Add the desired css properties in your external CSS file.
Remove onclick event from your button tag and add identifiers to your buttons so that you can later bind event listeners with jQuery in a separate JS file.
CODE SNIPPET:
var sTextO = $("#texto");
$("#triggerBtn1").on("click", function() {
sTextO.show();
});
$("#triggerBtn2").on("click", function() {
sTextO.hide();
});
body {
background-color: blue;
}
textarea {
display: block;
margin-left: auto;
margin-right: auto;
}
#out1 {
width: calc(100% - 150px);
text-align: center;
font-style: normal;
font-weight: bold;
font-size: 28px;
white-space: pre;
background-color: black;
padding: 25px;
border: 25px solid navy;
margin: 25px;
box-shadow: 0 8px 16px red;
}
.wrapper {
text-align: center;
}
.button {
display: inline-block;
box-shadow: 0 8px 16px white;
border-radius: 4px;
background-color: red;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 25px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
vertical-align: middle
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: 'ยป';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 28px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.button2 {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea cols="70" rows="15" id="texto"></textarea>
<div id="out1"></div>
<div class="wrapper">
<button id="triggerBtn1" class="button button1"><span>Show</span>
</button>
</div>
<div class="wrapper">
<button id="triggerBtn2" class="button button2"><span>Hide</span>
</button>
</div>
MORE INFO:
JS: Why is using onClick() in HTML a bad practice?
CSS: What's so bad about in-line CSS?
Add this into css
.button2 {
background: green;
}
And there is a typo here -
<button class="button buttom2" style="vertical-align:middle" onclick="hide()" background-color="green" ;><span>Hide</span></button>
Change the classname from "buttom2" to "button2"
The color should be set in the style attribute of the button tag.
<button class="button buttom2" style="vertical-align:middle; background-color:green" onclick="hide()">
https://jsfiddle.net/Lhe768Ld/
Issue was with " " , basically style tag ended just after vertical-align, so it does not recognize the background-color. Include them inside " ".
Hope this would solve your issue:
<button class="button buttom2" style="vertical-align:middle; background-color:green" onclick="hide()"><span>Hide</span></button>
Related
I want to reposition my browse button when the user uploaded a file. This is the sample of how it should really look before and after uploading the file:
Before:
After:
I change the content of my button "Browse file" to "Replace File"
This is my html code.
<div id="uploadModal" class="upload-modal">
<div class="modal-content">
<h2 style="font-size: 24px;">Choose file</h2>
<p>
Choose the csv file containing the data you want to create a forecast for.
</p>
<div class="browse-file">
<div id="filename"></div>
<input type="file" id="file-upload" multiple required />
<label for="file-upload">Browse file</label>
</div>
<div class="options">
<button class="cancel"><h4>Cancel</h4></button>
<button class="proceed"><h4>Proceed</h4></button>
</div>
</div>
</div>
Here is my CSS
.upload-modal {
display: none;
position: fixed;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 34, 2, 0.3);
}
input[type="file"] {
position: absolute;
opacity: 0;
z-index: -1;
}
input + label {
padding: 10px 24px;
background: #D4E8CF;
border-radius: 100px;
position: static;
width: 119px;
height: 40px;
border: none;
cursor: pointer;
z-index: 1;
}
#filename{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
justify-content: left;
align-items: flex-start;
}
What's happening here is that my button moves according to the length of the file so I added max-width but no luck. Thanks!
EDIT: I added css for upload-modal
I'm not sure you need to use absolute positioning for what you want.
You could set div#upload-modal or div.modal-content to position: relative;
and then position the button element with left: or right: or use float: right;
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://developer.mozilla.org/en-US/docs/Web/CSS/float
This alternate version uses CSS's Flexbox and JavaScript's Event Listeners.
It probably doesn't do precisely what you want but should come close enough that reading through the comments a few times and playing around with the code should make clear how you can get to where you want to go using just a few lines of JavaScript to grab the file name and show it on the screen.
MDN (linked above) is a great place to get more clarity about any particular front-end feature that you're interested in using. Happy coding!
// Unnamed function runs as soon as the DOM elements are ready
window.addEventListener('DOMContentLoaded', () => {
// Identifies some of the DOM elements
const
filenameSpan = document.getElementById("filename-span"),
fileInput = document.getElementById("file-input"),
chooseBtn = document.getElementById("choose-btn");
// When the input changes (when a file is chosen), calls `updateDisplay`
fileInput.addEventListener("change", updateDisplay);
// Defines `updateDisplay`
function updateDisplay(){
// Puts first fiename in span and "unhides" it
const filename = fileInput.files[0]?.name;
filenameSpan.textContent = filename || "(choose file)";
filenameSpan.classList.remove("hidden");
};
});
*{
margin: 0;
}
#container{
width: 18rem; /* "rem" unit is the base character height */
padding: 2rem;
border-radius: 1.5rem;
background-color: lightgrey;
}
#header{
margin-bottom: 2rem;
}
#chooser{
/* flex w/ space-around makes choose-btn shift right when filename appears */
display: flex;
justify-content: space-around;
margin-bottom: 4rem;
}
#options{
text-align: right;
}
#filename-span{
padding: 1rem 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 6rem;
}
button{ /* the "options" buttons */
border: none;
font-weight: bold;
color: darkgreen;
background-color: lightgrey;
}
#choose-btn{
/* Not a true "button" element -- the "label" for file-input */
padding: 1rem 1.5rem;
background-color: darkseagreen;
border-radius: 2rem;
border: none;
font-weight: bold;
}
.hidden{ /* Uses a class so all styling happens thru CSS */
display: none;
}
<div id="container">
<div id="header">
<h2>Choose file</h2>
<p> Choose the csv file containing the data you want to create a forecast for</p>
</div>
<div id="chooser">
<!-- The span and input elements are initially "hidden" via CSS -->
<span id="filename-span" class="hidden"></span>
<label id="choose-btn">
<!-- input element is inside its stylable & clickable label -->
Browse File
<input id="file-input" type="file" class="hidden" />
</label>
</div>
<div id="options">
<button id="cancel-btn">Cancel</button>
<button id="proceed-btn">Proceed</button>
</div>
</div>
I use CSS to show and hide tooltips when I hover over them. Now I need this to work for mobile devices with a click function. I got the first tooltip running through toggling a class via Javascript. How can I apply that function for all tooltips now? I have around 30 to 40. Any idea how I can achieve my goal?
document.getElementById("website-tooltip-container").addEventListener("click", function() {
var element = document.getElementById("test");
element.classList.toggle("website-tooltiptext-visible");
});
/* Tooltip Container */
.website-tooltip {
position: relative;
display: flex;
justify-content: center;
cursor: pointer;
font-family: Roboto;
font-size: 18px;
font-weight: 400;
color: #666;
}
/* Tooltip text */
.website-tooltip .website-tooltiptext {
visibility: hidden;
max-width: 350px;
font-family: open sans;
font-size: 13px;
line-height: 22px;
background-color: #FFFFFF;
color: #666;
text-align: left;
padding: 11px 15px 11px 15px !important;
border-radius: 3px;
box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: 100%;
margin: 0px 0px 0px 0px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.website-tooltip:hover .website-tooltiptext {
visibility: visible;
}
/* Hide when hovering over tooltip div */
div.website-tooltiptext:hover {
display: none;
}
/* Toggle this class to show Tooltip on click via Javascript */
.website-tooltiptext-visible {
visibility: visible !important;
display: block !important;
}
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
Thanks for your help!
use an extra class.
add this to your css:
.website-tooltiptext-visible {
visibility: visible !important;
}
and replace this class inside your js code:
element.classList.toggle("website-tooltiptext-visible");
PS: NEVER use same id for multiple HTML elements. like ever!
EDIT: use below javascript code to select by class
Array.from(document.getElementsByClassName("website-tooltiptext")).forEach(
(element) => {
element.addEventListener("click", () => {
element.classList.toggle("website-tooltiptext-visible");
});
}
);
The below scenario is not woking in IE.
Styles:
.tabmenu {
background-color: #990000;
display: inline-block;
width: 150px;
position: relative;
left: 59%;
border-top-left-radius: 10em;
margin-bottom: -8px;
min-width: 75px;
max-width: 150px;
font-size: 13px;
font-weight: bold;
font-style: normal;
font-family: Arial;
border: none;
padding: 5px 5px;
height: auto !important;
cursor: pointer !important;
color: #ffffff !important;
text-align: center;
}
In .cshtml file
<div class="tabmenu" style="width:100px;" onclick="btnCommonOnClick()" id="btnCommon">Common</div>
<div class="tabmenu" style="background-color:#999999!important;" onclick="EquipmentSpecificOnClick(1)" id="btnEquipment">Specific</div>
<div class="tabmenu" style="background-color:#999999!important;width:100px;" onclick=" btnUnassignedonClick(this)" id="btnUnassigned">Unassigned</div>
<div class="tabmenu" style="background-color:#999999!important;width:100px;" onclick="OrphanOnClick()" id="btnOrphan">Orphan</div>
First load the background colors are looking fine. When I click on any other div, change the background color of that div. For that purpose, I have given the code:
$("#btnCommon").css("background-color","#999999 !important");//grey
$("#btnEquipment").css("background-color","#999999 !important");//grey
$('#btnOrphan').css("backgroundColor","#999999!important");//grey
$('#btnUnassigned').css("backgroundColor","#990000!important");//red
Above code is not working in IE. The div color is not changed as red. still in grey.
Any solution?
Can confirm with IE Edge,with the inline background-color:#999999!important the css does not get overridden.
If you remove the !important declarations it will work fine.
I added to an html page:
<div class="tabmenu" style="background-color:#999999!important;width:100px;" onclick="OrphanOnClick()" id="btnOrphan">Orphan</div>
and ran in the developer console:
$('#btnOrphan').css("backgroundColor","#990000!important");
But the background color did not change.
When changing the html to:
<div class="tabmenu" style="background-color:#999999;width:100px;" onclick="OrphanOnClick()" id="btnOrphan">Orphan</div>
and running:
$('#btnOrphan').css("backgroundColor","#990000");
the background color changes.
If you need to keep the !important declarations you can try defining two css classes:
.bg-gray {background-color:#999999 !important;}
.bg-red{background-color:#990000 !important;}
and markup your HTML like this:
<div class="tabmenu bg-gray" style="width:100px;" onclick="OrphanOnClick()" id="btnOrphan">
And to change the colors in your click handlers:
$('#btnOrphan').removeClass("bg-gray").addClass("bg-red");
Im looking for something like this
There is a small description ($10 USD ) given for the button. Can anyone help me how to create one?
I have an anchor button like this.Can any one help me create such a description using css?
<a style="float:right" class="iframe button pink" href="">Pay Now</a>
this is the fiddle
http://jsfiddle.net/wLmbw/
If it's static content you could add a small container via a :before element.
.button.pink{
position: relative;
}
.button.pink:before{
position: absolute;
left: -90%;
top: 0;
display: block;
padding: 10px;
width: 30px;
height: 10px;
content: "$10";
background: #6FCC49;
border: 1px solid #679500;
color: white;
text-shadow: 1px 1px 0 #679500;
border-radius: 5px;
text-align: center;
}
http://jsfiddle.net/etasf/2/
This could probably be cleaned up - this was just my quick run at it.
add another html element like the picture on the left,
position it using css
and use javacsript to populate the right value
i'm guessing you know how to style an div, or span, element. Place it right next to the button and set it to css.display:none. And when the user hovers over the button, then set it to css.display:block using javascript...
You might want something along these lines:
HTML:
<a style="float:right" class="iframe button pink" href="">
<span class="label">10 USD</span>Pay Now</a>
CSS
.pink{
position:relative;
}
.label
{
box-sizing:border-box;
text-align:center;
position:absolute;
right:105%;
bottom: -1px;
padding-bottom:5px;
padding-top:5px;
display:inline-block;
width: 50px;
height: 18px;
background-color:pink;
border-radius:5px;
border:1px solid black;
}
JSFiddle
I'm trying to create a expnd divs when user mouse over with Jquery and CSS.
My jsFiddle works great into Opera Browser but into Chrome when i hover the box "B" and return to box "A" this is overlaped by the box "B". How to solve it?. Here's my code block:
HTML:
<div id="box">
<div class="inner" id="01">
<a href="#" class="block">
<span id="s01" class="s01">A</span>
</a>
</div>
<div class="inner" id="02">
<a href="#" class="block">
<span id="s02" class="s01">B</span>
</a>
</div>
</div>
CSS:
body {
background-color:navy;
}
#box {
height: 92px;
_height: 92px;
width: 290px;
_width: 270px;
float: left;
margin-left: 9px;
margin-top: 48px;
margin-bottom: 31px;
margin-right: 26px;
background-color: #FFF;
_overflow:hidden;
}
.inner {
height: 90px;
width: 141.6px;
_width: 121.6px;
background-color: #FFFFFF;
float: left;
padding-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #2DA2A8;
cursor: pointer;
z-index:0;
}
.s01 {
text-align: center;
display: block;
height:100%;
cursor: pointer;
padding-top: 36px;
}
.block {
color:#399;
}
JS:
$(document).ready(function(){
$("#01").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#01").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
$("#02").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#02").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
});
Probably the neatest way to solve this is to add position:relative to the divs, this will enable z-index to work.
If you don't do this, the divs are defaulted to position:static which ignores z-index, see: Why is z-index ignored with position:static?
There is more information here, which explains why it works in Opera but not Chrome: http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/
position:absolute would work as well if you wanted to use that instead, but you would need to specify exactly where you want the divs to be placed.
Updated your fiddle: http://jsfiddle.net/ua444/1/
You already had a class on those divs so the only change is:
.inner {
position: relative;
}
I've forked and updated your fiddle.
The z-index and relative positioning should work:
http://jsfiddle.net/robertp/y48BD/
I removed the z-index manipulation from the JavaScript and used :hover state to change the z-index instead:
.inner {
...
position: relative;
}
.inner:hover {
z-index: 1;
}
I hope this is something you've been after.