I am new to dojo / dojo mobile.
I am building a screen with a header and a list of items beneath. Very
classical in mobile apps.
<body id="content" style="display: none">
<div data-dojo-type="dojox.mobile.ScrollableView" id="mainView"
data-dojo-props="selected:true,scrollDir:'v'">
<h1 data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Main',fixed:'top'"></h1>
<div data-dojo-type="dojox.mobile.EdgeToEdgeList" style="margin-top: 0px;">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Take Picture...',
icon:'images/plus-30.png',
url:'TakePicture.html',
transition:'slide'">
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/PhoneGapDemo.js"></script>
<script src="js/messages.js"></script>
Problem : the first item on the list is hidden behind the header and not
visible.
(Same rendering in IBM Rich Page Editor, IBM Mobile App Simulator, Apple iOS
Simulator and iPhone iOS6)
I juste started the project, I don't have fancy CSS or other ... just
started from scratch, added the ScrollableView, the Header, the
EdgeToEdgeList and then the ListItems.
Workaround is to apply a style on the EdgeToEdgeList to move it 40px down.
But it is not clean and breaks cross-platform compatibility (what if the
header is not always 40px height ?)
I am using DoJo 1.8
Thanks
Seb
Hi even im new to this worklight, well im not sure but got to the properties (go to the design and right click on the edge-to-edge list and select properties) you can see the tag, style , Layout, All options.
go to styles and click the properties and change the postion / lay out. it might help.
please let me know if you get that right.
Solution is twofold
use style="visibility:hidden" in element, as following
<body id="content" style="visibility:hidden">
load "mobileDeviceTheme" explicitly with a element instead of letting Dojo load it asynchronously (this module needs to be loaded early to allow for proper height calculation)
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
before (the load of dojo/dojo.js)
Seb
Related
I'm working on a website based on the Foundation library. I'm creating an About "page" on my website by using a modal, and attempting to equalize the three different panes inside of the modal, like so:
<div id="aboutPage" class="reveal-modal" data-reveal>
<h1>About</h1>
<div class="row" data-equalizer>
<div class="large-4 columns panel" data-equalizer-watch>
<h2>About This Site</h2>
<p>This site is intended to provide a resource for people learning to program in Swift.</p>
</div>
<div class="large-4 columns panel" data-equalizer-watch>
<h2>What's Coming Up</h2>
<p>We're working on smoothing over some glitches with the brand new Issue tracking systems. We also have some exciting updates planned involving this site's mobile version.</p>
</div>
<div class="large-4 columns panel" data-equalizer-watch>
<h2>Using the Help Menu</h2>
<p>The Help menu quickly lets you contact Support to address issues which may present themselves as you program in Swift. If a representative is not available when you submit your question, we will address your issue as soon as possible. You will
receive a notification badge when the issue has been resolved.</p>
</div>
</div>
<a class="close-reveal-modal" id="x">×</a>
</div>
However, when I viewed the modal, the panels were not equalized. This was also true on several other modals on which I attempted to do the same thing. Despite that, I was able to successfully equalize the panels outside of the modal. Is this a bug/feature related to the modal, and if so, is there any way around it?
Once you have your Reveal Modal opened you will need to recalculate the height of the Equalizer panels.
// Once the Reveal Modal has been opened . . .
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
// Force Foundation to recalculate the Equalizer panel heights
Foundation.libs.equalizer.reflow();
});
Here is a working example in codepen.
I hope that helps.
In Foundation 6, I was having the same issue. Here is the solution that ultimately worked for me.
<script>
$(document).foundation();
$('.reveal').on('open.zf.reveal', function() {
//force equalizer to fire AFTER modal has finished opening
Foundation.reInit('equalizer');
});
</script>
I'm trying to recreate a similar look to the Windows 8 app view and I'm having an issue with the display. If your running Windows 8 and you're on the home page, just click the down arrow icon located at the bottom of the screen. This takes you to a list of all of the applications installed on your computer grouped alphabetically. This is essentially what I'm trying to recreate visually (only my data is not apps).
What I want:
I've created a grouped ListView (alphabetical) using the html/css/js method and what I get is close, but not exact. I get "A" followed by items that start with A.... then a new column "B" followed by B items... new column "C", etc. If there are only 2 "A" items I want "B" to show up next in the list. Not in a new column. Basically, I want to override the block formatting of the display but I can't seem to figure out how. I've played around with the DOM Explorer and there are so many classes and styles I haven't been able to figure out what needs to be changed.
What my app looks like:
Has anyone else done this? Does anyone have any suggestions I can try? Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Grocery List</title>
<link href="grocerylist.css" rel="stylesheet" />
<script src="/js/groceryData.js"></script>
<script src="grocerylist.js"></script>
</head>
<body>
<div class="grocerylist fragment">
<header class="page-header" aria-label="Header content" role="banner">
<button class="back-button" data-win-control="WinJS.UI.BackButton"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Grocery List</span>
</h1>
</header>
<section class="page-section" aria-label="Main content" role="main">
<!-- Template for the grouped headers for the list -->
<div id="headerTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div class="simpleHeaderItem">
<h1 data-win-bind="innerText: title"></h1>
</div>
</div>
<!-- Template for each item in the list -->
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div id="groceryNameTemplate">
<!-- Display the name of our food -->
<h4 data-win-bind="innerText: name"></h4>
</div>
</div>
<!-- Our list of available grocery items -->
<div id="groceryListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource : GroceryData.itemList.dataSource,
itemTemplate: select('#mediumListIconTextTemplate'),
groupDataSource: GroceryData.itemList.groups.dataSource,
groupHeaderTemplate: select('#headerTemplate'),
layout: { type : WinJS.UI.GridLayout },
itemsDraggable: true,
itemsReorderable: false }">
</div>
</section>
</div>
</body>
</html>
Code added as requested. I went through all of my CSS and 100% of it is style only (colors, fonts, etc) all placement and positioning is defined in the WinJS styles which come with ListView.
In essence, the Apps view is just a standard 2D grid layout in a ListView, laid out in vertical columns first, then horizontally.
The trick is that there are two different item types: a letter/header item and an app item. This means that your data source--which in this case can be a single WinJS.Binding.List, is a single list of the apps sorted alphabetically, with then header header/letter items inserted at the appropriate points before items that start with that letter. (Remember to use globalization-sensitive collation if you're sorting alphabetically.)
With such a list, however, you cannot rely on declarative templates for your rendering, because you need to render both types of items distinctly. For this you need to use an item rendering function instead of a template. Because the rendering function gets called for each item, it can check the type and dynamically render each one according to its data. In the Apps view, an App item would be rendered with an icon and name, whereas a header/letter would be rendered with just text. The item renderer also assigns appropriate behaviors, which in the Apps view is that app items launch the app and header items do a semantic zoom out.
A rendering function is really the approach to take whenever you have a standard layout--a GridLayout again in this case--but need per-item rendering control. (This is different from a custom layout that lets you depart from the non-standard layout algorithms, and of course a custom layout can also be combined with a rendering function.)
For all the details of rendering functions, check out chapter 7 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, specifically the sections "How Templates Work with Collection Controls" and its subsections on pages 364-376, and "Template Functions (Part 2): Optimizing Item Rendering" starting on page 414 if you want to go deeper, but probably isn't necessary for your scenario.
Custom layouts, just to note, are covered in Appendix B. Also, custom layouts only work with WinJS 2.0 on Windows 8.1; template functions work with WinJS 1.0 or 2.0 on 8.0 and 8.1 both.
Anyway, with per-item rendering via a template function, you can just create CSS as appropriate for the classes in each item structure you create, so you don't have to play games with the ListView's style hierarchy. You'll just want to make sure that your header/letter items have a suitable top margin to make the gap. Alternately, you could also have a gap item type in your data source that would render a blank space and not respond to any input. Also, you'll need to style the various selected, active, and hover states of the header/letter items to be all the same so they don't get highlighted like an app item.
The last note I'll make is that you don't need to use the GridLayout's grouping capabilities at all, because that forces the groups into new columns as you've observed. That's just its layout behavior when it has a group items source. That said, you could use a standard List for your app items and a create a group data source from it like you're doing, and then use a custom layout to handle the groups differently than the standard GridLayout. That should work as well, so it's really your choice in approach. I'd use this way if for some reason you can't get the header/letter styling to work with the template function approach, or if you're targeting Windows 8.0/WinJS 1.0 and not 8.1/2.0.
Hope that explains your options.
I just go through the bootstrap framework, its a grid based css framework but I dont know how implement in IBM Websphere Portal 8.
code
<!DOCTYPE html>
<body class="lotusui30dojo tundra locale_en">
<div class="wpthemeFrame">
<header role="banner">
<div class="wpthemeHeader">
<a rel="dynamic-content" href="dyn-cs:id:customTheme_preview"></a>
<div class="wpthemeInner">
<div class="wpthemeLogo wpthemeLeft">
I suggest you to create a normal static HTML Prototype using Bootstrap. Once you make sue it's working properly (in responsive manner) you can start porting the source code to Portal. There are 3 parts:
First you have to copy paste the html part other than the middle content area (ie. the header part and the footer part) into theme_en.html in your custom folder. Then replace the css and JS links header part with
Then replace blocks of code with appropriate Dynamic Spot contents (JSP files). For instance something like,
<a rel="dynamic-content" href="res:/customTheme/themes/html/dynamicSpots/banner.jsp"></a>
Also, please make sure at the end of page you have this,
<div class="wpthemeComplementaryContent" id="wpthemeComplementaryContent" role="region" aria-labelledby="wpthemeComplementaryContentText">
<span class="wpthemeAltText" id="wpthemeComplementaryContentText" >Complementary Content</span>
<a rel="dynamic-content" href="co:config"></a>
</div>
Now we have to take the layout structure from the middle part of HTML area and use it for creating a Template Layout. Remember, in each template layout we have to keep the div for hidden widgets. Better way is to copy one existing layout.html file from Template Layouts and rename it and modify in that. If you are using Bootstrap, you don't have to use default WP classes. But few must be integrated, like DndRow,DndColumn, Componet-Container etc.
Now for each page specific styling, you can manage in Presentation template.
I'm trying to set up Google Sites for my own personal website:
<html>
<head>
<title>...</title>
</head>
<body background="page_bg.png" text="#000000" bgcolor="#333333">
<div align="center"><img src="content.jpg" border="0" alt=""></div>
</body>
</html>
So all I want is a background picture (I accomplished to do this under settings) and only one picture in the middle of the site itself. I was trying to get rid of all the gimmicks (such as the sidebar, shadows of the frame, etc.) but I failed. Is it even possible to do this?
The reason I use Sites is, because the web address "https://sites.google.com/site/my_name_here/" is clear, it's free and it makes my site appear in the google search.
edit, my solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
I guess you have to use something like:
<body style="background:#333333 url('page_bg.png'); color=#000000;">
<div style="text-align:center;"><img src="content.jpg" border="0" alt=""></div>
</body>
Oh ok, right! I think you cannot add your own styles using html/css. But if you go to "Managing Web site" there is a "Colors and fonts" option, and there you make you own customization for some elements, like select a different background color.
Is that what you're looking for Thomas?
My solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
I am very new to Jquerymobile,html5 and css.Now I am working on jquerymobile project in that i need to display the html code which i am getting from rest service in a page and i am doing by using the following code.
<div data-role="content" style="width:700px">
<div id="html_content">
</div>
</div>
and javascript is
$("#paystub-html").live('pageinit',function(){
$.getJSON(url,function(events){
$(events).each(function(i,item){
$(item.Data).appendTo($("#html_content"));
});
});
});
I can display the html but not fully its not scrolling horizontally.I tried by using overflow tag also but its not solved.
Is there any other way to do that one ? how ?
Thanks in advance.
This situation can be solved with overflow, but you will first need to remove the width from the content to have things handle properly
<div data-role="content">
<div id="html_content" style="overflow-x:scroll">
</div>
</div>
You can test it here
By the way, jQuery mobile standard usage would require you to include your content in a page container.