Search Results

Search found 3408 results on 137 pages for 'margin'.

Page 70/137 | < Previous Page | 66 67 68 69 70 71 72 73 74 75 76 77  | Next Page >

  • HTML Select box not rendering correct

    - by PHPnooblet
    I don't know exactly why but my Selectbox is not rendering correctly, the underneath is missing. .zijdev{ margin-top:0; margin-bottom:0; } HTML: <p class="zijdev"> Aantal toestanden: <select id="aantToestanden" onchange="FilterByToestanden()"> <option></option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> <option>13</option> <option>14</option> </select> </p>

    Read the article

  • CSS Container DIV Not Expanding

    - by rsmith84
    I've been researching this for hours now and it seems to be an IE thing but my issue is that I have a container DIV that, in IE9, doesn't expand and cuts everything off after about 400px. Chrome and FF work perfectly, of course. Container DIV #main_container{ font-family: arial, verdana; width: 920px; top: 0; margin-left: auto; margin-right: auto; background-color: #fff; overflow-x: hidden; } Page Container DIV #page_container{ font-family: arial, verdana; font-size: 14px; width: 900px; color: #000; border: 0px solid; overflow: hidden; } And the standard markup of page block looks like this <div id="main_container"> <div id="page_container"> Variable page data goes here </div> </div> Is there an issue with my CSS that I'm missing or is there an IE hack that I need to apply?

    Read the article

  • How do I force a DIV block to extend to the bottom of a page even if it has no content?

    - by Vince Panuccio
    In the markup shown below, I'm trying to get the content div to stretch all the way to the bottom of the page but it's only stretching if there's content to display. The reason I want to do this is so the vertical border still appears down the page even if there isn't any content to display. Here is my code <body> <form id="form1"> <div id="header"> <a title="Home" href="index.html" /> </div> <div id="menuwrapper"> <div id="menu"> </div> </div> <div id="content"> </div> and my CSS body { font-family: Trebuchet MS, Verdana, MS Sans Serif; font-size:0.9em; margin:0; padding:0; } div#header { width: 100%; height: 100px; } #header a { background-position: 100px 30px; background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px; height: 80px; display: block; } #header, #menuwrapper { background-repeat: repeat; background-image: url(site-style-images/darkblue_background_color.jpg); } #menu #menuwrapper { height:25px; } div#menuwrapper { width:100% } #menu, #content { width:1024px; margin: 0 auto; } div#menu { height: 25px; background-color:#50657a; } Thanks for taking a look.

    Read the article

  • Add a hover effect to all elements of a class [closed]

    - by Em Sta
    I made a simple website, it looks like this: But, as you can see, the hover effect only works on where the mouse actually is! (here ipsum) But my aim is that the hover works on all elements! So i added a class with the hover effect p.hov:hover, but see it yourself: <span id="motha"> <blockquote> <p class="hov">Lorem</p> <p class="hov" >ipsum</p> <p class="hov" >dolor</p> <p class="hov" >sit</p> <p class="hov" >amen</p> </blockquote> </span> p { color:#f2f2f2; background:#ff4a4a; font-size: 75px; line-height: 74px; font-weight:700; margin: 0 5px 24px; float:left; padding: 10px; margin: 0 5px 24px; font-family: 'Route', serif; } p.hov:hover {box-shadow: 1px 1px #666, 2px 2px #666, 3px 3px #666;} Sorry for my english! And Thanks!

    Read the article

  • Most effecient way to create a "slider" timeline in HTML, CSS, and JavaScript?

    - by ZapChance
    Alright, so here's my dilemma. I've got these two "slides" lined up, one ready to be passed into view. I have it working and all, but I can scroll over to the right to see the second slide! How could I have it you can only view the one slide? JavaScript used: function validate(form) { var user = form.username.value; var pass = form.password.value; if(user === "test") { if(pass === "pass") { var hideoptions = {"direction" : "left", "mode" : "hide"}; var showoptions = {"direction" : "left", "mode" : "show"}; /*$("#loginView").toggle("slide", hideoptions, 1000, function() { $("#loginView").css("margin-left", "100%"); }); $("#mainView").toggle("slide", showoptions, 1000, function() { $("#mainView").css("margin-left", 0); });*/ $("#loginView").animate({ marginLeft: "-100%" }, 1000); $("#mainView").animate({ marginLeft: "0" }, 1000); } else { alert("nope"); } } else { alert("nope 2"); } } As you can see here @ http://jsfiddle.net/D7Va3/1/ (JSFiddle), once you enter "test" and "pass", then click enter, the tiles slide. But. If you reload, you can see that you can scroll to the right of the screen and view the second slide prematurely, which is just not going to work for me. I still need to achieve the same seamless transition, but you must only be able to view one slide at a time. Also, I plan to expand with more slides, so if you're feeling lucky today, I'd really love to see an example of how I could support multiple frames. I'm very new to JavaScript (yet I know syntax rules, and general coding knowledge from other languages), so the better you explain, the more knowledgeable I can be, and I'd be very grateful for that. Thanks in advance!

    Read the article

  • on click submit button move itsplace

    - by Mayur
    Hi All, I m Using submit button for my form its work fine in all browser except ie7 when an user click on it it moved please suggest me what to do .confirm-button-submit { width : 79px; font : bold 12px sans-serif;; color : #000; background : url("../images/confirm-btn.png") 0 -33px no-repeat; text-decoration : none; margin-top :0px; text-align:center; border:0px; cursor : pointer; height:32px; padding : 8px 0px 12px 0px; } .confirm-button-submit:hover { width : 79px; font : bold 12px sans-serif;; color : #fff; background : url("../images/confirm-btn.png") 0 0 no-repeat; text-decoration : none; margin-top :0px; text-align:center; border:0px; cursor : pointer; height:32px; padding : 8px 0px 12px 0px; } i used this css please tell me what to do code: <input type="button" value="Show" name="commit" onclick="range_validation(this)" class="confirm-button-submit"/>`

    Read the article

  • Center <div> vertically within another <div>

    - by sab
    I am trying to setup something that looks like this with the arrow that is centered vertically: CSS: #arrowdiv { width:282px; height:61px; background-image:url('http://i.imgur.com/RV80I.png'); margin: 0 auto; } #optin { height:110px; width:960px; background-color:#FFFFBF; border:1px solid black; -moz-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); margin: 0 auto; } #leftdiv { width:340px; height:108px; } ? HTML: <div id="optin"> <div id="leftdiv"> <div id="arrowdiv"></div> </div> </div>? http://jsfiddle.net/NzMLd/1/ Right now, it is only centered horizontally, as you can see in my jsFiddle.

    Read the article

  • Background-image is not displaying in Firefox

    - by goa
    Strange thing happens. Background-image is not displaying in Firefox under some versions of WindowsXP and Windows Vista, but displays in Firefox under Mac OSX. It also displays in IE. This is CSS: .cherry_banner { background: url("library/media/images/cherry_banner_top.png") no-repeat; width: 276px; display:block; min-height:100px; padding-top: 13px; color: #fdfdfd; margin-bottom:20px; } .cherry_banner a { color: #fdfdfd; } .cherry_banner a:hover { text-decoration:underline; } .cherry_banner li { list-style-type:none; } .cherry_banner h2 { font-size: 18px; margin-bottom: 10px; } .chb_text1 { background: url("library/media/images/cherry_banner_pixel.png") repeat-y; } .chb_text2 { background: url("library/media/images/cherry_banner_bottom.gif") bottom no-repeat; padding: 4px 14px 24px 25px; } And this is html: <div id="linkcat-8" class="cherry_banner tpt"><div class="chb_text1"><div class="chb_text2"> <h2>??? ?????????</h2> <ul class='xoxo blogroll'> <li><a href="http://inveda.ru/jyotish/naksatra-calendar/">???????? ?????????? ?????????????? ????????? ????????????? ??? ?? 2010?.</a></li> </ul> </div></div></div> You can see on http://www.inveda.ru - right column - red banner.

    Read the article

  • Jquery cycle plugin containerResize option

    - by user1193385
    Im using jquery cycle on have a fade slideshow like so... $('.pics').cycle({ fx: 'fade', timeout:5000, random: 1, containerResize: false }); it was working fine before but since I added containerResize: false my images wont show up anymore...does anyone know what its doing this?...example at http://willruppelglass.com/index.php here is some other code, might help, never know.... .pics { padding: 0; margin: 0; } .pics img { background-color: #eee; height: 200px; text-align:center; top: 0; left: 0; } .contentImages{ border:1px solid #CCC; padding:10px; margin:20px auto 0; position:relative; width: 600px; overflow:hidden; } <div class="contentImages"> <div class="pics"> <img src="upload/<?php echo $array['image'] ?>" height="200" /> <img src="upload/<?php echo $array['image2'] ?>" height="200" /> <img src="upload/<?php echo $array['image3'] ?>" height="200" /> </div> </div>

    Read the article

  • Figure and figcaption figures shrink images

    - by Why Not
    I'm attempting to use the figure and figcaption tags to varying success. Someone suggested a great CSS method to get rid of the figure margin and also link up the caption with the image. The problem: all images shrink to an extremely small size. Not sure how to rectify this. These are user-submitted images using Django so they vary in size. But currently, using these fixes, all of these shrink with a caption that does fit the image but defeats the purpose as it results in a tiny image with a caption with an even width. {% if story.pic %} <h2>Image</h2> <figure> <img class="image"src="{{ story.pic.url }}" alt="some_image_alt_text"/> {% if story.caption %} <figcaption>{{story.caption}}</figcaption> {% endif %} </figure> {% endif %} figure {margin:0; display:table; width:1px;} figcaption {display:table-row;}

    Read the article

  • OSX: Programmatically added subviews not responding to mouse down events

    - by BigCola
    I have 3 subclasses: a Block class, a Row class and a Table class. All are subclasses of NSView. I have a Table added with IB which programmatically displays 8 rows, each of which displays 8 blocks. I overrode the mouseDown: method in Block to change the background color to red, but it doesn't work. Still if I add a block directly on top of the Table with IB it does work so I can't understand why it won't work in the first case. Here's the implementation code for Block and Row (Table's implementation works the same way as Row's): //block.m - (void)drawRect:(NSRect)dirtyRect { [color set]; [NSBezierPath fillRect:dirtyRect]; } -(void)mouseDown:(NSEvent *)theEvent { color = [NSColor redColor]; checked = YES; [self setNeedsDisplay:YES]; } //row.m - (void)drawRect:(NSRect)dirtyRect { [[NSColor blueColor] set]; [NSBezierPath fillRect:dirtyRect]; int x; for(x=0; x<8; x++){ int margin = x*2; NSRect rect = NSMakeRect(0, 50*x+margin, 50, 50); Block *block = [[Block alloc] initWithFrame:rect]; [self addSubview:block]; } }

    Read the article

  • Navigate to browser from selected listbox binded hyperlink (windows phone7)

    - by Ryan Smith
    I am bindind rss items from the net to this page, I cannot Seem to navigate to the link of a selected items hyper link which through binding is string. can anyone help me to navigate to weblink from a listbox item when selected ??? <ListBox Height="712" HorizontalAlignment="Left" Name="listNews" VerticalAlignment="Top" Width="468" SelectionChanged="listNews_SelectionChanged" Margin="0,-22,0,0"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" Height="132"> <Image Source="{Binding Avatar}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,7,5,0"/> <StackPanel Width="370"> <TextBlock Text="{Binding Newstitle}" TextWrapping="Wrap" Foreground="#FFC8AB14" FontSize="28" /> <HyperlinkButton Name="{Binding NewsLink}" Content="{Binding NewsLink}" NavigateUri="{Binding NewsLink}" FontSize="18" ClickMode="Press" Click="Selected" /> </StackPanel> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> private void listNews_SelectionChanged(object sender, SelectionChangedEventArgs e) { WebBrowserTask webBrowserTask = new WebBrowserTask(); webBrowserTask.URL = **???????;** webBrowserTask.Show();

    Read the article

  • How to make jquery pop up box responsive

    - by user2375896
    i have jquery pop up responsive , it works but when i change the size of the page , it stays on the right side . <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"> <style type="text/css"> .ui-widget-header { background: white; border: 0px; color:black; } #ui-dialog-title-dialog { background-color: black; } .ui-widget-overlay { background: none repeat-x scroll 0 0 black; opacity: 0.7; }</style> and function side is here : <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function () { var $dialog = $('<div stye="float:left;" width:auto;"></div>') .html('<p>Lütfen kisi veya kisileri hedef alan haberler yazmayiniz.</p><p>Gerçegi yansitmayan haberler paylasmayiniz. </p><ul><li>Eklediginiz haberler Admin tarafindan onaylandiktan sonra yayinlanacaktir.</li><li>Boyabat.net sitesini kullandiginiz için tesekkür ederiz...</li></ul><table style="margin-right:auto; margin-left:auto;"></table>') .dialog({ autoOpen: true, resizable: true, draggable: true, width: 'auto', // overcomes width:'auto' and maxWidth bug height: 300, maxWidth: 600, modal: true, title: 'Haber Ekleme Kurallari' }); }); </script it works fine but when i run my responsive template and changeit is size to iphone , it is not appera in the screen. I juust need a solution on that . An help appriciate..Thanks

    Read the article

  • CSS Style Firefox/Safari/Chrome

    - by patrick
    hi, i have a problem with css differences between browsers. i have a simple input textfield an a submit button. the should be arranged. with webkit (safari/webkit) everything looks fine but firefox doesnt do it. does anyone have an idea whats wrong? i have written a little test html page: <html> <head> <style type="text/css"> #input { background: none repeat scroll 0 0 white; border-color: #DCDCDC; border-style: solid; border-width: 1px 0 1px 1px; font: 13px "Lucida Grande",Arial,Sans-serif; margin: 0; padding: 5px 5px 5px 15px; width: 220px; outline-width: 0; height: 30px; } #submit { background: none repeat scroll 0 0 white; border: 1px solid #DCDCDC; font: 13px "Lucida Grande",Arial,Sans-serif; margin: 0; outline-width: 0; height: 30px; padding: 5px 10px; } </style> </head> <body> <input id="input" type="text" value="" /><input id="submit" type="button" value="Add" /> </body> </html>

    Read the article

  • CSS nested div height 100%

    - by Aaron Moodie
    I've currently got the #border div at 100% of the page height, but am trying to get the #content div to stretch to 100% inside #border. At the moment #content only stretches to fit the content inside it. * { margin: 0; } html, body { height:100%; font-family: Georgia, Times, "Times New Roman", serif; font-size:13px; line-height:19px; color:#333333; background: #f5f1ec; text-align: left; } #border { background: #f5f1ec; border:solid 1px #FFFFFF; width: 880px; margin: 40px auto 0; padding:10px; height: auto !important; min-height: 100%; height: 100%; } #container { background: #FFFFFF; padding: 10px 50px 0; height: 100%; }

    Read the article

  • CSS challenge: Two background images, centered column with fixed with, min-height 100%

    - by laurent
    In a nutshell I need a CSS solution for the following requirements: Layout: One centered column with fixed width and a minimum height of 100% Two vertically repeated background images behind the centered column, one aligned to the left, one aligned to the right Cross browser compatibility A little more details Today a new requirement for my current web site project came up: A background image with gradients on the left and right side. The challenge is now to specify two different background images while keeping the rest of the layout spec. Unfortunately the (simple) layout somehow doesn't go with the two backgrounds. My layout is basically one centered column with fixed width: #main_container { margin: 0 auto; min-height: 100%; width: 800px; } Furthermore it's necessary to stretch the column to a minimum height of 100%, since there are quite some pages with only little content. The following CSS styles take care of that: html { height: 100%; } body { margin: 0; height: 100%; padding: 0; } So far so good - until the two background image issue arrived... I tried the following solutions Two absolute positioned divs behind the main container One image defined with the body, one with the html CSS class One image defined with the body, the other one with a large div begind the main container With either one of them, the dynamic height solution was ruined. Either the main container didn't stretch to 100% when it was too small, or the background remained at 100% when the content was actually longer

    Read the article

  • CSS: auto height on containing div, 100% height on background div inside containing div.

    - by user47831
    The problem, is that I have a content div which stretches its container height-wise (container and content div have auto height). I want the background container, which is a sister div of the content div to stretch to fill the container. The background container contains divs to break the background into chunks. The background and container divs have 100% width, the content container doesn't. HTML: <div id="container"> <div id="content"> Some long content here .. </div> <div id="backgroundContainer"> <div id="someDivToShowABackground"/> <div id="someDivToShowAnotherBackground"/> </div> </div> CSS: #container { height:auto; width:100%; } #content { height: auto; width:500px; margin-left:auto; margin-right:auto; } #backgroundContainer { height:100%;??? I want this to be the same height as container, but 100% makes it the height of the viewport. }`

    Read the article

  • CSS: auto height on containing div, 100% height on background div inside containing div.

    - by user47831
    The problem, is that I have a content div which stretches its container height-wise (container and content div have auto height). I want the background container, which is a sister div of the content div to stretch to fill the container. The background container contains divs to break the background into chunks. The background and container divs have 100% width, the content container doesn't. HTML: <div id="container"> <div id="content"> Some long content here .. </div> <div id="backgroundContainer"> <div id="someDivToShowABackground"/> <div id="someDivToShowAnotherBackground"/> </div> </div> CSS: container ` container { height:auto; width:100%; } content { height: auto; width:500px; margin-left:auto; margin-right:auto; } backgroundContainer { height:100%;??? I want this to be the same height as container, but 100% makes it the height of the viewport. }`

    Read the article

  • Modifying a HTML page to fix several "bugs" add a function to next/previous on a option dropdown

    - by Dennis Sylvian
    SOF, I've got a few problems plaguing me at the moment and am wondering if anyone could assist me with them. I'm trying to get Next Class | Previous Class to act as buttons so that when Next Class is clicked it will go to the next item in the dropdown list and for previous it would go to back one. There used to be a scroll bar that allowed me to scroll the main window left and right, it's missing because (I think it was to do with the scroll left and scroll right function) The footer at the bottom doesn't show correctly on mobile devices; for some reason it appears completely differently to as it does on a computer. The "bar" practically and the Scroll Left and Scroll buttons don't appear at all on mobile devices. The scroll left button is unable to be clicked for some reason, I'm unsure what I've done wrong. Refreshing the page resets the horizontal scroll position to far left (I'm pretty sure this relates to the scroll bar) I want to also find a way so that on mobile devices the the header will not show the placeholder image, however I can't work out what CSS media tag(s) I should be using. Latest: http://jsfiddle.net/pwv7u/ Smaller HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DATA DATA DATA DATA DATA DATA DATA DATA</title> <style type="text/css"> <!-- @import url("nstyle.css"); --> </style> <script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready( function() { for (var i=0;i<($("table").children().length);i++){ if(readCookie(i)) $($($("table").children()[i]).children()[(readCookie(i))]).toggleClass('selected').siblings().removeClass('selected'); } $("tr").click(function(){ $(this).toggleClass('selected').siblings().removeClass('selected'); if(readCookie($(this).parent().index())){ if(readCookie($(this).parent().index())==$(this).index()) eraseCookie($(this).parent().index()); else{ eraseCookie($(this).parent().index()); createCookie($(this).parent().index(),$(this).index(),1); } } else createCookie($(this).parent().index(),$(this).index(),1); }); // gather CLASS info var selector = $('.class-selector').on('change', function(){ var id = this.value; if (id!==''){ scrollToAnchor(id); } }); $('a[id^="CLASS"]').each(function(){ var id = this.id, option = $('<option>',{ value: this.id, text:this.id }); selector.append(option); }); function scrollToAnchor(aid) { var aTag = $("a[id='" + aid + "']"); $('html,body').animate({ scrollTop: aTag.offset().top - 80 }, 1); } $("a.TOPJS").click(function () { scrollToAnchor('TOP'); }); $("a.KEYJS").click(function () { scrollToAnchor('KEY'); }); $("a.def").click(function () { $('#container').animate({ "scrollLeft": "-=204" }, 200); }); $("a.abc").click(function () { $("#container").animate({ "scrollLeft": "+=204" }, 200); }); function createCookie(name,value,days) { var expires; if (days) { var date = new Date(); date.setMilliseconds(0); date.setSeconds(0); date.setMinutes(0); date.setHours(0); date.setDate(date.getDate()+days); expires = "; expires="+date.toGMTString(); } else expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length); } return null; } function eraseCookie(name) { createCookie(name,"",-1); } }); </script> </head> <body> <div id="header_container"> <div id="header"> <a href="http://site.x/" target="_blank"><img src="http://placehold.it/300x80"></a> <select class="class-selector"> <option value="">-select class-</option> </select> <div class="classcycler"> <a href="#TOP"><font color=#EFEFEF>Next Class</font></a> <font color=red>|</font> <a href="#TOP"><font color=#EFEFEF>Previous Class</font></a> </div> <div id="header1"> Semi-Transparent Image <a href="#TOP"><font color=#EFEFEF>Up to Top</font></a> | <a href="#KEY"><font color=#EFEFEF>Down to Key</font></a> </div> </div> </div> <a id="TOP"></a> <div id="container"> <table id="gradient-style"> <tbody> <thead> <tr> <th scope="col"><a id="CLASS1"></a>Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class<br>Test 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class Data 1</th> <th scope="col">Class 1<br>Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1<br>Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1</th> <th scope="col">Class 1 Class 1</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> (data text)</th> <th scope="col">title text</th> <th scope="col">text</th> <th scope="col">text</th> <th scope="col">title text</th> <th scope="col">title text</th> </tr> </thead> <tr class="ft3"><td>testing data</td><td>testing data</td><td>test</td><td>class b</td><td>test4</td><td><div align="left">data</div></td><td><div align="left"> </div></td><td><div align="left"></div></td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><tr> <tr class="f3"><td>test</td><td>test</td><td>test</td><td>class a</td><td>test2</td><td><div align="left"> </div></td><td><div align="left"></div></td><td><div align="left"></div></td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>test</td><tr> <thead> <tr> <th scope="col"><a id="CLASS2"></a>Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class<br>Test 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class Data 2</th> <th scope="col">Class 2<br>Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2<br>Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2</th> <th scope="col">Class 2 Class 2</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> data text</th> <th scope="col">title text<br> (data text)</th> <th scope="col">title text</th> <th scope="col">text</th> <th scope="col">text</th> <th scope="col">title text</th> <th scope="col">title text</th> </tr> </thead> <tr class="ft3"><td>testing data</td><td>testing data</td><td>test</td><td>class f</td><td>test2</td><td><div align="left">data</div></td><td><div align="left"></div></td><td><div align="left">data</div></td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><tr> <tr><td>test</td><td>testing data</td><td>test</td><td>class f</td><td>test4</td><td><div align="left">data</div></td><td><div align="left"></div></td><td><div align="left"></div></td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><tr> <tr class="f3"><td>test</td><td>testing data</td><td>testing data</td><td>class d</td><td>test5</td><td><div align="left">data</div></td><td><div align="left"> </div></td><td><div align="left">data</div></td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><tr> <tr><td>testing data</td><td>test</td><td>test</td><td>class f</td><td>test5</td><td><div align="left"></div></td><td><div align="left"></div></td><td><div align="left">data</div></td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>test</td><td>testing data</td><tr> <tr class="f2"><td>test</td><td>test</td><td>testing data</td><td>class a</td><td>test1</td><td><div align="left">data</div></td><td><div align="left"> </div></td><td><div align="left">data</div></td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>test</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>testing data</td><td>test</td><td>testing data</td><td>testing data</td><td>test</td><tr> </tbody> <tfoot> <tr> <th class="alt" colspan="34" scope="col"><a id="KEY"></a><img src="http://placehold.it/300x50"></th> </tr> <tr> <td colspan="34"><em><b>DATA DATA</b> - DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA </em></td> </tr> <tr> <td class="alt" colspan="34"><em><b>DAT DATA</b> - DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA </em></td> </tr> </tfoot> </table> </div> <div id="footer_container"> <div id="footer"> <a href="http://site.x/" target="_blank"><img src="http://placehold.it/300x80"></a> <div class="footleft"> <a class="def" href="javascript: void(0);"><font color="#EFEFEF">Scroll Left</font></a> </div> <div id="footer1"> <font color="darkblue">Semi-Transparent Image</font> <i>Copyright &copy; 2013 <a href="http://site.x/" target="_blank" style="text-decoration: none"><font color=#ADD8E6>site</font></a>.</i> </div> <div id="footer2"> <i>All Rights Reserved.</i> </div> <div class="footright"> <a class="abc" href="javascript: void(0);"><font color="#EFEFEF">Scroll Right</font></a> </div> </div> </div> </body> </html> CSS gradient-style * { white-space: nowrap; } #header .class-selector { top: 10px; left: 20px; position: fixed; } #header .classcycler { top: 45px; left: 20px; position: fixed; font-size:20px; } body { line-height: 1.6em; background-color: #535353; overflow-x: scroll; } #gradient-style { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; margin: 0px; width: 100%; text-align: center; border-collapse: collapse; } #gradient-style th { font-size: 13px; font-weight: normal; line-height:250%; padding-left: 5px; padding-right: 5px; background: #535353 url('table-images/gradhead.png') repeat-x; border-top: 1px solid #fff; border-bottom: 1px solid #fff; color: #ffffff; } #gradient-style th.alt { font-family: "Times New Roman", Serif; text-align: left; padding: 10px; font-size: 26px; } #gradient-style td { padding-left: 5px; padding-right: 5px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #fff; color: #00000; border-top: 1px solid #fff; background: #FFF url('table-images/gradback.png') repeat-x; } #gradient-style tr.ft3 td { color: #00000; background: #99cde7 url('table-images/gradoverallstudent.png') repeat-x; font-weight: bold; } #gradient-style tr.f1 td { color: #00000; background: #99cde7 url('table-images/gradbeststudent.png') repeat-x; } #gradient-style tr.f2 td { color: #00000; background: #b7e2b6 url('table-images/gradmostattentedstudent.png') repeat-x; } #gradient-style tr.f3 td { color: #00000; background: #a9cd6c url('table-images/gradleastlatestudtent.png') repeat-x; } #gradient-style tfoot tr td { background: #6FA275; font-size: 12px; color: #000; padding: 10; text-align: left; } #gradient-style tbody tr:hover td, #gradient-style tbody tr.selected td { background: #d0dafd url('table-images/gradhover.png') repeat-x; color: #339; } body { margin: 0; padding: 0; } #header_container { background: #000000 url('table-images/gradhead.png') repeat-x; border: 0px solid #666; height: 80px; left: 0; position: fixed; width: 100%; top: 0; } #header { position: relative; margin: 0 auto; width: 500px; height: 100%; text-align: center; color: #0c0aad; } #header1 { position: absolute; width: 125%; top: 50px; } #container { margin: 0 auto; overflow: auto; padding: 80px 0; width: 100%; } #content { } #footer_container { background: #000000 url('table-images/gradhead.png') repeat-x; border: 0px solid #666; bottom: 0; height: 95px; left: 0; position: fixed; width: 100%; } #footer { position: relative; margin: 0 auto; height: 100%; text-align: center; color: #FFF; } #footer1 { position: absolute; width: 103%; top: 50px; } #footer2 { position: absolute; width: 110%; top: 70px; } #footer .footleft { top: 45px; left: 2%; position: absolute; font-size:20px; } #footer .footright { top: 45px; right: 2%; position: absolute; font-size:20px; }

    Read the article

  • How to write a XSLT for this XML?

    - by atrueguy
    <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve"> <g id="Original_Text"> <line x1="92.676" y1="500.913" x2="92.676" y2="500.262"/> <line x1="15.208" y1="500.913" x2="15.208" y2="500.262"/> <line x1="92.676" y1="500.262" x2="92.676" y2="500.913"/> <line x1="15.208" y1="510.329" x2="15.208" y2="509.678"/> <line x1="92.676" y1="500.913" x2="92.676" y2="500.262"/> <rect x="15.208" y="574.678" display="none" width="77.468" height="0.651"/> <text transform="matrix(1 0 0 1 258.6782 28.9111)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="8.4629">Bartlet</tspan><tspan x="24.459" y="0" font-family="'ArialMT'" font-size="8.4629">t</tspan><tspan x="26.895" y="0" font-family="'ArialMT'" font-size="8.4629"> </tspan><tspan x="29.035" y="0" font-family="'ArialMT'" font-size="8.4629">Managemen</tspan><tspan x="76.081" y="0" font-family="'ArialMT'" font-size="8.4629">t</tspan><tspan x="78.601" y="0" font-family="'ArialMT'" font-size="8.4629"> </tspan><tspan x="80.741" y="0" font-family="'ArialMT'" font-size="8.4629">Services</tspan></text> <text transform="matrix(1 0 0 1 522.9805 39.562)"><tspan x="0" y="0" fill="#0000FF" font-family="'ArialMT'" font-size="7.1609">Report</tspan><tspan x="21.493" y="0" fill="#0000FF" font-family="'ArialMT'" font-size="7.1609">s</tspan><tspan x="25.382" y="0" fill="#0000FF" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="27.343" y="0" fill="#0000FF" font-family="'ArialMT'" font-size="7.1609">Home</tspan></text> <line fill="none" stroke="#0000FF" stroke-width="0.651" stroke-miterlimit="10" x1="522.98" y1="40.213" x2="569.852" y2="40.213"/> <text transform="matrix(1 0 0 1 261.2822 39.3267)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Consolidate</tspan><tspan x="37.818" y="0" font-family="'ArialMT'" font-size="7.1609">d</tspan><tspan x="41.901" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="44.105" y="0" font-family="'ArialMT'" font-size="7.1609">Weekl</tspan><tspan x="64.001" y="0" font-family="'ArialMT'" font-size="7.1609">y</tspan><tspan x="67.975" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="70.18" y="0" font-family="'ArialMT'" font-size="7.1609">Sales</tspan><tspan x="88.092" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="90.297" y="0" font-family="'ArialMT'" font-size="7.1609">Report</tspan></text> <text transform="matrix(1 0 0 1 522.9775 49.3267)"><tspan x="0" y="0" fill="#0000FF" font-family="'ArialMT'" font-size="7.1609">Stor</tspan><tspan x="13.133" y="0" fill="#0000FF" font-family="'ArialMT'" font-size="7.1609">e</tspan><tspan x="17.566" y="0" fill="#0000FF" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="19.527" y="0" fill="#0000FF" font-family="'ArialMT'" font-size="7.1609">Finder</tspan></text> <line fill="none" stroke="#0000FF" stroke-width="0.651" stroke-miterlimit="10" x1="521.98" y1="49.978" x2="562.341" y2="49.978"/> <text transform="matrix(1 0 0 1 282.7881 49.9775)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">P</tspan><tspan x="4.776" y="0" font-family="'ArialMT'" font-size="7.1609">D</tspan><tspan x="10.27" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="12.475" y="0" font-family="'ArialMT'" font-size="7.1609"> / </tspan></text> <text transform="matrix(1 0 0 1 123.5044 60.8589)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Wee</tspan><tspan x="14.724" y="0" font-family="'ArialMT'" font-size="7.1609">k</tspan><tspan x="18.949" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="21.153" y="0" font-family="'ArialMT'" font-size="7.1609">1</tspan></text> <text transform="matrix(1 0 0 1 190.1138 60.8589)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Wee</tspan><tspan x="14.724" y="0" font-family="'ArialMT'" font-size="7.1609">k</tspan><tspan x="18.949" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="21.153" y="0" font-family="'ArialMT'" font-size="7.1609">2</tspan></text> <text transform="matrix(1 0 0 1 261.6782 60.8589)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Wee</tspan><tspan x="14.724" y="0" font-family="'ArialMT'" font-size="7.1609">k</tspan><tspan x="18.949" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="21.153" y="0" font-family="'ArialMT'" font-size="7.1609">3</tspan></text> <text transform="matrix(1 0 0 1 331.377 60.8589)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Wee</tspan><tspan x="14.724" y="0" font-family="'ArialMT'" font-size="7.1609">k</tspan><tspan x="18.949" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="21.153" y="0" font-family="'ArialMT'" font-size="7.1609">4</tspan></text> <text transform="matrix(1 0 0 1 400.3164 60.8589)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Wee</tspan><tspan x="14.724" y="0" font-family="'ArialMT'" font-size="7.1609">k</tspan><tspan x="18.949" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="21.153" y="0" font-family="'ArialMT'" font-size="7.1609">5</tspan></text> <text transform="matrix(1 0 0 1 461.751 60.9487)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">P</tspan><tspan x="4.805" y="0" font-family="'ArialMT'" font-size="7.1609">-</tspan><tspan x="7.404" y="0" font-family="'ArialMT'" font-size="7.1609">T</tspan><tspan x="11.808" y="0" font-family="'ArialMT'" font-size="7.1609">-</tspan><tspan x="14.406" y="0" font-family="'ArialMT'" font-size="7.1609">D</tspan><tspan x="19.864" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="22.068" y="0" font-family="'ArialMT'" font-size="7.1609">Total</tspan></text> <text transform="matrix(1 0 0 1 527.6309 60.8589)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Yea</tspan><tspan x="12.741" y="0" font-family="'ArialMT'" font-size="7.1609">r</tspan><tspan x="15.699" y="0" font-family="'ArialMT'" font-size="7.1609">-</tspan><tspan x="18.298" y="0" font-family="'ArialMT'" font-size="7.1609">T</tspan><tspan x="22.673" y="0" font-family="'ArialMT'" font-size="7.1609">o</tspan><tspan x="27.12" y="0" font-family="'ArialMT'" font-size="7.1609">-</tspan><tspan x="29.72" y="0" font-family="'ArialMT'" font-size="7.1609">Dat</tspan><tspan x="40.863" y="0" font-family="'ArialMT'" font-size="7.1609">e</tspan><tspan x="45.419" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="47.623" y="0" font-family="'ArialMT'" font-size="7.1609">Total</tspan></text> <text transform="matrix(1 0 0 1 112.853 72.6265)" font-family="'ArialMT'" font-size="7.1609">$</text> <text transform="matrix(1 0 0 1 148.0059 72.6265)" font-family="'ArialMT'" font-size="7.1609">%</text> <text transform="matrix(1 0 0 1 184.4619 72.6265)" font-family="'ArialMT'" font-size="7.1609">$</text> <text transform="matrix(1 0 0 1 218.9629 72.6265)" font-family="'ArialMT'" font-size="7.1609">%</text> <text transform="matrix(1 0 0 1 255.4194 72.6265)" font-family="'ArialMT'" font-size="7.1609">$</text> <text transform="matrix(1 0 0 1 289.9204 72.6265)" font-family="'ArialMT'" font-size="7.1609">%</text> <text transform="matrix(1 0 0 1 326.377 72.6265)" font-family="'ArialMT'" font-size="7.1609">$</text> <text transform="matrix(1 0 0 1 360.8779 72.6265)" font-family="'ArialMT'" font-size="7.1609">%</text> <text transform="matrix(1 0 0 1 397.334 72.6265)" font-family="'ArialMT'" font-size="7.1609">$</text> <text transform="matrix(1 0 0 1 431.835 72.6265)" font-family="'ArialMT'" font-size="7.1609">%</text> <text transform="matrix(1 0 0 1 470.2461 72.6265)" font-family="'ArialMT'" font-size="7.1609">$</text> <text transform="matrix(1 0 0 1 506.0508 72.6265)" font-family="'ArialMT'" font-size="7.1609">%</text> <text transform="matrix(1 0 0 1 546.4092 72.6265)" font-family="'ArialMT'" font-size="7.1609">$</text> <text transform="matrix(1 0 0 1 584.1689 72.6265)" font-family="'ArialMT'" font-size="7.1609">%</text> <text transform="matrix(1 0 0 1 15.1997 83.394)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Ne</tspan><tspan x="9.154" y="0" font-family="'ArialMT'" font-size="7.1609">t</tspan><tspan x="11.716" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="13.677" y="0" font-family="'ArialMT'" font-size="7.1609">-</tspan><tspan x="16.277" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="18.237" y="0" font-family="'ArialMT'" font-size="7.1609">KFC</tspan></text> <text transform="matrix(1 0 0 1 15.1997 94.1616)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Ne</tspan><tspan x="9.154" y="0" font-family="'ArialMT'" font-size="7.1609">t</tspan><tspan x="11.716" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="13.677" y="0" font-family="'ArialMT'" font-size="7.1609">-</tspan><tspan x="16.277" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="18.237" y="0" font-family="'ArialMT'" font-size="7.1609">A&amp;W</tspan></text> <text transform="matrix(1 0 0 1 15.1997 104.9287)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Ne</tspan><tspan x="9.154" y="0" font-family="'ArialMT'" font-size="7.1609">t</tspan><tspan x="11.716" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="13.677" y="0" font-family="'ArialMT'" font-size="7.1609">-</tspan><tspan x="16.277" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="18.237" y="0" font-family="'ArialMT'" font-size="7.1609">LJS</tspan></text> <text transform="matrix(1 0 0 1 15.1924 115.6963)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Ne</tspan><tspan x="9.154" y="0" font-family="'ArialMT'" font-size="7.1609">t</tspan><tspan x="11.716" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="13.677" y="0" font-family="'ArialMT'" font-size="7.1609">-</tspan><tspan x="16.277" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="18.237" y="0" font-family="'ArialMT'" font-size="7.1609">TB</tspan></text> <text transform="matrix(1 0 0 1 15.1924 126.9639)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Tota</tspan><tspan x="14.329" y="0" font-family="'ArialMT'" font-size="7.1609">l</tspan><tspan x="16.457" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="18.661" y="0" font-family="'ArialMT'" font-size="7.1609">Net</tspan></text> <text transform="matrix(1 0 0 1 15.1851 149.2949)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Las</tspan><tspan x="11.545" y="0" font-family="'ArialMT'" font-size="7.1609">t</tspan><tspan x="13.671" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="15.632" y="0" font-family="'ArialMT'" font-size="7.1609">Yea</tspan><tspan x="28.374" y="0" font-family="'ArialMT'" font-size="7.1609">r</tspan><tspan x="31.252" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="33.213" y="0" font-family="'ArialMT'" font-size="7.1609">Sales</tspan></text> <text transform="matrix(1 0 0 1 15.1855 161.0625)" font-family="'ArialMT'" font-size="7.1609">Increase</text> <text transform="matrix(1 0 0 1 15.2065 171.8296)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Las</tspan><tspan x="11.545" y="0" font-family="'ArialMT'" font-size="7.1609">t</tspan><tspan x="13.671" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="15.632" y="0" font-family="'ArialMT'" font-size="7.1609">yea</tspan><tspan x="27.178" y="0" font-family="'ArialMT'" font-size="7.1609">r</tspan><tspan x="29.949" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="31.91" y="0" font-family="'ArialMT'" font-size="7.1609">Nex</tspan><tspan x="44.644" y="0" font-family="'ArialMT'" font-size="7.1609">t</tspan><tspan x="46.884" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="48.845" y="0" font-family="'ArialMT'" font-size="7.1609">Week</tspan></text> <text transform="matrix(1 0 0 1 15.2065 193.3574)" font-family="'ArialMT'" font-size="7.1609">Chicken</text> <text transform="matrix(1 0 0 1 15.1997 205.125)" font-family="'ArialMT'" font-size="7.1609">Filets</text> <text transform="matrix(1 0 0 1 15.1997 215.8926)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Popcor</tspan><tspan x="22.689" y="0" font-family="'ArialMT'" font-size="7.1609">n</tspan><tspan x="26.686" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="28.646" y="0" font-family="'ArialMT'" font-size="7.1609">Chicken</tspan></text> <text transform="matrix(1 0 0 1 15.1997 226.6602)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Crisp</tspan><tspan x="16.71" y="0" font-family="'ArialMT'" font-size="7.1609">y</tspan><tspan x="20.828" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="22.788" y="0" font-family="'ArialMT'" font-size="7.1609">Strips</tspan></text> <text transform="matrix(1 0 0 1 15.1997 237.4272)" font-family="'ArialMT'" font-size="7.1609">Special</text> <text transform="matrix(1 0 0 1 15.1924 248.1948)" font-family="'ArialMT'" font-size="7.1609">Wings</text> <text transform="matrix(1 0 0 1 15.1924 257.9624)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Subtota</tspan><tspan x="24.686" y="0" font-family="'ArialMT'" font-size="7.1609">l</tspan><tspan x="26.448" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="28.652" y="0" font-family="'ArialMT'" font-size="7.1609">Chicken</tspan></text> <text transform="matrix(1 0 0 1 15.1851 280.2935)" font-family="'ArialMT'" font-size="7.1609">Shortening</text> <text transform="matrix(1 0 0 1 15.1851 291.5605)" font-family="'ArialMT'" font-size="7.1609">Flour</text> <text transform="matrix(1 0 0 1 15.1851 302.3281)" font-family="'ArialMT'" font-size="7.1609">Biscuits</text> <text transform="matrix(1 0 0 1 15.1851 313.0957)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Frie</tspan><tspan x="12.332" y="0" font-family="'ArialMT'" font-size="7.1609">s</tspan><tspan x="16.278" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="18.239" y="0" font-family="'ArialMT'" font-size="7.1609">/</tspan><tspan x="20.844" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="22.805" y="0" font-family="'ArialMT'" font-size="7.1609">Onio</tspan><tspan x="37.931" y="0" font-family="'ArialMT'" font-size="7.1609">n</tspan><tspan x="42.329" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="44.29" y="0" font-family="'ArialMT'" font-size="7.1609">Rings</tspan></text> <text transform="matrix(1 0 0 1 15.1851 323.9385)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Potatoe</tspan><tspan x="24.686" y="0" font-family="'ArialMT'" font-size="7.1609">s</tspan><tspan x="28.646" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="30.606" y="0" font-family="'ArialMT'" font-size="7.1609">-</tspan><tspan x="33.206" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="35.167" y="0" font-family="'ArialMT'" font-size="7.1609">Mashed</tspan></text> <text transform="matrix(1 0 0 1 15.1851 334.6309)" font-family="'ArialMT'" font-size="7.1609">Desserts</text> <text transform="matrix(1 0 0 1 15.1851 345.3979)" font-family="'ArialMT'" font-size="7.1609">Drinks</text> <text transform="matrix(1 0 0 1 15.1851 357.1655)" font-family="'ArialMT'" font-size="7.1609">Corn</text> <text transform="matrix(1 0 0 1 15.1851 367.4331)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Ms</tspan><tspan x="9.545" y="0" font-family="'ArialMT'" font-size="7.1609">c</tspan><tspan x="13.663" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="15.624" y="0" font-family="'ArialMT'" font-size="7.1609">Entrees</tspan></text> <text transform="matrix(1 0 0 1 15.1846 378.2002)" font-family="'ArialMT'" font-size="7.1609">Salads</text> <text transform="matrix(1 0 0 1 15.1846 388.9678)" font-family="'ArialMT'" font-size="7.1609">Condiments</text> <text transform="matrix(1 0 0 1 15.1846 400.2354)" font-family="'ArialMT'" font-size="7.1609">Paper</text> <text transform="matrix(1 0 0 1 15.2012 410.9385)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">A&amp;</tspan><tspan x="9.553" y="0" font-family="'ArialMT'" font-size="7.1609">W</tspan><tspan x="16.927" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="18.888" y="0" font-family="'ArialMT'" font-size="7.1609">Sandwiches</tspan></text> <text transform="matrix(1 0 0 1 15.1943 421.2051)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">LJ</tspan><tspan x="7.563" y="0" font-family="'ArialMT'" font-size="7.1609">S</tspan><tspan x="12.368" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="14.329" y="0" font-family="'ArialMT'" font-size="7.1609">Product</tspan></text> <text transform="matrix(1 0 0 1 15.1938 431.4736)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">T</tspan><tspan x="4.374" y="0" font-family="'ArialMT'" font-size="7.1609">B</tspan><tspan x="9.766" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="11.727" y="0" font-family="'ArialMT'" font-size="7.1609">Product</tspan></text> <text transform="matrix(1 0 0 1 15.208 441.2402)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Tota</tspan><tspan x="14.329" y="0" font-family="'ArialMT'" font-size="7.1609">l</tspan><tspan x="16.457" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="18.661" y="0" font-family="'ArialMT'" font-size="7.1609">C.O.S</tspan></text> <text transform="matrix(1 0 0 1 15.187 465.0713)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Hourl</tspan><tspan x="17.112" y="0" font-family="'ArialMT'" font-size="7.1609">y</tspan><tspan x="20.829" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="22.79" y="0" font-family="'ArialMT'" font-size="7.1609">Labor</tspan></text> <text transform="matrix(1 0 0 1 15.1797 474.8389)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Mgm</tspan><tspan x="15.913" y="0" font-family="'ArialMT'" font-size="7.1609">t</tspan><tspan x="18.225" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="20.186" y="0" font-family="'ArialMT'" font-size="7.1609">Labor</tspan></text> <text transform="matrix(1 0 0 1 15.1724 486.6064)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Tota</tspan><tspan x="14.329" y="0" font-family="'ArialMT'" font-size="7.1609">l</tspan><tspan x="16.457" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="18.661" y="0" font-family="'ArialMT'" font-size="7.1609">Labor</tspan></text> <text transform="matrix(1 0 0 1 15.1655 507.7412)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Tota</tspan><tspan x="14.329" y="0" font-family="'ArialMT'" font-size="7.1609">l</tspan><tspan x="16.457" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="18.661" y="0" font-family="'ArialMT'" font-size="7.1609">Controllable</tspan></text> <text transform="matrix(1 0 0 1 15.1655 530.2686)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Charg</tspan><tspan x="19.503" y="0" font-family="'ArialMT'" font-size="7.1609">e</tspan><tspan x="24.088" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="26.048" y="0" font-family="'ArialMT'" font-size="7.1609">Count</tspan></text> <text transform="matrix(1 0 0 1 15.1729 542.0361)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Charg</tspan><tspan x="19.503" y="0" font-family="'ArialMT'" font-size="7.1609">e</tspan><tspan x="24.088" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="26.048" y="0" font-family="'ArialMT'" font-size="7.1609">Ticke</tspan><tspan x="43.157" y="0" font-family="'ArialMT'" font-size="7.1609">t</tspan><tspan x="45.576" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="47.537" y="0" font-family="'ArialMT'" font-size="7.1609">Average</tspan></text> <text transform="matrix(1 0 0 1 15.1553 563.5635)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Coupo</tspan><tspan x="21.102" y="0" font-family="'ArialMT'" font-size="7.1609">n</tspan><tspan x="25.385" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="27.346" y="0" font-family="'ArialMT'" font-size="7.1609">Count</tspan></text> <text transform="matrix(1 0 0 1 15.1479 574.3311)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Coupo</tspan><tspan x="21.102" y="0" font-family="'ArialMT'" font-size="7.1609">n</tspan><tspan x="25.385" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="27.346" y="0" font-family="'ArialMT'" font-size="7.1609">$</tspan></text> <text transform="matrix(1 0 0 1 15.1582 595.8594)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Ticke</tspan><tspan x="17.108" y="0" font-family="'ArialMT'" font-size="7.1609">t</tspan><tspan x="19.528" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="21.489" y="0" font-family="'ArialMT'" font-size="7.1609">Average</tspan></text> <text transform="matrix(1 0 0 1 15.1582 617.3867)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Hea</tspan><tspan x="13.136" y="0" font-family="'ArialMT'" font-size="7.1609">d</tspan><tspan x="17.57" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="19.531" y="0" font-family="'ArialMT'" font-size="7.1609">Average</tspan></text> <text transform="matrix(1 0 0 1 15.1582 628.1543)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Piece</tspan><tspan x="17.913" y="0" font-family="'ArialMT'" font-size="7.1609">s</tspan><tspan x="22.138" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="24.099" y="0" font-family="'ArialMT'" font-size="7.1609">Scrapped</tspan></text> <text transform="matrix(1 0 0 1 15.1514 639.4219)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Piece</tspan><tspan x="17.913" y="0" font-family="'ArialMT'" font-size="7.1609">s</tspan><tspan x="22.138" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="24.099" y="0" font-family="'ArialMT'" font-size="7.1609">Unacc</tspan><tspan x="44.396" y="0" font-family="'ArialMT'" font-size="7.1609">.</tspan><tspan x="46.887" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="48.848" y="0" font-family="'ArialMT'" font-size="7.1609">For</tspan></text> <text transform="matrix(1 0 0 1 15.1514 650.6895)" font-family="'ArialMT'" font-size="7.1609">Efficiency</text> <text transform="matrix(1 0 0 1 15.1514 671.2168)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="7.1609">Cas</tspan><tspan x="12.734" y="0" font-family="'ArialMT'" font-size="7.1609">h</tspan><tspan x="16.925" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="18.885" y="0" font-family="'ArialMT'" font-size="7.1609">ove</tspan><tspan x="30.431" y="0" font-family="'ArialMT'" font-size="7.1609">r</tspan><tspan x="33.202" y="0" font-family="'ArialMT'" font-size="7.1609"> </tspan><tspan x="35.163" y="0" font-family="'ArialMT'" font-size="7.1609">/(short)</tspan></text> <path stroke="#000000" d="M10,488.932"/> </g> <g id="Pieces_Unaccounted"> <g id="l_x5F_u_x5F_pieces_x5F_unaccounted"> <line id="UnaccountedFor_1_" fill="none" stroke="#000000" stroke-width="0.5" x1="10" y1="640" x2="599.5" y2="640"/> </g> </g> <g id="Total_Labor"> <g id="Double_Lines"> <line id="Btm_Line" stroke="#000000" stroke-width="0.5" x1="11" y1="490.932" x2="600.5" y2="490.932"/> <line id="Top_Line" stroke="#000000" stroke-width="0.5" x1="11" y1="488.932" x2="600.5" y2="488.932"/> </g> <line id="Line_Above" stroke="#000000" stroke-width="0.5" x1="10.5" y1="477.5" x2="600" y2="477.5"/> </g> <g id="Total_Cos"> <g id="Double_Line_3_"> <line id="Btm_Line_3_" stroke="#000000" stroke-width="0.5" x1="11" y1="444.932" x2="600.5" y2="444.932"/> <line id="Top_Line_3_" stroke="#000000" stroke-width="0.5" x1="11" y1="442.932" x2="600.5" y2="442.932"/> </g> <line id="Line_Above_6_" stroke="#000000" stroke-width="0.5" x1="10.34" y1="433.097" x2="599.84" y2="433.097"/> </g> <g id="SubTotal_Chicken"> <g id="Double_Line_2_"> <line id="Btm_Line_1_" stroke="#000000" stroke-width="0.5" x1="7" y1="261.932" x2="596.5" y2="261.932"/> <line id="Top_Line_1_" stroke="#000000" stroke-width="0.5" x1="7" y1="259.932" x2="596.5" y2="259.932"/> </g> <line id="Line_Above_1_" stroke="#000000" stroke-width="0.5" x1="7" y1="250.097" x2="596.5" y2="250.097"/> </g> <g id="total_Net"> <g id="Double_Line_1_"> <line id="Btm_Line_2_" stroke="#000000" stroke-width="0.5" x1="7" y1="130.932" x2="596.5" y2="130.932"/> <line id="Top_Line_2_" stroke="#000000" stroke-width="0.5" x1="7" y1="128.932" x2="596.5" y2="128.932"/> </g> <line id="Line_Above_3_" stroke="#000000" stroke-width="0.5" x1="7" y1="119.097" x2="596.5" y2="119.097"/> </g> <g id="Header_Underline"> <line id="Line_Above_4_" stroke="#000000" stroke-width="0.5" x1="8.34" y1="74.5" x2="597.84" y2="74.5"/> </g> <g id="Total_Controllable"> <line id="Line_Above_2_" stroke="#000000" x1="7" y1="498.066" x2="600.5" y2="498.066"/> <line id="Line_Under" stroke="#000000" x1="7" y1="509.329" x2="600.5" y2="509.329"/> </g> </svg> The above code is generated xml file, and i need to write a xslt transformation to get the fo file, for the PDF generation, how do I do it?? The doubt I have is, that I dont now how to represent the tags in xslt, and also I need to represent the line, path and text in the form of xslt. how can I do this any ideas, with really get me going... Actually I have to use a style sheet like this: <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format" > <fo:layout-master-set> <fo:simple-page-master margin-right="1.5cm" margin-left="1.5cm" margin-bottom="2cm" margin-top="1cm" page-width="21cm" page-height="29.7cm" master-name="first"> <fo:region-body margin-top="1cm"/> <fo:region-before extent="1cm"/> <fo:region-after extent="1.5cm"/> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="first"> <fo:static-content flow-name="xsl-region-before"> <fo:block line-height="14pt" font-size="10pt" text-align="end">Embedding SVG examples - Practise</fo:block> </fo:static-content> <fo:static-content flow-name="xsl-region-after"> <fo:block line-height="14pt" font-size="10pt" text-align="end">Page <fo:page-number/> </fo:block> </fo:static-content> <fo:flow flow-name="xsl-region-body"> <fo:block text-align="center" font-weight="bold" font-size="14pt" space-before.optimum="3pt" space-after.optimum="15pt">Embedding SVG</fo:block> <fo:block space-before.optimum="3pt" space-after.optimum="20pt"> <fo:instream-foreign-object> <svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="542px" height="505px"> <svg:title>A less cute tiger</svg:title> <xsl:for-each select="svg/switch/g/g/path"> <svg:g style="fill: #ffffff; stroke:#000000; stroke-width:0.25"> <svg:path> <xsl:variable name="s"> <xsl:value-of select="translate(@d,' ','')"/> </xsl:variable> <xsl:attribute name="d"><xsl:value-of select="translate($s,',',' ')"/></xsl:attribute> </svg:path> </svg:g> </xsl:for-each> <xsl:for-each select="svg/switch/g/g/g/path"> <svg:g style="fill: #ffffff; stroke:#000000; stroke-width:0.5; fill-rule=evenodd; clip-rule=evenodd; stroke-linejoin=round"> <svg:path> <xsl:variable name="s"> <xsl:value-of select="translate(@d,' ','')"/> </xsl:variable> <xsl:attribute name="d"><xsl:value-of select="translate($s,',',' ')"/></xsl:attribute> </svg:path> </svg:g> </xsl:for-each> </svg:svg> </fo:instream-foreign-object> </fo:block> <fo:block><xsl:apply-templates/></fo:block> </fo:flow> </fo:page-sequence> </fo:root>

    Read the article

  • 2 javascripts problem

    - by pradeep
    <?php global $user; $userId = $user->uid; /* start with default */ $myresult = ""; /* All Includes - start */ include_once('db.php'); include_once('valid-scripts/validateData.php'); /* All Includes - end */ /* Build All required Variables - start */ $alias = $_GET['alias']; $product = $_GET['product']; $product = strtolower(substr($product,0,-1)); $master_table = $product.'_master'; $rating_master_table = $product.'_rating_master'; $rating_table = $product.'_rating'; $numProperties = 15; /* Build All required Variables - end */ /* Add all Styles required - start */ $myresult .= '<link href="/jquery.rating.css" type="text/css" rel="stylesheet"/>'; /* Add all Styles required - end */ /* Show Hide Variables/parameters - start */ include_once('all_include_files/show_hide.php'); /* Show Hide Variables/parameters - end */ /* All Javascript - start */ //$myresult .= '<script src="/jquery.rating.js" type="text/javascript" language="javascript"></script>'; ?> <style> #tabs { //font-size: 90%; //margin: 20px 0; margin: 2px 0; } #tabs ul { float: right; background: #E3FEFA; width: 600px; //padding-top: 4px; } #tabs li { margin-left: 8px; list-style: none; } * html #tabs li { display: inline; /* ie6 double float margin bug */ } #tabs li, #tabs li a { float: left; } #tabs ul li a { text-decoration: none; //padding: 8px; color: #0073BF; font-weight: bold; } #tabs ul li.active { background: #CEE1EF url(/all_include_files/img/nav-right.gif) no-repeat right top; } #tabs ul li.active a { background: url(/all_include_files/img/nav-left.gif) no-repeat left top; color: #333333; } #tabs div { //background: #CEE1EF; clear: both; //padding: 20px; min-height: 200px; } #tabs div h3 { text-transform: uppercase; margin-bottom: 10px; letter-spacing: 1px; #tabs div p { line-height: 150%; } </style> <script src="/jquery.rating.js" type="text/javascript" language="javascript"></script> <script src="/jquery.metadata.js" type="text/javascript" language="javascript"></script> <script type='text/javascript'> function openComment(number) { alert('working'); $('#comment'+number).css('display',''); } $('.star').rating({ callback: function(value, link){ alert(value); } }); $(document).ready(function() { //$('#tabs div').hide(); //$('#tabs div:first').show(); $('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function() { $('#tabs ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#tabs div').hide(); $(currentTab).show(); return false; }); $("#clickit").click(function() { $.post("/mobile/tablechange.php",{ p1:'<?php echo $brand ?>',p2:'<?php echo $model ?>',userid:'<?php echo $userid ?>' } ,function(data){ $("#changetable").html(data); }); }); $('div.expandable p').expander({ slicePoint: 200, // default is 100 expandText: 'more &raquo;', // default is 'read more...' collapseTimer: 0, // re-collapses after 5 seconds; default is 0, so no re-collapsing userCollapseText: '[^]' // default is '[collapse expanded text]' }); }); </script> <?php /* All Javascript - end */ /* Form Processing after submit - start */ /* Form Processing after submit - end */ /* Actual Form or Page - start */ /*fetch all data needed */ /* initial query */ $result_product = query_product_table($product,$alias); /*fetch property names of product */ $product_properties = master_table($master_table); /*rating table query */ $master_rating_properties = master_rating_table($rating_master_table); /*get user ratings*/ $user_ratings = user_ratings($userId,$alias,$rating_table); $myresult .= '<div class=\'Services\'>'; //$myresult .="<form name ='form1' id='form1' method = 'POST' action='".$_SERVER['php_self'] ."'>"; if(!$result_product) { header('Location: /page-not-found'); } else { $row_product = mysql_fetch_array($result_product); $myresult .= "<h3 class='newstyle'>".$row_product['alias']." <a style='float:right;padding-right:20px;color:white;text-decoration:underline;' href='/'>Back</a> </h3>"; /* start actual product display - start*/ $myresult .= "<div class=\"product\">"; /* start table 1*/ $myresult .= '<table border=\'0\' cellspacing=\'0\' cellpadding=\'0\' style=\'width:580px; table-layout:fixed;\'>'; $myresult .= '<tr>'; $myresult .='<td valign=\'top\'>'; /* start table 2*/ $myresult .='<table width=\'100%\' border=\'0\' cellspacing=\'0\' cellpadding=\'0\'>'; $myresult .= '<tr>'; $myresult .= '<td valign=\'top\' style=\'width:164px;\'>'; /* start table 3*/ $myresult .= '<table style=\'width:164px;\' border=\'0\' cellspacing=\'0\' cellpadding=\'0\'>'; $myresult .= "<tr>"; /* start of the pic row */ $myresult .= '<td align=\'center\' class=\'various_product\'>'; if($row_product['pic'] != "") { $myresult .= '<ul id=\'mycarousel\' style=\'display:\';>'; $myresult .= '<li><a href=\'/all_image_scripts/origpicdisplay.php?product='.rawurlencode($product).'&alias='.rawurlencode($alias).'&picid=pic&p= \'rel=\'lightbox[roadtrip]\'><img src=\'/all_image_scripts/picdisplay1.php?product='.rawurlencode($product).'&alias='.rawurlencode($alias).'\'></img></a></li>'; for($p = 1; $p <= 4; $p++) { if($row_product['pic'.$p] != "") { $myresult .= '<li><a href=\'/all_image_scripts/origpicdisplay.php?product='.rawurlencode($product).'&alias='.rawurlencode($alias).'&picid=pic'.rawurlencode($p).'&p='.rawurlencode($p).'\' rel=\'lightbox[roadtrip]\'><img src=\'/all_image_scripts/thumbpicdisplay.php?product='.rawurlencode($product).'&alias='.rawurlencode($alias).'&picid=pic'.rawurlencode($p).'\'></img></a></li>'; } } $myresult .= '</ul>'; } else { $myresult .= "<img width='50' height='70' src='/images/no-image.gif'></img>"; } jcarousel_add('#mycarousel', array('horizontal' => TRUE,'scroll' => 1,'visible' => 1)); $myresult .= "</td>"; /* end display of pic td*/ $myresult .= "</tr>"; /* end display of pic tr*/ $myresult .= "</table></td>"; /* end display of pic table and earlier td - Still 1 open TR td table tr -hint*/ $myresult .= '<td style=\'width:450px;\'>'; /*table - 4*/ $myresult .= '<table width=\'100%\' border=\'0\' cellspacing=\'0\' cellpadding=\'0\' style=\'display:block;\'>'; /* Start showing property and values */ $myresult .= '<tr>'; $myresult .= '<td class=\'tick\'><img src=\'/images/ul_li_bg.gif\' width=\'12\' height=\'12\' /></td>'; $myresult .= '<td class=\'leftText\'>'.ucfirst($product).':</td>'; $myresult .= '<td class=\'rightText\'>'.$row_product['alias'] .'</td>'; $myresult .= "</tr>"; for($j = 3; $j <= 5 ; $j++){ if($product_properties['property'.$j.'_name'] != "") { if($row_product['property'.$j] != "") { $myresult .= '<tr>'; $myresult .= '<td class=\'tick\'><img src=\'/images/ul_li_bg.gif\' width=\'12\' height=\'12\' /></td>'; $myresult .= '<td class=\'leftText\'>'.$product_properties['property'.$j.'_name'].':</td>'; $myresult .= '<td class=\'rightText\'>'.$row_product['property'.$j] .'</td>'; $myresult .= '</tr>'; } /* end if*/ } /* end if*/ } /* end for*/ /* show hide block */ $myresult .= '<tbody id=\'extra_properties\' style=\'display: none;\'>'; for($j = 6; $j <= 15 ; $j++){ if($product_properties['property'.$j.'_name'] != "") { if($row_product['property'.$j] != "") { $myresult .= '<tr>'; $myresult .= '<td class=\'tick\'><img src=\'/images/ul_li_bg.gif\' width=\'12\' height=\'12\' /></td>'; $myresult .= '<td class=\'leftText\'>'.$produtc_properties['property'.$j.'_name'].':</td>'; $myresult .= '<td class=\'rightText\'>'.$row_product['property'.$j] .'</td>'; $myresult .= '</tr>'; } /* end if*/ } /* end if*/ } /* end for */ $myresult .= '</tbody>'; /* end show/hide tbody */ $myresult .= '<tr>'; $myresult .= '<td>'; $myresult .= '&nbsp;'; $myresult .= '</td>'; $myresult .= '<td>'; $myresult .= '&nbsp;'; $myresult .= '</td>'; $myresult .= '<td align=\'right\' style=\'text-align:right;text-decoration:underline;\'>'; $myresult .= '<a class=\'right_link\' href=\'javascript:showMore()\'>Show Additional Details...</a>'; $myresult .= '</td>'; $myresult .= '</tr>'; /* End showing property and values */ $showreview = 'display:'; /* review show hide */ /*$myresult .= '<tbody '.$showreview.'>'; $myresult .= '<tr>'; $myresult .= '<td colspan=\'2\'><span class=\'reviews\'>'; //check //$numreviews = getreviewcount($brand,$model,'mobile_user_reviews'); if($numreviews > 0) { $myresult .= '<a href=\'mobilereviews?alias='.rawurlencode($alias).'\'> <span>$numreviews Reviews</span></a>'; } else { $myresult .= " $numreviews Reviews"; } $myresult .= "</span></td>"; $myresult .= "</tr>"; */ $myresult .= "</tbody>"; /* review show hide - end */ /* count show hide */ $myresult .= '<tbody '.$showcount.'>'; $myresult .= '<tr>'; $myresult .= '<td colspan=\'2\'><span class=\'reviews\'>'; //check //$totalvotes = gettotalvotes($row['property1'],$row['property2'],'mobile_rating'); $myresult .= "</td>"; $myresult .= "</tr>"; $myresult .= "</tbody>"; /* count show hide - end */ $myresult .= "</table></td>"; /* end table 4 */ $myresult .= '</tr>'; /* end 1 row and remaining tr , td ,table */ $myresult .= '</table></td>'; $myresult .= '</tr>'; /* remianing only 1 table */ /* ratings - positive last section starts here */ $max= array(); for ($l = 1 ; $l < 15; $l++){ if($row_product['property'.$l.'_avg']){ $maxarray = 0; $maxarray = $row_product['property'.$l.'_avg']; $max['rating'.$l.'_name'] = $maxarray; } } if(count($max) >0 ) { include('all_include_files/min_max_properties.php'); } if(($row_product['freshness'] <= strtotime("-3 month"))) { $image_type= 'old'; } else if(($row_product['freshness'] <= strtotime("-2 month"))) { $image_type= 'bitold'; } else if(($row_product['freshness'] <= strtotime("-1 month")) || ($row_product['freshness'] > strtotime("-1 month"))) { $image_type= 'new'; } $img_name = $image_type; $myresult .= "<tr>"; $myresult .= "<td>"; $myresult .= "<table width='100%' border='0'>"; $myresult .= "<tr>"; $myresult .= "<td width='170' class=\"ratingz\"><span><u>Overall rating</u></span></td>"; $myresult .= "<td width='150' class=\"ratingz\"><span><u>Positive</u></span></td>"; $myresult .= "<td width='150' class=\"ratingz\"><span><u>Negative</u></span></td>"; if($img_name == 'new'){ $images = "<img src='/sites/default/files/battery-discharging-100.png' width='40' height='40'></img>"; } else if($img_name == 'bitold'){ $images = "<img src='/sites/default/files/battery-discharging-80.png' width='40' height='40'></img>"; } else if($img_name == 'old'){ $images = "<img src='/sites/default/files/battery-discharging-0.png' width='40' height='40'></img>"; } else { $images = ""; } $myresult .= "<td rowspan='2'><p ".$showbattery.">". $images ."</p></td>"; $myresult .= "</tr>"; $myresult .= "<tr>"; $myresult .= "<td>"; $i++; for($k = 0.5; $k <= 10.0; $k+=0.5) { $overall = roundOff($row_product['overall_rating']); if($overall == $k) { $chk ="checked"; } else { $chk = ""; } $myresult .= '<input class=\'star {split:2}\' type=\'radio\' value=\''. $k .'\' '.$chk.' title=\''. $k.' out of 10 \' disabled />'; } $myresult .= '</td>'; $myresult .= '<td ><span>'.$positive.'</span></td>'; $myresult .= '<td ><span>'.$negative.'</span></td>'; $myresult .= '</tr>'; $myresult .= '</table></td>'; $myresult .= '</tr>'; /* ratings - positive last section ends here */ $myresult .= '<tr>'; if($row_product['description'] != ""){ if(words_count($row_product['description']) > 8){ $myresult .= '<td><p><span class=\'description\'><strong><u>Description</u>:</strong></span>&nbsp;&nbsp; <div class=\'expandable\'><p>'.$row_product['description'].'</div></p></p></td>'; } else { $myresult .= '<td><p><span class=\'description\'><strong><u>Description</u>:</strong></span>&nbsp;&nbsp;'. $row_product['description'] .'</p></td>'; } } $myresult .= '</tr>'; $myresult .= '</table>'; /* end 1st table */ $myresult .= '</div>'; /* start actual product display - end*/ /*start the form to take ratings */ $myresult .= '<div id=\'tabs\'>'; $myresult .= '<ul>'; $myresult .= '<li><a href=\'#tab-1\'>Ratings</a></li>'; $myresult .= '<li><a href=\'#tab-2\'>Click here to rate</a></li>'; $myresult .= '</ul>'; $myresult .= '<div id=\'tab-1\'>'; /* actual rating table - start - jsut display ratings */ $myresult .= '<table id=\'rounded-corner\'>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th width=\'30%\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Ratings</span></th>'; $myresult .= '<th width=\'70%\' colspan=\'2\'class=\'rounded-q4\' scope=\'col\'><a href=\'#rounded-corner\' id=\'clickit\' style=\'color:white;text-decoration:underline;\' $disabled ></a></th> '; /*$myresult .= '<th width=\'70%\' colspan=\'2\'class=\'rounded-q4\' scope=\'col\'><a href=\'#rounded-corner\' id=\'clickit\' style=\'color:white;text-decoration:underline;\' $disabled >Click here to rate</a></th> ';*/ $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ /* tbody - start */ $myresult .= '<tbody>'; /*start printing the table wth feature and ratings */ for ($i = 1 ; $i < $numProperties; $i++){ if($master_rating_properties['rating'.$i.'_name']){ $myresult .= '<tr>'; $myresult .= '<td width=\'22%\'>'; $indfeature = 0; $indfeature = $row_product['property'.$i.'_avg']; $myresult .= $master_rating_properties['rating'.$i.'_name'].' ( '.$indfeature .')'; $myresult .= '</td>'; $myresult .= '<td colspan=\'0\' width=\'38%\' >'; $tocheck = $indfeature; for($k = 0.5; $k <= 10.0; $k+=0.5){ $tocheck = roundOff($tocheck); if(($tocheck) == $k) { $chk = "checked"; } else { $chk = ""; } $myresult .= '<input class=\'star {split:2}\' type=\'radio\' name=\'drating'.$i.'\' id=\'drating'.$i.''.$k.'\' value=\''. $k .'\' '.$chk.' title=\''. $k.' out of 10 \' disabled \'/>'; } /* for k loop end */ $myresult .= '</tr>'; } /* end if loop */ } /* end i for loop */ $myresult .= '</tbody>'; /* end tbody */ /* footer round corner start */ $myresult .= '<tfoot>'; $myresult .= '<tr>'; $myresult .= '<td class=\'rounded-foot-left\'>&nbsp;</td>'; $myresult .= '<td class=\'rounded-foot-right\' colspan=\'4\' >'; $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '</tfoot>'; $myresult .= '</table>'; /*round corner table end */ $myresult .= '</div>'; /*end 1st tab */ /*start 2nd tab */ $myresult .= '<div id=\'tab-2\'>'; $myresult .= '<form name =\'form1\' id=\'form1\' method = \'POST\' action=\''.$_SERVER['php_self'] .'\'>'; /* actual rating table - start - actual rate/update */ $myresult .= '<table id=\'rounded-corner\'>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th width=\'30%\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Ratings</span></th>'; $myresult .= '<th width=\'70%\' colspan=\'2\'class=\'rounded-q4\' scope=\'col\'></th>'; $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ /* tbody - start */ $myresult .= '<tbody>'; unset($i); /*start printing the table wth feature and ratings */ for ($i = 1 ; $i < $numProperties; $i++){ if($master_rating_properties['rating'.$i.'_name']){ $myresult .= '<tr>'; /*fetch ratings and comments - 1st make it to null */ $indfeature = 0; $comment = ''; $indfeature = $user_ratings['rating'.$i]; if($indfeature == NULL){ $indfeature = 0; } $comment = $user_ratings['rating'.$i.'_comment']; $myresult .= '<td width=\'22%\'>'; $myresult .= $master_rating_properties['rating'.$i.'_name'].' ( '.$indfeature.' )'; $myresult .= '</td>'; $myresult .= '<td colspan=\'0\' width=\'38%\' >'; if(($userId != '0') && (is_array($user_ratings))) { $tocheck = $indfeature; } else { $tocheck = '0'; } for($k = 0.5; $k <= 10.0; $k+=0.5){ $tocheck = roundOff($tocheck); if(($tocheck) == $k) { $chk = "checked"; } else { $chk = ""; } $myresult .= '<input class=\'star {split:2}\' type=\'radio\' name=\'rating'.$i.'\' id=\'rating'.$i.''.$k.'\' value=\''. $k .'\' '.$chk.' title=\''. $k.' out of 10 \' '.$disabled.' \' />'; } /* for k loop end */ $myresult .= '</td>'; $myresult .= '<td width=\'40%\'>'; $myresult .= '<input title=\'Reason for this Rating.. \'type=\'text\' size=\'25\' name=\'comment'.$i.'\' id=\'comment'.$i.'\' style=\'display:;\' maxlength=\'255\' value="'.$comment.'">'; $myresult .= '</td>'; $myresult .= '</tr>'; } /* end if loop */ } /* end i for loop */ $myresult .= '</tbody>'; /* end tbody */ /* footer round corner start */ $myresult .= '<tfoot>'; $myresult .= '<tr>'; $myresult .= '<td class=\'rounded-foot-left\'>&nbsp;</td>'; $myresult .= '<td class=\'rounded-foot-right\' colspan=\'4\' >'; if(($userId != '0') && (is_array($user_ratings))) { $myresult .= '<input type=\'button\' id=\'update_form\' value=\'Update\'>'; } else { $myresult .= '<input type=\'button\' id=\'save_form\' value=\'Save\'>'; } $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '</tfoot>'; $myresult .= '</table>'; /*round corner table end */ $myresult .= '</form>'; /*end the form to take ratings */ $myresult .= '</div>'; /*end 2nd tab */ $myresult .= '</div>'; /*end tabs div */ /* actual rating table - end */ /* 1st form ends here id- ratings_form */ } /* end of if loop result_product loop */ /* start table 3 - overall comment*/ $myresult .= '<table border=\'0\' cellspacing=\'0\' cellpadding=\'0\' style=\'width:580px; table-layout:fixed;\' id=\'rounded-corner\'>'; $myresult .= '<tbody>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th width=\'100%\' colspan=\'2\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Overall Comments</span></th>'; $myresult .= '<th colspan=\'3\' class=\'rounded-q4\' scope=\'col\'></th>'; $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ $myresult .= '<tr>'; $myresult .= '<td colspan=\'4\'>'; $myresult .= '<textarea title=\'OverAll Comment\' name=\'overall_comment\' cols=\'65\'></textarea>'; $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '<tbody>'; $myresult .= '</table>'; /* end table 3 - overall comment*/ /* start table 4 - summary*/ $myresult .= '<table border=\'0\' cellspacing=\'0\' cellpadding=\'0\' style=\'width:580px; table-layout:fixed;\' id=\'rounded-corner\'>'; $myresult .= '<tbody>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th colspan=\'2\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Your Opinion</span></th>'; $myresult .= '<th colspan=\'2\'class=\'rounded-q4\' scope=\'col\'></th>'; $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ $myresult .= '<tr>'; $myresult .= '<td colspan=\'2\'>'; $myresult .= 'Do you Agree with the Ratings'; $myresult .= '</td>'; $myresult .= '<td colspan=\'2\'>'; $myresult .= 'Was the Information Helpful'; $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '<tr>'; $myresult .= '<form name=\'form2\' id=\'form2\' method=\'post\'>'; $myresult .= '<td>'; $myresult .= '<input type=\'button\' class=\'agree\' value=\'agree\'>'; $myresult .= '</td>'; $myresult .= '<td>'; $myresult .= '<input type=\'button\' class=\'disagree\' value=\'disagree\'>'; $myresult .= '</td>'; $myresult .= '<input type=\'hidden\' name=\'agree_disagree\' id=\'agree_disagree\'>'; $myresult .= '</form>'; $myresult .= '<form name=\'form3\' id=\'form3\' method=\'post\'>'; $myresult .= '<td>'; $myresult .= '<input type=\'button\' class=\'helpful\' value=\'Helpful\'>'; $myresult .= '</td>'; $myresult .= '<td>'; $myresult .= '<input type=\'button\' class=\'nothelpful\' value=\'Not Helpful\'>'; $myresult .= '</td>'; $myresult .= '<input type=\'hidden\' name=\'help_nohelp\' id=\'help_nohelp\'>'; $myresult .= '</form>'; $myresult .= '</tr>'; $myresult .= '</tbody>'; $myresult .= '</table>'; /*end table 4 summary table */ $myresult .= '</div>'; /* Actual Form or Page - end */ echo $myresult; //echo 'Product: '.$product; //echo '<br/>Alias: '.$alias; ?> hey this code is working fine for me . as required. the star class code is taken from http://www.fyneworks.com/jquery/star-rating/ ... it works well.. but when i insert code to add tabs for content ,the starts is not visible at all. but when i check source code. the stars are actually there . dono whats the prob. any suggestions on this this is the tabs code $('#tabs div').hide(); ('#tabs div:first').show(); $('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function() { $('#tabs ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#tabs div').hide(); $(currentTab).show(); return false; });

    Read the article

  • Metro: Introduction to CSS 3 Grid Layout

    - by Stephen.Walther
    The purpose of this blog post is to provide you with a quick introduction to the new W3C CSS 3 Grid Layout standard. You can use CSS Grid Layout in Metro style applications written with JavaScript to lay out the content of an HTML page. CSS Grid Layout provides you with all of the benefits of using HTML tables for layout without requiring you to actually use any HTML table elements. Doing Page Layouts without Tables Back in the 1990’s, if you wanted to create a fancy website, then you would use HTML tables for layout. For example, if you wanted to create a standard three-column page layout then you would create an HTML table with three columns like this: <table height="100%"> <tr> <td valign="top" width="300px" bgcolor="red"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </td> <td valign="top" bgcolor="green"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </td> <td valign="top" width="300px" bgcolor="blue"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </td> </tr> </table> When the table above gets rendered out to a browser, you end up with the following three-column layout: The width of the left and right columns is fixed – the width of the middle column expands or contracts depending on the width of the browser. Sometime around the year 2005, everyone decided that using tables for layout was a bad idea. Instead of using tables for layout — it was collectively decided by the spirit of the Web — you should use Cascading Style Sheets instead. Why is using HTML tables for layout bad? Using tables for layout breaks the semantics of the TABLE element. A TABLE element should be used only for displaying tabular information such as train schedules or moon phases. Using tables for layout is bad for accessibility (The Web Content Accessibility Guidelines 1.0 is explicit about this) and using tables for layout is bad for separating content from layout (see http://CSSZenGarden.com). Post 2005, anyone who used HTML tables for layout were encouraged to hold their heads down in shame. That’s all well and good, but the problem with using CSS for layout is that it can be more difficult to work with CSS than HTML tables. For example, to achieve a standard three-column layout, you either need to use absolute positioning or floats. Here’s a three-column layout with floats: <style type="text/css"> #container { min-width: 800px; } #leftColumn { float: left; width: 300px; height: 100%; background-color:red; } #middleColumn { background-color:green; height: 100%; } #rightColumn { float: right; width: 300px; height: 100%; background-color:blue; } </style> <div id="container"> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> </div> The page above contains four DIV elements: a container DIV which contains a leftColumn, middleColumn, and rightColumn DIV. The leftColumn DIV element is floated to the left and the rightColumn DIV element is floated to the right. Notice that the rightColumn DIV appears in the page before the middleColumn DIV – this unintuitive ordering is necessary to get the floats to work correctly (see http://stackoverflow.com/questions/533607/css-three-column-layout-problem). The page above (almost) works with the most recent versions of most browsers. For example, you get the correct three-column layout in both Firefox and Chrome: And the layout mostly works with Internet Explorer 9 except for the fact that for some strange reason the min-width doesn’t work so when you shrink the width of your browser, you can get the following unwanted layout: Notice how the middle column (the green column) bleeds to the left and right. People have solved these issues with more complicated CSS. For example, see: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm But, at this point, no one could argue that using CSS is easier or more intuitive than tables. It takes work to get a layout with CSS and we know that we could achieve the same layout more easily using HTML tables. Using CSS Grid Layout CSS Grid Layout is a new W3C standard which provides you with all of the benefits of using HTML tables for layout without the disadvantage of using an HTML TABLE element. In other words, CSS Grid Layout enables you to perform table layouts using pure Cascading Style Sheets. The CSS Grid Layout standard is still in a “Working Draft” state (it is not finalized) and it is located here: http://www.w3.org/TR/css3-grid-layout/ The CSS Grid Layout standard is only supported by Internet Explorer 10 and there are no signs that any browser other than Internet Explorer will support this standard in the near future. This means that it is only practical to take advantage of CSS Grid Layout when building Metro style applications with JavaScript. Here’s how you can create a standard three-column layout using a CSS Grid Layout: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100%; } #leftColumn { -ms-grid-column: 1; background-color:red; } #middleColumn { -ms-grid-column: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; background-color:blue; } </style> </head> <body> <div id="container"> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> </div> </body> </html> When the page above is rendered in Internet Explorer 10, you get a standard three-column layout: The page above contains four DIV elements: a container DIV which contains a leftColumn DIV, middleColumn DIV, and rightColumn DIV. The container DIV is set to Grid display mode with the following CSS rule: #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100%; } The display property is set to the value “-ms-grid”. This property causes the container DIV to lay out its child elements in a grid. (Notice that you use “-ms-grid” instead of “grid”. The “-ms-“ prefix is used because the CSS Grid Layout standard is still preliminary. This implementation only works with IE10 and it might change before the final release.) The grid columns and rows are defined with the “-ms-grid-columns” and “-ms-grid-rows” properties. The style rule above creates a grid with three columns and one row. The left and right columns are fixed sized at 300 pixels. The middle column sizes automatically depending on the remaining space available. The leftColumn, middleColumn, and rightColumn DIVs are positioned within the container grid element with the following CSS rules: #leftColumn { -ms-grid-column: 1; background-color:red; } #middleColumn { -ms-grid-column: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; background-color:blue; } The “-ms-grid-column” property is used to specify the column associated with the element selected by the style sheet selector. The leftColumn DIV is positioned in the first grid column, the middleColumn DIV is positioned in the second grid column, and the rightColumn DIV is positioned in the third grid column. I find using CSS Grid Layout to be just as intuitive as using an HTML table for layout. You define your columns and rows and then you position different elements within these columns and rows. Very straightforward. Creating Multiple Columns and Rows In the previous section, we created a super simple three-column layout. This layout contained only a single row. In this section, let’s create a slightly more complicated layout which contains more than one row: The following page contains a header row, a content row, and a footer row. The content row contains three columns: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100px 1fr 100px; } #header { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; background-color: yellow; } #leftColumn { -ms-grid-column: 1; -ms-grid-row: 2; background-color:red; } #middleColumn { -ms-grid-column: 2; -ms-grid-row: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; -ms-grid-row: 2; background-color:blue; } #footer { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 3; background-color: orange; } </style> </head> <body> <div id="container"> <div id="header"> Header, Header, Header </div> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> <div id="footer"> Footer, Footer, Footer </div> </div> </body> </html> In the page above, the grid layout is created with the following rule which creates a grid with three rows and three columns: #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100px 1fr 100px; } The header is created with the following rule: #header { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; background-color: yellow; } The header is positioned in column 1 and row 1. Furthermore, notice that the “-ms-grid-column-span” property is used to span the header across three columns. CSS Grid Layout and Fractional Units When you use CSS Grid Layout, you can take advantage of fractional units. Fractional units provide you with an easy way of dividing up remaining space in a page. Imagine, for example, that you want to create a three-column page layout. You want the size of the first column to be fixed at 200 pixels and you want to divide the remaining space among the remaining three columns. The width of the second column is equal to the combined width of the third and fourth columns. The following CSS rule creates four columns with the desired widths: #container { display: -ms-grid; -ms-grid-columns: 200px 2fr 1fr 1fr; -ms-grid-rows: 1fr; } The fr unit represents a fraction. The grid above contains four columns. The second column is two times the size (2fr) of the third (1fr) and fourth (1fr) columns. When you use the fractional unit, the remaining space is divided up using fractional amounts. Notice that the single row is set to a height of 1fr. The single grid row gobbles up the entire vertical space. Here’s the entire HTML page: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 200px 2fr 1fr 1fr; -ms-grid-rows: 1fr; } #firstColumn { -ms-grid-column: 1; background-color:red; } #secondColumn { -ms-grid-column: 2; background-color:green; } #thirdColumn { -ms-grid-column: 3; background-color:blue; } #fourthColumn { -ms-grid-column: 4; background-color:orange; } </style> </head> <body> <div id="container"> <div id="firstColumn"> First Column, First Column, First Column </div> <div id="secondColumn"> Second Column, Second Column, Second Column </div> <div id="thirdColumn"> Third Column, Third Column, Third Column </div> <div id="fourthColumn"> Fourth Column, Fourth Column, Fourth Column </div> </div> </body> </html>   Summary There is more in the CSS 3 Grid Layout standard than discussed in this blog post. My goal was to describe the basics. If you want to learn more than you can read through the entire standard at http://www.w3.org/TR/css3-grid-layout/ In this blog post, I described some of the difficulties that you might encounter when attempting to replace HTML tables with Cascading Style Sheets when laying out a web page. I explained how you can take advantage of the CSS 3 Grid Layout standard to avoid these problems when building Metro style applications using JavaScript. CSS 3 Grid Layout provides you with all of the benefits of using HTML tables for laying out a page without requiring you to use HTML table elements.

    Read the article

  • Enterprise Process Maps: A Process Picture worth a Million Words

    - by raul.goycoolea
    p { margin-bottom: 0.08in; }h1 { margin-top: 0.33in; margin-bottom: 0in; color: rgb(54, 95, 145); page-break-inside: avoid; }h1.western { font-family: "Cambria",serif; font-size: 14pt; }h1.cjk { font-family: "DejaVu Sans"; font-size: 14pt; }h1.ctl { font-size: 14pt; } Getting Started with Business Transformations A well-known proverb states that "A picture is worth a thousand words." In relation to Business Process Management (BPM), a credible analyst might have a few questions. What if the picture was taken from some particular angle, like directly overhead? What if it was taken from only an inch away or a mile away? What if the photographer did not focus the camera correctly? Does the value of the picture depend on who is looking at it? Enterprise Process Maps are analogous in this sense of relative value. Every BPM project (holistic BPM kick-off, enterprise system implementation, Service-oriented Architecture, business process transformation, corporate performance management, etc.) should be begin with a clear understanding of the business environment, from the biggest picture representations down to the lowest level required or desired for the particular project type, scope and objectives. The Enterprise Process Map serves as an entry point for the process architecture and is defined: the single highest level of process mapping for an organization. It is constructed and evaluated during the Strategy Phase of the Business Process Management Lifecycle. (see Figure 1) Fig. 1: Business Process Management Lifecycle Many organizations view such maps as visual abstractions, constructed for the single purpose of process categorization. This, in turn, results in a lesser focus on the inherent intricacies of the Enterprise Process view, which are explored in the course of this paper. With the main focus of a large scale process documentation effort usually underlying an ERP or other system implementation, it is common for the work to be driven by the desire to "get to the details," and to the type of modeling that will derive near-term tangible results. For instance, a project in American Pharmaceutical Company X is driven by the Director of IT. With 120+ systems in place, and a lack of standardized processes across the United States, he and the VP of IT have decided to embark on a long-term ERP implementation. At the forethought of both are questions, such as: How does my application architecture map to the business? What are each application's functionalities, and where do the business processes utilize them? Where can we retire legacy systems? Well-developed BPM methodologies prescribe numerous model types to capture such information and allow for thorough analysis in these areas. Process to application maps, Event Driven Process Chains, etc. provide this level of detail and facilitate the completion of such project-specific questions. These models and such analysis are appropriately carried out at a relatively low level of process detail. (see figure 2) Fig. 2: The Level Concept, Generic Process HierarchySome of the questions remaining are ones of documentation longevity, the continuation of BPM practice in the organization, process governance and ownership, process transparency and clarity in business process objectives and strategy. The Level Concept in Brief Figure 2 shows a generic, four-level process hierarchy depicting the breakdown of a "Process Area" into progressively more detailed process classifications. The number of levels and the names of these levels are flexible, and can be fit to the standards of the organization's chosen terminology or any other chosen reference model that makes logical sense for both short and long term process description. It is at Level 1 (in this case the Process Area level), that the Enterprise Process Map is created. This map and its contained objects become the foundation for a top-down approach to subsequent mapping, object relationship development, and analysis of the organization's processes and its supporting infrastructure. Additionally, this picture serves as a communication device, at an executive level, describing the design of the business in its service to a customer. It seems, then, imperative that the process development effort, and this map, start off on the right foot. Figuring out just what that right foot is, however, is critical and trend-setting in an evolving organization. Key Considerations Enterprise Process Maps are usually not as living and breathing as other process maps. Just as it would be an extremely difficult task to change the foundation of the Sears Tower or a city plan for the entire city of Chicago, the Enterprise Process view of an organization usually remains unchanged once developed (unless, of course, an organization is at a stage where it is capable of true, high-level process innovation). Regardless, the Enterprise Process map is a key first step, and one that must be taken in a precise way. What makes this groundwork solid depends on not only the materials used to construct it (process areas), but also the layout plan and knowledge base of what will be built (the entire process architecture). It seems reasonable that care and consideration are required to create this critical high level map... but what are the important factors? Does the process modeler need to worry about how many process areas there are? About who is looking at it? Should he only use the color pink because it's his boss' favorite color? Interestingly, and perhaps surprisingly, these are all valid considerations that may just require a bit of structure. Below are Three Key Factors to consider when building an Enterprise Process Map: Company Strategic Focus Process Categorization: Customer is Core End-to-end versus Functional Processes Company Strategic Focus As mentioned above, the Enterprise Process Map is created during the Strategy Phase of the Business Process Management Lifecycle. From Oracle Business Process Management methodology for business transformation, it is apparent that business processes exist for the purpose of achieving the strategic objectives of an organization. In a prescribed, top-down approach to process development, it must be ensured that each process fulfills its objectives, and in an aggregated manner, drives fulfillment of the strategic objectives of the company, whether for particular business segments or in a broader sense. This is a crucial point, as the strategic messages of the company must therefore resound in its process maps, in particular one that spans the processes of the complete business: the Enterprise Process Map. One simple example from Company X is shown below (see figure 3). Fig. 3: Company X Enterprise Process Map In reviewing Company X's Enterprise Process Map, one can immediately begin to understand the general strategic mindset of the organization. It shows that Company X is focused on its customers, defining 10 of its process areas belonging to customer-focused categories. Additionally, the organization views these end-customer-oriented process areas as part of customer-fulfilling value chains, while support process areas do not provide as much contiguous value. However, by including both support and strategic process categorizations, it becomes apparent that all processes are considered vital to the success of the customer-oriented focus processes. Below is an example from Company Y (see figure 4). Fig. 4: Company Y Enterprise Process Map Company Y, although also a customer-oriented company, sends a differently focused message with its depiction of the Enterprise Process Map. Along the top of the map is the company's product tree, overarching the process areas, which when executed deliver the products themselves. This indicates one strategic objective of excellence in product quality. Additionally, the view represents a less linear value chain, with strong overlaps of the various process areas. Marketing and quality management are seen as a key support processes, as they span the process lifecycle. Often, companies may incorporate graphics, logos and symbols representing customers and suppliers, and other objects to truly send the strategic message to the business. Other times, Enterprise Process Maps may show high level of responsibility to organizational units, or the application types that support the process areas. It is possible that hundreds of formats and focuses can be applied to an Enterprise Process Map. What is of vital importance, however, is which formats and focuses are chosen to truly represent the direction of the company, and serve as a driver for focusing the business on the strategic objectives set forth in that right. Process Categorization: Customer is Core In the previous two examples, processes were grouped using differing categories and techniques. Company X showed one support and three customer process categorizations using encompassing chevron objects; Customer Y achieved a less distinct categorization using a gradual color scheme. Either way, and in general, modeling of the process areas becomes even more valuable and easily understood within the context of business categorization, be it strategic or otherwise. But how one categorizes their processes is typically more complex than simply choosing object shapes and colors. Previously, it was stated that the ideal is a prescribed top-down approach to developing processes, to make certain linkages all the way back up to corporate strategy. But what about external influences? What forces push and pull corporate strategy? Industry maturity, product lifecycle, market profitability, competition, etc. can all drive the critical success factors of a particular business segment, or the company as a whole, in addition to previous corporate strategy. This may seem to be turning into a discussion of theory, but that is far from the case. In fact, in years of recent study and evolution of the way businesses operate, cross-industry and across the globe, one invariable has surfaced with such strength to make it undeniable in the game plan of any strategy fit for survival. That constant is the customer. Many of a company's critical success factors, in any business segment, relate to the customer: customer retention, satisfaction, loyalty, etc. Businesses serve customers, and so do a business's processes, mapped or unmapped. The most effective way to categorize processes is in a manner that visualizes convergence to what is core for a company. It is the value chain, beginning with the customer in mind, and ending with the fulfillment of that customer, that becomes the core or the centerpiece of the Enterprise Process Map. (See figure 5) Fig. 5: Company Z Enterprise Process Map Company Z has what may be viewed as several different perspectives or "cuts" baked into their Enterprise Process Map. It has divided its processes into three main categories (top, middle, and bottom) of Management Processes, the Core Value Chain and Supporting Processes. The Core category begins with Corporate Marketing (which contains the activities of beginning to engage customers) and ends with Customer Service Management. Within the value chain, this company has divided into the focus areas of their two primary business lines, Foods and Beverages. Does this mean that areas, such as Strategy, Information Management or Project Management are not as important as those in the Core category? No! In some cases, though, depending on the organization's understanding of high-level BPM concepts, use of category names, such as "Core," "Management" or "Support," can be a touchy subject. What is important to understand, is that no matter the nomenclature chosen, the Core processes are those that drive directly to customer value, Support processes are those which make the Core processes possible to execute, and Management Processes are those which steer and influence the Core. Some common terms for these three basic categorizations are Core, Customer Fulfillment, Customer Relationship Management, Governing, Controlling, Enabling, Support, etc. End-to-end versus Functional Processes Every high and low level of process: function, task, activity, process/work step (whatever an organization calls it), should add value to the flow of business in an organization. Suppose that within the process "Deliver package," there is a documented task titled "Stop for ice cream." It doesn't take a process expert to deduce the room for improvement. Though stopping for ice cream may create gain for the one person performing it, it likely benefits neither the organization nor, more importantly, the customer. In most cases, "Stop for ice cream" wouldn't make it past the first pass of To-Be process development. What would make the cut, however, would be a flow of tasks that, each having their own value add, build up to greater and greater levels of process objective. In this case, those tasks would combine to achieve a status of "package delivered." Figure 3 shows a simple example: Just as the package can only be delivered (outcome of the process) without first being retrieved, loaded, and the travel destination reached (outcomes of the process steps), some higher level of process "Play Practical Joke" (e.g., main process or process area) cannot be completed until a package is delivered. It seems that isolated or functionally separated processes, such as "Deliver Package" (shown in Figure 6), are necessary, but are always part of a bigger value chain. Each of these individual processes must be analyzed within the context of that value chain in order to ensure successful end-to-end process performance. For example, this company's "Create Joke Package" process could be operating flawlessly and efficiently, but if a joke is never developed, it cannot be created, so the end-to-end process breaks. Fig. 6: End to End Process Construction That being recognized, it is clear that processes must be viewed as end-to-end, customer-to-customer, and in the context of company strategy. But as can also be seen from the previous example, these vital end-to-end processes cannot be built without the functionally oriented building blocks. Without one, the other cannot be had, or at least not in a complete and organized fashion. As it turns out, but not discussed in depth here, the process modeling effort, BPM organizational development, and comprehensive coverage cannot be fully realized without a semi-functional, process-oriented approach. Then, an Enterprise Process Map should be concerned with both views, the building blocks, and access points to the business-critical end-to-end processes, which they construct. Without the functional building blocks, all streams of work needed for any business transformation would be lost mess of process disorganization. End-to-end views are essential for utilization in optimization in context, understanding customer impacts, base-lining all project phases and aligning objectives. Including both views on an Enterprise Process Map allows management to understand the functional orientation of the company's processes, while still providing access to end-to-end processes, which are most valuable to them. (See figures 7 and 8). Fig. 7: Simplified Enterprise Process Map with end-to-end Access Point The above examples show two unique ways to achieve a successful Enterprise Process Map. The first example is a simple map that shows a high level set of process areas and a separate section with the end-to-end processes of concern for the organization. This particular map is filtered to show just one vital end-to-end process for a project-specific focus. Fig. 8: Detailed Enterprise Process Map showing connected Functional Processes The second example shows a more complex arrangement and categorization of functional processes (the names of each process area has been removed). The end-to-end perspective is achieved at this level through the connections (interfaces at lower levels) between these functional process areas. An important point to note is that the organization of these two views of the Enterprise Process Map is dependent, in large part, on the orientation of its audience, and the complexity of the landscape at the highest level. If both are not apparent, the Enterprise Process Map is missing an opportunity to serve as a holistic, high-level view. Conclusion In the world of BPM, and specifically regarding Enterprise Process Maps, a picture can be worth as many words as the thought and effort that is put into it. Enterprise Process Maps alone cannot change an organization, but they serve more purposes than initially meet the eye, and therefore must be designed in a way that enables a BPM mindset, business process understanding and business transformation efforts. Every Enterprise Process Map will and should be different when looking across organizations. Its design will be driven by company strategy, a level of customer focus, and functional versus end-to-end orientations. This high-level description of the considerations of the Enterprise Process Maps is not a prescriptive "how to" guide. However, a company attempting to create one may not have the practical BPM experience to truly explore its options or impacts to the coming work of business process transformation. The biggest takeaway is that process modeling, at all levels, is a science and an art, and art is open to interpretation. It is critical that the modeler of the highest level of process mapping be a cognoscente of the message he is delivering and the factors at hand. Without sufficient focus on the design of the Enterprise Process Map, an entire BPM effort may suffer. For additional information please check: Oracle Business Process Management.

    Read the article

  • Metro: Introduction to CSS 3 Grid Layout

    - by Stephen.Walther
    The purpose of this blog post is to provide you with a quick introduction to the new W3C CSS 3 Grid Layout standard. You can use CSS Grid Layout in Metro style applications written with JavaScript to lay out the content of an HTML page. CSS Grid Layout provides you with all of the benefits of using HTML tables for layout without requiring you to actually use any HTML table elements. Doing Page Layouts without Tables Back in the 1990’s, if you wanted to create a fancy website, then you would use HTML tables for layout. For example, if you wanted to create a standard three-column page layout then you would create an HTML table with three columns like this: <table height="100%"> <tr> <td valign="top" width="300px" bgcolor="red"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </td> <td valign="top" bgcolor="green"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </td> <td valign="top" width="300px" bgcolor="blue"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </td> </tr> </table> When the table above gets rendered out to a browser, you end up with the following three-column layout: The width of the left and right columns is fixed – the width of the middle column expands or contracts depending on the width of the browser. Sometime around the year 2005, everyone decided that using tables for layout was a bad idea. Instead of using tables for layout — it was collectively decided by the spirit of the Web — you should use Cascading Style Sheets instead. Why is using HTML tables for layout bad? Using tables for layout breaks the semantics of the TABLE element. A TABLE element should be used only for displaying tabular information such as train schedules or moon phases. Using tables for layout is bad for accessibility (The Web Content Accessibility Guidelines 1.0 is explicit about this) and using tables for layout is bad for separating content from layout (see http://CSSZenGarden.com). Post 2005, anyone who used HTML tables for layout were encouraged to hold their heads down in shame. That’s all well and good, but the problem with using CSS for layout is that it can be more difficult to work with CSS than HTML tables. For example, to achieve a standard three-column layout, you either need to use absolute positioning or floats. Here’s a three-column layout with floats: <style type="text/css"> #container { min-width: 800px; } #leftColumn { float: left; width: 300px; height: 100%; background-color:red; } #middleColumn { background-color:green; height: 100%; } #rightColumn { float: right; width: 300px; height: 100%; background-color:blue; } </style> <div id="container"> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> </div> The page above contains four DIV elements: a container DIV which contains a leftColumn, middleColumn, and rightColumn DIV. The leftColumn DIV element is floated to the left and the rightColumn DIV element is floated to the right. Notice that the rightColumn DIV appears in the page before the middleColumn DIV – this unintuitive ordering is necessary to get the floats to work correctly (see http://stackoverflow.com/questions/533607/css-three-column-layout-problem). The page above (almost) works with the most recent versions of most browsers. For example, you get the correct three-column layout in both Firefox and Chrome: And the layout mostly works with Internet Explorer 9 except for the fact that for some strange reason the min-width doesn’t work so when you shrink the width of your browser, you can get the following unwanted layout: Notice how the middle column (the green column) bleeds to the left and right. People have solved these issues with more complicated CSS. For example, see: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm But, at this point, no one could argue that using CSS is easier or more intuitive than tables. It takes work to get a layout with CSS and we know that we could achieve the same layout more easily using HTML tables. Using CSS Grid Layout CSS Grid Layout is a new W3C standard which provides you with all of the benefits of using HTML tables for layout without the disadvantage of using an HTML TABLE element. In other words, CSS Grid Layout enables you to perform table layouts using pure Cascading Style Sheets. The CSS Grid Layout standard is still in a “Working Draft” state (it is not finalized) and it is located here: http://www.w3.org/TR/css3-grid-layout/ The CSS Grid Layout standard is only supported by Internet Explorer 10 and there are no signs that any browser other than Internet Explorer will support this standard in the near future. This means that it is only practical to take advantage of CSS Grid Layout when building Metro style applications with JavaScript. Here’s how you can create a standard three-column layout using a CSS Grid Layout: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100%; } #leftColumn { -ms-grid-column: 1; background-color:red; } #middleColumn { -ms-grid-column: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; background-color:blue; } </style> </head> <body> <div id="container"> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> </div> </body> </html> When the page above is rendered in Internet Explorer 10, you get a standard three-column layout: The page above contains four DIV elements: a container DIV which contains a leftColumn DIV, middleColumn DIV, and rightColumn DIV. The container DIV is set to Grid display mode with the following CSS rule: #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100%; } The display property is set to the value “-ms-grid”. This property causes the container DIV to lay out its child elements in a grid. (Notice that you use “-ms-grid” instead of “grid”. The “-ms-“ prefix is used because the CSS Grid Layout standard is still preliminary. This implementation only works with IE10 and it might change before the final release.) The grid columns and rows are defined with the “-ms-grid-columns” and “-ms-grid-rows” properties. The style rule above creates a grid with three columns and one row. The left and right columns are fixed sized at 300 pixels. The middle column sizes automatically depending on the remaining space available. The leftColumn, middleColumn, and rightColumn DIVs are positioned within the container grid element with the following CSS rules: #leftColumn { -ms-grid-column: 1; background-color:red; } #middleColumn { -ms-grid-column: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; background-color:blue; } The “-ms-grid-column” property is used to specify the column associated with the element selected by the style sheet selector. The leftColumn DIV is positioned in the first grid column, the middleColumn DIV is positioned in the second grid column, and the rightColumn DIV is positioned in the third grid column. I find using CSS Grid Layout to be just as intuitive as using an HTML table for layout. You define your columns and rows and then you position different elements within these columns and rows. Very straightforward. Creating Multiple Columns and Rows In the previous section, we created a super simple three-column layout. This layout contained only a single row. In this section, let’s create a slightly more complicated layout which contains more than one row: The following page contains a header row, a content row, and a footer row. The content row contains three columns: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100px 1fr 100px; } #header { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; background-color: yellow; } #leftColumn { -ms-grid-column: 1; -ms-grid-row: 2; background-color:red; } #middleColumn { -ms-grid-column: 2; -ms-grid-row: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; -ms-grid-row: 2; background-color:blue; } #footer { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 3; background-color: orange; } </style> </head> <body> <div id="container"> <div id="header"> Header, Header, Header </div> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> <div id="footer"> Footer, Footer, Footer </div> </div> </body> </html> In the page above, the grid layout is created with the following rule which creates a grid with three rows and three columns: #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100px 1fr 100px; } The header is created with the following rule: #header { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; background-color: yellow; } The header is positioned in column 1 and row 1. Furthermore, notice that the “-ms-grid-column-span” property is used to span the header across three columns. CSS Grid Layout and Fractional Units When you use CSS Grid Layout, you can take advantage of fractional units. Fractional units provide you with an easy way of dividing up remaining space in a page. Imagine, for example, that you want to create a three-column page layout. You want the size of the first column to be fixed at 200 pixels and you want to divide the remaining space among the remaining three columns. The width of the second column is equal to the combined width of the third and fourth columns. The following CSS rule creates four columns with the desired widths: #container { display: -ms-grid; -ms-grid-columns: 200px 2fr 1fr 1fr; -ms-grid-rows: 1fr; } The fr unit represents a fraction. The grid above contains four columns. The second column is two times the size (2fr) of the third (1fr) and fourth (1fr) columns. When you use the fractional unit, the remaining space is divided up using fractional amounts. Notice that the single row is set to a height of 1fr. The single grid row gobbles up the entire vertical space. Here’s the entire HTML page: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 200px 2fr 1fr 1fr; -ms-grid-rows: 1fr; } #firstColumn { -ms-grid-column: 1; background-color:red; } #secondColumn { -ms-grid-column: 2; background-color:green; } #thirdColumn { -ms-grid-column: 3; background-color:blue; } #fourthColumn { -ms-grid-column: 4; background-color:orange; } </style> </head> <body> <div id="container"> <div id="firstColumn"> First Column, First Column, First Column </div> <div id="secondColumn"> Second Column, Second Column, Second Column </div> <div id="thirdColumn"> Third Column, Third Column, Third Column </div> <div id="fourthColumn"> Fourth Column, Fourth Column, Fourth Column </div> </div> </body> </html>   Summary There is more in the CSS 3 Grid Layout standard than discussed in this blog post. My goal was to describe the basics. If you want to learn more than you can read through the entire standard at http://www.w3.org/TR/css3-grid-layout/ In this blog post, I described some of the difficulties that you might encounter when attempting to replace HTML tables with Cascading Style Sheets when laying out a web page. I explained how you can take advantage of the CSS 3 Grid Layout standard to avoid these problems when building Metro style applications using JavaScript. CSS 3 Grid Layout provides you with all of the benefits of using HTML tables for laying out a page without requiring you to use HTML table elements.

    Read the article

  • Creating PHP Forms with show/hide functionality [migrated]

    - by ronquiq
    I want to create two reports and submit the report data to database by using two functions defined in a class: Here I have two buttons: "Create ES" and "Create RP". Rightnow, my forms are working fine, I can insert data successfully, but the problem was when I click on submit after filling the form data, the content is hiding and displays the fist div content "cs_content" and again I need to onclick to submit again. Could anyone give a solution for this. Requirement : When I click on "Create CS", I should be able to fill the form and submit data successfully with a message within "cs_content" and any form input errors, the errors should display within "cs_content". When I click on "Create RP", I should be able to fill the form and submit data successfully with a message within "rp_content" and any form input errors, the errors should display within "rp_content". home.php <?php require 'classes/class.report.php'; $report = new Report($db); ?> <html> <head> <script src="js/jqueryv1.10.2.js"></script> <script> $ (document).ready(function () { //$("#cs_content").show(); $('#cs').click(function () { $('#cs_content').fadeIn('slow'); $('#rp_content').hide(); }); $('#rp').click(function () { $('#rp_content').fadeIn('slow'); $('#cs_content').hide(); }); }); </script> </head> <body> <div class="container2"> <div style="margin:0px 0px;padding:3px 217px;overflow:hidden;"> <div id="cs" style="float:left;margin:0px 0px;padding:7px;"><input type="button" value="CREATE CS"></div> <div id="rp" style="float:left;margin:0px 0px;padding:7px;"><input type="button" value="CREATE RP"></div><br> </div> <div id="cs_content"> <?php $report->create_cs_report(); ?> </div> <div id="rp_content" style="display:none;"> <?php $report->create_rp_report(); ?> </div> </div> </body> </html> class.report.php <?php class Report { private $db; public function __construct($database){ $this->db = $database; } public function create_cs_report() { if (isset($_POST['create_es_report'])) { $report_name = htmlentities($_POST['report_name']); $from_address = htmlentities($_POST['from_address']); $subject = htmlentities($_POST['subject']); $reply_to = htmlentities($_POST['reply_to']); if (empty($_POST['report_name']) || empty($_POST['from_address']) || empty($_POST['subject']) || empty($_POST['reply_to'])) { $errors[] = '<span class="error">All fields are required.</span>'; } else { if (isset($_POST['report_name']) && empty($_POST['report_name'])) { $errors[] = '<span class="error">Report Name is required</span>'; } else if (!ctype_alnum($_POST['report_name'])) { $errors[] = '<span class="error">Report Name: Whitespace is not allowed, only alphabets and numbers are required</span>'; } if (isset($_POST['from_address']) && empty($_POST['from_address'])) { $errors[] = '<span class="error">From address is required</span>'; } else if (filter_var($_POST['from_address'], FILTER_VALIDATE_EMAIL) === false) { $errors[] = '<span class="error">Please enter a valid From address</span>'; } if (isset($_POST['subject']) && empty($_POST['subject'])) { $errors[] = '<span class="error">Subject is required</span>'; } else if (!ctype_alnum($_POST['subject'])) { $errors[] = '<span class="error">Subject: Whitespace is not allowed, only alphabets and numbers are required</span>'; } if (isset($_POST['reply_to']) && empty($_POST['reply_to'])) { $errors[] = '<span class="error">Reply To is required</span>'; } else if (filter_var($_POST['reply_to'], FILTER_VALIDATE_EMAIL) === false) { $errors[] = '<span class="error">Please enter a valid Reply-To address</span>'; } } if (empty($errors) === true) { $query = $this->db->prepare("INSERT INTO report(report_name, from_address, subject, reply_to) VALUES (?, ?, ?, ?) "); $query->bindValue(1, $report_name); $query->bindValue(2, $from_address); $query->bindValue(3, $subject); $query->bindValue(4, $reply_to); try { $query->execute(); } catch(PDOException $e) { die($e->getMessage()); } header('Location:home.php?success'); exit(); } } if (isset($_GET['success']) && empty($_GET['success'])) { header('Location:home.php'); echo '<span class="error">Report is succesfully created</span>'; } ?> <form action="" method="POST" accept-charset="UTF-8"> <div style="font-weight:bold;padding:17px 80px;text-decoration:underline;">Section A</div> <table class="create_report"> <tr><td><label>Report Name</label><span style="color:#A60000">*</span></td> <td><input type="text" name="report_name" required placeholder="Name of the report" value="<?php if(isset($_POST["report_name"])) echo $report_name; ?>" size="30" maxlength="30"> </td></tr> <tr><td><label>From</label><span style="color:#A60000">*</span></td> <td><input type="text" name="from_address" required placeholder="From address" value="<?php if(isset($_POST["from_address"])) echo $from_address; ?>" size="30"> </td></tr> <tr><td><label>Subject</label><span style="color:#A60000">*</span></td> <td><input type="text" name="subject" required placeholder="Subject" value="<?php if(isset($_POST["subject"])) echo $subject; ?>" size="30"> </td></tr> <tr><td><label>Reply To</label><span style="color:#A60000">*</span></td> <td><input type="text" name="reply_to" required placeholder="Reply address" value="<?php if(isset($_POST["reply_to"])) echo $reply_to; ?>" size="30"> </td></tr> <tr><td><input type="submit" value="create report" style="background:#8AC007;color:#080808;padding:6px;" name="create_es_report"></td></tr> </table> </form> <?php //IF THERE ARE ERRORS, THEY WOULD BE DISPLAY HERE if (empty($errors) === false) { echo '<div>' . implode('</p><p>', $errors) . '</div>'; } } public function create_rp_report() { if (isset($_POST['create_rp_report'])) { $report_name = htmlentities($_POST['report_name']); $to_address = htmlentities($_POST['to_address']); $subject = htmlentities($_POST['subject']); $reply_to = htmlentities($_POST['reply_to']); if (empty($_POST['report_name']) || empty($_POST['to_address']) || empty($_POST['subject']) || empty($_POST['reply_to'])) { $errors[] = '<span class="error">All fields are required.</span>'; } else { if (isset($_POST['report_name']) && empty($_POST['report_name'])) { $errors[] = '<span class="error">Report Name is required</span>'; } else if (!ctype_alnum($_POST['report_name'])) { $errors[] = '<span class="error">Report Name: Whitespace is not allowed, only alphabets and numbers are required</span>'; } if (isset($_POST['to_address']) && empty($_POST['to_address'])) { $errors[] = '<span class="error">to address is required</span>'; } else if (filter_var($_POST['to_address'], FILTER_VALIDATE_EMAIL) === false) { $errors[] = '<span class="error">Please enter a valid to address</span>'; } if (isset($_POST['subject']) && empty($_POST['subject'])) { $errors[] = '<span class="error">Subject is required</span>'; } else if (!ctype_alnum($_POST['subject'])) { $errors[] = '<span class="error">Subject: Whitespace is not allowed, only alphabets and numbers are required</span>'; } if (isset($_POST['reply_to']) && empty($_POST['reply_to'])) { $errors[] = '<span class="error">Reply To is required</span>'; } else if (filter_var($_POST['reply_to'], FILTER_VALIDATE_EMAIL) === false) { $errors[] = '<span class="error">Please enter a valid Reply-To address</span>'; } } if (empty($errors) === true) { $query = $this->db->prepare("INSERT INTO report(report_name, to_address, subject, reply_to) VALUES (?, ?, ?, ?) "); $query->bindValue(1, $report_name); $query->bindValue(2, $to_address); $query->bindValue(3, $subject); $query->bindValue(4, $reply_to); try { $query->execute(); } catch(PDOException $e) { die($e->getMessage()); } header('Location:home.php?success'); exit(); } } if (isset($_GET['success']) && empty($_GET['success'])) { header('Location:home.php'); echo '<span class="error">Report is succesfully created</span>'; } ?> <form action="" method="POST" accept-charset="UTF-8"> <div style="font-weight:bold;padding:17px 80px;text-decoration:underline;">Section A</div> <table class="create_report"> <tr><td><label>Report Name</label><span style="color:#A60000">*</span></td> <td><input type="text" name="report_name" required placeholder="Name of the report" value="<?php if(isset($_POST["report_name"])) echo $report_name; ?>" size="30" maxlength="30"> </td></tr> <tr><td><label>to</label><span style="color:#A60000">*</span></td> <td><input type="text" name="to_address" required placeholder="to address" value="<?php if(isset($_POST["to_address"])) echo $to_address; ?>" size="30"> </td></tr> <tr><td><label>Subject</label><span style="color:#A60000">*</span></td> <td><input type="text" name="subject" required placeholder="Subject" value="<?php if(isset($_POST["subject"])) echo $subject; ?>" size="30"> </td></tr> <tr><td><label>Reply To</label><span style="color:#A60000">*</span></td> <td><input type="text" name="reply_to" required placeholder="Reply address" value="<?php if(isset($_POST["reply_to"])) echo $reply_to; ?>" size="30"> </td></tr> <tr><td><input type="submit" value="create report" style="background:#8AC007;color:#080808;padding:6px;" name="create_rp_report"></td></tr> </table> </form> <?php //IF THERE ARE ERRORS, THEY WOULD BE DISPLAY HERE if (empty($errors) === false) { echo '<div>' . implode('</p><p>', $errors) . '</div>'; } } }//Report CLASS ENDS

    Read the article

< Previous Page | 66 67 68 69 70 71 72 73 74 75 76 77  | Next Page >