I am developing a mobile app using jquery mobile. I am looking to implement a "tips" section. A tip will be visible on the screen, and with a side swipe, I would like to view another tip.
I was under the impression JQM would have a simple carousel type widget... that can be loaded with html content. That does not seem to be the case.
P.S. I am not looking for an image slider specifically, I want to slide and randomize a carousel that can be loaded with html elements (text).
Anyone have some ideas on what plays well with jquery mobile for mobile apps? (Cordova)
I've used Flex-slider and served me quite well.
Working Demo
Product link
Initialization:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".flex-container"
});
});
Markup
<!-- slider -->
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="slides/1.jpg" alt="slide">
<p class="flex-caption">Awesomeness</p>
</li>
<li>
<img src="slides/2.jpg" alt="slide">
<p class="flex-caption"> «Fantastic »</p>
</li>
<li>
<img src="slides/3.jpg" alt="slide">
<p class="flex-caption"> « Wow »</p>
</li>
</ul>
</div>
</div>
Related
So, I'm developing a app for Windows Phone 8.1 and Im having an issue when trying to use scrollable divs (javascript). Using the emulator to test the app, when I scroll down and let go the mouse button, it automatically scrolls back up, making it impossible to click on lower items. Note that Im using overflow:scroll on the div. I also use jquery mobile.
So here is my code:
<div data-dom-cache="false" data-role="page" id="index">
<div data-role="header" data-theme="b">
<h1 style="padding-top:0.2em;padding-bottom:0;border:0"><img alt="ss" src="img/logoHeader.jpg" /></h1>
</div>
<div data-role="content" id="wrapper" style="padding:0.5em; overflow:scroll;" >
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-theme="c">
<a href="#USA" data-transition="slide">
<img src="img/usa.jpg">
<h2>USA</h2>
</a>
</li>
<li data-theme="c">
<a href="#England" data-transition="slide">
<img src="img/england.jpg">
<h2>England</h2>
</a>
</li>
<li data-theme="c">
<a href="#France" data-transition="slide">
<img src="img/france.jpg">
<h2>France</h2>
</a>
</li>
<li data-theme="c">
<a href="#Mexico" data-transition="slide">
<img src="img/mexico.jpg">
<h2>Mexico</h2>
</a>
</li>
I have a few more items listed, so the list is long enough for the user have to scroll down. But when I scroll down, it automatically scrolls back up. I can't even reach the lower items. Any ideas how to fix this?
I have the following jsfiddle. I'm trying to get the right hand side div to slide to where the left div is when a user clicks on any of the example links, i can't figure out how to do this as im fairly new to CSS3 transitions and jquery. Could someone help guide me in the right direction. I've had a look at jQuery animate too but find it a little confusing.
The transition should work in IE10+, anything below it's fine if it doesnt have a transition
http://jsfiddle.net/AV22p/
Below is the structure of my HTML
<section id="modalwindow">
<div id="foodlist">
<div class="links">
<h1>Div 1</h1>
<ul>
<li>Example1 </li>
<li>Example2</li>
<li>Example3</li>
<li>Example4</li>
<li>Example5</li>
<li>Example6</li>
<li>Example7</li>
<li>Example8</li>
</ul>
</div>
</div>
</section>
<section id="modalwindow">
<div id="food_details">
<div class="details">
<h1>Recipe</h1>
<ul>
<li>test </li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
</section>
Not sure if this is what you want since the description is quite vague. But you might be able to convert this to your needs.
divWidth checks for the with of the section. On click of a link the section containing #food_details gets moved the (negative)width of #modalwindow to the LEFT.
$('.links ul li a').click(function(){
var divWidth = '-'+$('#modalwindow').width();
$('#food_details').parent().animate({left: divWidth});
});
http://jsfiddle.net/AV22p/3/
Also note that your first example link has a different/invalid markup than the rest.
I have a simple bootstrap grid defined: jsFiddle
The problem is in bootstrap, we define grid like
<div class="row">
<div class="col-md-4">
...
But in flexslider2 we need to wrap into li, e.g.
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
But I want to retain to the use of bootstrap grid as it is responsive and position more easy to control. So, it is possible to remain my grid but to apply flexslide onto it?
I.e. in the flddle, I want 4 & 5 to be hidden at the beginning.
I don't know if this is what you are after, but actually FlexSlider has a "selector" option that allows you to wrap your slides into any element you want:
jsFiddle
$('.flexslider').flexslider({
selector: ".slides > div.col-md-4"
});
Anyway, maybe Bootstrap styles will interfere with Flexslider (because Flexslider sets the width of the slides when it loads), so not sure if this is a good idea. Probably it's easier to define specific styles for the slides.
I don't see the problem you are encountering, but i have updated your jsfiddle.
You should place the whole flexslider into the column:
<div class="row">
<div class="col-md-4">
<div class="flexslider">
<ul class="slides">
<li>
<img ... />
</li>
<li>
<img ... />
</li>
<li>
<img ... />
</li>
</ul>
</div>
</div>
</div>
I have made on the basis of the script BxSlider slider on its website.
Structure slider is as such:
<ul class="slider-cont">
<li>
<img src="images/slide-1.jpg" alt="">
<div class="caption">caption1.</div>
</li>
<li>
<img src="images/slide-2.jpg" alt="">
<div class="caption">caption2</div>
</li>
<li>
<img src="images/slide-3.jpg" alt="">
<div class="caption">caption3</div>
</li>
</ul>
Caption is over the image and is the way to the left of the slider. My question is whether it is possible using CSS3 or JS to do the same animation to make the text more quickly, "rolling off" and "rode" than the picture? I tried using the tool in the bxslider. OnSlideBefore or OnSlideAfter but I managed to get this effect.
I have made a Spry 4-tabbed panel from Dreamweaver and customised it to use as a portfolio site.
I want to run 'Flickrshow' as the 3rd tabbed panel content. (Flickrshow is a javascript slideshow that links to a Flickr photo sharing account).
My problem is that the Flickrshow slideshow doesn't display in the 3rd tabbed panel content.
However it does display in the 1st tabbed panel content and it also does display correctly when the code is run independently. I also have another Javascript 'simplegallery' running in the 2nd panel content, which works fine. Is this causing a conflict?
Any suggestions why this won't display?
Thanks!
<script src="http://www.flickrshow.co.uk/static/scripts/flickrshow-7.2.min.js"></script>
<script> var cesc = new flickrshow('cesc', {
autoplay:true,
interval:4200,
hide_buttons: false,
license:null,
tags:'website',
user:'52147781#N05'});</script>
<div id="nav1">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">About</li>
<li class="TabbedPanelsTab" tabindex="0">Graphics</li>
<li class="TabbedPanelsTab" tabindex="0">Photos</li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"></div>
<div class="TabbedPanelsContent"><div id="simplegallery1"></div></div>
<div class="TabbedPanelsContent"><div id="cesc"><p>Please enable Javascript to view this slideshow</p></div></div>
<div class="TabbedPanelsContent"><div id="contact"></div>
</div>
</div>