I'm trying to create a mobile application with JQuery Mobile that is responsive design.
In other words, I want, in smartphone, that "page1.html" and "page2.html" are loaded in separed pages like that :
_________ __________
|Page1 | |Page2 |
|.html | on click |.html |
| | <--------- | |
| | |go to |
|go to | on click |page1 btn|
|page2 btn| ----------> | |
|_________| |_________|
And, in tablets, I want that page1.html and page2.html are loaded in the same page like that :
-----------------------------
|Page1.html | Page2.html |
| |
| |
| |
| |
| |
|----------------------------
How to do that with JQueryMobile ? I have try to $.mobile.loadpage(url) and $.mobile.changepage(url) but the problem is that the page is replaced and I need to have two pages in a single view for tablets.
Thanks per advance for your help.
Its simple enough, like #Omar said, first of all use a single page template like this with 'data-role=page' denoting each page.
<body>
<div data-role="page" data-theme="d" id="pageOne">
<---header---->
<--- content --->
<---footer---->
</div>
<div data-role="page" data-theme="d" id="pageTwo">
<---header---->
<--- content --->
<---footer---->
</div>
Now, Jquery mobile will automatically show 'pageOne' on first load and hide 'pageTwo' and on navigating to 'pagetwo' will hide 'pageOne'.
After this you can write a css media query similar to this:
#media all and (min-width: 450px) {
#pageOne{
display:block;
float: left;
width:50%;
postion:relative;
}
#pagetwo{
display:inline-block;
float:right;
width:50%;
padding-left: 2em;
postion:relative;
}
}
So if any with width greater than the mentioned width(450px) will have both the pages displayed side by side. Hope this helps. Here is a simple working sample I made.
http://jsfiddle.net/uwZpM/
Related
I got this error when I wanted to add another menu to my drop-down menu.
I am not sure why this error came up.
I added dropdown.avatar. because that what other menus also had. But it didn't work. What could I be missing here?
circle CI said it's a 33:41 error Parsing error: Unexpected token
31 | <Link route="/stats">
32 | <a>
> 33 | <Icon type="profile" /> {{t("dropdown.avatar.viewMoreStats")}}
| ^
34 | </a>
35 | </Link>
36 | </li>
Thymeleaf 3 has build-in fragments support (no need for nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect dependency).
I am not experienced with Thymeleaf and would like to see code that allows to define some script tags for inclusion inside head tag and some tags for inclusion before </body> end tag.
A HTML file like this ...
<!DOCTYPE html>
<html xmlns:th=“http://www.thymeleaf.org”>
<head th:fragment=“head”>
<script>
…
</script>
<head>
<body>
<div th:fragment="foot">
…
</div>
</body>
</html>
... defines two fragments: head and foot which can then be referenced in other Thymeleaf templates like so:
<!DOCTYPE html>
<html xmlns:th=“http://www.thymeleaf.org”>
<head>
<!—/*/ <th:block th:include=“fragments/main :: head"><.th:block> /*/—>
… other stuff specific to this template
</head>
<body>
… other stuff specific to this template
<!—/*/ <th:block th:include=“fragments/main :: foot"><.th:block> /*/—>
</body>
</html>
The include instruction (<th:block th:include=“fragments/main :: head") describes the location of the file which contains the fragment (fragments/main) and the name of a specific fragment within that file (head) so my example assumes that the HTML file containing the fragments is named main and that it is located in a folder named fragments relative to the location of the template file(s) which use these fragments. For example:
+- templates
|
+- fragments
|
+ main.html
+- index.html
+- … etc
I have a controller which is passing on a hashmap to a view. The map has 3 elements, one of which is as below:
-- A list of lists (A) in which list3 is a list of lists
Now I want to display them on the gsp as follows:
-----------------------------------------------------------------------------
A.list1 | A.list2 | A.list3[0] | A.list4 |
| | A.list3[1] | |
| | A.list3[2] | |
----------------------------------------------------------------------------
I have very little knowledge about generating views and I need nothing more than the tabular format here. Nothing more fancy. I just want the table because the data makes sense only in that format. Thank you.
welcome to the Grails world. Hope you have an awesome experience. Unsure if you are aware but by generating a view i.e. the default scaffolding CRUD elements auto generated and most specifically the list.gsp has most of that logic in place. None the less I reviewed your question over again and can see your stuck on map that has a list which is really simply stuff. So here goes.:
<g:each in="${A}" var="myMap">
<tr>
<td>${myMap.list1}</td>
<td>${myMap.list2}</td>
<td>
<g:each in="${myMap.list3}" status="i" var="myList3">
${myList3} <!-- this should be what you want I have added below -->
<!-- ${myList3?.name} --> <!-- explained further below -->
<!-- ${i} : ${myList3} --> <!--where i is this is the iterator -->
</g:each>
</td>
<td>${myMap.list4}</td>
</tr>
</g:each>
I put in comments myList3?.name simply because if the list is actually a binding of domain objects then you could display the element from the domainclass that is that being returned.
so:
class Country {
String name
static hasMany=[cities:Cities]
}
Class Cities {
String name
static belongsTo=[Country:country]
}
Then if A was ${country} and list3 was cities then .name would actually show the cities.name which is the binded value...
In other examples of raw maps that are not domainClass binded being returned to a gsp you could use the key value definition to parse:
raw map being passed to gsp
private Map menuMap = ['index':'Socket method', 'ajaxpoll':'Ajax poll',
'socketremote':'RemoteForm Websocket', 'scsocket':'NEW: Websocket Client/Server']
navbar gsp
<g:each in="${menuMap }" var="cmenu">
<li <g:if test="${actionName == cmenu.key}">class="active"</g:if>>
<g:link action="${cmenu.key}">
${cmenu.value}
</g:link>
</li>
</g:each>
I am trying to add a menu separator before and after my menuitem in firefox's contextmenu .
This is my expected output...
| |
| |
|Select All |
|---------------------|
|Show Meaning |
|---------------------|
| |
My code...
<popup id="contentAreaContextMenu">
<menuseparator />
<menuitem id="diction-show-meaning" label="Show meaning" oncommand="" insertafter="context-selectall"/>
<menuseparator />
</popup>
However the menu separators are appearing at the END of the context menu!
How does one enclose a menuitem for contentAreaContextMenu?
I don't prefer to do it dynamically through java script. But let me know if that's the only way possible...
Try
<popup id="contentAreaContextMenu">
<menuitem id="diction-show-meaning" label="Show meaning" oncommand="" insertafter="context-sep-selectall"/>
<menuseparator />
</popup>
I'm trying to add a static block (which is actually a text link) after my site's home page only, by using the Layout update XML box on the CMS pages interface.
--------------
| |
| Content |
| |
---------------
| Footer |
| Copyright |
---------------
| My Block |
---------------
I've tried adding the block using this code:
<reference name="footer">
<block type="cms/block" name="credits" after="-">
<action method="setBlockId"><block_id>my_block</block_id></action>
</block>
</reference>
The problem is: #1 that my block shows between the Footer and Copyright and #2: the change is visible on all the pages, whereas I only want it to show on my home page and not in the rest of the site...
Note: I'm running a Magento 1.4.0.1
In order to display it only at your home page you have to add your XML under <cms_index_index>.
To adjust positioning use <?php echo $this->getChildHtml('credits') ?> inside of your page/html/footer.phtml.