Develop Reference

How to change div style on the places of loading web?

I just started creating these Loading bar by me:
<div id="loading">
<div style="width: 650px;height: 40px;background-color: white;left:calc(50% - 325px);top: calc(50% - 20px);position: absolute;">
<div style="width:640px;height:30px;background-color:#0087cc;margin-top:5px;margin-left:5px">
<div id="myBtn" style="width:20px;height:30px;background-color:white;transition: all 2s;transition: all 0.5s ease 0s;">
</div>
</div>
</div>
</div>
The white bar is increasing from left to right , so on the end of web page i put these JS - so it makes end of loading bar and change display property o whole loading div :
$(window).load(function() {
document.getElementById("myn").style.width = "640px";
setTimeout(function(){$('#loading').fadeOut()}, 2700);
})
But I need to change the div width of that bar on the most place (for example after loading 10 picture change with to 100px and after loading another 10 pics change with to 200px ect ) on the web to create progress change of loading bar when the page will loading.
How can I change that div width on the most places of web to create continuously move of loading bar on loading web page.
And : I dont want to use Progressbar, I like to make things by myself :-)
Thanks for your help

The following code snippet wil do, as far as I understand, what you want. On a press of a button (or when some images are loaded), the width will increase by 16 pixels. This could be any variable and jQuery can be used to animate it as well. This is just an example to illustrate the principle.
$('#button').click(function() {
var width = $('.progress').width();
if (width < 256) {
width = width + 16;
$('.progress').width(width)
}
});
div.progress-bar {
width: 256px;
height: 32px;
border: 1px solid black;
}
div.progress {
width: 0px;
height: 100%;
background-color: #e0e0e0;
}
button#button {
margin-top: 32px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar">
<div class="progress">
</div>
</div>
<button id="button">MORE PROGRESS!</button>

Finally i Use this code to change div width on the place of loading web :
//First is width 20 in the css
#myBtn {width:20px;height:30px;background-color:white;transition: all 0.5s ease 0s;}
**The HTML :**
// width 62.5% after load div#2013
$('#2013').load("load" , function() {
$('#myBtn').css('width', '62.5%');
});
some images
//last 100% after load div#2010 with images and with fadeout
$('#2010').load("load" , function() {
$('#myBtn').css('width', '100%');
setTimeout(function(){$('#loading').fadeOut()}, 2700);
});

How to create Split Image Effect with Jquery

Please refer this http://54.66.151.166/
=> Go to Canvas->Split Image->Select Size and Shape.
=> Refer various sizes given and proceed for next step.
=> Upload any image and check for the canvas effect for various sizes.
If I to develop the same kind of functionality with the using only jquery or canvas, does any have idea how can I implement this?

we are going to make an image splitting effect
HTML
<!--START THE IMAGE PARTS HOLDER-->
<div class='images_holder'>
<!--INSERT THE SAME IMAGE IN 2 DIVS, THEY BOTH HAVE image_div CLASS AND left OR right CLASS DEPENDING ON POSITION-->
<div class='image_div left'><img class='box_image' src='img.jpg' style='width:300px'/></div>
<div class='image_div right'><img class='box_image' src='img.jpg' style='width:300px'/></div>
<!-- WE USED CSS FLOAT PROPERY, SO WE NEED TO CLEAR NOW-->
<div class='clear'></div>
</div>
<!--END THE IMAGE PARTS HOLDER-->
<!--START THE TEXT-->
Just some dummy text.
<!--END THE TEXT-->
</div>
<!--END THE MAIN CONTAINER-->
CSS
.box_container{
position:relative; /* important */
width:300px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
height:220px; /* important */
overflow:hidden; /* hide the content that goes out of the div */
/*just styling bellow*/
background: black;
color:white;
}
.images_holder{
position:absolute; /* this is important, so the div is positioned on top of the text */
}
.image_div {
position:relative; /* important so we can work with the left or right indent */
overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */
width:50%; /* make it 50% of the whole images_holder */
float:left; /* make then inline */
}
.rightright img{
margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */
}
.clear{
clear:both;
}
JQUERY
$(document).ready(function() {
//when the user hovers over the div that contains our html...
$('.box_container').hover(function(){
//... we get the width of the div and split it by 2 ...
var width = $(this).outerWidth() / 2;
/*... and using that width we move the left "part" of the image to left and right "part"
to right by changing it's indent from left side or right side... '*/
$(this).find('.left').animate({ right : width },{queue:false,duration:300});
$(this).find('.right').animate({ left : width },{queue:false,duration:300});
}, function(){
//... and when he hovers out we get the images back to their's starting position using the same function... '
$(this).find('.left').animate({ right : 0 },{queue:false,duration:300});
$(this).find('.right').animate({ left : 0 },{queue:false,duration:300});
//... close it and that's it
});
});

Slide gallery with image tooltips, images breaking out of unlimited width block

