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
Related
I'm developing a webpage for that contains Jssor slider. I'm using jssor.slider-27.5.0.min.js. The webpage also have daterange picker. I have button that generate Jssor slider based on selected dates.
At default, the webpage brings images for the past 30 days and show them as Jssor slider. At this point, the slider works fine. When the Jssor slider generator is clicked, the existing Jssor slider is removed using $("#jssor_1").html(""). Then another Jssor slider is created and correct image is shown on the webpage. However, I cannot change/drag pictures.
Can you please help me to resolve my issue?
thanks.
Simply clear inner html will break the dom hierarchy of elements, it doesn't work.
You can use $AppendSlides(slidesHtml[, slideIndex]), $RemoveSlides(slideIndices), $ReloadSlides(slidesHtml) to manage slides.
See https://www.jssor.com/development/api-methods-properties-events.html
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">
I have just started using a library called JSSOR (for sliding elements) http://www.jssor.com/ and I'm wondering if there can be more than one element sliding on the same page.
I couldn't get it to work using a javascript library called marquee (not marquee the tag).
Yes, you can place multiple jssor sliders on one page.
Note that different slider uses different name. If the name of the first slider is slider1, you can name the second slider as slider2 then.
Btw, you can search jssor multiple on stackoverflow.
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.
I want to have a static footer image with 5 buttons for navigation in my mobile phone website. The image is here http://www.pintum.com.au/jm/footer3a.jpg. The blue icons should be the default, the yellow icon should only be visible for the hover or active state.
I want to know how can I make this image scale to the correct width on all mobile devices (landscape and portrait) and have links to other pages and make the current/active pages icon the yellow color?
What I have tried so far
I first tried to make a CSS Sprite but that go ugly (complex) quickly. Painful working with widths everywhere so the image scales correctly as I had no way of knowing the height in pixels since the width is dynamic. I could use JS to find the width and calculate height on the fly. But this sounds like overkill.
Next I tried to have a single image with a width of 100% then place div overlays on top of the image. But with this solution I could not figure out how to navigate pages using JavaScript click event, or figure out how I would be able to change the image icon on the selected page http://jsbin.com/uraya5/3/ . And detrmining the correct height for the div
Last I tried to make each button a seperate image. These seems like the easist soultion. But jQuery Mobile adds a bunch of extra styles to the button I do not know how to remove. See http://jsbin.com/uraya5/4
So whats the best/easiest way to do this?
How can I remove the style around
links?
Or can I use a single image CSS sliding door method? To reduce HTTP request.
Ok I figured it out
See soultion here http://jsbin.com/uraya5/10/
I had to:
Set width to 19% of each button for
some reason there is spacing between
each button so 20% does not work.
Set ui-bar-a background to black so
it hides the spaces between my
images
Use this JS code to navigate pages $.mobile.changePage($("#about"),
"flip", true, true);
I would still like to use a single image instead of having 5 different images to reduce http calls. So if anyone finds a eligant soultion for this please let me know.