How to stop auto sliding in a flex slider? I have loaded that slider in my mobile web page. When the page is opened, it slides to the next image without any slide or tap event. How to stop this auto slide transition? I need to make it working only when a screen is tapped or slided.
Here is my code:
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<div class="flexslider">
<ul class="slides">
<li>
<img src="img1.png"/>
</li>
<li>
<img src="img2.png"/>
</li>
</ul>
</div>
By default Flexslider has value slideshow: true so you have to change the value to false.
$(window).load(function() {
$('.flexslider').flexslider({
slideshow: false
});
});
Related
I've created a a simple page which has a jquery data-filter applied to collapsible set items (please see jsfiddle and code below). The collapsible set items are closed initially.
I want to be able to enter a word into the filter box and have the matching collapsible set items automatically opened when they are returned?
I can't find anything in the docs that will help me. Any ideas?
http://jsfiddle.net/mikewilsonuk/xpaGE/
<head>
<title>JQM latest</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.0/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<h1>Collapsible set with search</h1>
<div data-role="collapsible-set" >
<div data-role="listview" data-inset="true" data-filter="true">
<div data-role="collapsible">
<h1>Numero uno</h1>
<div>some text</div>
</div>
<div data-role="collapsible">
<h1>Number two</h1>
<div>some text</div>
</div>
<div data-role="collapsible">
<h1>Numero three <div>Grade: 25% (8th of 128)</div></h1>
<div>some potato</div>
</div>
<div data-role="collapsible">
<h1>Number four</h1>
<div>some text</div>
</div>
</div>
</div>
</div>
</div>
</body>
The filterable widget has an event (filterablefilter - http://api.jquerymobile.com/filterable/#event-filter) you can handle after it is done filtering. For convenience I added an id to your div with a data-filter.
<div id="filterMe" data-role="listview" data-inset="true" data-filter="true">...
Then on pagecreate, I added the event handler:
$(document).on("pagecreate", "#page", function(){
$("#filterMe").on( "filterablefilter", function( event, ui ) {
ui.items.each(function( index ) {
$(this).collapsible("option", "collapsed", $(this).hasClass("ui-screen-hidden")).removeClass("ui-screen-hidden");
});
});
});
The returned UI object is a jQuery object whose items collection is a list of the collapsible objects the filter handled. So using the each() function, you can iterate the list and set the collapsed state based on whether the class ui-screen-hidden has been applied by the filter. After that I remove the ui-screen-hidden class so that none of the items are hidden. If you still want items hidden as well, you can just remove the .removeClass("ui-screen-hidden").
Here is a working FIDDLE
Couldn't finish it, but maybe you can see what I had in mind:
$(document).on('keyup',function(){
var searchtext = $("input[data-type='search']").val();
var $cols = $(document).find('div[data-role='collapsible']');
$.each(cols, function(){
var col = this;
if(col.find(":contains(searchtext)").length() > 0)
{
col.trigger('expand');
}
else{
col.trigger('collapse');
}
});
});
});
Problem is, that keyup fires too fast and jqm collapses filtered collapsibles after the internal fiter() event. maybe you have to set a timeout around the keyup event.
When I have a template variable, and I change it, the screen goes white and it goes blank.
heres a simple example:
{{#if var}}
<p align="center">reactive templating</p>
<button id="button" value="click"/>
{{else}}
<p align="center">worked!</p>
{{/if}}
Session.setDefault("var",true);
Template.content.var = function () {
return Session.get("var");
}
Template.content.events({
'click #button': function(e,t) {
Session.set("var", false);
}
});
The issue is that I have
<body>
{{>content}}
</body>
so it re-renders the whole page, including the page divs.
So do this instead...
<body>
<div data-role="page">
{{>content}}
</div>
</body>
JQM 1.3 Iscrollview 1.3.1
I have a list of links to events using data-iscroll. Each event is also a list (title/date-location/description).
Each time I click on the event list, the event is displayed. If I scroll down the content, when I go back to the event list and then click on another event, the view scrolls to where the previous view was stopped.
I've successfully stopped this by launching an empty() on the event content and then calling updatelayout on the back button of the event content :
$("#bhome").on('vclick', function(e) {
$('#econt').empty().trigger('updatelayout');
$.mobile.loading('show');
e.preventDefault();
$.mobile.changePage("#page1");
});
But, of course, android users don't use a back button and use the back key instead.
I've tried to empty() and updatelayout on the pagebeforehide event but apparently, the position is saved before that event happens :
$('#event').on('pagebeforehide', function(event, data) {
$('#econt').empty();
$('#econt').trigger('updatelayout');
$('#escroll').trigger('updatelayout');
});
I've also tried to use the silentscroll function but it's not working either :
$(document).on('pageshow', '#event', function(){
$.mobile.silentScroll(0);
});
How can I make sure that on viewing a new event, the position is back to the top ?
Here is a snippet of my index.html file :
<div id='container'>
<div data-role='page' id='page1' data-theme="c" style="background: black;">
</div>
<div data-iscroll style='background-color:#ddd;'>
<ul id="el"></ul>
</div>
<div data-role='footer' data-position='fixed' data-theme="a" data-tap-toggle="false">
</div>
</div>
<div data-role="page" id="event" data-theme="c" style="background:black;">
<div data-role='header' data-position='fixed' data-theme="a" style="height:42px;">
<a id="bhome" class="ui-btn-left ret" data-icon="arrow-l" href="#" data-iconshadow="false">Back</a>
<h1 id='eh1'></h1>
</div>
<!-- data-role='content' entraine un scroll horizontal -->
<div data-iscroll style='background-color:white;' id='escroll'>
<ul id='econt'></ul>
</div>
</div>
The answer was given by the iscrollview author (works perfectly) :
$("#escroll").iscrollview("scrollTo", 0, 0, 0, false);
I'm trying to enable each of the list items classed "draggable" to be drag enabled for dropping into the #content div. However, the first problem is that I'm not getting an alert on the click handler. What am I missing?
<script type="text/javascript" src="<?php echo plugins_url('', __FILE__)?>/jquery-ui.js"></script>
<script type="text/javascript">
jQuery('.draggable').click
(
function()
{
alert('clicked'); //DOES NOT FIRE
jQuery(this).draggable();
jQuery( "#content" ).droppable
({
drop: function( event, ui )
{
//drop/paste jQuery(this).text();
}
});
});
</script>
<ul class="keywords">
<li class="draggable" id="kw-1">keyword one</li>
<li class="draggable" id="kw-2">keyword two</li>
<li class="draggable" id="kw-3">keyword three</li>
</ul>
Can you check if your jquery is loaded correctly? Your script only shows that you are loading jquery-ui.js.
Otherwise, your code works when both jquery and jquery-ui are loaded.
I'm toggling a class that hides and unhides a div within a list item, but I'm having problems applying a slideToggle to it.
Here is the HTML and CSS;
<style>
.collapsed .widget-content {
display:none !important;
}
</style>
<ul id="column1" class="column">
<li class="widget color-green" id="intro">
<div class="widget-head">
<a class="collapse" href"#">collapse</a>
<h3>The Title</h3>
</div>
<div class="widget-content">
<p>content here</p>
</div>
</li>
</ul>
Here is the jQuery to toggle the class of the li on click on the link with the class "collapse"
$(this).parents(settings.widgetSelector).toggleClass('collapsed');
How do I apply the slideToggle so that it only slides away the "widget-content" div whilst toggling the "collapsed" class on the li at the same time?
Thanks in advance for your advice.
you could try a callback when the toggle is complete:
$(this).parents(settings.widgetSelector).slideToggle('slow', function() {
$('#intro').toggleClass('collapsed');
});
something like that?