I'm trying to develop a slide gallery with image tooltips according to this design:
What I need to develop is a slider controlled by two buttons, each time a button is pressed the slider's content must move a width of the slider or the width of the content left on that side, whichever is smaller. Upon mouse entering an image inside the slider the full-size version must be displayed as a tooltip.
Here's a fiddle of my solution so far, the problem I'm having is that images that don't fully fit into view plus the hidden area to the left get moved to a new line. You can see the problem by clicking the
"Show content size" button, the width of the content element will be equal to the width of the container element + content element's margin-left.
Bonus points if you can suggest an algorithm for moving the content to the right, I've got left figured out to a T (or so I think, anyway), but right is going to take a little more work (it doesn't check whether the end of the content has been reached). Update: It seems I can't implement proper movement to the right until the other issue is resolved, here's the algorithm I came up with, I can't measure "left to display" if I can't measure the actual width of the content element.

I created something you might like:
gallery demo
The gallery does not scroll the full gallery width by default (you can change that) cause some initially cut-off images at the right side, after a 'full' slide would result cut-off again, just on the other side of our gallery. You have for that cause the beKind variable. Adjust it as you like.
It hides the buttons if there's not enough content to make the gallery usable.
The gallery calculates the remaining space to scroll.
Once the slider end reached - the left/right buttons make the gallery jump to the beginning/end, so that are always usable. (Seems kinda weird to have a button... but that does nothing right? ;) )
The Tooltip has a hover-intent built in, to not piss off our users if they unintentionally hovered our gallery: (the tooltip fades in if the hover is registered for more that 120ms. Fair timing. I like it.)
As pointed out in your comment now the tooltip will not go off the screen.
jQ:
// Slide Kind Gallery - by roXon // non plugin v. // CC 2012.
$(window).load(function(){
var galW = $('#gallery').outerWidth(true),
beKind = 120, // px substracted to the full animation to allow some images to be fully visible - if initially partly visible.
sumW = 0;
$('#slider img').each(function(){
sumW += $(this).outerWidth(true);
});
$('#slider').width(sumW);
if(sumW <= galW){ $('.gal_btn').remove(); }
function anim(dir){
var sliderPos = Math.abs($('#slider').position().left),
rem = dir ==='-=' ? rem = sumW-(sliderPos+galW) : rem = sliderPos,
movePx = rem<=galW ? movePx = rem : movePx = galW-beKind;
if( movePx <= 10){
movePx = dir==='-=' ? movePx=rem : movePx = galW-sumW;
dir = '';
}
$('#slider').stop(1).animate({left: dir+''+movePx },1000);
}
$('.gal_btn').on('click', function(){
var doit = $(this).hasClass('gal_left') ? anim('+=') : anim('-=');
});
});
And the tooltip script:
// Addon // Tooltip script
var $tt = $('#tooltip');
var ttW2 = $tt.outerWidth(true)/2;
var winW = 0;
function getWW(){ winW = $(window).width(); }
getWW();
$(window).on('resize', getWW);
$('#slider img').on('mousemove',function(e){
var m = {x: e.pageX, y: e.pageY};
if( m.x <= ttW2 ){
m.x = ttW2;
}else if( m.x >= (winW-ttW2) ){
m.x = winW-ttW2;
}
$tt.css({left: m.x-ttW2, top: m.y+10});
}).hover(function(){
$clon = $(this).clone();
var t = setTimeout(function() {
$tt.empty().append( $clon ).stop().fadeTo(300,1);
},120);
$(this).data('timeout', t);
},function(){
$tt.stop().fadeTo(300,0,function(){
$(this).hide();
});
clearTimeout($(this).data('timeout'));
});
HTML
(Place the #tooltip div after the body tag)
<div id="tooltip"></div>
<div id="gallery_container">
<div id="gallery">
<div id="slider">
<img src="" alt="" />
<img src="" alt="" />
</div>
</div>
<div class="gal_left gal_btn">◀</div>
<div class="gal_right gal_btn">▶</div>
</div>
CSS:
/*GALLERY*/
#gallery_container{
position:relative;
margin:0 auto;
width:600px;
padding:0 30px; /*for the buttons */
background:#eee;
border-radius:5px;
box-shadow: 0 2px 3px #888;
}
#gallery{
position:relative;
height:100px;
width:600px;
overflow:hidden;
}
#slider{
position:absolute;
left:0px;
height:100px;
}
#slider img{
height:100.999%; /* fixes some MOZ image resize inconsistencies */
float:left;
cursor:pointer;
border-right:3px solid transparent; /* instead of margin that could leat to some wrong widths calculations. */
}
.gal_btn{
position:absolute;
top:0px;
width:30px; /*the container padding */
height:40px;
padding:30px 0;
text-align:center;
font-size:30px;
cursor:pointer;
}
.gal_left{left:0px;}
.gal_right{right:0px;}
/* end GALLERY */
/* TOOLTIP ADDON */
#tooltip{
position:absolute;
z-index:100;
width:300px;
padding:10px;
background:#fff;
background: rgba(255,255,255,0.3);
box-shadow:0px 3px 6px -2px #111;
display:none;
}
#tooltip *{
width:100%;
vertical-align:middle;
}
/* end TOOLTIP ADDON */
Hope you'll like it, and you learned some useful UI design tricks.
By the way, if you want to populate your ALT attributes (Search engines like it!) you can also grab that text and make it appear inside the tooltip like here!:
demo with text inside the tooltip
Happy coding.

