We Keep Coding

Custom JQuery Slider (auto-slide)

I'm trying to make image slider with my own without using plugins.
1st question : How to make the animation horizontally
2nd question : Whatever the size of the image, it must cover the height and width of its container, but keeping the proportionalities original image. The image can be rendered partially. How to make this?
3rd question : About the code of the slide, if anyone finds any improvement to make it lighter and more elegant, would be welcome.
$(function(){
setInterval(function(){
var displayed = $(".img-header.displayed");
displayed.animate({opacity : 0}, 500, function() {
displayed.css("display","none");
displayed.addClass("not-displayed").removeClass("displayed");
if(displayed.next(".img-header.not-displayed").length == 0){
$(".img-header:first").css("display","inline-block").css("opacity","1");
$(".img-header:first").addClass("displayed").removeClass("not-displayed");
$(".img-header:first").animate({opacity : 1}, 500);
}
else{
displayed.next(".img-header.not-displayed").css("display","inline-block").css("opacity","1");
displayed.next(".img-header.not-displayed").addClass("displayed").removeClass("not-displayed");
displayed.next(".img-header.not-displayed").animate({opacity : 1}, 500);
}
});
}, 4000);
});
#slider-container{height: 200px; width: 200px;}
#slider-container img.img-header{ width: 100%; height: auto;}
.displayed{display: inline-block;}
.not-displayed{display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider-container">
<img class="img-header displayed" src="http://i.stack.imgur.com/AIHnl.png" />
<img class="img-header not-displayed" src="http://i.stack.imgur.com/XQrms.png" />
</div>

I think you might be looking for something like this.
The slider here is position:relative; with top:100px; you can set as per your requirement. Still i suggest you to keep it positioned relative.
Slider has width:700px and height:500px;, you can change as per your requirement, it will be fine for whatever aspect ratio of image you have or all images with different aspect ratio.
There is an array for images to load which are serially numbered in one location, so you may give little more understanding into that. I have made a comment for that in JS file
Also you could change slider speed and delay as per your requirements.
When you hover over image it will pause the slider, which resumes after you leave image.
Snippet :
$(document).ready(function(){
var noPannel = document.getElementsByClassName("pannel").length;
var i;
var imgArr = [ ];
var pannelWidth = $(".slider_holder").width();
var totalWidth = noPannel*pannelWidth;
for (i=1;i<=noPannel;i++)
{
imgArr[i] = "http://www.picget.net/background/" + i + ".jpg"; //if you have somewhere on other path
//imgArr[i] = " " + i + ".jpg"; //use this if you have image in same folder/path.
}
for(i=1;i<=noPannel;i++)
{
$(".pannel:nth-child("+i+")").css("background","url("+imgArr[i]+")");
}
function jsslider()
{
var curScroll = $(".slider").scrollLeft();
var endScroll = totalWidth - (pannelWidth*2);
if(curScroll<=endScroll)
{
$(".slider").animate({scrollLeft: '+=' + pannelWidth +'px'},900,"swing");// Replace 900 for speed
}
else
{
$(".slider").animate({scrollLeft: '0px'},500,"swing"); // Replace 500 for speed to go bck to first
}
}
var interval = setInterval(jsslider, 3000); // Replace 3000 for delay between each slide.
$(".pannel").hover(function () {
clearInterval(interval);
}, function () {
interval = setInterval(jsslider, 3000); // Replace 3000 for delay between each slide.
});
}); // document.ready ENDS
html, body, *
{
margin:0px;
width:100%;
height:100%;
}
.slider_holder
{
margin-left:auto;
margin-right:auto;
display:block;
position:relative;
top:100px;
width:1024px;
height:768px;
background:#eee;
overflow:hidden;
}
.slider
{
width:auto;
height:100%;
width:100%;
white-space: nowrap;
overflow:hidden;
}
.pannel
{
margin:0px;
display:inline-block;
width:100%;
height:calc(100% - 1px);
/*border:1px solid red;*/
background-size:cover !important;
background-repeat:no-repeat;
background-position:50% 50% !important;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="sliderFunc()">
<div class="slider_holder">
<div class="slider">
<span class="pannel"> </span>
<span class="pannel"> </span>
<span class="pannel"> </span>
<span class="pannel"> </span>
<span class="pannel"> </span>
</div>
</div>
</body>

Get width and height of div ignoring "style" attribute

Im having problem getting the original width and height of a div, without the style property that is generated with a code.
This is how I solved it
var currentWidth = $("#container").width();
var currentHeight = $("#container").height();
$("#container").removeAttr("style");
var containerWidth = $("#container").width();
var containerHeight = $("#container").height();
$("#container").css("width", currentWidth, "height", currentHeight);
$("#container").animate({
width: containerWidth,
height: containerHeight
}, "slow");
This is pretty bad coded and it wont animate the height. I guess there is a easier way to solve this.
Like for example, $("#container").width(ignoring style attr);
Edit, better explenation:
In my css file the original size of container is 500x500.
But then when you click on a link it changes to 800x800 (adding the attribute style), now when you click back I want it to change back to 500x500 but I want the code to find out the original size for easier changes.
The code that changes the #container:
$("#container").animate({
width: 1250,
height: 600
}, "slow");
Thanks in advance!

Updated:
Keep the original width and height as min-width and min-height i.e in your case:
min-width: 500px;
min-height: 500px;
and then do this using jQuery:
$("#container").animate({
width: "",
height: ""
}, "slow");
Working Fiddle

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var curentDivWidth = 500;
var curentDivHeight = 500;
var clicked = false;
$("#ClickMe").click(function () {
if (!clicked) {
$("#container").animate({
width: 1250,
height: 600
}, "slow");
clicked = true; return;
}
$("#container").animate({
width: curentDivWidth,
height: curentDivHeight
}, "slow");
clicked = false;
});
});
</script>
<title>example</title>
</head>
<body>
<a href="javascript:void(0)" id="ClickMe" >click me </a>
<div id="container" style="border:1px solid black" >
the div
</div>
</body>
</html>
jsfiddle : http://jsfiddle.net/seekpunk/JhzAD/

