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!
Related
I'm creating something for a pricing table that needs to be able to convert between Pounds and Dollars, I have the base of this down, with a sliding mechanic, unfortunately you're able to click "Sterling" more than once to produce the function of it converting between both prices, i'm wondering how I can make it so that it can only perform the function once, to get rid of this issue
var shown = 'sterling';
function swap() {
if (shown === 'sterling') {
document.getElementById('dollars-1').style.display = "inline-block";
document.getElementById('dollars-2').style.display = "inline-block";
document.getElementById('dollars-3').style.display = "inline-block";
document.getElementById('sterling-1').style.display = "none";
document.getElementById('sterling-2').style.display = "none";
document.getElementById('sterling-3').style.display = "none";
shown = 'dollars';
} else {
document.getElementById('sterling-1').style.display = "inline-block";
document.getElementById('sterling-2').style.display = "inline-block";
document.getElementById('sterling-3').style.display = "inline-block";
document.getElementById('dollars-1').style.display = "none";
document.getElementById('dollars-2').style.display = "none";
document.getElementById('dollars-3').style.display = "none";
shown = 'sterling';
}
};
body {
background-color: #707070;
}
.switch {
position: relative;
height: 26px;
width: 120px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch-input {
display: none;
}
.switch-input:checked+.switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
}
.switch-input:checked+.switch-label-on~.switch-selection {
left: 60px;
/* Note: left: 50% doesn't transition in WebKit */
}
.switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 58px;
height: 22px;
background: #65bd63;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
background-image: -o-linear-gradient(top, #9dd993, #65bd63);
background-image: linear-gradient(to bottom, #9dd993, #65bd63);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>
<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off" id="swap" onclick="swap()">Sterling</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on" id="swap" onclick="swap()">Dollars</label>
<span class="switch-selection"></span>
</div>
Any help would be appreciated!
Rather than keeping what is shown in a variable that you manually swap every time either option is clicked, pass the price type in to the swap function and then display what you want to based off of that. This way, they can click either button as many times as they like, but it will only change when the other option is clicked. I made the changes to your example.
function swap(priceType) {
if (priceType === 'dollars') {
document.getElementById('dollars-1').style.display = "inline-block";
document.getElementById('dollars-2').style.display = "inline-block";
document.getElementById('dollars-3').style.display = "inline-block";
document.getElementById('sterling-1').style.display = "none";
document.getElementById('sterling-2').style.display = "none";
document.getElementById('sterling-3').style.display = "none";
} else {
document.getElementById('sterling-1').style.display = "inline-block";
document.getElementById('sterling-2').style.display = "inline-block";
document.getElementById('sterling-3').style.display = "inline-block";
document.getElementById('dollars-1').style.display = "none";
document.getElementById('dollars-2').style.display = "none";
document.getElementById('dollars-3').style.display = "none";
}
};
body {
background-color: #707070;
}
.switch {
position: relative;
height: 26px;
width: 120px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch-input {
display: none;
}
.switch-input:checked+.switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
}
.switch-input:checked+.switch-label-on~.switch-selection {
left: 60px;
/* Note: left: 50% doesn't transition in WebKit */
}
.switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 58px;
height: 22px;
background: #65bd63;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
background-image: -o-linear-gradient(top, #9dd993, #65bd63);
background-image: linear-gradient(to bottom, #9dd993, #65bd63);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>
<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off" id="swap" onclick="swap('sterling')">Sterling</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on" id="swap" onclick="swap('dollars')">Dollars</label>
<span class="switch-selection"></span>
</div>
Set the swap function as a callback for the change event of the radio buttons instead, so it will only be called once the state of the switch changes.
On a side note, it would be agood idea to give your radio buttons more meaningful names. "week" and "month" doesn't seem to make much sense here. ;-) And also, you are using the id="swap" twice, but IDs must be unique.
document.getElementById('currency_sterling').addEventListener('change', swap);
document.getElementById('currency_dollars').addEventListener('change', swap);
function swap(ev) {
if (ev.target.value === 'dollars') {
document.getElementById('dollars-1').style.display = "inline-block";
document.getElementById('dollars-2').style.display = "inline-block";
document.getElementById('dollars-3').style.display = "inline-block";
document.getElementById('sterling-1').style.display = "none";
document.getElementById('sterling-2').style.display = "none";
document.getElementById('sterling-3').style.display = "none";
} else {
document.getElementById('sterling-1').style.display = "inline-block";
document.getElementById('sterling-2').style.display = "inline-block";
document.getElementById('sterling-3').style.display = "inline-block";
document.getElementById('dollars-1').style.display = "none";
document.getElementById('dollars-2').style.display = "none";
document.getElementById('dollars-3').style.display = "none";
}
};
body {
background-color: #707070;
}
.switch {
position: relative;
height: 26px;
width: 120px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch-input {
display: none;
}
.switch-input:checked+.switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
}
.switch-input:checked+.switch-label-on~.switch-selection {
left: 60px;
/* Note: left: 50% doesn't transition in WebKit */
}
.switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 58px;
height: 22px;
background: #65bd63;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
background-image: -o-linear-gradient(top, #9dd993, #65bd63);
background-image: linear-gradient(to bottom, #9dd993, #65bd63);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>
<div class="switch">
<input type="radio" class="switch-input" name="currency" value="sterling" id="currency_sterling" checked>
<label for="currency_sterling" class="switch-label switch-label-off">Sterling</label>
<input type="radio" class="switch-input" name="currency" value="dollars" id="currency_dollars">
<label for="currency_dollars" class="switch-label switch-label-on">Dollars</label>
<span class="switch-selection"></span>
</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 have created a dynamic table and wondered how to get a new id added to each of the select rows so i can do calculations from it when i do an onchange event.
i have added a var which should give a unique value for each one, but i dont know how to check.
basically the column which is currently empty (points needed) will be the result of the Price column * wanted column (the drop menu).
https://jsfiddle.net/wayneker/u0y4s3ku/10/
$(document).ready(function () {
arrayData();
});
function arrayData() {
var index;
var text = "<ul>";
var htmlTable = '';
var raidCalcTable = [];
raidCalcTable = [{
printName: "Jack",
printPrice: 1111,
quantityAllowed: 1,
}, {
printName: "John",
printPrice: 2222,
quantityAllowed: 2,
}, {
printName: "Jill",
printPrice: 3333,
quantityAllowed: 3,
}];
for (index = 0; index < raidCalcTable.length; index++) {
var id = "id=\"print" + (index+1) + "want\"";
var onchange = " onchange=\"mychange()\"";
$("#tbNames tr:last").after("<tr> <td>" +
raidCalcTable[index].printName + "</td> <td>" +
raidCalcTable[index].printPrice + "</td> <td>" +
raidCalcTable[index].quantityAllowed +
"</td><td><select " + id + onchange + "><option value= 0 >0</option><option value= 1 >1</option><option value= 2 >2</option></select></td> </tr>");
}//end of loop
}
I think you want like this:-
1.Need to convert id to classlike below:-
var myclass = 'class="printwant"';
2.Add class to price column <td> like below:-
<td class='myprice'>
3.use event delegation like this:-
$('#tbNames').on('change','.printwant',function(){
$(this).parent().parent('tr').find('td:last').html($(this).parent().parent('tr').find('.myprice').html() * $(this).val());
});
WORKING EXAMPLE(based on your code):-
$(document).ready(function () {
arrayData();
});
function arrayData() {
var index;
var text = "<ul>";
var htmlTable = '';
var raidCalcTable = [];
raidCalcTable = [{
printName: "Jack",
printPrice: 1111,
quantityAllowed: 1,
}, {
printName: "John",
printPrice: 2222,
quantityAllowed: 2,
}, {
printName: "Jill",
printPrice: 3333,
quantityAllowed: 3,
}];
for (index = 0; index < raidCalcTable.length; index++) {
var myclass = 'class="printwant"';
$("#tbNames tr:last").after("<tr> <td>" +
raidCalcTable[index].printName + "</td> <td class='myprice'>" +
raidCalcTable[index].printPrice + "</td> <td>" +
raidCalcTable[index].quantityAllowed +
"</td><td><select " + myclass + "><option value= 0 >0</option><option value= 1 >1</option><option value= 2 >2</option></select></td><td></td> </tr>");
}//end of loop
}
$('#tbNames').on('change','.printwant',function(){
$(this).parent().parent('tr').find('td:last').html($(this).parent().parent('tr').find('.myprice').html() * $(this).val());
});
#myBtn{
// background:#8595d0;
width:100px;
border-radius:25px;
min-height:20px;
display: block;
margin: auto;
}
input[type=number]{
width:40px;
padding:3px;
margin:0;
border:1px solid #ddd;
border-radius:5px;
text-align:center;
}
.textbottom {
vertical-align: bottom;
}
.texttop {
vertical-align: top;
}
.topleft {
position:absolute;
z-index: 100;
width: 100px;
height: 80px;
top: 0px;
background:url(http://www.ahoymearty.co.uk/basebubble/images/border.png) top left;
display: block;
}
.topright {
position:absolute;
z-index: 100;
width: 100px;
height: 80px;
top: 0px;
right: 0;
background:url(http://www.ahoymearty.co.uk/basebubble/images/border.png) top right;
display: block;
}
.bottomleft{
position:absolute;
z-index: 100;
width: 100px;
height: 80px;
bottom: 0px;
left: 0;
background:url(http://www.ahoymearty.co.uk/basebubble/images/border.png) bottom left;
display: block;
}
.bottomright{
position:absolute;
z-index: 100;
width: 100px;
height: 80px;
bottom: 0px;
right: 0;
background:url(http://www.ahoymearty.co.uk/basebubble/images/border.png) bottom right;
display: block;
}
.top{
position: absolute;
z-index: 99;
background-image: url(http://www.ahoymearty.co.uk/basebubble/images/borderbottomtop.png);
background-repeat: repeat-x;
top: 2px;
left: 0px;
height: 14px;
width:100%;
}
.bottom{
position: absolute;
z-index: 99;
background-image: url(http://www.ahoymearty.co.uk/basebubble/images/borderbottomtop.png);
background-repeat: repeat-x;
background-position: bottom;
bottom: 1px;
left: 0px;
height: 16px;
width:100%;
}
.left{
position: absolute;
z-index: 99;
background-image: url(http://www.ahoymearty.co.uk/basebubble/images/bordersides.png);
background-repeat: repeat-y;
top: 0px;
left: 0px;
height: 100%;
width:16px;
}
.right{
position: absolute;
z-index: 99;
background-image: url(http://www.ahoymearty.co.uk/basebubble/images/bordersides.png);
background-position: right;
background-repeat: repeat-y;
top: 0px;
right: 0px;
height: 100%;
width:16px;
}
div.a {
position: absolute;
top: 37px;
left: 10px;
}
div.b {
position: fixed;
top: 37px;
left: 220px;
}
div.c {
position: relative;
top: 28px;
left: 400px;
}
header {
position: absolute;
top: 0px;
width: 100%;
z-index: 150;
height: 35px;
background-image: url("http://www.ahoymearty.co.uk/shipyard/fluff/cs/splash-bg.jpg");
margin-left: -8px;
border-bottom-color: #000;
border-bottom-width: 1px;
border-bottom-style: solid;
color: #fff;
}
header ul li a {
color: #fff !important;
}
header h1 {
position: absolute;
top: -9px;
font-size: 20px;
font-weight: bolder;
left: 58%;
margin-left: -101px;
}
header ul li {
padding-left: 15px;
display: inline;
list-style-type: none;
float: left;
}
header ul {
margin-top: 8px;
}
#fb {
position: absolute !important;
top: 7px;
right: 50px;
background-color: inherit;
}
body{
background-image: url("http://www.ahoymearty.co.uk/css/background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
input[type=checkbox]{padding:0; margin:0;}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 2px 10px;
}
.blink_me {
padding: 2px;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: steps(1, start);
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: steps(1, start);
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: steps(1, start);
animation-iteration-count: infinite;
}
#-moz-keyframes blinker {
0% { background-color: none; }
50% { background-color: red }
100% { background-color: none; }
}
#-webkit-keyframes blinker {
0% { background-color: none; }
50% { background-color: red }
100% { background-color: none; }
}
#keyframes blinker {
0% { background-color: none; }
50% { background-color: red }
100% { background-color: none; }
}
.container {
position:relative;
width:225px;
height:52px;
padding:20px 10px 0;
margin:100px auto 10px;
text-align:center;
background:rgba(255, 255, 255, 0.7);
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.1);
box-shadow:0px 1px 1px rgba(0, 0, 0, 0.1);
}
.uibutton {
display:inline-block;
padding:5px 10px;
border-top:1px solid #96d1f8;
color:#fff;
border-radius:8px;
box-shadow:rgba(0,0,0,1) 0 1px 0;
text-shadow:rgba(0,0,0,.4) 0 1px 0;
text-decoration:none;
background:#65a9d7;
background-repeat:no-repeat;
background-image:-webkit-linear-gradient(
top left,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.2) 37%,
rgba(255, 255, 255, 0.8) 45%,
rgba(255, 255, 255, 0.0) 50%
),
-webkit-linear-gradient(
#3e779d, #65a9d7
);
background-image:-moz-linear-gradient(
0 0,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.2) 37%,
rgba(255, 255, 255, 0.8) 45%,
rgba(255, 255, 255, 0.0) 50%
),
-moz-linear-gradient(
#3e779d, #65a9d7
);
background-image:-o-linear-gradient(
0 0,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.2) 37%,
rgba(255, 255, 255, 0.8) 45%,
rgba(255, 255, 255, 0.0) 50%
),
-o-linear-gradient(
#3e779d, #65a9d7
);
background-image:linear-gradient(
0 0,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.2) 37%,
rgba(255, 255, 255, 0.8) 45%,
rgba(255, 255, 255, 0.0) 50%
),
linear-gradient(
#3e779d, #65a9d7
);
background-position:-100px -100px, 0 0;
-moz-background-size:250% 250%, 100% 100%;
background-size:250% 250%, 100% 100%;
-webkit-transition:background-position 0s ease;
-moz-transition:background-position 0s ease;
-o-transition:background-position 0s ease;
transition:background-position 0s ease;
}
.headerrow:hover,
.headerrow:focus {
color:#e60000;
background-position:0 0, 0 0;
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
transition-duration:0.5s;
}
.headerrow:active {
top:1px;
}/* CSS Document */
#buttonhelp {
background: url(http://www.ahoymearty.co.uk/basebubble/images/help.png) 3px 5px no-repeat;
left:620px;
top: 30px;
position:relative;
width:10px;
height:30px;
line-height:27px;
display:block;
color: #000;
padding: 2px 10px;
}
#hover {
background: none repeat scroll 0 0 #ddd;
border: 0px solid #DADADA;
color: #333333;
width:300px;
height: 0;
overflow:hidden;
left: 5px;
line-height: 20px;
position: absolute;
top: 30px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#buttonhelp:hover > #hover {
display:block;
height:350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbNames">
<tr>
<th width="150">NAME</th>
<th width="150">PRICE</th>
<th width="75">Total Allowed</th>
<th width="150">Total Wanted</th>
<th width="150">Points Needed</th>
</tr>
</table>
If you will be frequency use dynamic generated content, maybe you need to use a some template builder like http://handlebarsjs.com/ .
Answer on you question is the bind change event to selects and using $(this) and using tree traversing like $(this).closest('tr).find('td.j-firstColumn). I also recommend to using classes as selectors.
$(document).on('change', '.j-select', function(e) {
var $firstCoumn = $(this).closest('tr).find('td.j-firstColumn);
//do some action with $firstCoumn
});
With construction above you no need generate any time the new event when generate template.
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>
In lot of mobile sites, I see notification appear with animation from top to down after some seconds. Currently, I don't remember the sites. I was able to find how to show top notification, but unable to find how to animate this using CSS 3 transition or javscript/jquery. Here is the link which I found, http://www.red-team-design.com/cool-notification-messages-with-css3-jquery
This is how I solve the issue,
/* JAVA SCRIPT */
setTimeout(function () {
$('.notify-bar').show().addClass('notify-bar-height-change');
},2000)
/* CSS : */
.notify-bar{
background-size: 40px 40px;
background-image: linear-gradient(
135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%,
rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
width: 100%;
border: 1px solid;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
background-color: #4ea5cd;
border-color: #3b8eb5;
padding: 5px;
}
.notify-bar-height {
height: 0;
-webkit-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
transition: height 0.5s ease;
}
.notify-bar-height-change {
height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notify-bar notify-bar-height" style="display: none">
Intall ABC!
</div>
if you are using the jquery mobile lib you can use $('#some_selector').slideDown(2000).
hope this helps.
similar question