Category Archives: html

dojo on.emit won’t work in FireFox?

Seems simple enough, using the Dojo toolkit click a div and trigger an anchor tag on the page.

The code in listing 1 below works on:
Chrome version 35
Internet Explorer 11

Won’t work on FireFox ver 30.

Dojo’s dojo/on module has the emit() method that provides a normalized way to dispatch events. It is supposed to be cross-browser.

From the info on this page, Disabling native events when using Firefox with WebDriver, it sounds like Dojo may, like WebDriver, be using FireFox’s native event facilities and failing.

<!DOCTYPE html>
<html >
<head>
    <script>dojoConfig = {async: true, parseOnLoad: false}</script>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>
    
    <style media="screen" type="text/css">
        .bold {font-weight: bold;}
        .box {border:1px black solid;margin-top:4em;margin-left:8em;}       
    </style> 
    
    <script>
        require(['dojo/ready','dojo/on','dojo/dom',
                   'dojo/query','dojo/domReady'],
        function(ready,on,dom,query){
            ready(function(){
                var nde = query('#div123');
                nde.on("click",function(evt){
                    on.emit(dom.byId('target'),"click",
                     {bubbles:false,cancelable:false});
                });                 
            });
        });             
    </script>       
    
</head>
<body class="claro">
    <div id="div123" class="bold box">click me!</div>
    <div class="box">
     <a id="target" href="javascript:alert('hello')">will trigger this link</a>
    </div>
</body>
</html>

Listing 1

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Nested CSS Grid Hello World!

CSS based grids are a powerful approach to creating HTML web interfaces. There are now hundreds of CSS Frameworks that support Grid layouts.

I’ve used the 1KB grid system before, but have yet to really understand how to use grid systems well. Recently I was taking another look at this topic. One thing is very obvious, the documentation and examples of many of these are not very good. What if there were an example that all framework would implement that would showcase their use? In programming we usually would do a “Hello World!” program and extend that to say the same thing using the technologies in question, like JMS, for example.

So a solution would have to exercise the core feature set or solution set of a generic grid, and be easy to implement. One should not have to be a high-order expert in CSS to understand the solution. Below I created a simple ‘Hello world!’ that shows nested columns in use. Of course, it would need expansion to show more features and difficulties in using a CSS Grid. It would also need a real designer to create something that also looks good.

Example of nested columns using BluCSS. I just took the demo page as an example and changed it to do what I wanted. The BluCSS stylesheet includes media queries to help toward a “responsive” design. Note that I changed the “container” to 100% width. Why have large monitors if pages won’t use the space?

Screen capture of my example rendered in FireFox’s Responsive Design View. In this tool a 1200 x 800 viewport correctly allows rotate, however, on a real smartphone, Samsung Note, the vertical view is stacked. Hmm.

screen capture snippet

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; 
		charset=ISO-8859-1">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">	
	<title>BluCSS - Nested Grid Demo</title>
	<!-- Author: Josef Betancourt; Date: 20121221T1840	 -->
	<link rel="stylesheet" href="css/blucss.css">
	<link rel="stylesheet" href="css/myStyle.css">
	<script 
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
	</script>
	<script 
		src="js/ndhw.js">
	</script>
	<script>
		$(document).ready(function(){  	});		  
	</script>		
