How can I scrolling listview inside a popup using jQuery Mobile?
Currency
<div data-role="popup" id="currency" data-theme="c">
<ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="c">
<?php foreach($currencies as $key => $currency): ?>
<li><a value="<?php echo $key; ?>"><?php echo $currency); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
How about adding overflow:scroll or overflow:auto to your inline style on the ul tag?
Related
I have bit of a weird problem. I use php to generate the html code I need to create a list view. I do this twice with different sql, first only returns rows from future, second returns everything.
On the home page I use the below code:
while (mysqli_stmt_fetch($stmt)) {
$output .= "\t\t<li class=\"ui-btn ui-corner-all ui-shadow\"><a href=\"workoutSpecific.php?workoutId=$workoutID\" style=\"text-decoration: none; color:inherit;\" >";
$output .= "\t\t<div class=\"bi-list-item-primary\">$title</div>";
$output .= "\t\t<div class=\"bi-list-item-secondary\">";
$output .= "\t\t<p>$date at $time</p>";
$output .= "\t\t</a></li>";
}
This produced the code as follows, note the first <a> DOESN'T have any class elements or icons.
<div id="upcomingWorkouts">
<h3>Upcoming Workouts:</h3>
<ul data-role="listview" data-inset="true" id="allWorkouts" data-theme="b">
<li class="ui-btn ui-corner-all ui-shadow">
<a href="workoutSpecific.php?workoutId=5" style="text-decoration: none; color:inherit;">
<div class="bi-list-item-primary">Back</div>
</a>
<div class="bi-list-item-secondary">
<a href="workoutSpecific.php?workoutId=5" style="text-decoration: none; color:inherit;">
<p>Sat 16th Jan 2016 at 10:10AM</p>
</a>
</div>
</li>
</ul>
</div>
now on my other page, its generated the exact same way but it has a class with a carat icon in it.....
<li class="ui-btn ui-corner-all ui-shadow">
<a href="workoutSpecific.php?workoutId=5" style="text-decoration: none; color:inherit;" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
<div class="bi-list-item-primary">Back</div>
</a>
<div class="bi-list-item-secondary">
<a href="workoutSpecific.php?workoutId=5" style="text-decoration: none; color:inherit;">
<p>Sat 16th Jan 2016 at 10:10AM</p>
</a>
</div>
</li>
Sorry this is bit of a hard one to explain, but does anyone have any ideas?
Just add data-role="none" on your element and JQM ignore this
I am trying to get a jquery mobile panel working. Currently, when the panel opens it slides all the way covering my page instead of just part way. I'm thinking it has to be something to do with initialization of the panel.
Any ideas?
Here is the jsfiddle
HTML
<div id="panel_home" data-role="panel" data-position="right" data-display="slide" data-theme="a">
<ul data-role="listview">
<li>Panel Button 1</li>
<li>Panel Button 2</li>
<li>Panel Button 3</li>
</ul>
</div>
<div data-role="page" id="page_home">
<div data-role="header" data-position="fixed" >
<a href="#panel_home" > <img border="0"
src="http://cdn-img.easyicon.net/png/11464/1146409.gif"
width="30" height="30">
</a>
</div>
<div data-role="content" >
<h2>Page Content</h2>
</div>
<div data-role="footer" data-position="fixed">
<h2>Footer Content</h2>
</div>
</div>
JS
$(document).one('mobileinit', function () {
$("[data-role=panel]").panel().enhanceWithin();
});
External panels should be initialized on Jquery's document.ready:
$( document ).ready(function() {
$("[data-role=panel]").panel().enhanceWithin();
});
Updated FIDDLE
I have a list view with a filter , How can i change the filter theme , add specific style to it by css ? since i need to modify the filter icon , border but i don't know how to assign these styles to it , Please help me ..
<div data-role="page" id="index">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data- fullscreen="false" data-theme="b">
<div style="padding-top:15px;" > <font color="white" size="6px" >Index </font></div>
</div>
<div data-role="content" >
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search.. "
data-split-icon="delete" style="margin-top: 30px;" >
<li> element1</li>
<li> element2</li>
<li> element3</li>
<li> element4</li>
<li> element5</li>
<li> element6</li>
</ul>
</div>
</div>
Create a search input and assign an id.
<input type="search" id="custom-filter" />
In ul, add data-input attribute with value the id of the search input starting with # hash tag data-input="#custom-filter".
<ul data-role="listview" data-filter="true" data-input="#custom-filter">
Create a custom style and add it to #custom-filter div to have the styles applied on the input.
$("#custom-filter").closest("div").addClass("styles");
Demo
Is there a way to just set the body in Zend Framework 2? In Zend Framework 1 I could do it this way
$this->getResponse()->setBody('Hello World')
I found a way to set content in Zend Framework 2 but this also overwrites the layout and that's not what I want.
Here is another way to do that....
ModuleName/src/ModuleName/Controller/IndexController.php
<?PHP
namespace ModuleName\Controller;
use Zend\Mvc\Controller\AbstractActionController;
use Zend\View\Model\ViewModel;
class IndexController extends AbstractActionController
{
protected $helloWorldTable;
public function indexAction()
{
return new ViewModel(array(
'foo' => 'Hello World From Zend Framework 2!',
));
}
}
ModuleName/view/ModuleName/index/index.phtml
<?PHP
$this->headTitle('Some Site...');
echo "$hello";
?>
Application/view/layout/layout.phtml
doctype(); ?>
<html lang="en">
<head>
<meta charset="utf-8">
<?php echo $this->headMeta()->appendName('viewport', 'width=device-width, initial-scale=1.0') ?>
<!-- Le styles -->
<?php echo $this->headLink(array('rel' => 'shortcut icon', 'type' => 'image/vnd.microsoft.icon', 'href' => $this->basePath() . '/images/favicon.ico')) ?>
<!-- Scripts -->
<?php echo $this->headScript()->prependFile($this->basePath() . '/js/html5.js', 'text/javascript', array('conditional' => 'lt IE 9',))
->prependFile($this->basePath() . '/js/bootstrap.min.js')
->prependFile($this->basePath() . '/js/jquery.min.js') ?>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="<?php echo $this->url('index') ?>"><?php echo $this->translate('Spamus') ?></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><?php echo $this->translate('Home') ?></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<?php echo $this->content; ?>
<hr>
<footer>
<p>© 2012 - 2013 by YourSite <?php echo $this->translate('All rights reserved.') ?></p>
</footer>
</div> <!-- /container -->
<?php echo $this->inlineScript() ?>
</body>
</html>
Whatever you changed Response body in controller, when zf2 MvcEvent::EVENT_RENDER trigger, a new Response body will be rebuilt. So correct way is change Response body AFTER MvcEvent::EVENT_RENDER.
Add this to your controller:
$this->getServiceLocator()->get('Application')->getEventManager()->attach(\Zend\Mvc\MvcEvent::EVENT_RENDER, function($event){
$event->getResponse()->setContent('foobar');
}, -10000);
I finally got the solution. To change the content in the layout, just type in controller's action
$this->layout()->content = 'foobar';
I want to use some collapsible elements inside a listview in jquery mobile. I can set well the collapsible adding a inside the corresponding part, but when the collapsible is not collapsed, the info of collapsible is not inside the collapsible bubble, how can I fix that to have a bubble that include title and description?
Thanks
<div id="dispositivo" data-role="page" data-theme="c" data-cache="refresh">
<div data-role="content" role="main">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role='list-divider'>Titulo</li>
<form id="form_disp" name="form_disp" method="post" action="test.php">
<li data-role='fieldcontain'>
<a id="estado" name="estado" href="#" data-theme="b" data-role="button" data-inline="true">Boton</a>
<div data-role="content" data-inset="true">
<div data-role="collapsible" data-inset="true">
<h3>Info1</h3>
<p>Ahora estamos viendo el info 1</p>
</div>
<div data-role="collapsible">
<h3>Info 2</h3>
<p>Ahora estamos viendo el info 2</p>
</div>
</div>
<button data-theme="b" id="b_conf_disp" data-role="button" data-inline="true" type="submit">Boton 2</button>
</form>
</ul>
</div>
</div>
I think you missed </li> tag.
For something similar you can try using the plugin I wrote that allows certain listview items to be opened inline within the listview.
The Github Repo