javascript content slider displaying only first slide - javascript

I have a text slider on my home page, that should display slides individually according to which arrow is selected. Currently, only the first slide is showing and each slide thereafter is blank. What am I missing to make each individual slide show?
jsfiddle
jQuery(document).ready(function($){
// Setup Variables
var slides = $('#slider_mask .slide_container').children();
var total_slides = slides.children().length;
var slide_width = $('#slider_mask').width();
var current_slide = 0;
slides.not(':first').hide();
// Set the width of the slide_container to total width of all slides
$('#slider_mask .slide_container').width(slide_width*total_slides);
// Handle Right Arrow Click
$('#slider_mask .right_button').on('click', function() {
current_slide++;
if(current_slide == total_slides){ current_slide = 0; }
var negative_margin_required = current_slide*slide_width;
$('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');
});
// Handle Left Arrow Click
$('#slider_mask .left_button').on('click', function() {
current_slide--;
if(current_slide < 0){ current_slide = total_slides-1; }
var negative_margin_required = current_slide*slide_width;
$('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');
});
});

Check out this fiddle. I scaled it down to a minimum.
I started with the slider mask having the fixed width and set the other widths off of that.
Ludovico Grossi is correct about making the slide element float left. When they are "block" elements without the float, they stack. If they are changed to "inline" elements, they cannot have a fixed width. It worked to set them to "inline-block", but I don't know if that is supported in all browsers. Having them as "block" and float left works.
I also had to make some other changes. One of which was that the .animate() function does not cause a hidden element to be shown. It says this on the documenation page. Instead of hiding the slides by calling .hide(), they simply are out of view by having overflow set to hidden for the mask element.
I also put the text-align center on the slide elements, rather than the container element.
UPDATE:
I created another fiddle that starts with the code from adeneo's fiddle and includes the necessary changes. I put comments next to all the code and CSS that was added, removed, or changed. I had to make one change to the html. I added the <div id="home"> element that wraps everything. Without it the CSS selectors don't match anything.

Check your css:
slide: fixed width, float left.
container: width n_slide * slide_(outer)_width
slide mask: the same as a single slide width, overflow hidden.

Related

Animate image left to right on scroll

What I am trying to do is I have around 6 inline images I want slide them left to right on specific position and stop there for each image. And images have to slide at the time the scrool comes over them.
I tried this javascript for it (totally new to JS)
$(window).scroll(function(){
if($this.scrollTop()>300)
{
$('.onfoot1').slideright();
}
function slideright(){
var a = getElementsByClassName('.onfoot1');
var stoppos = 100;
if (parseInt(a.style.left)< stoppos )
{
a.style.left = parseInt(a.style.left) + 3 + "px";
setTimeout(slideright , 1);
}
}
});
Markup
<div class="onfoot1"></div>
CSS
div.onfoot1{
content:url(../img/onfoot1.jpg);
left:0;
}
I've put together a working examle for your code: https://jsfiddle.net/hmzw9y65/
I've made a few assumptions there... You are using $(...) syntax so I guessed you are using JQuery. JQuery has a .animate() function which should do the trick (http://api.jquery.com/animate/). Also I guessed that you may want to make the css-position of the div fixed so it stays on screen when you scroll.
EDIT: I noticed that you don't want you image on the bottom of the screen but animating when screen reaches it. Updated my fiddle to do that: https://jsfiddle.net/hmzw9y65/1/

Using Jquery to toggle on and off items based distance to top

I am creating a site in which there are a number of fixed background images that you scroll past. Associated with each fixed background is an image slider (or text) that is hidden until the title is clicked on. These items are all fixed positioned.
I was able to make this work by using z-index to place items in order top to bottom/first to last and then have each disappear in turn using:
$(document).scroll(function() {
$('#porttitle').toggle($(this).scrollTop() < 225);
});
However, I am unable to use this because the length pixel distance down on the page changes based on the screen size. I am pretty new to Jquery but wanted to try to use .offset .top to have the item disappear not based on the pixel length to the top of the page but instead when an element appears on the screen. This is what I have so far but it isn't seeming to work.
$(document).scroll(function() {
$('#porttitle').toggle($(this).scrollTop() < $(‘article.post-100’).offset().top);
});
Here is the link to the site: http://s416809079.onlinehome.us (not final location - just developing)
Any thoughts?
Thanks!
I think this may work for you, read the comments on the code for a line by line explanation.
Working Example
$(window).scroll(function () { // When the user scrolls
$('div').each(function () { // check each div
if ($(window).scrollTop() < $(this).offset().top) { // if the window has been scrolled beyond the top of the div
$(this).css('opacity', '1'); //change the opacity to 1
} else { // if not
$(this).css('opacity', '0'); // change the opacity to 0
}
});
});
I'm conditionally changing the opacity rather than using toggle because:
...jQuery does not support getting the offset coordinates of hidden
elements or accounting for borders, margins, or padding set on the
body element.
While it is possible to get the coordinates of elements with
visibility:hidden set, display:none is excluded from the rendering
tree and thus has a position that is undefined.
Related documentation:
.offset()
.each()
.scroll()
.scrollTop()

