I have slide toggle animation effect for a toast message, toast message have box-shadow in CSS, but whenever the toggle happens box-shadow looks weird and back to normal when the slide completes
HTML
<div class="alert-toaster" style="display: none;">Add to Playlist</div>
<button id="toggle">
Toggle
</button>
CSS:
.alert-toaster {
width:150px !important;
height:40px !important;
height:auto;
position:absolute;
right:2%;
background-color: #C9234C;
color: #F0F0F0;
padding:10px;
text-align:center;
border-radius: 20px 0 0 20px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75) !important;
-moz-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75) !important;
box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75) !important;
}
JS
$(document).ready(function() {
$("#toggle").click(function(){
$(".alert-toaster").show("slide", {direction:"right"}, 500 );
setTimeout(function(){
$(".alert-toaster").hide("slide", {direction:"right"}, 500 );
},2000);
});
});
Fiddle example
It looks very weird to me, any suggestion?
Just add margin: 10px 0 10px 10px; to create enough space for your label.
.alert-toaster {
width:150px !important;
height:40px !important;
height:auto;
position:absolute;
right:2%;
background-color: #C9234C;
color: #F0F0F0;
padding:10px;
text-align:center;
border-radius: 20px 0 0 20px;
box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75) !important;
margin: 10px 0 10px 10px;
}
https://jsfiddle.net/mrwsgs58/3/
Managed to fix it with a small css rule.
.ui-effects-wrapper {
overflow: visible !important;
}
JQuery wraps your element with a div to which it applies an overflow: hidden during the animation.
Maybe you can find an option to avoid that.
EDIT:
It might not be the best solution though. You'll have some bad side effects with this.
Try to add a wrapper yourself, to which you add the drop-shadow. Still animate the inside div.
Here's a solution https://jsfiddle.net/xfn1j9hs/ without using jquery for the animation, but CSS only.
Related
I have attempted to set the width of a NoUiSlider
via the css:
.noUi-horizontal .noUi-handle {
width:8px;
height:25px;
left: 0px;
top: -8px;
border: 0px solid #000000;
border-radius: 0px;
background: #000;
cursor: default;
box-shadow: none; /*inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;*/ }
.noUi-handle {
left:0px; }
.noUi-active {
box-shadow: none /*inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;*/ }
.noUi-handle:before, .noUi-handle:after {
content: "";
display: block;
position: absolute;
height: 14px;
width: 0px;
background: #000000;
left: 14px;
top: 6px; }
.noUi-handle:after {
left: 0px; }
Thought this does give me the narrow handle that I want, the handle no longer covers the
transition in the track between white and green,
but rather that transition is exposed, unlike
when you don't change the handle width.
One of the complications of using nouislider is getting a complete answer.
I've made one below incorporating lg102's response, and added a few things
to make it more obvious. I needed to use !important in the CSS to make
some properties take effect.
Something like this example would make a good addition to
nouislider's website doc, which is already way better
than the average doc for a JS library.
<head>
<script type="text/javascript" src="nouislider.js"></script>
<link href="nouislider.css" rel="stylesheet">
<script>
function init(){
noUiSlider.create(slider_id, {
start: [25, 75],
connect: [false, true, false],
range: {
'min': 0,
'max': 100
}
})
}
</script>
<style>
.noUi-handle {
width: 10px !important;
right: -5px !important; /* must be (width / 2) * -1 */
background: #AA00AA;
}
</style>
</head>
<body onload="init()" >
<h3>slide test1</h3>
<div id="slider_id" style="width:300px;height:20px;"/>
</body>
You are setting the left value for .noUi-handle to 0. The default CSS for LTR sliders looks like this:
.noUi-handle {
width: 34px;
height: 28px;
left: auto;
right: -17px; /* The 17 here is half of the 34 width. The - pulls it in the other direction */
top: -6px;
}
Since you are changing the width to 8, you should set the right (or left, depending on the page orientation) to -4 (8/2).
The minimum changes to make are adding:
width: 10px;
right: -5px;
You can try this out in the documentation:
I am making a zoomable div, when a user hovers over one of the divs then that specific div zooms, this currently works...
My issue is mainly with Safari when using CSS zoom, all of the contents within the div jump, at first it scales nicely and then the contents jump down to their original size, this issue does not occur in either Firefox and Chrome.
Here is my css of the main zoomable div :
MAIN DIV
width:740px;
height:150px;
padding:10px;
background-color:#fff;
border:1px solid #ccc;
margin: 0 auto;
left:0;
right:0;
position: relative;
margin-bottom:10px;
transition:100ms;
font-family: Rubik;
MAIN DIV HOVER
border:1px solid #aaa;
-webkit-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
transition:100ms;
cursor:pointer;
zoom:102%;
-ms-zoom: 1.02;
-webkit-zoom: 1.02;
-moz-transform: scale(1.02,1.02);
transition: 250ms;
I have made a JS fiddle to show the issue, the contents are messed up and this would normally be PHP generated, you can see the issue though when you hover over the wrapper using safari, with firefox the hover zoom effect is perfect and with chrome the content zooms however there is no transition. Thanks for any help
https://jsfiddle.net/04t5psbu/
Please understand, this is not an issue with making the div zoom... that works, my problem is with the content within the div, as you hover over the div all content within the div zooms together, this works perfectly in firefox, please check the fiddle using safari
Use transform instead of zoom. Remove extraneous curly braces { / } from HTML.
#coupon:hover {
border:1px solid #aaa;
-webkit-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
transition:100ms;
cursor:pointer;
-webkit-transform: scale(1.02,1.02);
-moz-transform: scale(1.02,1.02);
transition: 250ms;
}
You have simply forgot to add -webkit-transform: scale(1.02,1.02);, which is the web browser engine to use for Safari.
Here is the working fiddle.
I'm using ouwl carousel for the home page carousel.
here you have the example
The problem is the white border created on the bottom and the right parts.
I've read that applying: display:block; line-height:0;
but nothing worked
here you have a fiddle (it works fine sometimes, no border (i don't know why)) with only the carousel, for testing if you want.
Move the window size of the result for better experience with the carousel images.
I'm aplying the shadow to the div converted to carousel:
#carousel{
position: relative;
width: 100%;
box-sizing:border-box;
background-size: 100%;
height: auto;
display: block;
text-align: center;
margin-top: 5px;
line-height: 0;
-webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,.4);
-moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,.4);
box-shadow: 4px 4px 2px 0px rgba(0,0,0,.4);
}
You can try to give the .owl-wrapper-outer the box-shadow (only works if your images are the same size).
If your images are smaller, then give the images a box-shadow and .owl-item a padding, if the box-shadow is cut off.
I want to remove the Blue glow of the textbox and the border, but i don't know how to override any of the js or the css of it, check Here
EDIT 1
I want to do this because i am using the jquery plugin Tag-it and i am using twitter bootstrap also, the plugin uses a hidden textField to add the tags, but when i am using twitter bootstrap it appears as a textbox with glow inside a textbox which is a little bit odd
.simplebox {
outline: none;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
You can also override the default Bootstrap setting to use your own colors
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}
input.simplebox:focus {
border: solid 1px #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: none;
-moz-transition: none;
-webkit-transition: none;
}
sets to bootstrap unfocused style
After doing some digging, I think they changed it in the latest bootstrap. The below code worked for me, its not simple box its form-control that I was using that was causing the issue.
input.form-control,input.form-control:focus {
border:none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-moz-transition: none;
-webkit-transition: none;
}
if you think you can't handle the css class then simply add style to the textfield
<input type="text" style="outline:none; box-shadow:none;">
Go to Customize Bootstrap, look for #input-border-focus, enter your desired color code, scroll down and click "Compile and Download".
this will remove the border and the focus blue shadow.
input.simplebox,input.simplebox:focus {
border:none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-moz-transition: none;
-webkit-transition: none;
}
http://jsfiddle.net/pE5mQ/64/
On bootstrap 3 there is a small top shodow on ios, could be removed with this:
input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
-webkit-appearance: caret;
-moz-appearance: caret; /* mobile firefox too! */
}
Got it from here
Vendor prefixes aren't necessary at this point, unless you're supporting legacy browsers, and you could simplify your selectors by just referring to all inputs rather than each of the individual types.
input:focus,
textarea:focus,
select:focus {
outline: 0;
box-shadow: none;
}
HTML
<input type="text" class="form-control shadow-none">
CSS
input:focus{
border: 1px solid #ccc
}
.form-control:focus {
box-shadow: 0 0 0 0.2rem rgba(103, 250, 34, 0.25);
}
So far none of the answers helped me out in this thread. What solved it for me was
/*Shadow after focus - Overwrites bootstrap5 style for btn classes*/
.btn-check:focus + .btn-primary,
.btn-primary:focus {
box-shadow: 0 0 7px 7px rgba(4,220,93,255);
}
/*Shadow while clicking (Animation) - Overwrites bootstrap5 style for btn classes*/
.btn-check:active + .btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 .25rem rgba(10, 102, 37, 0.493);
}
trying to make an input box do the following: normal sate the input box text is x, hover state the input text is y and was you leave the box its z and can stay z through all states again.
-update
have a search box which the background image and text are faded out, once you hover it is is vivid, once you focus it, it is vivid with a 2px border, but once you leave it i loose verything:( so need a trick to get it to stay vivid the background picture (of which there are x and y, one for each state) and the text but loose the 2px border
---UPDATE ---
/* Search box */
.searchbox {
background: url(../images/search-grey.gif) no-repeat 6px -5px #f8f8f8;
width:240px;
margin-right:4px;
margin-left:11px;
color:#cccccc;
vertical-align: top;
padding: 4px 2px 4px 79px;
border-color: #4FA4F9;
}
.searchbox:hover {
background: url(../images/search-greyb.gif) no-repeat 6px -5px #f8f8f8;
color:#888888;
}
.searchbox:focus {
background: url(../images/search-greyb.gif) no-repeat 5px -6px #ffffff;
width:239px;
color:#888888;
padding: 3px 2px 3px 78px;
}
.searchbox.blur {
background: url(../images/search-greyb.gif) no-repeat 6px -5px #ffffff;
width:239px;
color:#000000;
padding: 4px 2px 4px 79px;
}
#-moz-document url-prefix() {
.searchbox {
background: url(../images/search-grey.gif) no-repeat 6px -4px #f8f8f8;
}
}
#-moz-document url-prefix() {
.searchbox:hover {
background: url(../images/search-greyb.gif) no-repeat 6px -4px #f8f8f8;
}
}
#-moz-document url-prefix() {
.searchbox:focus {
background: url(../images/search-greyb.gif) no-repeat 5px -5px #f8f8f8;
}
}
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
input, select, textarea {
margin: 1 0 0;
}
input, textarea, .date {
border: 1px solid #aaa;
border-radius: 3px;
color:#333;
}
input {
font-size: 13px;
padding: 0px;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 4px 4px 4px 4px;
}
select:hover {border: 1px solid #4FA4F9;}
input:hover {border: 1px solid #4FA4F9;}
textarea:hover {border: 1px solid #4FA4F9;}
select:focus {padding: 0px;}
input:focus {padding: 0px;}
textarea:focus {padding: 3px 3px 3px 3px;
}
--- html ---
<input id="searchdomain" name='domain' type="text" style="font-size:15px;" class="searchbox"/>
---js----
/* Search Box Leave */
$(".searchbox").blur(function(){
$(this).addClass("blur");
});
You could do this using jQuery by setting a class.
$(".searchable").blur(function() {
$(this).addClass("blur");
});
Then in your css you can set the color like this
.searchable.blur
{
color:#000;
}
Here is a jsfiddle example -> http://jsfiddle.net/y46Wk/2/
Just bear in mind that the element won't show its hover color again unless you remove the class.
This isn't really an answer to your question.... but I have a feeling you're doing some validation on a form, so why not look at a jQuery validation plugin like this
http://docs.jquery.com/Plugins/Validation
Here is a list of other form related jQuery stuff
http://speckyboy.com/2010/06/22/50-jquery-plugins-for-form-functionality-validation-security-and-customisation/
If none of them help, perhaps you could tell us which one comes close to give us a bit of a clue as to what you want ;-)
Are you trying to do this: http://jsfiddle.net/akhurshid/y46Wk/4/
What you are describing (maintaining a state) is technically possible with just CSS.
Here is an article explaining the process.
In summary you use a transition state, triggered by focus, to keep styles applied to the element. I'm not advocating it as the best method, but it is really quite interesting to see what you can do with CSS3 properties.
More of a curiosity than a straight answer but hopefully its helpful to you / others who hit this question :)