</head>
<body style="margin:1em;">
  <div class="container">
	<div class="blu_8">
	
		<!-- ########################## -->	
		<div class="blu_10 header">
			<h2 class="">CSS Grid Hello World!</h2>
		</div>		
		<!-- ########################## -->	
	
		<!-- ########################## -->	
		<div class="blu_1 test">a</div><div class="blu_1 test">b</div>
		<div class="blu_1 test">c</div><div class="blu_1 test">d</div>
		<div class="blu_1 test">e</div><div class="blu_1 test">f</div>
		<div class="blu_1 test">g</div><div class="blu_1 test">h</div>
		<div class="blu_1 test">i</div><div class="blu_1 test">j</div>
		<!-- ########################## -->	
	
		<!-- ########################## -->	
		<div class="blu_1 test">k</div>	
		<div class="blu_1 test">l</div>
		<div class="blu_5 test ">
			<div class="blu_10 box">5</div>
			<div class="blu_10">nested columns</div>
			<div class="blu_2 color1">2</div>
			<div class="blu_3 color1">3</div>
			<div class="blu_3 color1">3</div>
			<div class="blu_2 color1">2</div>			
		</div>	
		<div class="blu_1 test">m</div>
		<div class="blu_1 test">n</div>
		<div class="blu_1 test">o</div>
		<!-- ########################## -->
		<div class="clear">
			<div class="blu_1 test">1</div><div class="blu_1 test">2</div>
			<div class="blu_1 test">3</div><div class="blu_1 test">4</div>
			<div class="blu_1 test">5</div><div class="blu_1 test">6</div>
			<div class="blu_1 test">7</div><div class="blu_1 test">8</div>
			<div class="blu_1 test">9</div><div class="blu_1 test">10</div>
		</div>	
		
		<div class="blu_10">
			<a id="showBT" href="#" class="buttonCls" onclick="getSource()">source</a>
			<a id="hideBT" href="#" class="buttonCls" style="display:none;">hide</a>		
		</div>
		<div class="blu_10 color2">
			<pre class="box" id="theSrc" style="display:none;"></pre>		
		</div>		
	</div>
	
	<div class="blu_2 omega color2">	
		<div id="rs">rs</div>
	</div>	
			
	<!-- ########################## -->	
	<div class="blu_8 test color2">8</div>
	<!-- ########################## -->
	<div class="blu_1 test color2">1</div>	
	<div class="blu_1 test color2">1</div>
	
	<div class="blu_8">&nbsp;</div>	
	<div class="blu_2" style="font-size:.5em;">
			20121221T1840, J.Betancourt	
  	</div>	
	<!-- ########################## -->	
  	
 </div>
</html>

Summary
Created an example ‘hello world’ CSS Grid use. The example also includes the use of AJAX with JQuery to show the HTML source. Not part of the topic but was an interesting thing to get to work. I wonder if that technique can be used to show other things like log files.

Question: Since CSS Grids rely on horizontal flow, how are they a grid? Maybe they should be called CSS sliding rows that sometimes align into columns. 🙂

Related reading

  • CSSButtonGenerator
  • Responsive Design View
  • Responsive web design
  • Grids CSS, as bad as HTML markup abuse, or worse
  • BluCSS
  • The 1KB CSS Grid, http://www.1kbgrid.com/
  • The Semantic Grid System
  • My (current) take on CSS Preprocessors
  • 45+ CSS Grid Layout Generators
  • ” Which Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained “, http://designshack.net/articles/css/which-is-right-for-me-22-responsive-css-frameworks-and-boilerplates-explained/
  • ” Which CSS Grid Framework Should You Use for Web Design?”, http://net.tutsplus.com/tutorials/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/
  • “Grid System Generator”, gridsystemgenerator.com
  • “Designing With Grid-Based Approach”, http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
  • The Ultimate Collection of 50+ Resources for Grid Lovers, http://designshack.net/articles/layouts/the-ultimate-collection-of-50-resources-for-grid-lovers/
  • “Grids Are Good (Right?)”, M. Boulton, Khoi Vinh. http://www.subtraction.com/pics/0703/grids_are_good.pdf
  • “Rethinking CSS Grids”, http://www.markboulton.co.uk/journal/rethinking-css-grids
  • ” Rolling Your Own Grid Layouts on the Fly Without a Framework”, http://designshack.net/articles/css/rolling-your-own-grid-layouts-on-the-fly-without-a-framework/
  • “Design By Grid”, http://www.designbygrid.com/
Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.