I don't know if I understand correctly your problem. If you set a width wide enough to .scroll-content div, images wouldn't go to the "next line". So a solution would be to set a width with css. If not, you could use jquery to determine the total width of all the images and give it to the .scroll-content div. Calculate total width of Children with jQuery

CSS: dynamic width div

I'm coding a slider and I have problems with the stylying of the container.
I have 3 div:
A div that sets the width and height of the slider
A container div with all the content divs (and the scroll for the slider)
Many divthat show different contents each
What I want to do is apply a negative margin on the second div to slide the content.
LIVE example: http://jsbin.com/efuyix/7/edit
JS:
function animate(element) {
var start = new Date();
var id = setInterval(function() {
var timePassed = new Date() - start;
var progress = timePassed / 600;
if (progress > 1) progress = 1;
element.style.marginLeft = -50 * Math.pow(progress, 5)+"px";
if (progress == 1) {
clearInterval(id);
}
}, 10);
}
CSS
.example_path {
overflow: hidden;
width: 50px;
height: 50px;
}
.example_block {
min-width: 100px;
height: 50px;
float:left;
}
.example_in_block {
width: 50px;
height: 50px;
float:left;
}
HTML
<div class="example_path">
<div class="example_block" onclick="animate(this)">
<div class="example_in_block" style="background-color:blue;"></div>
<div class="example_in_block" style="background-color:pink;"></div>
<div style="clear:both;"></div>
</div>
</div>
The problem:
The width of .example_block has to be exactly the same or more than (amount of content divs .example_block * 50 [width size of content div] ) to work.
For example, if I set the width size of the .example_block to 90, the pink div will be below the blue div and not beside it.
I want the container div to be dynamic so I don't have to set the specific width size.
How can I do this?

Simply remove the float:left in the .example_block.
See http://jsbin.com/efuyix/9/edit

Not with negative margins. You can probably set padding on one of the outer DIVs.
Also, min-width isn't going to be backwards compatible with older versions of IE.
Check this example: http://jsfiddle.net/5xBYN/6/
If the initial positioning is good, you can then use negative values on your container DIV (the third DIV) for top, left, right or bottom to achieve sliding.
Update:
Maybe this is closer to what you want. http://jsfiddle.net/5xBYN/7/
I'm still not sure what you are trying to do. Maybe edit the fiddle I posted and update your question with what I'm getting wrong if there is anything.

Positioning a "reel" div properly in jQuery when total width is dynamic

I'm writing my own small pager control in Javascript and jQuery and having trouble positioning it properly.
The pager is set to only be a specific width (340px in this case) which allows it to display roughly ten page buttons. If the user has selected a higher page, I'd like the reel to slide to the left and show the selected page in the center. Since the number of pages is set dynamically (I build the pager in js when the page is loaded) and their width is not constant (double-digit page number buttons are wider than single-digit buttons) how can I determine and then set the pager to the correct position?
I was attempting to use the following code:
(where my buttons are labeled "#Nav1", "#Nav2", etc...)
if (currentPage < 7) {
newPos = 0;
}
else {
newPos = $('#Nav' + (currentPage-5)).position().left;
}
$('#reel').animate({left: newPos*-1}, 700);
But the #reel div is wrapping so position().left doesn't return the position I need.
Suggestions?
Here is my HTML/CSS markup:
<style type="text/css">
div#pager div
{
display: inline-block;
}
#navContainer
{
width: 340px;
height: 28px;
overflow: hidden;
position: relative;
}
#reel
{
position: absolute;
top: 0;
left: 0;
}
</style>
<div id="pager" class="buttons">
<div id="preButtons"></div>
<div id="navContainer">
<div id="reel">
</div>
</div>
<div id="postButtons"></div>
</div>

You'll need to manually give #reel a width equivalent to the number of items * the width of each item.
A dynamic way to do this is to load in all of the items, place them in a hidden, unbounded div, then set the width of #reel equal to the width of that div.
Try this before your carousel code:
var dummyDiv = $('<div id="dummy" class="buttons" style="position:absolute;display:none"></div>');
dummyDiv.appendTo('body');
dummyDiv.html($('#reel').html());
var reelWidth = dummyDiv.css('width');
$('#reel').css({'width':reelWidth});
This will allow you to dynamically set the width of the #reel div so it doesn't wrap without knowing the exact size of the contents statically.