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
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
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
I am using the default settings for the Leaflet (cloudmade) Simple project (https://github.com/perrygeo/leaflet-simple-csv/blob/master/README.md).
I have a 1300 record CSV which displays well, and on-click the attributes display text in popup window.
Two of the fields are URLs to small JPG images. I would like these to display in the popup window. I've tried but to no avail.
Link to project: http://erichsen-group.com/demoland/datademo/projects/
How can I show the images?
Have you tried using <img></img> tags instead of <a href></a>? they are links because they are written as links. Or you can do <img src="mySource"> dont forget to play with the styling of the img tag. The height and width.
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.
I have a UIWebview that I am loading with custom HTML using loadHtmlString. My HTML has a link that I intercept when tapped so that I can take control and reload the UIWebview with a different HTML string. The code works, but the area where the link text was located is replaced with a gray rectangle that is visible when the new string is loaded.
What could be going on here? How can I get rid of this behavior?
//Scott
Here it is...need to add this style statement to the link reference:
<a href=http://yourlink.com/ style = "-webkit-tap-highlight-color:rgba(0,0,0,0);">
Setting the alpha value (the last parameter to rgba) to 0 disables the tap highlight color.
Although this works, it feels like a hack. I really think the tap highlight should clear itself when my second loadHtmlString reloads new HTML code.
//Scott
You could add onclick="this.blur(); location.href=this.href;" to the link to remove the focus from the link.
I'm sure there's a better less hackish way, but this should work