I have the following CSS rule
#class {
margin: 4px 5px 6px 7px;
color: red;
}
What I usualy do is
document.getElementById('class').style.margin= '0px';
Then after doing that to reset I go the same step
document.getElementById('class').style.margin= '4px 5px 6px 7px';
How do I disable the margin using JavaScript\JQuery instead of changing the value to 0 then reset it to 4px 5px 6px 7px
The easiest solution here is to use classes, and use jquery or javascript to change the class of the element whenever you want different behavior as on button click in the example I have shown below.
$("#add").click(function() {
$("#exd").addClass('margin');
$("#exd").removeClass('no-margin');
});
$("#rem").click(function() {
$("#exd").removeClass('margin');
$("#exd").addClass('no-margin');
});
.no-margin {
margin: 0px;
}
.margin {
margin: 15px 15px 15px 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="exd">Example Div</div>
<button id="add">Add margin</button>
<button id="rem">Remove margin</button>
Hope this is clear.
Can you make a second class and just add/remove it from your elements?
.margin {
margin: 4px 5px 6px 7px;
color: red;
}
.noMargin {
margin: 0px
color: red;
}
document.getElementById("class").classList.add('margin');
document.getElementById("class").classList.remove('noMargin');
document.getElementById("class").classList.add('noMargin');
document.getElementById("class").classList.remove('margin');
A slight alteration to Scath's answer
.margin {
margin: 4px 5px 6px 7px;
color: red;
}
.margin.noMargin {
margin: 0px;
}
Then all you have to do is add/remove the noMargin class. More specific css rules take precedence.
The other answers are good, just wanted to share another way of doing this. You can keep your base CSS style rule:
#class {
margin: 4px 5px 6px 7px;
color: red;
}
And then add a noMargin class as others have suggested:
.noMargin {
margin: 0; !important
}
And then, use toggleClass to switch it on/off:
document.getElementById('class').classList.toggleClass('noMargin');
The benefit here is that A) only one line of code to on/off the margin, B) only one extra CSS rule, and C) don't have to worry about whether the margin is currently on or off before switching it.
Related
I tried to create a CSS effect button ditto same as below I provide image, (ignore icons) But try but not getting same like results is there any way to create a perfect same CSS button?
[![enter image description here][1]][1]
here is my button code below
of my HTML button
.my-bt{
display:block;
position:relative;
background: linear-gradient(310deg, #dcb7e0, #dbdaef);
padding:10px;
text-align:center;
border-radius:10px;
}
<div class='my-bt'>Hello World</div>
Please Help me to create 101% Same ditto button
[1]: https://i.stack.imgur.com/omwyj.jpg
Can you please check the below code? Hope it will work for you. We have used multiple box-shadow as per your requirements.
Please refer to this link: https://jsfiddle.net/yudizsolutions/ry2sqpue/
for more reference you may use the link also: https://codepen.io/yudizsolutions/pen/mdrKdVa
body {
background-color: #f1f0f5;
}
.my-bt {
background-color: #fff;
box-shadow: 6px 6px 18px 0 #e3deed, -6px -6px 18px 0 rgb(255, 255, 255, 0.5);
margin: 20px 10px;
padding: 25px;
border-radius: 25px;
text-align: center;
}
<div class="my-bt">
Hello World
</div>
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 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/
I have a form where the default values disppear on focus and reappear on blur if the user did not input anything. The color of the text changes to a darker black when the user types in something, and if the textbox goes into blur with user-inputted text.
Problem: I cannot get the font to change to a darker black when the user types something in, or when the textbox goes into blur with user-inputted text without using !important. Did something go wrong that requires me to use !important, or is there a better way?
HTML Code
<div id="splash_register_form">
<input type="text" name="register_first_name" class="splash_register_short_input" title="First Name" />
<input type="text" name="register_last_name" class="splash_register_short_input" title="Last Name" />
<input type="text" name="register_email" class="splash_register_long_input" title="Email" />
<input type="text" name="register_password" class="splash_register_long_input" title="Password" />
</div>
jQuery Code
$(".splash_register_short_input, .splash_register_long_input").each(function() {
$(this).val( $(this).attr('title') );
});
$(".splash_register_short_input, .splash_register_long_input").focus(function() {
if($(this).val() == $(this).attr('title')) {
$(this).val('');
}
});
$(".splash_register_short_input, .splash_register_long_input").blur(function() {
if($(this).val() == '') { // If there is no user input
$(this).val($(this).attr('title'));
$(this).removeClass('splash_register_have_userinput');
} else { // If there is user input
$(this).addClass('splash_register_have_userinput');
}
});
CSS
.splash_register_long_input {
height: 22px;
width: 300px;
padding: 3px 0px 3px 8px;
margin: 0px 1px 2px 0px;
float: left;
font-family: Arial, Sans-Serif;
font-weight: bold;
border: 1px solid #5cb5ee;
}
.splash_register_long_input:focus {
border: 2px solid #5cb5ee;
width: 298px;
height: 20px;
}
.splash_register_short_input{
height: 22px;
width: 144px;
padding: 3px 0px 3px 8px;
margin: 0px 1px 2px 0px;
float: left;
font-family: Arial, Sans-Serif;
font-weight: bold;
border: 1px solid #5cb5ee;
}
.splash_register_short_input:focus {
border: 2px solid #5cb5ee;
width: 142px;
height: 20px;/
}
.splash_register_short_input:focus, .splash_register_long_input:focus {
color: #333 !important;
-webkit-box-shadow:0 0 10px #5cb5ee;
-moz-box-shadow:0 0 10px #5cb5ee;
box-shadow:0 0 10px #5cb5ee;
outline: none; /* prevent chrome from adding border */
}
#splash_register_form input {
color: #AAA;
}
.splash_register_have_userinput {
color: #333 !important;
}
I see what happened. IDs have higher precedence in CSS even if they appear before a class style rule to the same element. You can either leave !important there or change the last rule to this:
#splash_register_form .splash_register_have_userinput {
color: #333 !important;
}
The !important rule provides a way to have the styles you feel are most crucial always applied. A style that has the !important rule will (in most cases) be applied no matter where that rule appears in the CSS document.
Here is one of the solution of your code.
The reason why the input word back to gray because you use id selector #splash_register_form input to apply gray color to blur texts, but class selector .splash_register_have_userinput to apply user input texts.
And cause the id selector's priority is higher the class selector. So while your focus leave the input, the gray color came back and override the class selector.
To solve the situation, you can add a class name to your div (in case you have other divs and inputs at the same page), apply the gray color using class selector, and use more precise selector like input.className to apply the black color.Then you can remove your !important from your code.
I've programmed a PHP/PostgreSQL/Oracle script for internal usage at my work, where links are displayed as light-blue "tags", which can also be hidden by clicking an "x" near them:
This works pretty well sofar and my colleagues are already impressed.
The CSS-appearance for the "tags" I have stolen from Stackoverflow (since my own CSS/JS skills are very limited and also Imitation is the sincerest form of flattery):
a.hide {
color:#3E6D8E;
background-color: #E0EAF1;
border-bottom: 1px solid #3E6D8E;
border-right: 1px solid #7F9FB6;
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
text-decoration: none;
font-size: 90%;
line-height: 2.4;
white-space: nowrap;
}
a.hide:hover {
background-color: #e7540c;
color: #E0EAF1;
border-bottom: 1px solid #A33B08;
border-right: 1px solid #A33B08;
text-decoration: none;
}
a.tag {
color:#3E6D8E;
background-color: #E0EAF1;
border-bottom: 1px solid #3E6D8E;
border-right: 1px solid #7F9FB6;
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
text-decoration: none;
font-size: 90%;
line-height: 2.4;
white-space: nowrap;
}
a.tag:hover {
background-color: #3E6D8E;
color: #E0EAF1;
border-bottom: 1px solid #37607D;
border-right: 1px solid #37607D;
text-decoration: none;
}
Now I would like to enhance my script by few JavaScript lines and make the "tags" disappear in an interesting way, when an "x" near them has been clicked by the user (the links should still work of course). Maybe make them fly up or maybe even explode? Does anybody have an idea here or can share a nice trick?
I'd prefer not to use jQuery, because I haven't learnt it yet.
Thank you and I hope for your creativity :-)
Alex
A pure javascript fadeout effect would be (for non-IE browsers at the moment..)
var hides = document.getElementsByClassName('hide');
for (var i = 0 ; i < hides.length; i++)
{
hides[i].onclick = function(evt){
var el = this.parentNode;
el.style.opacity=1;
var el_timeout = setInterval(function(){
el.style.opacity -= 0.05;
console.log(el.style.opacity);
if (el.style.opacity <= 0.05)
{
el.parentNode.removeChild(el);
clearInterval(el_timeout);
}
},20);
}
}
demo: http://jsfiddle.net/gaby/AkA5C/
I have wrapped the tag and button in a <span></span> so that you can easily target both.
Use jQuery effects. Easy as hell and looks cool
I advise not using flamboyant “explosive” effects in your app, at the end of the day users are use your app because it solves a problem not to get a show. If you must have effects, then use simple effects. If you MUST use such effects then use a different technology like flash.