zwwcn

Just another WordPress.com site

Category Archives: CSS

print css example

I had a task to print a dashboard page.  The print review looks quite different from the web page, so I have to create a print css to customize the display.

Create a print link on the page to call the below function.

		function printDiv() {					    
                     //backup dom
		     var originalContents = document.body.innerHTML;
		     
                     //make whatever change you want, remove unnecessary elements	
	             $("li").removeClass("gs-w");
		
                     //print the modified page
		     window.print();

                     //reset page 	
	             document.body.innerHTML = originalContents;
		}

Include the css on the page,  apply the page break only in print mode.

@media all {
	.page-break {
		display: none !important;
	}
}

@media print {
	html, body, ul {
		float: none !important;
	}
	.page-break {
		display: block;
		page-break-after: always;
	}
}

 

Advertisements

Javascript drawing on an image inside a canvas

I just finished a task: load an image inside a popup canvas then draw lines on the canvas and save the image data. I had a couple issues during the development, but luckily I managed to find answers on google.

  1. How to draw on canvas on mobile devices.
    I found a good article which give all the details Using Touch Events with the HTML5 Canvas.  You should be aware of the difference code for IOS,Android and canvas in browser. The touch devices use “touchmove”,”touchstart” while the browswer uses “mousemove”,”mousedown”..etc
  2. We need to stop page scrolling when user are ready for drawing.
    stopScroll = (ev) ->
      ev.preventDefault();
    
    $page.on("popupbeforeposition","#popupPanel", (event,ui) ->
     $('body').bind('touchmove',stopScroll);
    )
    $page.on("popupafterclose","#popupPanel",(event,ui) ->
       $('body').unbind('touchmove',stopScroll);
    )
    
  3. How to improve image quality.
    When loading the photo to canvas, you may get a blurry image. The following code improve the quality of image

    canvastx = popupCanvas.getContext("2d");
    canvastx.webkitImageSmoothingEnabled = false;
    canvastx.mozImageSmoothingEnabled = false;
    canvastx.imageSmoothingEnabled = false;
    
  4. Don’t resize canvas, you should always create new one.
    Make sure you create new canvas after reading the image info. This way you know the image demision, then you could create new canvas with the same width/height ratio.  If you draw on a resized canvas,  everything(x,y point) on that canvas will be scaled.  You will have to do some calculation to get the orginal point. That’s why I prefer creating a new canvas with the right size.

Position An awesomefont background Relative to its Container Using CSS

<div id="container">
   <div id="box"> </div>
</div>
#container {
  position: relative;
}

#box:after {
  content: "\f154"; 
  font-family: FontAwesome;
  font-size: 100px;
  position: absolute;
  top: 40px;
  left:20px;
  z-index: 1;
}

ref : http://stackoverflow.com/questions/104953/position-an-html-element-relative-to-its-container-using-css

Placing text after css background image

css code:

</code>

.category-list li:nth-child(1) a{
background-image: url('/image.jpg');
background-repeat: no-repeat;
background-position: center;
padding: 160px 0px 0px 0px;
margin: 0px 0px 0px 0px;
display:block;
width:220px;
height:203px;
color:#58595b;
}

<code>

Clickable image and text link shows below:

sample

js script to check ajax page change

We could add break point in firebug to check ajax page changes

<script type=”text/javascript” language=”javascript”>
document.documentElement.addEventListener(‘mouseup’, function(e){
mouseDown = false;
var str = “Mouse up”;
});
</script>

 

 

Fixed column width and text overflow

table
{
table-layout:fixed; //will fix the width, may not necessary
}

</code>
p.test {
	white-space: nowrap;         //all text go to one line
	width: 100%;
	overflow: hidden;            //extra text will be hiden
	text-overflow: ellipsis;     //three periods append to the text
}

set width for rich:datatable

<rich:dataTable id="itemsTable" style="width:930px;" value="#{scheduleItems}">

<rich:column id="addressCol" styleClass="#{scheduleItem.invoice.quote ? 'highlight' : '' }" style="width:120px;">
<code>