Is there a way to add the scrollbar to vertical image list in this JSSOR demo?
Instead of having the functionality of "drag and scroll", it would be useful if we would have a scrollbar indicating the number of images in the list.
using the mark-up of the example slider:
you need to change the following style for <div class="jssort01-99-66">:
style="width:250px; overflow-y:scroll;"
now you have a scroll bar on the right of your thumbs
Related
What does the jssor Javascript base its image width calculations on for the jssor_1 div id?
I am creating a jssor image slider using Blogger Code option (paid subscriber) to copy/paste in my website CMS. Created page here: http://lower-hudson-regional-information-center.echalksites.com/groups/41146/zlorem_ipsum_1/just_slides
In <1300 browser width (and phone sized) responsive modes I observe the image width appears to extend too far on the right overflowing its div container. Screenshot example: screenshot with right edge overflow
Only possible issue I have been able to identify is that something is causing the Jssor Javascript to calculate an image width for the jssor_1 div id that is skewing the display of the slider on the page.
I am hoping a Jssor Javascript and/or CSS guru might lend their expertise in identifying the cause of this issue with using my jssor slider in my website CMS.
You defined padding for the css rule 'social-content'.
Please move jssor slider out from <div class="social-content">
Can form fields be layered on top of the jssor slider?
I might want to use the content slider but have search form fields on top of the slider that don't change position even though the slider is changing pics.
I looked i think at all the jssor samples but didn't see one quite like as described above.
Thanks
I'm using a JSSOR slider that scrolls content horizontally. My issue is that the slide content is dynamic. An admin has the ability to add and remove images & text from the slider, however not all the divs are the same width. This creates gaps and/or overlapping.
I can create a code to get the width of each slide prior to the initialization of jssor, however I'm wondering if there's a way to apply $SlideWidth to individual slides by index?
Thanks.
Is it possible to make a carousel with text?? like this http://amazingcarousel.com/
Yeah you got carousel with text but the image there is set as background, I need the images to be set in img
Yeah for sure.
You can place everything in slide. You can define content slide as follows,
<div><!-- Any HTML Content Here --></div>
Reference: Define Slides Html Code
Is there a way to get horizontal scrolling implemented in a horizontal panel ?
or any other panel can be used to achieve the functionality mentioned below -
The requirement is that i am creating a search bar where search items are being added as and when user inputs them (something similar to this - http://documentcloud.github.com/visualsearch/)
Well i got the functionality working and even the looks are similar but struggling on the horizontal panel. I am using a horizontal panel as a search bar and it has a suggest box embedded in it. so when user inputs data the search items are added to the horizontal panel. but as and when search items are added the horizontal panel grows in size and moves out of the screen and browser's horizontal scroll bar appears. But i wanted a scroll bar on the horizontal panel itself.
Can this be achieved ?
want some ideas ... any help is appreciated.
Thanks.
You may want to use the css overflow-x attribute. If you want it to scroll set the value to scroll or auto. If you need to constraint the size of the div in specific ways you may need to control it progamatically.
I don't see any other solution than place your HorizontalPanel inside a scroll panel.
Then I would add a CSS property to prevent the vertical scrollbar from showing.
Here's an ui.xml excerpt:
<ui:style>
.scrollHorizontal{
overflow-y: hidden !important;
/* !important used to force override the style "overflow:scroll"
of the ScrollPanel */
}
</ui:style>
<g:ScrollPanel addStyleNames="scrollHorizontal">
<g:HorizontalPanel ui:field="resultsPanel" />
</g:ScrollPanel>
You may need to check the client height of your scroll panel so as to adjust the height of the items inside the horizontal panel, depending on your layout.