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.
Related
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.
I have a transparent dropdown select with down arrow. The problem is that the arrow is always the same position from the text no matter if the text is short or long like this:
As you can see above there is a big gap between text and the arrow but it has to be for a longer text to fit. (it doesn't look good)
I'd like to have this done in two ways (it depends on which side of the website I'll have the select box):
1) Auto move the arrow to left like always 7px from the text (no matter if the text is short or long).
2) Auto move the text to right like 7px always from the arrow (no matter if the text is short or long).
So, this is my code (better view under this link):
HTML:
<div class="dropDownArrow"></div>
<select class="selectClass">
<option>short</option>
<option>very long text</option>
<option>long test</option>
</select>
CSS:
.dropDownArrow {position: absolute; left: 140px; top: 20px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #7c7c7c;}
.selectClass {-webkit-appearance: none; -webkit-border-radius: 0; -moz-appearance: none; border: none; background: transparent; height: 30px; width: 140px; font-size: 18px; padding-left: 80px; position: absolute; color: #7c7c7c; outline: none;}
select option {background: #EFEFEF; color:#7c7c7c;}
select:-moz-focusring {color: transparent; text-shadow: 0 0 0 #7c7c7c;}
How to fix the code? the best would be to use only CSS but I'm not sure if it's possible without JS (or jQuery).
.dropDownArrow {position: absolute; left: 140px; top: 20px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #7c7c7c;}
.selectClass {-webkit-appearance: none; -webkit-border-radius: 0; -moz-appearance: none; border: none; background: transparent; height: 30px; width: 140px; font-size: 18px; padding-left: 0px; position: absolute; color: #7c7c7c; outline: none;}
select option {background: #EFEFEF; color:#7c7c7c;}
select:-moz-focusring {color: transparent; text-shadow: 0 0 0 #7c7c7c;}
<div class="dropDownArrow"></div>
<select class="selectClass">
<option>short</option>
<option>very long text</option>
<option>long test</option>
</select>
(I would comment, but I'm too low on points)
You should ask yourself if this dynamic width is really needed. It's not what users are used to, and might lower the user experience.
I don't believe it is posible with CSS. For most cases you can CSS pseudo elements, like :before, but that doesn't work for <select>.
Here's a "quick 'n dirty fiddle" giving you an example with JS:
$(function() {
$(".selectClass").on("change", function() {
var $this = $(this);
var $arrow = $("#dropDownArrow1");
var dynamicWidth = $this.val().length * 10; // May work for most cases or not
var dropdownArrowStaticArmLength = -8;
if (dynamicWidth <= 50) // one of the "not"s
dynamicWidth = 65;
$this.css("width", dynamicWidth + "px");
$arrow.css("left", dynamicWidth + dropdownArrowStaticArmLength + "px");
});
$(".selectClass").change();
});
There's some pitfalls with the length of the text vs the box width - this is no production code, just an example.
Better ways could be making "your own select box" with a combination of JS and CSS. Google custom select to get some ideas. Good luck!
I am adding a class to an image.
.bbbLink img {
outline: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 10px;
background: #f0f0f0;
}
On hover I add this,
.bbbLink img:hover {
background-color: rgba(0, 0, 0, 0.1);
outline: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 10px;
background: #f0f0f0;
}
For active I am doing this,
.bbbLink img:active {
outline: 1px solid #111 !important;
border-top: 1px solid #555 !important;
padding: 10px !important;
background: #333 !important;
}
Since I am adding the active class to an image and you cannot do this because it is a self closing element I am using jquery to handle adding the active state like this,
<script>
(function($) {
$('.bbbLink').click(function() {
$(this).toggleClass('active');
});
})( jQuery );
</script>
Everything works perfectly, even when checking the dom after clicking the element my active class appears.
<a id="wrapbbb" class="bbbLink active" href="img.jpg" target="_blank">
<img src="content/uploads/-2-018.jpg" alt="BBB">
</a>
The problem is that when I press the mouse down and click, active state shows and the styling takes effect but when I release the click the active state styling goes away...
The active class is still in the dom but the styling effects revert back to the class without the active state.
Why is this happening?
Er... You need to give CSS like this:
.bbbLink img.active {
When you have :active, it is a state, active / mousedown state, not a class. Hope this is not a typo.
Adding what seems to be an innocuous class to an element having a class containing :first-letter causes the first letter, under some circumstances, to be rendered incorrectly. An element originally has class "unindent", and then class "menuitemon" is added. The fiddle http://jsfiddle.net/pgf3reyt/4/ shows this working on one element, and not working on another. Works OK in Firefox.
p.unindent {
color: #555555;
background-color: #e6e6e6;
border-bottom: 1px solid #d3d3d3;
border-left: 1px solid rgba(0,0,0,0); /* so things are the same size so we don't develop scroll bars*/
border-right: 1px solid rgba(0,0,0,0);
border-top: 1px solid rgba(0,0,0,0);
padding-top: 2px;
padding-bottom: 2px;
padding-left: 25px;
padding-right: 5px;
margin-top: 0;
margin-bottom: 0;
}
p.unindent:first-letter {
margin-left: -20px;
}
p.unindent.menuitemon {
color: #e6e6e6;
background: #555555;
border: 1px solid #222222;
border-radius: 4px;
}
Can someone point out what I might be doing wrong that's causing this?
You've done nothing wrong. Apparently Chrome has decided that for version 41, it'll screw up repainting the :first-letter pseudo-element (incidentally, Chrome is notorious for repaint bugs). If you declare the "menuitemon" class in the markup, it has no trouble rendering the pseudo-element with the negative margin. It's only when you add it dynamically that it screws up.
Fortunately, unlike the cascade resolution bug that affected Chrome 39 -> 40, I was able to work around this very trivially by using a negative text-indent on the element instead of a negative margin on :first-letter:
p.unindent {
text-indent: -20px;
/* ... */
}
/*
p.unindent:first-letter {
margin-left: -20px;
}
*/
The pseudo element (:first-letter) only works if the parent element is a block container box (in other words, it doesn't work on the first letter of display: inline; elements.)
You must set pseudo's parent to
.parent {display:block}
.menutitle {
/* font-size: 1.2em; */
font-weight: bold;
/* font-style: italic; */
margin-left: 0;
}
the moment i commented those two lines it worked properly
EDIT
nop it only solved half the problem
Codepen
Hi im a pretty new coder using flippy.js and when my navigation button is clicked i want the div to flip but stay the same color/opacity once the flip has been executed but have new content within it(already achieved that), so it begins the flip fine, but then dissappears midway, i have tried a few different methods like onfinish, content, that i have found on stack overflow but cant seem to find the solution to my issue any help would be greatly appreciated.
Thanks
CODE:
function about(){
$(document).ready(function() {
$(".flipbox").flippy({
color_target : "rgba(66,66,66,.6)",
direction : "LEFT",
duration : "750",
verso : function(){$(".flipbox").load("hello.html")},
});
});
}
HTML:
<div class="flipbox">
</div>
CSS:
.flipbox{
width: 760px;
height: 460px;
margin:auto;
background-color:#666;
opacity: 0.6;
position:relative;
border: .3px solid black;
-moz-box-shadow: 3px 3px 2px 2px #ccc;
-webkit-box-shadow: 3px 3px 2px 2px #ccc;
box-shadow: 3px 3px 2px 2px #ccc;
}