I modified a version of the iScroll touch scroller. It was modified based on the carousel demo in the sample file when you download the library.
I need to center the text that is displayed when you scroll through each item and when it hits the end of the list it should correctly cycle back to the first item. This is the default behavior.
I got as far as centering the first text item but it only centers the text in the currently selected item and when another item is selected it breaks the text centering, this also breaks the snap back to first element effect when the list is done. I did this by simply adding a margin
margin:0 250px.
A sample of the modded scroller is here: http://jsfiddle.net/egfx/5TswV/2/show/
buggy code: http://jsfiddle.net/5TswV/3/
And the library is here: https://github.com/cubiq/iscroll/tarball/master
my resolution: 1600x1200
I am looking for a stretchable solution that would fit any container and res.
Thanks.
Here is your problem: Your Li's are smaller than your container, if you find a way to make the li's the same width as the container, everything will be aligned correctly.
http://fiddle.jshell.net/5TswV/5/show/
http://fiddle.jshell.net/5TswV/5/
Using jQuery:
$('#scroller li').width($('#wrapper').width());
$(window).resize(function(){$('#scroller li').width($('#wrapper').width())});
Related
I want to make a slider with a scrollable right-justified image and text like in the image, how can I do this? https://prnt.sc/26mtj6v
I am sending a sample site and picture, you can check it. The image I sent has a scrollable image and a box section for text. Half of the 2nd image will be visible and when you slide to the left in the slider logic, 2 images will come to the front and the text inside the box will change.
https://prnt.sc/26mtuw6
Although not exactly the same, our latest project section on this site is an example
http://paul-themes.com/html/liarch/home-default.html
If you wish to make a design like the img below :
For the images of my code below, I'm using Bootstrap 5.1.3 (the class names are mostly from the framework)
1) you will need to use some display: flex on a container in order to have elements in a row and next to each other (create it in your CSS to use that, if you're not using the Bootstrap Framework). Also, add a width:100% on that container in order for it to take the whole space (it's the w-100 class from Bootstrap, or else, add it in your personnal CSS - here 100% is 100% of body)
2) you will need to make that container scrollable with a overflow-x:scroll
3) you will need to create a block (div) for your title and paragraph that needs to be in position: absolute and give it top/bottom/right/left coordinates
5) you will need your container to be in position: relative, so the title/paragraph (step 3) is placed depending on the container
6) you will need to give your imgs a width sufficiently big enough for the scroll to actually start working (you need the elements inside your container to be larger than the container's total width so it becomes scrollable)
This is a quick example I made :
Here is the code of my example
HTML :
CSS :
So I'm trying to make a double slider in Owl-Carousel 2.0,
The first slider has 9 images, which means it has 9 dots. These dots are in placed in a container, #customdots. I'm trying to make the position of these dots be: horizontally centered (which works), and appear on top of the second slider, so position, bottom should be the height of the second slider (#sync2).
I tried using JQuery to do this, with the following line of code:
$("#customDots").css('bottom', $("#sync2").outerHeight()+ "px");
However, this doesn't get the actual #sync2 height, and it doesn't update on moving the window, neither does using height().
How would I go about making this #customDots div stick to the top of #sync2, when it can't be a child of #sync2?
See full codepen here: http://codepen.io/JJvanSteijn/pen/aJxgdW
I would wrap #sync2 in an element (I created #sync2Container), use that new element to position the second slider at the bottom of the window, and just add the dots to the top of that element. http://codepen.io/mcoker/pen/JWgKxJ
You need to add height to the CSS for #sync2:
#sync2{height:210px}
and use JS code to get the height:
$('#customDots').css('padding-bottom','0px');
$('#customDots').css('bottom',sync2.outerHeight());
Hope it's useful.
My problem is that after scrolling in the #leftnav the #leftnavHover does not position itself according to the new top css value. I need the #leftnavHover div to follow in the same way the native title text for the browser does.
Here's a fiddle http://jsfiddle.net/fauverism/b4rwb/6/
Here's a step by step of what I'm describing...
Visit the link and hover over Sabers in the nav
Scroll inside the nav div
Hover over Sabers again and you'll notice that the placement of the Sabers text inside of the #leftnavHover is in the same place. The div placement does not insert the new topAfterScroll array. The array is only present once and it then gets removed with the original value.
Here are some details...
I can't seem to store the array that is retrieved after the scroll from topAfterScroll into a new var
This only has to work in Chrome :)
Yes I know that this does seem strange to do since browsers handle this functionality just fine. It's a Chromium issue.
Just subtract the scrolled pixels using jQuerys scrollTop (API) on #leftnav like this:
$('#leftnavHover').text(this.title).css('top', this.offsetTop - $('#leftnav').scrollTop());
http://jsfiddle.net/b4rwb/7/
I have a div of fixed dimensions into which some JavaScript functions will be placing text over time. When the amount of text exceeds the height of the box, a scrollbar appears thanks to overflow:scroll.
The new problem is that the view into the div stays at the same place as more content appears. What I mean to say is that it stays scrolled wherever it is as more content appears beneath, hidden unless you manually scroll down. I want to make it automatically scroll to the bottom as new content appears so that the user naturally sees what appeared most recently instead of what's oldest.
Ideas?
You can use scrollTop method after each text addition:
$("div").scrollTop($("div").children().height());
Use inner block to get the true height.
DEMO: http://jsfiddle.net/eyY5k/1/
I found this approach to work for my needs:
var realHeight = $("#history")[0].scrollHeight;
$("#history").scrollTop(realHeight);
Do note this uses jquery.
I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left
Having a little trouble fully understanding, but is this sort of what you mean?
http://jsfiddle.net/V3RHr/2/
If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.
When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.
You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.
You should be able to fix the left is null issue by having the code not execute on the last .content, like this:
$('.container').not(':last').find('.menu-item').mouseenter(function () {
This will not apply to the menu-items within the green box.
For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:
.animate({width: 'show'})
Which will give a similar sliding effect.
That, or do it similar to my response to your other question, only without the collapsing I had previously:
http://jsfiddle.net/V3RHr/3/