Scroll the page vertically and scroll big image inside div horizontally on mouse drag with jQuery

I have page that I want to scroll vertically on event mouse down, and I already have found the answer on this question link. In my case i have a div that contain image that user put on it and sometimes it have bigger size than my div size, with overflow:auto; i get horizontal scroll inside that div. So i need to apply drag scroll horizontally on that div.
HTML
<html>
<body>
<div id="container">
<div class="detail-title"> TITLE </div>
<div class="detail-content">
<img src="...." />
!-- long content --!
</div>
</div>
</body>
</html>
CSS
.detail-main-content-box {
background: none;
display: block;
left: 0;
min-height: 350px;
overflow: auto;
padding: 5px 5px 5px 5px;
width: auto;
}
jQuery from answer link
$(document).on({
'mousemove': function (e) {
clicked && updateScrollPos(e);
},
'mousedown': function (e) {
clicked = true;
clickY = e.pageY;
$('html').addClass('block-selection').css({ 'cursor': 'url(../img/closedhand.cur), default' });
},
'mouseup': function () {
clicked = false;
$('html').removeClass('block-selection').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$(window).scrollTop($(window).scrollTop() + (clickY - e.pageY));
};
how can i apply this on div? i have try to change $(document) to $('.detail-content') also change function scrollTop to scrollLeft but nothing happen. Here is the fiddle for current condition.

this has been left here unanswered for two long years, not even a useful comment. OK, here is my try. hope it can help ( le roi est mort vive le roi)
<script type="text/javascript">
var clicked = true;
var clickY = e.pageY;
$('.detail-content').on({
'mousemove': function (e) {
clicked && updateScrollPos(this,e);
},
'mousedown': function (e) {
clicked = true;
clickY = e.pageY;
$('html').addClass('block-selection').css({ 'cursor': 'grabbing' });
},
'mouseup': function () {
clicked = false;
$('html').removeClass('block-selection').css('cursor', 'auto');
}
});
var updateScrollPos = function(obj,e) {
$(obj).scrollTop($(obj).scrollTop() + (clickY - e.pageY));
clickY = e.pageY;
};
</script>

Jquery Text Animation customization help needed

I have this jquery sliding text animator. If you look at the example(http://blog.waiyanlin.net/2008/12/17/jquery-flying-text-with-fade-effect/), the active text that flies in disappears again after it has made its entrance. I would like each animated text to stay there after appearing and wait until all the text has appeared, then all text should disappear and restart again.(so basically instead of each text disappearing after flying in, it should stay visible only until the last text element has appeared, then restart all over)
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('.container .flying-text').css({
opacity: 0
});
$('.container .active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 4000);
var int = setInterval(changeText, 5000);
function changeText() {
var $activeText = $(".container .active-text");
var $nextText = $activeText.next();
if ($activeText.next().length == 0) $nextText = $('.container .flying-text:first');
$activeText.animate({
opacity: 0
}, 1000);
$activeText.animate({
marginLeft: "-100px"
});
$nextText.css({
opacity: 0
}).addClass('active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 3000, function() {
$activeText.removeClass('active-text');
});
}
});​
</script>
CSS
.container{
width:500px;
margin:0 auto;
color:#FFF;
overflow:hidden;
}
.flying-text{
margin-left:-100px;
color: #fff;
}
HTML
<div class="container">
<div class="flying-text active-text">I believe</div>
<div class="flying-text">I can</div>
<div class="flying-text">Fly</div>
</div>
Thank You for any help

You need to move the fade out code that runs each time.
function changeText() {
var $activeText = $(".container .active-text");
var $nextText = $activeText.next();
if ($activeText.next().length == 0) {
$nextText = $('.container .flying-text:first');
// To fade all out _ MOVED FROM OUTSIDE THIS IF
var $allText = $(".container div");
$allText .animate({
opacity: 0
}, 1000);
$allText .animate({
marginLeft: "-100px"
});
}
$nextText.css({
opacity: 0
}).addClass('active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 3000, function() {
$activeText.removeClass('active-text');
});
}​
Here is a jsfiddle to illustrate.
UPDATE
Based on some comments, I updated the fiddle to show how you could use jQuery UI effects.

