I'm looking for a way to make a layout similar to the Bing Travel app that comes standard with Windows 8. I'm developing the app using Javscript/CSS in Visual Studio 2012.
Here is a simple mock up:
The part that puzzles me is the first item that's being showed. Somehow, the first item is shown using the maximum vertical space, while all the next items are aligned in a gridlayout ListView..
I already have the gridlayout with the groupheader shown on the right. Is there a best practice for adding the first item? Should I add another parent css-grid with 2 columns (the 1stt with fixed and 2nd auto width) or can I somehow manipulate the listview to keep the layout simple?
Ok I solved it, this is based on the VS 2012 GridLayout template. I did two things.
1) Created a (parent) grid layout with 2 columns with the correct
overflow properties.
2) Disabled the overflow properties generated by the WinJS.UI.ListView control.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>groupedItemsPage</title>
<!-- WinJS references -->
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/groupedItems/groupedItems.css" rel="stylesheet" />
<script src="/js/data.js"></script>
<script src="/pages/groupedItems/groupedItems.js"></script>
<style type="text/css">
#scrollContainer
{
height:100%;
display:-ms-grid;
-ms-grid-columns: 480px max-content;
-ms-grid-rows: 1fr;
overflow-x:scroll;
overflow-y:hidden;
-ms-overflow-style:scrollbar;
}
#col1
{
-ms-grid-column:1;
}
#col2
{
-ms-grid-column:2;
-ms-overflow-style:none;
}
</style>
</head>
<body>
<!-- templates -->
<!-- The content that will be loaded and displayed. -->
<div id="scrollContainer">
<div id="col1">
col1
</div>
<div id="col2" class="fragment groupeditemspage ">
<!-- the code from the GridLayout example goes here -->
</div>
</div>
</body>
</html>
If it were me, I would go with adding a column to the element containing the first item and the ListView. You could try and come up with a way to manipulate the ListView, but since you are group data it would be a pain, IMHO. No reason to make things harder than they need to be.
Related
I'm wanting to create an opposite affect to <noscript>. I don't want the content to load at all if Javascript isn't enabled, which is why I'm not interested in a display:none alternative, which still loads but just hides.
I came across this previous answer which has the desired affect (see updated answer).
HTML:
<div id="container"></div>
<script type="text/html" id="content">
<div class="test">HTML goes here</div>
</script>
jQuery:
$(document).ready(function() {
$('#container').html($('#content').html());
});
Is there anyway I can do this with Vanilla Javascript? I want the contents of the script to render as functional HTML.
often what is done is to set up your html as:
<html class="no-js">
<head>
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js');})</script>
<!-- ... -->
</head>
<!-- ... -->
<div class="js-only">I only show up when js is enabled</div>
<!-- ... -->
</html>
and then have some css which hides that element
.no-js .js-only {
display: none;
}
the javascript replaces no-js with js in the <html> element which causes the div to display only when js is enabled
I'm trying to use Bootstrap-Material in my website.
I'm having a problem getting the checkbox to work. When I copy the code from the Bootstrap-Material site to my project, most of the features work, but no Box appears beside the label "Checkbox". Instead of looking like
it looks like
I've been going through the source code on the Bootstrap-Material and I've imported all the css and js they have.
What's confusing is, I've inspected the elements on the Checkbox of the Bootstrap-Material page and I can't figure out what css or js file is actually creating the checkbox. It doesn't seem to be coming from an image file, so where is it coming from? Perhaps if I can figure out where it is created, I can figure out why my project is not rendering it.
Any ideas on where this box comes from?
Two things to check:
1: Are you calling $.material.init() to active Material Design.
2: Are your CSS files stacked with Material Design before the Bootstrap v3.0+ file.
3: You're using jQuery 1.9.1+.
$.material.init()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h1 class="header">Checkbox</h1>
<!-- Simple checkbox with label -->
<div class="sample1">
<div class="checkbox">
<label>
<input type="checkbox"> Notifications</label>
</div>
</div>
</div>
I'm debugging a site on an Android HTC Sense. The site uses a lot of inserted content, which comes along with it's own CSS and JS like:
// wrapper id = snippet_id
<html>
<head>
<style type="text/css">
#snippet_id div {border: 1px solid red !important;}
div {border: 1px solid blue !important;}
</style>
</head>
<body>
<div>Hello World</div>
</body>
<html>
This is inserted into an existing page, so it sort these snippets are sort of like iFrames I guess.
Question:
Problem is, that while Javascript works fine, all CSS I'm specifying using <style> tags is being ignored. Any idea why?
EDIT:
Works on:
- Android 4.0.1
Does not work on:
- Android 2.3.1
- IOS 4.1
If I add the CSS to the main.css file being requested when the page loads, all is ok. If it's inside my gadget, it's not working.
EDIT:
So from what I can see, <style> does not seem to work on classes and id. If I use regular HTML elements as selectors it works.
EDIT:
My dev-site is here. I'm using a plugin called renderJs, which encapsultes HTML snippets (along with their CSS and JS) into resuable gadgets. Gadgets content will be appended to the page body, so although a gadget can act as a standalone HTML page, it can also be part of a page.
Example code from my page (I stripped out all gadgets but one below):
index.html - include index_wrapper gadget
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Organization" lang="en" class="render">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/overrides.css">
<script data-main="../js/main.js" type="text/javascript" src="../js/libs/require/require.js"></script>
<title></title>
</head>
<body class="splash">
<div data-role="page" id="index">
<div id="index_wrapper" data-gadget="../gadgets/index_wrapper.html"></div>
</div>
</body>
</html>
The page has a gadget called index_wrapper link - code below:
<!DOCTYPE html>
<head></head>
<body>
<div id="index_social" data-gadget="../gadgets/social.html"></div>
<p class="mini t" data-i18n="gen.disclaimer"></p>
</body>
</html>
Which has another gadget called social here. This gadget includes some CSS, but on the devices in question, it is ignored (just saw, I'm missing a </div> in the index_wrapper, so trying to see if that fixed the problem, too).
The code below includes my fix:
<!DOCTYPE html>
<head>
<style type="text/css" scoped>
// will be ignroed
.el {width: 1px;}
.menu_social {text-align: center; margin: 1em 0;}
.action_menu {display: inline-block;}
.follow_us {display: inline-block; margin: 0; padding: 0 .5em 0 0;}
...
</head>
<body>
<div class="menu_social">
<div>
<span class="el ui-hidden-accessible"></span><!-- fallback for CSS not working -->
<div data-role="controlgroup" data-type="horizontal" data-theme="c" class="action_menu">
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
(function () {
$(document).ready(function() {
var gadget = RenderJs.getSelfGadget();
// fallback for old devices which cannot load <style> css
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/social.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
// trigger enhancement
$(this).trigger("render_enhance", {gadget: gadget.dom});
});
})();
//]]>
</script>
</body>
</html>
So aside from probably missing a closing </div> I'm still wondering why my embedded CSS is not working.
Looking at the generated HTML code (i.e., code as modified by JavaScript) of the demo page suggests that style elements are generated inside body. Although such elements are allowed by HTML5 drafts when the scoped attribute is present, support to that attribute seems to be nonexistent, and the style sheet is applied globally. It is possible however that some browsers do not apply it at all, at least when the style element is dynamically generated.
A better approach is to make all style sheets global to the document, preferably as external style sheets, and use contextual selectors to limit the rules to some elements only. And possibly using JavaScript to change classes of elements, rather than manipulating style sheets directly.
Ok. Ugly workaround:
In the inline section, set this:
<style>
.el {width: 1px;}
</style>
In the page, set hide an element el like this:
// ui-hidden-accessible is a JQM class, moving the item out of view
// since it uses pos:absolute, is needed to not break
// selects on the page (compare to JQM ui-icon)
<span class="el ui-hidden-accessible"> </span>
Then check for the width when running inline Javascript (which works) and require the inline CSS as a separate file, when the width is not at 1px
// fallback for old devices which cannot load <style> css
// gadget is my iframe-look-a-like
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/translate.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
Ugly and an extra HTTP request, but at least the CSS is working then.
I'm playing around with an Express site with Node.JS
I have a layout file which, let's say, looks like this:
html
title foo
body!= body
From what I have been able to understand, the output of the template is inserted into a variable called body and that's added to the layout there on the 3rd line. However, if I wanted a template to add, for example, a <meta> tag in the <head> element, how would I do that?
I did see the explanation of extending templates and using blocks, but I'm not sure how that ties it to using layouts. The templates themselves shouldn't be extending the layout, right? Or, does template inheritance remove the need for layouts at all? I would suspect not, but I'm not sure.
Also, since I'm here, how do you specify a different layout to be used, or for no layout to be used at all. Currently, the views are being rendered like this:
res.render('templateName', { myTemplateVars : 'foo' });
What you are asking for was released 3 days ago.
http://tjholowaychuk.com/post/10695801204/jade-stylus-0-16-0-released
I have personally been using it for a few weeks and love the recent additions. The block statement allows you to specify default content and any extension template can override a named block.
Basically, blocks override, includes append and extends chooses your parent template.
Try dust template engine.
It is far more interesting and designer friendly.
In dust you can write base.html:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>kiss.js example</title>
<link rel="stylesheet" href="/css/css1.css" />
<link rel="stylesheet" href="/css/css2.css" />
<script type="text/javascript" src="/js/js1.js"></script>
<script type="text/javascript" src="/js/js2.js"></script>
{+head/}
</head>
<body>
<div style="height: 100%">
<div id="header">
<h1>kiss.js example - {+header}{/header}</h1>
{+header_buttons}{/header_buttons}
</div>
<div id="content">
{+content}{/content}
</div>
<div id="footer">
<table>
<tr>
<td>
</td>
<td style="width: 100%; text-align: center;">made with kiss.js</td>
<td>{+footer_buttons}{/footer_buttons}</td>
</tr>
</table>
</div>
</div>
</body>
and view.html:
{>base.html/}
{<content}
<h2>name: {name}</h2>
<h3>{foo}</h3>
{#numbers}
<div>{.}</div>
{/numbers}
{/content}
I'm using YUI 2's calendar in YUI 3. How does it load Sam's skin CSS?
I didn't manually include it (though it seems like I should so the user can download it in the one request I make to the combo loader for css). Strangely, I don't see it being downloaded nor do I see it in the JS files themselves. I must be overlooking it. This is how I'm loading the CSS and JS now:
<head>
...
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.0/build/cssreset/reset.css&3.1.0/build/cssfonts/fonts.css&3.1.0/build/cssbase/base.css"/>
...
</head>
...
<!--and at the end of the body tag:-->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js&3.1.1/build/oop/oop-min.js&3.1.1/build/event-custom/event-custom-base-min.js&3.1.1/build/event/event-base-min.js&3.1.1/build/json/json-parse-min.js&3.1.1/build/querystring/querystring-stringify-simple-min.js&3.1.1/build/io/io-base-min.js&3.1.1/build/dom/dom-base-min.js&3.1.1/build/dom/selector-native-min.js&3.1.1/build/dom/selector-css2-min.js&3.1.1/build/node/node-base-min.js&3.1.1/build/node/node-style-min.js&3.1.1/build/stylesheet/stylesheet-min.js&2in3.1/2.8.0/build/yui2-calendar/yui2-calendar-min.js&2in3.1/2.8.0/build/yui2-yahoo/yui2-yahoo-min.js&2in3.1/2.8.0/build/yui2-dom/yui2-dom-min.js&2in3.1/2.8.0/build/yui2-event/yui2-event-min.js"></script>
<script type="text/javascript">//<![CDATA[
YUI().use('yui2-calendar', function(Y) {
var YAHOO = Y.YUI2;
var cal = new YAHOO.widget.Calendar("cal",{navigator:true,mindate:'1/1/2000');
cal.render();
// ...
Edit:
I want to make a few minor changes to the default sam skin. What is the best way to do that?
I answered this part of my question. If I wrap the calendar in an extra div, then specifying CSS rules which include that div as part of the selector makes the rule more specific so the browser uses it over Sam's skin. Rough example:
<style type="text/css">
.magic .yui-skin-sam .yui-calendar td.calcell {
height: 10em;
width: 15em;
}
</style>
...
<div class="magic">
<div class="yui-skin-sam">
<div id="cal"></div>
</div>
</div>
http://yuilibrary.com/forum/viewtopic.php?f=93&t=2269&p=7608&hilit=insertbefore#p7608
That thread contains information about using the insertBefore configuration, which allows you to ensure that the YUI CSS is inserted above your style overrides in the CSS cascade.
-Eric