Making the column height same and remove extra content

I have a question, my webpage has many div section and have multiple ul li.
It is 2 column design and what i need to do is to set the same height for both corresponding div section.
For example check the image, it is one section and what i want is to set the height for the shortest div and remove the large div content. Is this possible to do?
I checked on internet but what i am getting is to set the both column height but unable to find how can i remove the content.
The right image is what i want.
Please help :)
Assuming you're using jQuery, try this:
var $targets = $('.awesomeClass'),
targetHeight = $targets.first().height();
$targets.each(function() {
var $this = $(this);
if( $this.height() < targetHeight ) {
targetHeight = $this.height();
}
});
$targets.height( targetHeight );
This code will set the height of all matching elements to the height of the shortest member.
Just make sure all your target elements have the class awesomeClass, or whatever class you decide to use, and add an overflow: hidden; so the overflowing elements are cut off. This method will remain functional even if you decide to change the number of elements etc.
Removes elements until the first div height is less than or equal to the second one:
while($('#div1').height() > $('#div2').height()) {
$('#div1').find('li:last-child').remove();
}
Say you have following two div's on the page as:
<div class="left">
<ul>/<ul>
</div>
<div class="right">
<ul></ul>
</div>
You want both of them to have the same height i.e. the minimum out of the two.
Well, its simple with following jQuery Code:
var leftHeight = $(".left").height();
var rightHeight = $(".right").height();
if(leftHeight > rightHeight)
{
$(".left").height(rightHeight);
}
else
{
$(".right").height(leftHeight);
}
Of course you need to set Overflow-y:hidden, for the div and ul, so the scroll bar doesn't appear.
It's better to set explicit height, then to remove html elements

Scrolling div within bounds

I have div with images inside it and need to scroll it left and right. I,ve managed to get the scrolling to work, but now I need it to stay in the displayable area.
I need to use jQuery
$('#next').click(function() {
$('#slides').animate({left: '-=80',}, 2000, function() {});
});
$('#prev').click(function() {
$('#slides').animate({left: '+=80',}, 2000, function() {});
});
The two "buttons" is used to scroll.
How do I get the slides' position.left to stay between 0 and -1120 ?
This will be the bottom of my slideshow. The large images will be at the top.
How do I change the z-index of a div ?
You change the z-index using css:
div.class {
z-index: 60;
}
You should get the width of your displayable area then by making use of the width() method.
If you have the maximum width you can use you can easily implement a check before your animation. So if the new width (current - 80) is bigger than 0, fine ... animate it. If not, don't.
Same for scrolling to the right. If it's bigger than your displayable area's width, then don't scroll.
EDIT
You changed your question slightly, so to get the current left value you can check it with:
$('#element').offset().left
This returns the current integer value of your left attribute. Thus again you can verify its current value and compare it with the one that it'd be like after you animated it. If it's too big or too small, don't scroll.
You can check the css left value is in the interval:
if(parseInt($('#slides').css('left')) > -1120 && parseInt($('#slides').css('left')) < 0){
....//animate here
}

Jump to content inside of a scrollable div

I got the following HTML:
<div style="height:200px;overflow-y:scroll;">
<table>.....</table>
</div>
With this setup I'm somewhat mimicking the expanded <select> control with #size attribute defined. So, that a user could select a row in the table. Is there a way, to make the table "jump up", so that the selected row appears to be at the top of the div and the vertical scrollbar scrolled to its position. I don't need the actual scrolling effect. The table should change it's position right away on row click.
This might work:
$("#scrollableDiv").animate({
scrollTop: 200 // scrolls to the bottom
}, 1000);
I suggest using scrollTop (or even animate it if you want).
$('div')[0].scrollTop = 200 //would set the scrollable div to 200px down.
http://jsfiddle.net/8mepH/
Here is an modified extract of the code used in:
http://www.balupton.com/sandbox/jquery-scrollto/demo/
To do what you want:
// Fetch the scrollable div
$container = $('#scrollable');
// Fetch the target div
$target = $('#target');
// Prepare the Inline Element of the Container
var $inline = $('<span/>').css({
'position': 'absolute',
'top': '0px',
'left': '0px'
});
var position = $container.css('position');
// Insert the Inline Element of the Container
$container.css('position','relative');
$inline.appendTo($container);
// Determine the Offsets
var startOffset = $inline.offset().top,
targetOffset = $target.offset().top,
offsetDifference = targetOffset - startOffset;
// Perform the jump
$container.css('scrollTop',offsetDifference+'px')
We add a inline here to ensure we get the correct start position within the scrollable area. We use a offset difference so if you want to do animations it animations from the start position, rather than jumping somewhere else.

Categories

Resources