I'm trying to add this close button to my alertify log message. The final display should be something like this:
I've tried a few solutions listed on SO but for some reason I'm not able to move the close button out of the alertify log message. The overflow for the close button is always hidden, and I've tried playing with the CSS settings but it is not working.
var fn = function() {
alertify.log('How to add close button? ');
};
fn();
.close-icon
{
position: absolute;
top: -5px;
right:-5px;
display:block;
box-sizing:border-box;
width:20px;
height:20px;
border-width:3px;
border-style: solid;
border-color:black;
border-radius:100%;
background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%);
background-color:black;
box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
transition: all 0.3s ease;
}
<link href="https://rawgit.com/alertifyjs/alertify.js/master/dist/css/alertify.css" rel="stylesheet"/>
<script src="https://rawgit.com/alertifyjs/alertify.js/master/dist/js/alertify.js"></script>
<button onclick="fn();">
<span class="ui-button-text">Test</span>
</button>
The problem is that the content overflows out of the container and that content is hidden. An easy way to fix this is with:
.alertify-logs > div {
overflow: visible;
}
var fn = function() {
alertify.log('How to add close button? ');
};
fn();
.close-icon
{
position: absolute;
top: -5px;
right:-5px;
display:block;
box-sizing:border-box;
width:20px;
height:20px;
border-width:3px;
border-style: solid;
border-color:black;
border-radius:100%;
background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%);
background-color:black;
box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
transition: all 0.3s ease;
}
.alertify-logs > div {
overflow: visible;
}
<link href="https://rawgit.com/alertifyjs/alertify.js/master/dist/css/alertify.css" rel="stylesheet"/>
<script src="https://rawgit.com/alertifyjs/alertify.js/master/dist/js/alertify.js"></script>
<button onclick="fn();">
<span class="ui-button-text">Test</span>
</button>
Related
I can't figure out how to do this, is it really possible to twist the beggining of a progress bar with css, html, javascript or jquery without using images?
What I mean:
What I got so far (just a normal progress bar..):
#xp-bar{
top: 60%;
left: 5%;
height:10px;
width:90%;
background:#035;
border-radius: 5px;
/*margin:0px 0px 0px 15px;*/
display:inline-block;
vertical-align:middle;
position: absolute; }
#xp-bar-fill{
height:100%;
width:50.1%;
background-color:#d50000;
font-size:12px;
line-height:10px;
text-align:right; }
.progress-bar-striped {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px; }
.progress-bar-striped.active {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
#-webkit-keyframes progress-bar-stripes {
from { background-position: 40px 0; } to { background-position: 0 0; } }
#keyframes progress-bar-stripes {
from { background-position: 40px 0; } to { background-position: 0 0; } }
<div id='xp-bar'>
<div id='xp-bar-fill' class="progress-bar-striped active">
</div>
</div>
I just want to twist the beggining of that progress bar to be like the designs, I know how to do this with images but I wanted to know if it is really possible without them. Might be interested to a plugin if there's any
Like Rory McCrossan said, I've tried to do the two elements behaving like one and this is the result so far:
function doit(){
$("#xp-increase-fx").css("display","inline-block");
$("#xp-bar-fill").css("box-shadow",/*"0px 0px 15px #06f,*/ "-5px 0px 10px #fff inset");
$("#xp-circle-fill").css("box-shadow",/*"0px 0px 15px #06f,*/ "-5px 0px 10px #fff inset");
setTimeout(function(){
$("#xp-bar-fill").css("-webkit-transition","all 2s ease");
$("#xp-bar-fill").css("width","80%");
$("#xp-circle-fill").css("-webkit-transition","all 0.34s ease").css("width","100%");
},100);
setTimeout(function(){
$("#xp-increase-fx").fadeOut(500);
$("#xp-bar-fill").css({"-webkit-transition":"all 0.5s ease","box-shadow":""});
$("#xp-circle-fill").css({"-webkit-transition":"all 1s ease","box-shadow":""});
},2000);
setTimeout(function(){
$("#xp-bar-fill").css("width", "0.1%");
setTimeout(function(){ $("#xp-circle-fill").css("width", "0.1%"); },200);
},3000);
}
#xp-widget{
position:absolute;
top: 20%;
width: 310px;
left: 50%;
transform: translateX(-50%); }
#xp-bar,#xp-circle,#xp-ol-circle{
left: 16px;
height:10px;
width:92%;
background:#035;
border-radius: 5px;
overflow: hidden;
display:inline-block;
vertical-align:middle;
position: absolute; }
#xp-circle{
top: -18px;
left: 13px;
height: 50px;
width: 50px;
border-radius: 50%; }
#xp-ol-circle{
top: -9px;
left: 21px;
height: 33px;
width: 33px;
border-radius: 50%; }
#xp-bar-fill,#xp-circle-fill{
height:100%;
width:0.1%;
background-color:#d50000;
font-size:12px;
line-height:10px;
text-align:right; }
#xp-circle-fill{ width: 0.1%; border-radius: 50%; }
#xp-increase-fx{
position:relative;
display:none;
height:100%; }
.xp-increase-glow1{
position:absolute;
margin:0px 0px 0px -2px;
left:0px;
top:0px;
background:#fff;
width:5px;
height:100%;
border-radius:0px;
-webkit-filter:blur(2px); }
.xp-increase-glow2{
position:absolute;
margin:-5px 0px 0px -2px;
left:0px;
top:0px;
background:#aaf;
width:5px;
height:200%;
border-radius:0px;
-webkit-filter:blur(10px); }
.xp-increase-glow3{
position:absolute;
margin:0px 0px 0px -5px;
left:0px;
top:0px;
background:#fff;
width:10px;
height:100%;
border-radius:5px;
-webkit-filter:blur(5px); }
.progress-bar-striped {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px; }
.progress-bar-striped.active {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite; }
.mCharLvl {
top: 8px;
left: 1px;
width: 33px;
position: absolute;
color: #ffffff;
text-shadow: -1px 0px black, 1px 0px black, 0px 1px black, 0px -1px black, 1px 1px black, 2px 2px #000000; }
.debugTest { top: 20%; position: absolute; }
#-webkit-keyframes progress-bar-stripes {
from { background-position: 40px 0; } to { background-position: 0 0; } }
#keyframes progress-bar-stripes {
from { background-position: 40px 0; } to { background-position: 0 0; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="xp-widget">
<tr>
<th id='xp-bar'>
<div id='xp-bar-fill' class="progress-bar-striped active">
<div id='xp-increase-fx'>
<div id='xp-increase-fx-flicker'>
<div class='xp-increase-glow1'></div>
<div class='xp-increase-glow2'></div>
<div class='xp-increase-glow3'></div>
</div>
<div class='xp-increase-glow2'></div>
</div>
</div>
</th>
<th id="xp-circle">
<div id='xp-circle-fill' class="progress-bar-striped active">
<div id='xp-increase-fx'>
<div id='xp-increase-fx-flicker'>
<div class='xp-increase-glow1'></div>
<div class='xp-increase-glow2'></div>
<div class='xp-increase-glow3'></div>
</div>
<div class='xp-increase-glow2'></div>
</div>
</div>
</th>
<th id="xp-ol-circle"><span id="mCharLevel" class="mCharLvl">7</span></th>
</tr>
</table>
<button class="debugTest" onclick="doit()">Try Me !</button>
But I will finally try Svg like Nathaniel Flick suggested, useful to be able to use a predefined path and I would say it's the better approach as I want the progress bar following a path that otherwise seems impossible or very tricky to do
Thanks for your suggestions!
I'm trying to make a simple click the color button to change the color of the product image, and I am completely new to javascript but I found this code that allows me to switch between multiple images with multiple buttons, however I want to get them to crossfade when clicked.
For example I made this where there are 2 iPhones, and the button corresponds to the color of the phone (ideally I would like 3+ options)
function showImg( id ) {
for ( i = 1; i < 10; i++) {
var obj = document.getElementById( "picture" + i );
if (obj != null)
obj.className = 'hide';
}
var obj = document.getElementById( "picture" + id );
if (obj != null)
obj.className = 'show';
}
.show {
display: block;
opacity: 1;
max-height: 100vh;
margin: 0 auto;
transition: ease-in-out 1s;
}
.hide {
display: none;
opacity:0;
max-height: 100vh;
margin: 0 auto;
transition: ease-in-out 1s;
}
.btn {
margin: 20px !important;
}
.black {
background: #333;
background: -webkit-linear-gradient(left top, #333, #555) !important;
background: -o-linear-gradient(bottom right, #333, #555) !important;
background: -moz-linear-gradient(bottom right, #333, #555) !important;
background: linear-gradient(to bottom right, #333, #555) !important;
}
.silver {
background: #ccc;
background: -webkit-linear-gradient(left top, #ccc, #fff) !important;
background: -o-linear-gradient(bottom right, #ccc, #fff) !important;
background: -moz-linear-gradient(bottom right, #ccc, #fff) !important;
background: linear-gradient(to bottom right, #ccc, #fff) !important;
}
<div class="container">
<div class="row">
<div class="col">
<img id="picture1" src="https://images-na.ssl-images-amazon.com/images/I/515a5LWWpHL._SL1000_.jpg" title="Silver" class="show img-responsive">
<img id="picture2" src="https://images-na.ssl-images-amazon.com/images/I/613bFC-bCvL._SL1500_.jpg" title="Black" class="hide img-responsive">
</div>
<div class="col">
<button class="btn silver" onClick="showImg(1);" value="Silver"></button>
<button class="btn black" onClick="showImg(2);" value="Black"></button>
</div>
</div>
</div>
function showImg( id ) {
for ( i = 1; i < 10; i++) {
var obj = document.getElementById( "picture" + i );
if (obj != null)
obj.className = 'hide';
}
var obj = document.getElementById( "picture" + id );
if (obj != null)
obj.className = 'show';
}
.show {
animation: fade-in 1s ease-in-out forwards;
}
#keyframes fade-in{
0%{
opacity:0;
}
100%{
opacity:1;
}
}
img{
position:absolute;
max-height: 100vh;
left: 0;
right: 0;
margin: auto;
}
.hide {
animation: fade-out 1s ease-in-out forwards;
}
#keyframes fade-out{
0%{
opacity:1;
}
100%{
opacity:0;
}
}
.btn {
margin: 20px !important;
}
.black {
background: #333;
background: -webkit-linear-gradient(left top, #333, #555) !important;
background: -o-linear-gradient(bottom right, #333, #555) !important;
background: -moz-linear-gradient(bottom right, #333, #555) !important;
background: linear-gradient(to bottom right, #333, #555) !important;
}
.silver {
background: #ccc;
background: -webkit-linear-gradient(left top, #ccc, #fff) !important;
background: -o-linear-gradient(bottom right, #ccc, #fff) !important;
background: -moz-linear-gradient(bottom right, #ccc, #fff) !important;
background: linear-gradient(to bottom right, #ccc, #fff) !important;
}
<div class="container">
<div class="row">
<div class="col">
<img id="picture1" src="https://images-na.ssl-images-amazon.com/images/I/515a5LWWpHL._SL1000_.jpg" title="Silver" class="hide img-responsive">
<img id="picture2" src="https://images-na.ssl-images-amazon.com/images/I/613bFC-bCvL._SL1500_.jpg" title="Black" class="img-responsive">
</div>
<div class="col">
<button class="btn silver" onClick="showImg(1);" value="Silver"></button>
<button class="btn black" onClick="showImg(2);" value="Black"></button>
</div>
</div>
</div>
I have to replace the cube by a sphere with the input forme but if i add a function in the javascipt the cube disappears.
What do I have to do if I want to change the cube's dimensions?
I don't know how to link the function modifie with the three numeric inputs (longueur, largeur, hauteur) because as I've said before if I add on function, the cube disappears. The functions are wrong?
See JSFiddle
function modifie(){
var longueur ,
var largeur,
var profondeur.
longueur =document.getElementById("longueur").value
largeur =document.getElementById("largeur").value
profondeur =document.getElementById ("profondeur").value
}
I would consider the new possibilities of CSS3. FIDDLE
$("div").addClass("ball")
div {
display: block;
width: 200px;
height: 200px;
margin: 30px auto 0;
background-color: #3b4ba3;
transition: all 5s ease;
}
div.ball {
border-radius: 50%;
box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
I currently have a sphere shape but, I'm trying to think of a way on how to rotate it in a circle on my website this is my current code:
<style>
b.ball {
display: block;
width: 200px;
height: 200px;
margin: 30px auto 0;
background-color: #3b4ba3;
border-radius: 50%;
box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
}
<style>
<b class="ball"></b>
The code above puts a shape on the page.
How Would I rotate this sphere so it spins around? Not around the whole page but just in it's own area, not the entire page though. I've Googled it and I have not anything that particularly addresses this question that I've seen yet.
You can use css-animations:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
to animate a transform:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms
Just add in:
.ball {
animation: spin 3s linear infinite;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
You'll need to use prefixes though, which I've included in the demo: http://jsfiddle.net/99bds/
I have a column that is aligned on the right hand side of the page. The column must span the entire height of the page, thus my reasoning behind making it fixed. There will be items within the column that should not be fixed. No matter what I play with the items continue the scroll with the page.
Does anyone have a way to either make the child div static within the parent that is fixed, or a way to make a column span the entire height of the page without using a fixed positioning?
Here is the CSS:
.rightCol{
width: 28px;
position: fixed;
bottom: 0px;
top: 0px;
z-index: -1;
margin-left: 969px;
}
.rightColItem{
margin-top: 95px;
margin-left: 10px;
position: absolute;
}
And the HTML:
<div class="rightCol">
<div class="rightColItem">
I want this to be static and not fixed
</div>
</div>
And here is a link to a fiddle -->
http://jsfiddle.net/7hmKy/
Any help is greatly appreciated!
Edit 1: The right aligned bar is inside a container div of 1000px.
An easier method—with less markup too—is to use CSS3 gradients for the background of your page. You can also easily use an image fallback to support old browsers:
body {
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(100%, #fa8072), color-stop(100%, transparent));
background: -webkit-linear-gradient(right, #fa8072 200px, transparent 200px);
background: -moz-linear-gradient(right, #fa8072 200px, transparent 200px);
background: -o-linear-gradient(right, #fa8072 200px, transparent 200px);
background: linear-gradient(right, #fa8072 200px, transparent 200px);
}
.sidebar {
width: 200px;
float: right;
}
Demo (I used Sass and Compass because they make CSS3 gradients much easier to keep updated.)
EDIT:
Based on your comment, I've created a new example using a centered body that is 1000px wide (with some finagling you could use a div) and changed the gradients to replicate a border:
body {
height: 100%;
min-height: 2000px;
width: 1000px;
margin: 0 auto;
background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(98.33333%, transparent), color-stop(98.33333%, #000000), color-stop(100%, transparent)), -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #000000), color-stop(83.33333%, #000000), color-stop(100%, transparent));
background: -webkit-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -webkit-linear-gradient(right, #000000, #000000 10px, transparent 12px);
background: -moz-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -moz-linear-gradient(right, #000000, #000000 10px, transparent 12px);
background: -o-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -o-linear-gradient(right, #000000, #000000 10px, transparent 12px);
background: linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), linear-gradient(right, #000000, #000000 10px, transparent 12px);
}
Demo