I know that title is terribly worded, so hopefully I can explain this clearly.
I am modifying an existing google chrome extension. There is a floating button, defined in a .html file as:
.button
{
display: flex;
color: #fff;
font-size: 12px;
font-family: "Helvetica", "Arial", "sans-serif";
text-align: center;
margin: 0;
width: 35px;
height: 40px;
float: right;
border-radius: 40px 0 0 40px;
box-shadow: 0 1px 5px -1px #333;
cursor: pointer;
opacity: 1;
align-items: center;
justify-content: center;
border-right: none;
background: #fff;
}
On pressing this button, there is the following code in a .js file, which determines what should happen.
$(".button")
.fadeIn()
.click(function()
{
if (color == "black")
{
do this
}else if (color == "orange")
{
do that
}else
{
or even this
}
})
My goal is to display a new popup on top of the website with information, given that color == "orange". I can get do this, do that, and or even this to run, but what I would really like is to escape the selection of .button., so I can hide/show another popup on the screen without removing / changing the button.
Is there any way to do this? I've thoroughly exhausted my knowledge of html, css, and js, I'm really just a beginner...
Related
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!!
I have a button with javascript attached. When you click the button a hidden box will appear, when you click another one, the first box gets replaced with the second and so on. When my button is active, when the box is visible, it gets a shadow around. And i don´t want that! I tried to use the following css codes:
.nav > button{
width: auto;
font-family: 'OpenSansBold';
color: #000;
padding: 3px;
border: none;
margin-right: 10px;
margin-top: 5px;
font-size: 15px;
text-align: left;
background-color: #fff;
}
button:hover{
cursor: pointer;
border: none;
color: #7b1a2c;
}
button:visited{
font-family: 'OpenSansBold';
box-shadow: none;
}
button:active{
box-shadow: none;
}
But with no luck. Is there another CSS code for buttons when its active?
I have no clue about javascript, just copy pasted this thing. Maybe this is something that can be fixed in the js code? Just in case, I can show you guys:
$('div.box').slice(1).addClass('hidden');
$('.nav').children('button').on('click', function(){
// console.log('klikk');
$(this).data('content');
$('.box').not('hidden').addClass('hidden');
$( $(this).data('content')).removeClass('hidden');
});
Maybe you talk about outline property or :focus pseudo-class?
Try this one:
button:active, button:focus {
box-shadow: none;
outline: 0;
}
To give you a working example, play around with the following snippet, I think this behaves like you would want it to.
To completely remove the shadow, just remove the second JS rule.
// :active rules
$('button').on('mousedown', function () {
$(this).css('box-shadow', 'none');
});
// :visited rules
$('button').on('mouseup', function () {
$(this).css('box-shadow', '10px 10px 5px #888888');
});
button {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<body>
<button>test</button>
</body>
I am trying to make an input box that looks like it has a placeholder that says username, but when the box is selected it moves and changes to a darker color to resemble a label. The problem I am having is whenever I hover over the box it will complete the animation but then immediately undo it, putting the text back to look like a placeholder. I also want to make my Javascript/JQuery code so that if the box has any typing in it that the text will stay as a label and not go back to being the placeholder even without being selected. My other problem is that I do not know the JQuery command to tell if an input box is selected or not. I supply all my code below along with a link to CodePen which has the
<div id='inputdiv'>
<input id='textinp'>
</div>
<h4>Username</h4>
#textinp {
border: none;
width: 200px;
height: 30px;
font-size: 20px;
margin-left: 5px;
font-family: 'Roboto', sans-serif;
background: rgba(0, 0, 0, 0);
}
input:focus {
outline: 0;
}
#inputdiv {
width: 200px;
height: 32px;
margin: 0 auto;
margin-top: 70px;
border-top: 1px solid black;
border-right: none;
border-left: 1px solid black;
border-bottom: none;
z-index: -2;
}
h4 {
font-family: 'Roboto', sans-serif;
font-size: 20px;
position: relative;
bottom: 53px;
left: 575px;
color: #C2C2C2;
z-index: -1;
}
$(document).ready(function() {
$("#inputdiv").mouseenter(function() {
$("h4").animate({
left: '470px',
color: '#00000'
});
if ($('#textinp').val() == '') {
$("h4").animate({
left: '580px',
color: '#C2C2C2'
});
}
});
});
CodePen
Try using hover() method instead. As first parameter define function to be executed on hoverIn (on mouse entering), as second - function to be executed on hoverOut (on mouse leaving).
Here's your example updated:
http://codepen.io/anon/pen/LprybQ
In my firefox extension I created a div element and added to it a paragraph with id named myP.
In the css file I wrote:
#myP
{
color: red;
text-align: center;
font-size: 16px;
font-weight: 900;
margin: 7px 7px;
}
but only the first two properties applied to the paragraph.
I tried to set the three others properties in my js code:
myP.style.fontSize = "16px";
myP.style.fontWeight = "900";
myP.style.margin = "7px 7px";
and it worked perfectly.
how can it be?
Maybe there is something else that is overriding your styles, can you inspect it in any way?
Have you tried:
#myP
{
color: red;
text-align: center;
font-size: 16px !important;
font-weight: 900 !important;
margin: 7px 7px !important;
}
I have two divs that are inline. they both have similar styles and importantly both are inline.
JQuery is reporting that their css "display" is block ONLY in chrome. I really need to know that these two are inline.
jsfiddle here
css:
div
{
display: inline;
width: 50%;
float: left;
height: 100px;
text-align: center;
font-weight: bold;
padding: 10px;
box-sizing: border-box;
}
.div1
{
background-color: black;
color: white;
border: 2px solid grey;
}
.div2
{
background-color: white;
color: black;
border: 2px solid black;
}
html:
<div class="div1">1</div>
<div class="div2">2</div>
jQuery:
jQuery("div").click(function()
{
jQuery(this).append("<br/><span>" + jQuery(this).css("display") + "</span>");
});
jQuery("div").click();
Does anyone know what is happening or more importantly what can I do? (other than pull my hair out... its starting to hurt ;) )
As I said in my comment, float: left forces display: block.
Here's the relevant information in the spec:
http://www.w3.org/TR/CSS21/visuren.html#propdef-float
The element generates a block box that
is floated to the left.
And then:
http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
Otherwise, if 'float' has a value
other than 'none', the box is floated
and 'display' is set according to the
table below.
To summarize said table: float = display: block.