Sliding a div across to left and the next div appears

I have this form Im creating and when you click on the "Next" button I want to slide the next form() across to the left this is my function
jQuery('input[name^=Next]').click(function () {
current.animate({ marginLeft: -current.width() }, 750);
current = current.next();
});
That function isn't working the way I want to. it slides the text in the container across not the whole container it could be a css problem for all I know.
And my form which has a class name .wikiform doesn't center horizontally. here is my full code. I'm not that experience in javascript so you would be appreciated. cut and paste and try it out
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery-easing.1.2.pack.js"></script> <script type="text/javascript" language="javascript">
(function ($) {
$.fn.WikiForm = function (options) {
this.Mode = options.mode || 'CancelOk' || 'Ok' || 'Wizard';
var current = jQuery('.wikiform .view :first');
function positionForm() {
//jQuery('.wikiform').css( {'top':
jQuery('body')
.css('overflow-y', 'hidden');
jQuery('<div id="overlay"></div>')
.insertBefore('.wikiform')
.css('top', jQuery(document).scrollTop())
.animate({ 'opacity': '0.8' }, 'slow');
jQuery('.wikiform')
.css('height', jQuery('.wikiform .wizard .view:first').height() + jQuery('.wikiform .navigation').height())
.css('top', window.screen.availHeight / 2 - jQuery('.wikiform').height() / 2)
.css('width', jQuery('.wikiform .wizard .view:first').width())
.css('left', -jQuery('.wikiform').width())
.animate({ marginLeft: jQuery(document).width() / 2 + jQuery('.wikiform').width() / 2 }, 750);
jQuery('.wikiform .wizard')
.css('overflow', 'hidden')
.css('height', jQuery('.wikiform .wizard .view:first').height() );
}
if (this.Mode == "Wizard") {
return this.each(function () {
var current = jQuery('.wizard .view :first');
var form = jQuery(this);
positionForm();
jQuery('input[name^=Next]').click(function () {
current.animate({ marginLeft: -current.width() }, 750);
current = current.next();
});
jQuery('input[name^=Back]').click(function () {
alert("Back");
});
});
} else if (this.Mode == "CancelOk") {
return this.each(function () {
});
} else {
return this.each(function () {
});
}
};
})(jQuery);
$(document).ready(function () {
jQuery(window).bind("load", function () {
jQuery(".wikiform").WikiForm({ mode: 'Wizard', speed:750, ease:"expoinout" });
});
});
</script>
<style type="text/css">
body
{
margin:0px;
}
#overlay
{
background-color:Black; position:absolute; top:0; left:0; height:100%; width:100%;
}
.wikiform
{
background-color:Green; position:absolute;
}
.wikiform .wizard
{
clear: both;
}
.wizard
{
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
}
.wizard .view
{
float:left;
}
.view .form
{
}
.navigation
{
float:right; clear:left
}
#view1
{
background-color:Aqua;
width:300px;
height:300px;
}
#view2
{
background-color:Fuchsia;
width:300px;
height:300px;
}
</style>
<title></title>
</head>
<body><form action="" method=""><div id="layout">
<div id="header">
Header
</div>
<div id="content" style="height:2000px">
Content
</div>
<div id="footer">
Footer
</div>
</div>
<div id="formView1" class="wikiform">
<div class="wizard">
<div id="view1" class="view">
<div class="form">
Content 1
</div>
</div>
<div id="view2" class="view">
<div class="form">
Content 2
</div>
</div>
</div>
<div class="navigation">
<input type="button" name="Back" value=" Back " />
<input type="button" name="Next " class="Next" value=" Next " />
<input type="button" name="Cancel" value="Cancel" />
</div>
</div></form></body></html>

