We Keep Coding

How to make the progress bar with html css javascript

How to make the progress bar Like the image below

I think the easiest way would be to use something like:
css:
.progress
{
position:relative;
width: 100px;
height: 100px;
}
.progressUnder
{
position: absolute;
width: 100%;
height: 100%;
background-image: url('backgroundUnder.jpg');
}
.progressOver
{
position: absolute;
width: 100%;
height: 0%;
background-image: url('backgroundOver.jpg');
}
.progressPercent
{
position:absolute;
top: 40px;
width: 100%;
text-align: center;
}
and html:
<div class='progress'>
<div class='progressUnder'/>
<div class='progressOver' />
<div class='progressPercent'>0%</div>
</div>
and then use javascript to animate the percent height of div.progressOver, as well as the .progressPercent counter.

You need to use a animation I think.
Aswell as The Molecule says. You need to use height for that color. I guess you know how an normal one works. First try to out create a circle, use the height as The Molecule explained, then you need to make the inside of the circle transparent/unneeded. As that is done the heights will be displayed in the circle. That how you do it, never done it myself tho since i dont use custom loading bars.

Extra wide image slider on responsive site

I'm creating a responsive site and I'd like to use a really wide image slider (I'm sure you've seen the type of thing).
What I'd like to happen is for the main site to be, for example, maximum 1,200 pixels wide and use a fluid width. I'd then like the image slider to be, for example, 2,000 pixels wide. On a static site this is relatively straightforward as I could simply give the image slider a negative left margin of -400 pixels to center it. Sadly in the case of a responsive site this isn't possible as that offset needs to be fluid.
I did come across some script that made the offset fluid but this only worked when the screen was wider than the site width (i.e the max width of the main content area). When the window then becomes narrower than this max width the script fails to keep the image slider centered .
Any ideas how this could be written to keep the image slider centered horizontally in the window, whether the users window is wide or narrow?
<script type="text/javascript">
function setMargins() {
width = $(window).width();
containerWidth = $("#flexslider_width").width();
leftMargin = (containerWidth-width)/2;
$("#flexslider_width").css("marginLeft", -leftMargin);
}
$(document).ready(function() {
setMargins();
$(window).resize(function() {
setMargins();
});
});
</script>
Thanks for any thoughts in advance,
Tom

EDIT: I understand now. Try this: http://codepen.io/anon/pen/azoRwo
.outer{
position: relative;
width: 100%;
height: 100px;
border: 2px solid red;
overflow: hidden;
}
.image {
position: absolute;
left: 50%; /* Move to the middle of the parent */
margin-right: -50%; /* Remove that extra width */
transform: translate(-50%, 0); /* Move left again; No IE8 support*/
width: 1000px;
height: 96px;
border: 2px solid cyan; /* Just useful for debugging */
background: url('http://i.imgur.com/rBkbXS3.jpg');
overflow: hidden;
}
Basically we move right, then left, using percentages of the parent's width. If you want the same functionality in IE8, you'll have to use JavaScript.
Reference: http://www.w3.org/Style/Examples/007/center.en.html

Alright, check this out: http://codepen.io/anon/pen/LEPgLp
html, body {
margin: 0;
}
.image-slider{
width: 100%;
max-width: 800px;
height: 100px;
border: 1px solid red;
margin: 0 auto;
text-align: center;
}
.main{
width: 100%;
max-width: 800px;
height: 100px;
border: 1px solid green;
margin: 0 auto;
position: relative;
}
#media only screen and (max-width: 800px) {
body {
overflow: hidden;
}
.image-slider {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
top: 0;
}
.main {
margin-top: 100px;
}
}
When your window is smaller than 800px (was easier to develop. just change the values), I'll position your slider absolute and in the middle. Because of the absolute position, your .main div will move to the top so I'll add a margin-top. Just change your margin-top to the hight of your slider. Good luck!

jQuery: How to change the position of a div, inside of another div then create a glide effect?

