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>
Related
I want to fire a link if the div around gets clicked.
This is the general logic:
$("div").click(function() {
$("div a").click();
});
div {
background-color: yellow;
padding: 20px;
margin: 10px;
}
div:active {
background-color: blue;
}
div a {
pointer-events: none;
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>London</div>
<div>Paris</div>
<div>Almaty</div>
Unfortunately, it does not work. I think I would need the different href as variable or something like that. For now, probably all links would be fired at the same time, and not only the belonging one.
How is it possible to do that?
Would be thankful for help! <3
If your code would work, you would end up clicking every link that is in side of a div. It is not going to just click the link in the div you are in. So first thing you need to do is select the link in the div you clicked.
After that, you need to trigger click on the DOM element, not the jQuery object. When you trigger it on the jQuery object, it only triggers the click event listeners you bound to it.
$("div").click(function() {
$(this).find("a").get(0).click();
});
div {
background-color: yellow;
padding: 20px;
margin: 10px;
}
div:active {
background-color: blue;
}
div a {
pointer-events: none;
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>London</div>
<div>Paris</div>
<div>Almaty</div>
Or just make the anchor take up the whole div so you do not need JavaScript at all.
div {
background-color: yellow;
margin: 10px;
}
div:active {
background-color: blue;
}
div a {
padding: 20px;
display :block;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>London</div>
<div>Paris</div>
<div>Almaty</div>
You can select the <a> of the clicked div by selecting the first <a> children of the this clicked element.
$("div").click(function() {
$(this).children('a')[0].click();
});
div {
background-color: yellow;
padding: 20px;
margin: 10px;
}
div:active {
background-color: blue;
}
div a {
pointer-events: none;
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>London</div>
<div>Paris</div>
<div>Almaty</div>
Add an event listener to the elements you are clicking, and in the "onclick" callback, select the a element and click it.
Array.from(document.getElementsByTagName("div")).forEach(e=>{
e.addEventListener("click",(el)=>{
el.target.querySelector("a").click()
})
})
Here is what happening. I have a simple button in HTML with a simple action in JS.
Button in HTML:
<button class="btn_open_calc">Open Culculator</button>
Styles in CSS:
.btn_open_calc {
background-color: rgb(232, 209, 237);
width: 200px;
height: 40px;
border-radius: 10px;
font-size: medium;
}
Response in main.js:
var btn_Open_Calc = document.querySelector('.btn_open_calc');
btn_Open_Calc.addEventListener("click", funcOpenCalc);
function funcOpenCalc() {
Modal_Container.style.display = 'flex';
}
But when I press the button here is how it starts to look:
When I press on any other place it disappears. But I want to get rid of it at all so it won't appear.
Add outline: none; or outline: 0;(outline 0 vs none difference) to the button's css to remove the outline.
But as MDN notes,
Accessibility concerns
Assigning outline a value of 0 or none will remove the browser's
default focus style. If an element can be interacted with, it must
have a visible focus indicator. Provide obvious focus styling if the
default focus style is removed.
You can add this to your CSS to get rid of it if you really want.
button:focus {
outline: none;
}
example:
var btn_Open_Calc = document.querySelector('.btn_open_calc');
btn_Open_Calc.addEventListener("click", funcOpenCalc);
function funcOpenCalc(){
Modal_Container.style.display = 'flex';
}
.btn_open_calc{
background-color: rgb(232, 209, 237);
width: 200px; height: 40px;
border-radius: 10px;
font-size: medium;
}
button:focus {
outline: none;
}
<button class="btn_open_calc">Open Culculator</button>
CSS does not support parent selectors, e.g. "select all <p> that contain an <img>".
One solution proposed here is to use jQuery, for example:
$('#parent:has(#child)').addClass('my-special-class');
However, I have a <div> that is periodically updated with new content, and I need to keep reapplying the my-special-class to new elements that match the selector '#parent:has(#child)' inside that <div>.
How could one do that?
I am styling a third-party plugin so I don't have much control over its styling, events and so on.
One solution is to bind the DOMSubtreeModified event on the container div and add your code inside.
$('.container').on("DOMSubtreeModified",function(){
$('.parent:has(.child)').addClass('special-child');
});
// find elements
var parent = $("#parent")
var button = $("button")
// handle click and add class
button.on("click", function() {
const el = '<div class="parent"><p class="child">Hello World</p></div>';
parent.after(el);
})
$(function() {
$('.parent:has(.child)').addClass('special-child');
$('.continer').on("DOMSubtreeModified", function() {
$('.parent:has(.child)').addClass('special-child');
});
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.child {
background: #fff;
border-radius: 4px;
padding: 10px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 4px auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
.special-child {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="continer">
<div class="parent" id="parent">
<p class="child">Hello World</p>
</div>
</div>
<button>Add Child</button>
If you add the following jquery and just one class, it will work like :visited:
$("div.my-div").click(function(){
$(this).addClass("visited");
});
And just add one class to the css:
.visited:hover{
outline: 2px solid orange;
}
If you add this code with the current code of yours, you will get the same functionality as the one for :visited.
Here is a fiddle that I tried on your code:
https://jsfiddle.net/thisisdg/27srmuy6/
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
I want some css code and javascript to my textbox and a button, For First time my button is hide
when my mouse goes to the text box it height should be increased and then i remove my mouse on another place that that increased size should be kept.
when my mouse goes to the textbox a button should be visible and then i remove my mouse on another place that button should be visible.
This is CSS file now i am using, but i want to make some changes for this if i want to get upper things.
#TextBox1 {
background: #FFFFFF;
color: #000000;
height: 30px;
width:510px;
padding: 6px 15px 6px 35px;
border-radius: 5px;
box-shadow: 0 1px 0 #ccc inset;
transition: 500ms all ease;
outline: 0;
}
#TextBox1:hover {
height: 100px;
}
Post button css
#Post {
background: rgb(66, 184, 221); /* this is a light blue */
border-radius: 20px;
}
how to change this css files as i want? I think I need a javascript file also to hide and visible post button
Put the textbox and the post button in one div and use the following CSS.
First HTML
<div class="textBoxWrapper" >
<textarea class="textbox_1" id="TextBox1" ></textarea>
<input type="button" id="post" value="Post me"></input>
</div>
Now the CSS
#TextBox1 {
background: #FFFFFF;
color: #000000;
height: 30px;
width:510px;
padding: 6px 15px 6px 35px;
border-radius: 5px;
box-shadow: 0 1px 0 #ccc inset;
transition: 500ms all ease;
outline: 0;
}
#TextBox1:hover {
height: 100px;
}
#Post {
background: rgb(66, 184, 221); /* this is a light blue */
border-radius: 20px;
display: none;
}
.textBoxWrapper:hover > #Post {
display: block;
}
Pure CSS-solution for question number 2.
For number 1 I would use JavaScript
.TextBox1Large {
height: 100px;
}
<asp:textbox ID="TextBox1" runat="server"></asp:textbox>
<script>
document.getElementById("<%=TextBox1.ClientID %>").addEventListener("mouseover", changeHeightOfTextBox, false);
function changeHeightOfTextBox() {
document.getElementById("<%=TextBox1.ClientID %>").className = "TextBox1Large";
//Delete the event, since it is needed only once.
document.getElementById("<%=TextBox1.ClientID %>").removeEventListener("mouseover", changeHeightOfTextBox, false);
}
</script>
I would say instead of using the css hover try adding a class to the textbox1 when you detect the focus event for the the textbox1 using jquery. Then at the same time use jQuery to make the button visible.
Example code below:
//CSS
#TextBox1Clicked{
Height: 100px;
}
//jQuery
$(document).on('focus', '#TextBox1', function(){
//Show the button
$('#yourButtonId').show();
//Add the css class to the text box to make it taller
$('#TextBox1').addClass('TextBox1Clicked');
});
Resources:
jQuery '.On':
http://api.jquery.com/on/
jQuery 'addClass':
http://api.jquery.com/addclass/