Try changing this line:
var current = jQuery('.wizard .view :first');
(which was selecting the form element directly under 'view')
to this:
var current = jQuery('.wizard .view:first');
// The first element with a class of 'view' under an element with a class of
// 'wizard'
Update, due to comments below:
To make a simple scrolling widget, you need the following:
An outer <div> with a fixed width and height
An inner <div> with a fixed height and a very long width.
Code to change the left offset of the inner <div>.
You can see a simple example of a widget like this here: http://jsfiddle.net/andrewwhitaker/feJxu/
For the OP's specific problem, I've modified the code that assigns CSS properties to look like this:
$('.wikiform')
.css('height', $('.wikiform .wizard .view:first').height() + $('.wikiform .navigation').height())
.css('top', window.screen.availHeight / 2 - $('.wikiform').height() / 2)
.css('width', $('.wikiform .wizard .view:first').width())
.css('left', -$('.wikiform').width())
.css('overflow', 'hidden') // ADDED
.animate({marginLeft: $(document).width() / 2 + $('.wikiform').width() / 2
}, 750);
$('.wikiform .wizard')
.css('width', '10000px') // ADDED. May need to be longer depending on content.
.css('height', $('.wikiform .wizard .view:first').height());
I've also changed the animation that 'next' does:
$('input[name^=Next]').click(function() {
$(".wizard").animate({
left: "-=" + current.width() + "px"
}, 750);
}); // Similar logic for 'back'
What this is doing is basically altering the left offset of the view with a huge width (.wizard) and scrolling a new form into the view with a fixed width and height (.wikiform). See a working sample here: http://jsfiddle.net/andrewwhitaker/J9L8s/