I've set up a simple jQuery UI ProgressBar:
<script type="text/javascript">
$(function() {
$("#progressbar").progressbar({
value: 35
});
});
</script>
<div id="progressbar"> </div>
Among other things, I'd like to display some text in the progress-bar (for starters, I'd just use the "value").
I can't seem to get this to work.
Bonus Question: How do I format the displayed text (e.g. color, alignment)?
Instead of introducing another element (span) and a new style, leverage what is already there like this:
var myPer = 35;
$("#progressbar")
.progressbar({ value: myPer })
.children('.ui-progressbar-value')
.html(myPer.toPrecision(3) + '%')
.css("display", "block");
The css("display", "block") is to handle the case where the value is 0 (jQuery UI sets a display: none on the element when the value is 0).
If you look at the source of The demo, you'll notice that a <div class="ui-progressbar-value"> is added. You can simply override this class in your own CSS, like:
.ui-progressbar-value {
font-size: 13px;
font-weight: normal;
line-height: 18px;
padding-left: 10px;
}
The way I did it was:
<div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div>
You can adjust the margin-top and margin-left so that the text is in the center of the progress bar.
Then you apply the progressbar plugin for the elements which have class progressbar in the javascript section of the page
Hope this help
After fiddling around with some solutions, based on the answers here, I've ended up with this one:
Html:
<div id="progress"><span class="caption">Loading...please wait</span></div>
JS:
$("#progress").children('span.caption').html(percentage + '%');
(To be called inside the function that updates the progressbar value)
CSS:
#progress {
height: 18px;
}
#progress .ui-progressbar {
position: relative;
}
#progress .ui-progressbar-value {
margin-top: -20px;
}
#progress span.caption {
display: block;
position: static;
text-align: center;
}
Advantages:
Caption is centered with no harcoded positioning (necessary if caption width changes dinamically)
No JS strange manipulation
Simple and minimal CSS
This solution allows for a flexible width based on the text as well as centering the text, styling the text, etc. Works in Chrome, FF, IE8, and IE8 in compatibility mode. Didn't test IE6.
Html:
<div class="progress"><span>70%</span></div>
Script:
$(".progress").each(function() {
$(this).progressbar({
value: 70
}).children("span").appendTo(this);
});
CSS:
.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;}
.progress[aria-valuenow="0"] span {margin-top:0px;}
Working sample: http://jsfiddle.net/hasYK/
I used this:
<div id="progressbar" style="margin: 0px 0px 16px 0px; "><span style="position: absolute;text-align: center;width: 269px;margin: 7px 0 0 0; ">My %</span></div>
<style>
#progress {
height: 18px;
}
#progress .ui-progressbar {
position: relative;
}
#progress .ui-progressbar-value {
margin-top: -20px;
}
#progress span.caption {
display: block;
position: static;
text-align: center;
}
</style>
</head>
<body>
test
<div id="progressbar"></div>
<br>
test2
<div id="progressbar2"></div>
<script>
$("#progressbar").progressbar({
max : 1024,
value : 10
});
$("#progressbar2").progressbar({
value : 50
});
$(document).ready(function() {
$("#progressbar ").children('div.ui-progressbar-value').html('10');
$("#progressbar2 ").children('div.ui-progressbar-value').html('50%');
});
</script>
</body>
Related
I'm trying to add an image in a span with data-pic, but now I want to try a picture carousel, how can I use JavaScript to index data-pic to achieve the effect?
I follow this instruction:
W3C
$(".product-colors span").click(function () {
$(".product-colors span").removeClass("active");
$(this).addClass("active");
$("body").css("background", $(this).attr("data-color"));
$(".product-price").css("color", $(this).attr("data-color"));
$(".product-button").css("color", $(this).attr("data-color"));
$(".product-pic").css("background-image", $(this).attr("data-pic"));
});
.product-colors span {
width: 14px;
height: 14px;
margin: 0 10px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.blue {
background: #7ed6df;
}
.green {
background: #badc58;
}
.yellow {
background: #f9ca24;
}
.rose {
background: #ff7979;
}
.product-colors .active:after {
content: "";
width: 22px;
height: 22px;
border: 2px solid #8888;
position: absolute;
border-radius: 50%;
box-sizing: border-box;
left: -4px;
top: -4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
<body>
<div class="product-card">
<h1>A new model of free group travel</h1>
<p>Travel destination</p>
<div class="product-pic"></div>
<div class="product-colors" id="Banner">
<span class="blue active" data-color="#7ed6df" data-pic="url(1.jpg)"></span>
<span class="green" data-color="#badc58" data-pic="url(2.jpg)"></span>
<span class="yellow" data-color="#f9ca24" data-pic="url(3.jpg)"></span>
<span class="rose" data-color="#ff7979" data-pic="url(4.jpg)"></span>
</div>
<div class="product-info">
<div class="product-price">$90</div>
Add to Cart
</div>
</div>
</body>
I am learning the basics of JavaScript, I don’t know how to implement this feature.
Hope you can help me
Thanks for your help :)
you can't use background and background-image together, one will overwrite the other,
By the way ,what are you trying to create? a carousel or what?
well, I guess this is what you're trying to do,
in order to achieve this, you need to declare the $('body') twice, add background-color to the first, then background-image to the second or (vice-versa),
below is the final code
var span = $('.product-colors span');
span.on('click', function() {
span.removeClass('active');
$(this).addClass('active');
$('body').css("background-color", $(this).attr('data-color'));
$('body').css('background-image', $(this).attr('data-pic'));
});
then go the css, I added background-blend property to it, so as to blend the background-color and background-image together, I also set the span to display: inline-block
check out this codepen link to see all the changes made here
I'm looking for the best way to do a progress bar (in my case it's a life bar for a game) in an html5 canvas.
I don't know if it's better to use javascript and dom element, or draw this bar directly in the canvas.
I need an update function, for example myBar.updateValue(40), and I need to show the new bar without refresh all the page or all the canvas, of course.
Do you know something like that? An existing script? Thanks!
It’s very easy in HTML/CSS:
<style>
#progress-holder{width:400px;height:20px;background:grey}
#progress{width:0;height:100%;background:black}
</style>
<div id="progress-holder">
<div id="progress"></div>
</div>
<script>
var progress = document.getElementById('progress');
function updateValue(perc) {
progress.style.width = perc+'%';
}
updateValue(40);
</script>
DEMO: http://jsbin.com/EGAzAZEK/1/edit
And animating with CSS: http://jsbin.com/EGAzAZEK/3/edit
HTML:
<div class='progress'>
<div class='progress-bar' data-width='//Enter a percent value here'>
<div class='progress-bar-text'>
Progress: <span class='data-percent'>//This is auto-generated by the script</span>
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 15px;
width: 100%;
height: 100%;
position: relative;
color: #fff;
}
.progress {
position: relative;
width: 100%;
height: 30px;
}
.progress-bar {
margin-bottom: 5px;
width: 0%;
height: 30px;
position: relative;
background-color: rgb(66, 139, 202);
}
.progress-bar-text {
position: absolute;
top: 0px;
width: 100%;
text-align: center;
/*
Do not change the values below,
unless you want your text to display away from the bar itself. */
line-height: 30px;
vertical-align: middle;
}
jQuery:
$('.progress-bar').each(function (){
var datawidth = $(this).attr('data-width');
$(this).find("span.data-percent").html(datawidth + "%");
$(this).animate({
width: datawidth + "%"
}, 800);
});
Link to JSFiddle
The HTML data-width attribute is used to track the percent the bar should be set to. Change it to your liking.
The jQuery script works with ALL progress bars on your page (See the JSFiddle, so you don't have to copy and paste the same jQuery for every new progress bar.
(Just be sure to keep the structure of the HTML, or change it to your liking).
The div "progress" is just an expander, it can be named whatever your want - without you having to change the jQuery.
EDIT:
If you can use Javascript & HTML, don't use a canvas. Canvas (imho) are good for only 1 thing: Seat bookings for concerts, theaters and alike.
If I add elements to list after I initialize .sortable it doesn't work correctly.
See example jsFiddle
Sample HTML:
<div class="container">
</div>
<br />
<button class="add-fields">add</button>
Sample JS:
$(".container").sortable({
containment: 'parent'
});
$(".container").disableSelection();
$(".add-fields").click(function(){
$(".container").append("<div>sucke</div>")
})
Sample CSS:
.container {
height: 30px;
width: 100%;
background: blue;
position: relative;
float: left;
}
.container > div {
position: relative;
float: left;
height: 100%;
width: 80px;
background-color: red;
line-height: 30px;
text-align: center;
margin: 0;
padding: 0;
cursor: default;
}
UPDATE
I found related issue here http://bugs.jqueryui.com/ticket/7498
because this.floating is only determined in _create, if you start with
an empty sortable it is assumed to be vertical.
The workaround for that jQueryUI bug is to initialize the sortable with an element inside, then remove it immediately after initialization.
HTML:
<div class="container"><div id="test">blah</div>
</div>
<br />
<button class="add-fields">add</button>
Javascript:
var i = 0;
$(".container").sortable({
containment: 'parent'
});
$(".container").disableSelection();
$("#test").remove();
$(".add-fields").click(function(){
$(".container").append("<div>sucke" + (i++) + "</div>")
})
And a jsFiddle showing it working.
Its working fine for me.. Try unique names for the category divs...
$(".container").sortable({
containment: 'parent'
});
$(".container").disableSelection();
$(".add-fields").click(function(){
$(".container").append("<div>sucke"+Math.round(Math.random()* 100)+"</div>")
})
http://jsfiddle.net/NQMPr/23/
update.. my bad. in the above example I did have one element inside the container. When I start it from empty, you are right, the div's don't sort. Apologies...
I've this code:
<div class='mini'>
<div id='wrap_jcrop' class='td_wrap'>
<img id='img2crop' src=''>
</div>
</div>
With this CSS:
div.mini {
width: 300px;
height: 200px;
display: table;
}
div.td_wrap {
display: table-cell;
vertical-align: middle;
text-align: center;
}
The image source for img2crop is loaded dynamically and handled with a Jcrop api. But Jcrop aligns the image on the left.
How can I align the image in the center of the div?
Rather than modify the jcrop css file (not recommended, as per the plugin author) you can add a class to the jcrop-holder element as an option when you initialise Jcrop:
jQuery(function($) {
$('#jcrop_target').Jcrop({
addClass: 'jcrop-centered'
});
});
Add a wrapper around the img tag in your HTML, e.g.
<div class="crop-image-wrapper">
<img id="jcrop_target" src="...." alt="" />
</div>
Then add a css style, e.g.
.jcrop-centered
{
display: inline-block;
}
.crop-image-wrapper
{
text-align: center;
}
Tested in Chrome 31.0.1650.63 m - let me know if it doesn't work in other browsers? (except < IE8) :-)
Set
.jcrop-holder
{
margin: 0 auto;
}
Try margin: 0 auto;, position: relative;, float: left;.
The only thing that worked for me:
JS:
$("#img2crop").attr("src", resp).load(function(){
$("#wrap_jcrop").width(this.width);
$("#wrap_jcrop").height(this.height);
$("#wrap_jcrop").css("position", "absolute");
$("#wrap_jcrop").css("top", ($("#wrap_jcrop").parent().height() - $(this).height())/2 + "px");
$("#wrap_jcrop").css("left", ($("#wrap_jcrop").parent().width() - $(this).width())/2 + "px");
$('#img2crop').Jcrop();
});
CSS:
.mini {
position: relative;
}
I'm working on project to provide a bolt-on tool for websites, which makes heavy use of jQuery. Presentation / design is crucial, and I want to replace the standard (ugly) scrollbar applied by the browser to html elements with overflowing content, with something better looking.
There are numerous jQuery plug-ins around that apply custom scrollbars and allow styling via CSS which is great, but all the ones I've tried seem to suffer from the same problem which is this: if the scrollable content contains a form with text fields etc, tabbing between fields does not activate the scrollbar, and in some cases can screw up the custom scrollbar layout altogether.
Two examples of plug-ins I've tried:
http://manos.malihu.gr/jquery-custom-content-scroller
http://baijs.nl/tinyscrollbar/
I've tried others also, but in all demos / examples the content is plain text. I've done a lot of searching on this already, but it seems no-one has tried using these plug-ins with form-based content.
All these plug-ins seem to work in more or less the same way, and I can see exactly what happens and why, but just wondered if anyone else has had this problem and / or found a solution?
This issue can be easily replicated as follows (using the tinyscrollbar plug-in):
Add this to a standard html test page -
CSS:
<style>
#tinyscrollbartest { width: 520px; height: 250px; padding-right: 20px; background-color: #eee; }
#tinyscrollbartest .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#tinyscrollbartest .overview { list-style: none; position: absolute; left: 0; top: 0; }
#tinyscrollbartest .scrollbar { position: relative; float: right; width: 15px; }
#tinyscrollbartest .track { background: #d8eefd; height: 100%; width: 13px; position: relative; padding: 0 1px; }
#tinyscrollbartest .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#tinyscrollbartest .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#tinyscrollbartest .thumb, #tinyscrollbartest .thumb .end { background-color: #003d5d; }
#tinyscrollbartest .disable { display: none; }
</style>
Html:
<div id="tinyscrollbartest">
<div class="scrollbar">
<div class="track">
<div class="thumb">
<div class="end"></div>
</div>
</div>
</div>
<div class="viewport">
<div class="overview">
</p>Here's a text field: <input type="text"/><p>
...
// lots of content to force scrollbar to appear,
// and to push the next field out of sight ..
...
<p>Here's another field: <input type="text"/></p>
</div>
</div>
</div>
Plug-in reference (assuming jquery libraries etc are referenced also):
<script type="text/javascript" src="scripts/jquery.tinyscrollbar.min.js"></script>
Jquery code:
<script type="text/javascript">
$(document).ready(function () {
$('#tinyscrollbartest').tinyscrollbar();
});
</script>
Now click in the first text field so it has focus, hit the tab key to move to the next one and see what happens.
I understand your problem.. But is hard to find a good solution to this. You could try to set a focus event on your form elements. And let this event trigger the scrollbar_update function of tinyscrollbar. You can set the offsetTop of the form element that currently has focus as the methods parameter. I think that would work.
$('formelements').focus(function(){
YourScrollbar.tinyscrollbar_update(this.offsetTop);
});
I had to overwrite the standard tabbing functionality with my own:
$(".scrollable").each(function() {
if (!$(this).data("scrollbar"))
{
$(this).data("scrollbar", new Scrollbar({
holder:$(this)
}));
$(this).find("input").bind("keydown", function(e)
{
var keyCode = e.keyCode || e.which;
if (keyCode == 9)
{
e.preventDefault();
var scrollTo = $(this);
if (e.shiftKey)
{
var nextInput = $(this).prevAll("input:not([type=hidden])").first();
scrollTo = nextInput.prevAll("input:not([type=hidden]), label").first();
}
else
{
var nextInput = $(this).nextAll("input:not([type=hidden])").first();
}
if (nextInput.length)
{
console.log(scrollTo);
$(this).closest(".scrollable").data("scrollbar").scrollTo(scrollTo, function()
{
nextInput.focus().select();
});
}
}
});
}
});
It's a bit annoying to have to wait for the scroll but I don't see any other option.