I'm trying to make an hour selection for a day. In some cases, there are already reservations for this day.
<ol id="selectable">
<li id="1" class="ui-widget-content">7:00</li>
<li id="1" class="ui-widget-content">8:00</li>
<li id="1" class="ui-widget-content">9:00</li>
<li id="1" class="ui-widget-content">10:00</li>
<li id="1" class="ui-widget-content">11:00</li>
<li id="1" class="ui-widget-content">12:00</li>
<li id="1" class="blocked">reserved</li>
<li id="1" class="blocked">reserved</li>
<li id="1" class="ui-widget-content">3:00</li>
</ol>
I already used a filter for blocked elements but it's still possible to continue selecting after a blocked element. The result would be an invalid reserveration because the reservations are overlapping.
For my example above: The item is already reserved between 1 and 2 PM,
But I can still select from 11 AM to 3 PM.
I need something that stops (disables) the selection after passing a blocked element. For my example the result should be 11–12 o'clock.
You need to set the cancel selector as mentioned in the API:
$("#selectable").selectable({
cancel: ".blocked"
});
Link to the API Doc: http://api.jqueryui.com/selectable/
See this JSFiddle:
http://jsfiddle.net/Sd8VJ/
I solved it using the jQuery hover event but I think it's a little dirty:
$("#selectable .blocked").hover(function() {
$( "#selectable" ).selectable( "disable" );
});
Related
I need to add a default value to a filter in Jquery mobile 1.3.0.
But the example below do not work.
<ul data-role="listview" data-autodividers="false" data-filter="true" data-inset="true" id="listviewID">
<?php foreach($countryList as $country): ?>
<li value="<?php echo trim(country); ?>"><?php echo trim(country); ?></li>
<?php endforeach; ?>
</ul>
$(document).ready(function() {
$(".ui-input-text.ui-body-c").val('Canada');
$('#listviewID').listview('refresh');
});
Refreshing the listview wont work, as it has already been rendered. The hack is modifying the input and firing an change event.
$(document).ready(function(){
$("#listviewID").prev("form").find("input[data-type=search]").val('Canada').trigger("change");
});
Note that the selector looks for the inmediate previous form (automatically created by jQM when you specify filterable) and the input with [data-type=search], thats more specific than .ui-input-text.ui-body-c.
FIDDLE
I am trying to implement addthisevent into my jqm application (1.4), but I have two issues.
The Link/Button doesn't appear. Looking with Firebug shows that the css class isn't loaded as hidden.
After manually activating the visibility using firebug, the link doesn't do anything.
Does anyone have experience with integrating addthisevent into a jqm app? Is there anything I have to be particularly careful of?
Many thanks in advance.
It appears that the jQM CSS interferes with AddThisEvent CSS. One solution is to add data-role="none" to the link which tells jQM to leave the link alone and not to enhance it.
<a href="#" data-role="none" title="Add to Calendar" class="addthisevent" rel="external">
Add to Calendar
<span class="_start">10-05-2014 11:38:46</span>
<span class="_end">11-05-2014 11:38:46</span>
<span class="_zonecode">38</span>
<span class="_summary">Summary of the event</span>
<span class="_description">Description of the event</span>
<span class="_location">Location of the event</span>
<span class="_organizer">Organizer</span>
<span class="_organizer_email">Organizer e-mail</span>
<span class="_facebook_event">http://www.facebook.com/events/160427380695693</span>
<span class="_all_day_event">true</span>
<span class="_date_format">DD/MM/YYYY</span>
</a>
Here is a DEMO
I am trying to implement the new external panel offered in jQuery mobile 1.4 rc1. I am able to get the panel to enter and dismiss across all pages as it should, however the panel does not inherit the styles from the default theme (c) nor will it if a theme is defined using data-theme=a. The panel will load an unstyled list view unless I navigate the to #app-menu in the url then the styles appear. Does anyone know why this might be?
<script id="panel-init">
$(function () {
$("body > [data-role='panel']").panel();
});
</script>
<div data-role="panel" id="app-menu" data-display="push" data-position="left">
<ul data-role="listview">
<li data-role="list-divider">Menu</li>
<li data-icon="home" data-bind="click: navTo.bind($data, 'location-map', 'flip', false)">current party</li>
</ul>
</div>
Note: data-theme attribute should be added to External panel as it doesn't inherit style/theme from parent container. Internal panel inherit styles/theme from page div containing it.
jQuery Mobile now offer external panel and toolbar. Those widgets aren't being initiated automatically by jQM. They need to be initiated manually and followed by .enhanceWithin() to enhace contents within.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Demo
I'm not allowed to comment but in the demo #Omar provide the many data-icon="home" icons are not showing up and if I add class="ui-btn ui-icon-arrow-l" to the Anchor, it doesn't show up either so there appears to be something more that needs to be done.
With a little investigation, I found that adding adding ui-btn-icon-left like so will fix anchors
Anchor
adding these classes to the <li data-icon="home" doesn't quite work but changing <li data-icon="home">item</li> to <li class="ui-btn ui-icon-home ui-btn-icon-left ui-corner-all">item</li> will get the icon to show up but will not move the text over so it still looks bad.
I have a jquery mobile page which has a panel. Inside the panel I have a listview, and on each listitem there is a where I've added a data-rel="close" attribute. I want to be able to close the panel when ever a listitem is clicked.
Note that I also has a binding to angular.
<ul data-role="listview" data-icon="arrow-l" class="ui-icon-alt" data-inset="true" >
<li ng-repeat="task in tasks" >
{{task.Name}}
</li>
</ul>
I've testes on a link outside the listview and it works fine. I'm not sure id angularjs is playing a trick on me here or it is something else.
best regards
Rasmus
Markup
{{task.Name}}
JS
$('#closepanel').on('click', function {} {
$( "#PanelID" ).panel( "close" );
});
I have a list which consists of two sections:
<ul data-role="listview" data-theme="a" data-inset="true" data-split-theme="c">
<li>
<a style="padding-top:0">
<h5>Text 1</h5>
<p><strong>Text 2</strong></p>
<p>Date: April 17, 2012</p>
<a href="http://some address" ></a>
</li>
What I would like to do is when the user clicks anywhere in the left-hand section of a row I would like to play an audio file (using the html5 tag) and for the text in this section to be removed and replaced with the audio controls for the playing audio. When the user stops the audio I'd like things to return to as they were.
I'm new to JQuery and JQueryMobile and not sure where to begin with this.
Ideally if it is possible when the audio controls appear it would be great if there could be some sort of flipping animation i.e. such as that section of the row rotates and on one side is the audio controls and on the other is the text.
Is such a thing possible?
TIA
You can nest whatever you want in your li, so you can just put two div containers in there and bind to the appropiate events and show and hide them based on that.
For example:
Markup:
<ul id="parentUL" data-role="listview" data-theme="a" data-inset="true" data-split-theme="c">
<li>
<a style="padding-top:0">
<div class="txtCnt">
<h5>Text 1</h5>
<p><strong>Text 2</strong></p>
<p>Date: April 17, 2012</p>
</div>
<div class="audioCnt displayNone">
<h1>Audio Controls</h1>
</div>
<a href="http://some address" ></a>
</li>
</ul>
JavaScript:
$('#parentUL').on('click', '.txtCnt', function () {
$(this).hide().parent().find('.audioCnt').show();
});
$('#parentUL').on('click', '.audioCnt', function () {
$(this).hide().parent().find('.txtCnt').show();
});