I currently have a div, and using css to make it in the shape of a red box, with the ID of #box. Just to make it look neat I put #box inside of another div. I would like to know how can I change the position of the #box to somewhere else on screen (lets say top left), then have it glide to the bottom right of the screen.
$(document).ready(function(){
/*Limits for Glide*/
var top_limit = "10px";
var left_limit = "10px";
var right_limit = "600px";
var bottom_limit = "600px";
/*Glide*/
$('#glide').click(function(){
$('#box').css("left",left_limit).css("top",top_limit);
$('#box').animate({"left": right_limit, "top": bottom_limit},2000);
});
});
As for my divs I have multiple things on my html file but the main ones are these.
.subDiv {
width: 600px;
height: 250px;
margin: 0 auto;
padding: 10px;
background-color: #876D52;
border: 3px solid white;
}
#box{
width: 250px;
height: 200px;
background: #FF9933;
margin: 0 auto;
}

IF you are talking specifically "on screen" and not necessarily about the DOM positioning, you can use position: absolute and then set left: 0 - this will position the "div" in question to the far left of the screen. Then you animate its left property to make it have a "glide" effect..
You have to be careful though. It's not a good practice to take items out of their parent containers "visually" but leave them the same in the DOM, simply because it gets confusing. (oh in source code that's a child of this container but on screen it doesnt appear that way)
I hope this makes sense, let me know if any questions.

for animate with js you MUST add position: absolute; to those objects that you want to animate.so:
#box{
position: absolute;
width: 250px;
height: 200px;
background: #FF9933;
margin: 0 auto;
}

Extjs 4.2.2 - scrollable text behind image in textarea

I'm searching high and low to achieve what has been done in this fiddle:
http://jsfiddle.net/wNTe6/1/
I need the same effect for an Extjs-Textarea.
(background-image seems to be outdated, I used an image-URL of a random-image)
I need a teaxtarea with a (background?-) image (center/middle) and text.
The text should be scrollable, but has to disappear behind the image.
At the very moment, text is scrolling above my background-image (which is understandable).
My textarea (Extjs):
var txtField = Ext.create('Ext.form.field.TextArea', {
name: 'transitionTextArea',
width: transWidth,
height: 100,
border: false,
value: 'Transition Transition Transition Transition Transition Transition',
readOnly: true,
fieldCls: 'transition-style'
});
CSS-Class:
.transition-style {
background-image: url('../images/icons/processControl/transition_160x32.png');
background-repeat: no-repeat;
text-align: center;
vertical-align: middle;
border: 0px;
padding-top: 30px;
}
Can anyone please help me?
Any help would be highly appreciated!
-nemesis-

Well, I'll give it a shot, but it's not very elegant.
Here is the Fiddle.
Changes in HTML.
<div class='imgdiv'>
<img src='http://minionslovebananas.com/images/check-in-minion.jpg' width='100' height='120'>
</div>
Changes in CSS.
.imgdiv {
margin: 40px auto;
position: relative;
top: 20%;
left: 5%;
border: 1px solid red;
height: 120px;
width: 100px;
}
Make the outer div with the same height as the scrollable div, but slightly less wide to not cover up the scroll bar. Make its position absolute.
Insert the image in a div and make the div position relative, and you can move it around.
I'll bet someone can give us a nice ELEGANT solution.

jcarousel width issue

I'm using jCarousel on a website I'm creating for my company. I'm using the default javascript that came with jCarousel.
<ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px;width: 2084px;">
The width is being generated by the javascript that jCarousel came with but I can cypher though it to figure out where to change the value.
Any help would be great.
Here is a link to what I'm working on: http://marcbrigham.com/lynxems/index.html

.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 245px;
height: 75px;
}
Taken from the default Tango skin that´s used in the examples.
What skin/theme/CSS are you using? jCarousel needs to change the width to enable the slide but the wrapper element should be using overflow: hidden;.
UPDATE
This CSS edit makes it look OK but if you need it to cover the whole width of #mainhome you should consider changing the size of the images.
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 765px;
padding: 20px 40px;
height: 200px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 775px;
height: 190px;
}
Another option could be adding margin: 0 40px; to .jcarousel-skin-tango .jcarousel-clip-horizontal.

You can also create a CSS style and add !important to it, which will override the inline styles. For example:
#carousel {
width: 1000px !important;
}
While this works, I'm finding that if the container is too wide, you'll be able to scroll beyond just the items within it. I'm still looking for a workaround for this.
There's also a new version (0.3.0) but there aren't any really good examples on the developers site yet.

just add a style to your css:
.jcarousel-list-horizontal {width: x}
Al