Search Results

Search found 1059 results on 43 pages for 'h1'.

Page 30/43 | < Previous Page | 26 27 28 29 30 31 32 33 34 35 36 37  | Next Page >

  • I want to check if $('#td1').text() === "x"?

    - by M.z
    I want to check if innerHtml have X or O , so i can not add again any thing else , but it's not working . it stop after adding the check code , I'm trying here to do a simple X O game to get more familiar with javascript and jquery . also I'm not sure if can do this with jQuery . <script type="text/javascript" > function ranFun() { return Math.floor((Math.random() * 9) + 1); } var a; function Elment(a) { document.getElementById("td" + a).innerHTML = "O"; } function call() { var x = ranFun(); switch (x) { case 1:case 2 :case 3: case 4 :case 5 : case 6 : case 7 : case 8 : case 9 : Elment(x); break; default: break; } } function tdElm(c) { if ($('#td1').text() === "x" || $('#td1').text() == "o") return false; else { document.getElementById("td" + c).innerHTML = "x"; call(); } } </script> <BODY> <center> <h1 >" X ,O Game "</h1> <table > <tr> <td id="td1" onclick="tdElm(1);" ></td> <td id="td2" onclick="tdElm(2);"></td> <td id="td3" onclick="tdElm(3);"></td> </tr> <tr> <td id="td4" onclick="tdElm(4);"></td> <td id="td5" onclick="tdElm(5);"></td> <td id="td6" onclick="tdElm(6);"></td> </tr> <tr> <td id="td7" onclick="tdElm(7);"></td> <td id="td8" onclick="tdElm(8);"></td> <td id="td9" onclick="tdElm(9);"></td> </tr> </table> </center> </BODY>

    Read the article

  • jquery add either of two fields to form

    - by user2891182
    I have worked out how to add a field to a form through JQuery but cannot figure out how to have two add field buttons so I can add one or the other fields? Could someone lead me in the right direction? <html> <head> <title>jQuery add / remove textbox example</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <style type="text/css"> div{ padding:8px; } </style> </head> <body> <h1>jQuery add / remove textbox example</h1> <script type="text/javascript"> $(document).ready(function(){ var counter = 2; $("#addButton").click(function () { if(counter>10){ alert("Only 10 textboxes allow"); return false; } var newTextBoxDiv = $(document.createElement('div')) .attr("id", 'TextBoxDiv' + counter); newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' + '<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >'); newTextBoxDiv.appendTo("#TextBoxesGroup"); counter++; }); $("#removeButton").click(function () { if(counter==1){ alert("No more textbox to remove"); return false; } counter--; $("#TextBoxDiv" + counter).remove(); }); $("#getButtonValue").click(function () { var msg = ''; for(i=1; i<counter; i++){ msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val(); } alert(msg); }); }); </script> </head><body> <div id='TextBoxesGroup'> <div id="TextBoxDiv1"> <label>Textbox #1 : </label><input type='textbox' id='textbox1' > </div> </div> --I am trying to have a use click on either of these two buttons and have the appropriate field added next.-- <input type='button' value='Add field #01' id='addButton'> <input type='button' value='Add field #02' id='addButton'> <input type='button' value='Remove Last Field' id='removeButton'> </body> </html>

    Read the article

  • CSS: my side bar overflow the container div's border when I set it's height to 100%

    - by mnml
    Hi, My side bar overflow the container div's border when I set it's height to 100%, I would like to know if there is any way I can have it's height 100% minus some px. Here is the source: <div id="main"> <br /><br /> <div class="content"> <div id="sidecontent"> <h1 id="title">Title</h1> ***** </div> <div id="sidebar"> <div class="sidebox"> **** </div> </div> </div> <div class="bottom"></div> </div> #main { position: relative; background:transparent url('/public/images/main_bg.png') top left repeat-y; padding:37px 37px 37px 37px; margin-left: auto ; margin-right: auto ; width:940px; min-height: 363px; } #main div.top, #main div.bottom { height:70px; width:1015px; position: absolute; left:0px; } #main div.content { padding:0 15px 0 15px; } #sidecontent { width: 675px; } #sidebar { background: #fff url('/public/images/bg_side.png') top right repeat-y; position: absolute; height: 100%; right:34px; top:42px; width: 200px; padding: 10px 10px 0px 40px; z-index:50; } .created_at { color:gray; } .sidebox { margin-bottom: 5px; } #main div.top { top:-70px; background: transparent url(/public/images/main_top.png) bottom no-repeat; } #main div.bottom { bottom:-70px; background: transparent url(/public/images/main_bottom.png) top no-repeat; }

    Read the article

  • How to display a jQuery and Javascript generated 2 dimensional array in HTML?

    - by user1730439
    I am trying to create a table of 100 random numbers, the random numbers are from 0 to 100. I need to display the 100 random numbers as a 10 by 10 matrix in HTML, using JS and jQuery. The code that I have been working on displays the last array 10 times. Here is the code: <html> <head> <title>My Web Page</title> <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.8.2.min.js" /> </script> </head> <body> <h1 id = "randData">Randomize Data</h1> <button id = "myRandomizeBtn">Randomize</button> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </body> <script type="text/javascript"> $("#myRandomizeBtn").bind("click",randomizeHandler); function randomizeHandler(evt) { var n = 10; var data = new Array(); for (var i = 0; i < n; i++) { for (var j = 0; j < n; j++) { data[i,j] = Math.floor(100*Math.random()); $("p").text(data); } $("br").text(data); } } </script> </html>

    Read the article

  • Scrolling an HTML 5 page using JQuery

    - by nikolaosk
    In this post I will show you how to use JQuery to scroll through an HTML 5 page.I had to help a friend of mine to implement this functionality and I thought it would be a good idea to write a post.I will not use any JQuery scrollbar plugin,I will just use the very popular JQuery Library. Please download the library (minified version) from http://jquery.com/download.Please find here all my posts regarding JQuery.Also have a look at my posts regarding HTML 5.In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.Another excellent resource is HTML 5 Doctor.Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. Let me move on to the actual example.This is the sample HTML 5 page<!DOCTYPE html><html lang="en">  <head>    <title>Liverpool Legends</title>        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >        <link rel="stylesheet" type="text/css" href="style.css">        <script type="text/javascript" src="jquery-1.8.2.min.js"> </script>     <script type="text/javascript" src="scroll.js">     </script>       </head>  <body>    <header>        <h1>Liverpool Legends</h1>    </header>        <div id="main">        <table>        <caption>Liverpool Players</caption>        <thead>            <tr>                <th>Name</th>                <th>Photo</th>                <th>Position</th>                <th>Age</th>                <th>Scroll</th>            </tr>        </thead>        <tfoot class="footnote">            <tr>                <td colspan="4">We will add more photos soon</td>            </tr>        </tfoot>    <tbody>        <tr class="maintop">        <td>Alan Hansen</td>            <td>            <figure>            <img src="images\Alan-hansen-large.jpg" alt="Alan Hansen">            <figcaption>The best Liverpool Defender <a href="http://en.wikipedia.org/wiki/Alan_Hansen">Alan Hansen</a></figcaption>            </figure>            </td>            <td>Defender</td>            <td>57</td>            <td class="top">Middle</td>        </tr>        <tr>        <td>Graeme Souness</td>            <td>            <figure>            <img src="images\graeme-souness-large.jpg" alt="Graeme Souness">            <figcaption>Souness was the captain of the successful Liverpool team of the early 1980s <a href="http://en.wikipedia.org/wiki/Graeme_Souness">Graeme Souness</a></figcaption>            </figure>            </td>            <td>MidFielder</td>            <td>59</td>        </tr>        <tr>        <td>Ian Rush</td>            <td>            <figure>            <img src="images\ian-rush-large.jpg" alt="Ian Rush">            <figcaption>The deadliest Liverpool Striker <a href="http://it.wikipedia.org/wiki/Ian_Rush">Ian Rush</a></figcaption>            </figure>            </td>            <td>Striker</td>            <td>51</td>        </tr>        <tr class="mainmiddle">        <td>John Barnes</td>            <td>            <figure>            <img src="images\john-barnes-large.jpg" alt="John Barnes">            <figcaption>The best Liverpool Defender <a href="http://en.wikipedia.org/wiki/John_Barnes_(footballer)">John Barnes</a></figcaption>            </figure>            </td>            <td>MidFielder</td>            <td>49</td>            <td class="middle">Bottom</td>        </tr>                <tr>        <td>Kenny Dalglish</td>            <td>            <figure>            <img src="images\kenny-dalglish-large.jpg" alt="Kenny Dalglish">            <figcaption>King Kenny <a href="http://en.wikipedia.org/wiki/Kenny_Dalglish">Kenny Dalglish</a></figcaption>            </figure>            </td>            <td>Midfielder</td>            <td>61</td>        </tr>        <tr>            <td>Michael Owen</td>            <td>            <figure>            <img src="images\michael-owen-large.jpg" alt="Michael Owen">            <figcaption>Michael was Liverpool's top goal scorer from 1997–2004 <a href="http://www.michaelowen.com/">Michael Owen</a></figcaption>            </figure>            </td>            <td>Striker</td>            <td>33</td>        </tr>        <tr>            <td>Robbie Fowler</td>            <td>            <figure>            <img src="images\robbie-fowler-large.jpg" alt="Robbie Fowler">            <figcaption>Fowler scored 183 goals in total for Liverpool <a href="http://en.wikipedia.org/wiki/Robbie_Fowler">Robbie Fowler</a></figcaption>            </figure>            </td>            <td>Striker</td>            <td>38</td>        </tr>        <tr class="mainbottom">            <td>Steven Gerrard</td>            <td>            <figure>            <img src="images\steven-gerrard-large.jpg" alt="Steven Gerrard">            <figcaption>Liverpool's captain <a href="http://en.wikipedia.org/wiki/Steven_Gerrard">Steven Gerrard</a></figcaption>            </figure>            </td>            <td>Midfielder</td>            <td>32</td>            <td class="bottom">Top</td>        </tr>    </tbody></table>          </div>            <footer>        <p>All Rights Reserved</p>      </footer>     </body>  </html>  The markup is very easy to follow and understand. You do not have to type all the code,simply copy and paste it.For those that you are not familiar with HTML 5, please take a closer look at the new tags/elements introduced with HTML 5.When I view the HTML 5 page with Firefox I see the following result. I have also an external stylesheet (style.css). body{background-color:#efefef;}h1{font-size:2.3em;}table { border-collapse: collapse;font-family: Futura, Arial, sans-serif; }caption { font-size: 1.2em; margin: 1em auto; }th, td {padding: .65em; }th, thead { background: #000; color: #fff; border: 1px solid #000; }tr:nth-child(odd) { background: #ccc; }tr:nth-child(even) { background: #404040; }td { border-right: 1px solid #777; }table { border: 1px solid #777;  }.top, .middle, .bottom {    cursor: pointer;    font-size: 22px;    font-weight: bold;    text-align: center;}.footnote{text-align:center;font-family:Tahoma;color:#EB7515;}a{color:#22577a;text-decoration:none;}     a:hover {color:#125949; text-decoration:none;}  footer{background-color:#505050;width:1150px;}These are just simple CSS Rules that style the various HTML 5 tags,classes. The jQuery code that makes it all possible resides inside the scroll.js file.Make sure you type everything correctly.$(document).ready(function() {                 $('.top').click(function(){                     $('html, body').animate({                         scrollTop: $(".mainmiddle").offset().top                     },4000 );                  });                 $('.middle').click(function(){                     $('html, body').animate({                         scrollTop: $(".mainbottom").offset().top                     },4000);                  });                     $('.bottom').click(function(){                     $('html, body').animate({                         scrollTop: $(".maintop").offset().top                     },4000);                  }); });  Let me explain what I am doing here.When I click on the Middle word (  $('.top').click(function(){ ) this relates to the top class that is clicked.Then we declare the elements that we want to participate in the scrolling. In this case is html,body ( $('html, body').animate).These elements will be part of the vertical scrolling.In the next line of code we simply move (navigate) to the element (class mainmiddle that is attached to a tr element.)      scrollTop: $(".mainmiddle").offset().top  Make sure you type all the code correctly and try it for yourself. I have tested this solution will all 4-5 major browsers.Hope it helps!!!

    Read the article

  • PHP, Apache and curl: Differences between Windows and Linux?

    - by beginner_
    I'm trying to run my php App on Ubuntu Server 11.10. This App works fine under Apache + PHP in windows. I have other applications that I can simply copy&paste between the 2 OS and they work on both. (These don't use cURL). However this one uses the php library tonic (RESTful webservices) and makes us of php cURL module. The issue is I'm not getting an error message which makes it impossible to find the issue. I (must) use NTLM authentication and this is done with AuthenNTLM Apache Module: Order allow,deny Allow from all PerlAuthenHandler Apache2::AuthenNTLM AuthType ntlm AuthName "Protected Access" require valid-user PerlAddVar ntdomain "domainName server" PerlSetVar defaultdomain domainName PerlSetVar ntlmsemtimeout 2 PerlSetVar ntlmdebug 1 PerlSetVar splitdomainprefix 0 All files that cURL needs to fetch override AuthenNTLM authentication: order deny,allow deny from all allow from 127.0.0.1 Satisfy any Since these files are only fectehd by cURL from same server, access can be limited to localhost. Possible issues are: NTLM auth isn't overridden for files requested through cURL (even though AllowOverride All is set) curl works differently on linux $ch = curl_init(); curl_setopt($ch, CURLOPT_COOKIE, $strCookie); curl_setopt($ch, CURLOPT_URL, $baseUrl . $queryString); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $html = curl_exec($ch); curl_close($ch); other? Apache log says: [error] Bad/Missing NTLM/Basic Authorization Header for /myApp/webservice/local/viewList.php But this directory should override NTLM authentication using curl command line from windows to access same resource i get: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html> <head> <title>406 Not Acceptable</title> </head> <body> <h1>Not Acceptable</h1> <p>An appropriate representation of the requested resource /myApp/webservice/myResource could not be found on this server.</p> Available variants: <ul> <li><a href="myResource.php">myResource.php</a> , type application/x-httpd-php</li> </ul> <hr> <address>Apache/2.2.20 (Ubuntu) Server at localhost Port 80</address> </body> </html> Note: This is duplicate from http://stackoverflow.com/questions/9821979/php-curl-on-linux-what-is-the-difference-to-curl-on-windows Is it was suggested I post it here. EDIT: Please see Ubuntu Server: Apache2 seems to attach .php to URI as I discovered why it does not work but need help so the issue does not occur anymore. ANSWER: The issue is the default Apache configuration on Ubuntu: Options Indexes FollowSymLinks MultiViews MultiViews is changing request_uri from myResource to myResource.php. Solutions: disable MultiViews in .htaccess: Options -MultiViews remove MultiViews from default config rename the file as example to myResourceClass I chose last option because that should work regardless of configuration and I only have 3 such files so the change took about 30 secs...

    Read the article

  • Creating a multi-column rollover image gallery with HTML 5

    - by nikolaosk
    I know it has been a while since I blogged about HTML 5. I have two posts in this blog about HTML 5. You can find them here and here.I am creating a small content website (only text,images and a contact form) for a friend of mine.He wanted to create a rollover gallery.The whole concept is that we have some small thumbnails on a page, the user hovers over them and they appear enlarged on a designated container/placeholder on a page. I am trying not to use Javascript scripts when I am using effects on a web page and this is what I will be doing in this post.  Well some people will say that HTML 5 is not supported in all browsers. That is true but most of the modern browsers support most of its recommendations. For people who still use IE6 some hacks must be devised.Well to be totally honest I cannot understand why anyone at this day and time is using IE 6.0.That really is beyond me.Well, the point of having a web browser is to be able to ENJOY the great experience that the WE? offers today.  Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. In order to be absolutely clear this is not (and could not be ) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.Another excellent resource is HTML 5 Doctor.For the people who are not convinced yet that they should invest time and resources on becoming experts on HTML 5 I should point out that HTML 5 websites will be ranked higher than others. Search engines will be able to locate better the content of our site and its relevance/importance since it is using semantic tags. Let's move now to the actual hands-on example. In this case (since I am mad Liverpool supporter) I will create a rollover image gallery of Liverpool F.C legends. I create a folder in my desktop. I name it Liverpool Gallery.Then I create two subfolders in it, large-images (I place the large images in there) and thumbs (I place the small images in there).Then I create an empty .html file called LiverpoolLegends.html and an empty .css file called style.css.Please have a look at the HTML Markup that I typed in my fancy editor package below<!doctype html><html lang="en"><head><title>Liverpool Legends Gallery</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="style.css"></head><body><header><h1>A page dedicated to Liverpool Legends</h1><h2>Do hover over the images with the mouse to see the full picture</h2></header><ul id="column1"><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/john-barnes.jpg" alt=""><img class="large" src="large-images/john-barnes-large.jpg" alt=""></a></li><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/ian-rush.jpg" alt=""><img class="large" src="large-images/ian-rush-large.jpg" alt=""></a></li><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/graeme-souness.jpg" alt=""><img class="large" src="large-images/graeme-souness-large.jpg" alt=""></a></li></ul><ul id="column2"><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/steven-gerrard.jpg" alt=""><img class="large" src="large-images/steven-gerrard-large.jpg" alt=""></a></li><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/kenny-dalglish.jpg" alt=""><img class="large" src="large-images/kenny-dalglish-large.jpg" alt=""></a></li><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/robbie-fowler.jpg" alt=""><img class="large" src="large-images/robbie-fowler-large.jpg" alt=""></a></li></ul><ul id="column3"><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/alan-hansen.jpg" alt=""><img class="large" src="large-images/alan-hansen-large.jpg" alt=""></a></li><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/michael-owen.jpg" alt=""><img class="large" src="large-images/michael-owen-large.jpg" alt=""></a></li></ul></body></html> It is very easy to follow the markup. Please have a look at the new doctype and the new semantic tag <header>. I have 3 columns and I place my images in there.There is a class called "large".I will use this class in my CSS code to hide the large image when the mouse is not on (hover) an image Make sure you validate your HTML 5 page in the validator found hereHave a look at the CSS code below that makes it all happen.img { border:none;}#column1 { position: absolute; top: 30; left: 100; }li { margin: 15px; list-style-type:none;}#column1 a img.large {  position: absolute; top: 0; left:700px; visibility: hidden;}#column1 a:hover { background: white;}#column1 a:hover img.large { visibility:visible;}#column2 { position: absolute; top: 30; left: 195px; }li { margin: 5px; list-style-type:none;}#column2 a img.large { position: absolute; top: 0; left:510px; margin-left:0; visibility: hidden;}#column2 a:hover { background: white;}#column2 a:hover img.large { visibility:visible;}#column3 { position: absolute; top: 30; left: 400px; width:108px;}li { margin: 5px; list-style-type:none;}#column3 a img.large { width: 260px; height:260px; position: absolute; top: 0; left:315px; margin-left:0; visibility: hidden;}#column3 a:hover { background: white;}#column3 a:hover img.large { visibility:visible;}?n the first line of the CSS code I set the images to have no border.Then I place the first column in the page and then remove the bullets from the list elements.Then I use the large CSS class to create a position for the large image and hide it.Finally when the hover event takes place I make the image visible.I repeat the process for the next two columns. I have tested the page with IE 10 and the latest versions of Opera,Chrome and Firefox.Feel free to style your HTML 5 gallery any way you want through the magic of CSS.I did not bother adding background colors and borders because that was beyond the scope of this post. Hope it helps!!!!

    Read the article

  • How to Upload a file from client to server using OFBIZ?

    - by SIVAKUMAR.J
    I'm new to ofbiz so try to keep your answer as simple as possibly. If you can give examples that would be kind. My problem is I created a project inside the ofbiz/hot-deploy folder namely productionmgntSystem. Inside the folder ofbiz\hot-deploy\productionmgntSystem\webapp\productionmgntSystem I created a file app_details_1.ftl. The following are the code of this file <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script TYPE="TEXT/JAVASCRIPT" language=""JAVASCRIPT"> function uploadFile() { //alert("Before calling upload.jsp"); window.location='<@ofbizUrl>testing_service1</@ofbizUrl>' } </script> </head> <!-- <form action="<@ofbizUrl>testing_service1</@ofbizUrl>" enctype="multipart/form-data" name="app_details_frm"> --> <form action="<@ofbizUrl>logout1</@ofbizUrl>" enctype="multipart/form-data" name="app_details_frm"> <center style="height: 299px; "> <table border="0" style="height: 177px; width: 788px"> <tr style="height: 115px; "> <td style="width: 103px; "> <td style="width: 413px; "><h1>APPLICATION DETAILS</h1> <td style="width: 55px; "> </tr> <tr> <td style="width: 125px; ">Application name : </td> <td> <input name="app_name_txt" id="txt_1" value=" " /> </td> </tr> <tr> <td style="width: 125px; ">Excell sheet &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: </td> <td> <input type="file" name="filename"/> </td> </tr> <tr> <td> <!-- <input type="button" name="logout1_cmd" value="Logout" onclick="logout1()"/> --> <input type="submit" name="logout_cmd" value="logout"/> </td> <td> <!-- <input type="submit" name="upload_cmd" value="Submit" /> --> <input type="button" name="upload1_cmd" value="Upload" onclick="uploadFile()"/> </td> </tr> </table> </center> </form> </html> the following coding is present in the file ofbiz\hot-deploy\productionmgntSystem\webapp\productionmgntSystem\WEB-INF\controller.xml ...... ....... ........ <request-map uri="testing_service1"> <security https="true" auth="true"/> <event type="java" path="org.ofbiz.productionmgntSystem.web_app_req.WebServices1" invoke="testingService"/> <response name="ok" type="view" value="ok_view"/> <response name="exception" type="view" value="exception_view"/> </request-map> .......... ............ .......... <view-map name="ok_view" type="ftl" page="ok_view.ftl"/> <view-map name="exception_view" type="ftl" page="exception_view.ftl"/> ................ ............. ............. The following are the coding present in the file ofbiz\hot-deploy\productionmgntSystem\src\org\ofbiz\productionmgntSystem\web_app_req\WebServices1.java package org.ofbiz.productionmgntSystem.web_app_req; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.DataInputStream; import java.io.FileOutputStream; import java.io.IOException; public class WebServices1 { public static String testingService(HttpServletRequest request, HttpServletResponse response) { //int i=0; String result="ok"; System.out.println("\n\n\t*************************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response)- Start"); String contentType=request.getContentType(); System.out.println("\n\n\t*************************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response)- contentType : "+contentType); String str=new String(); // response.setContentType("text/html"); //PrintWriter writer; if ((contentType != null) && (contentType.indexOf("multipart/form-data") >= 0)) { System.out.println("\n\n\t**********************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response) after if (contentType != null)"); try { // writer=response.getWriter(); System.out.println("\n\n\t**********************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response) - try Start"); DataInputStream in = new DataInputStream(request.getInputStream()); int formDataLength = request.getContentLength(); byte dataBytes[] = new byte[formDataLength]; int byteRead = 0; int totalBytesRead = 0; //this loop converting the uploaded file into byte code while (totalBytesRead < formDataLength) { byteRead = in.read(dataBytes, totalBytesRead,formDataLength); totalBytesRead += byteRead; } String file = new String(dataBytes); //for saving the file name String saveFile = file.substring(file.indexOf("filename=\"") + 10); saveFile = saveFile.substring(0, saveFile.indexOf("\n")); saveFile = saveFile.substring(saveFile.lastIndexOf("\\")+ 1,saveFile.indexOf("\"")); int lastIndex = contentType.lastIndexOf("="); String boundary = contentType.substring(lastIndex + 1,contentType.length()); int pos; //extracting the index of file pos = file.indexOf("filename=\""); pos = file.indexOf("\n", pos) + 1; pos = file.indexOf("\n", pos) + 1; pos = file.indexOf("\n", pos) + 1; int boundaryLocation = file.indexOf(boundary, pos) - 4; int startPos = ((file.substring(0, pos)).getBytes()).length; int endPos = ((file.substring(0, boundaryLocation)).getBytes()).length; //creating a new file with the same name and writing the content in new file FileOutputStream fileOut = new FileOutputStream("/"+saveFile); fileOut.write(dataBytes, startPos, (endPos - startPos)); fileOut.flush(); fileOut.close(); System.out.println("\n\n\t**********************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response) - try End"); } catch(IOException ioe) { System.out.println("\n\n\t*********************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response) - Catch IOException"); //ioe.printStackTrace(); return("exception"); } catch(Exception ex) { System.out.println("\n\n\t*********************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response) - Catch Exception"); return("exception"); } } else { System.out.println("\n\n\t********************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response) else part"); result="exception"; } System.out.println("\n\n\t*************************************\n\tInside WebServices1.testingService(HttpServletRequest request, HttpServletResponse response)- End"); return(result); } } I want to upload a file to the server. The file is get from user " tag in the "app_details_1.ftl" file & it is updated into the server by using the method "testingService(HttpServletRequest request, HttpServletResponse response)" in the class "WebServices1". But the file is not uploaded. Give me a good solution for uploading a file to the server.

    Read the article

  • A quiz with results

    - by Keon Davies
    I'm currently working on programming a quiz withe results. I've tried this: <html> <body> <h1></h1> <form> <ol> <li> How much are you willing to spend on a phone per month?</li> <ul> <li><input type = "radio" name = "q1" id="q1_1"> £5-£10.</input></li> <li><input type = "radio" name = "q1" id="q1_2"> £10-£15.</input></li> <li><input type = "radio" name = "q1" id="q1_3"> £15-£20.</input></li> <li><input type = "radio" name = "q1" id="q1_4"> £20-£25.</input></li> <li><input type = "radio" name = "q1" id="q1_5"> £25-£30.</input></li> <li><input type = "radio" name = "q1" id="q1_6"> £30-£35.</input></li> <li><input type = "radio" name = "q1" id="q1_7"> £35-£40.</input></li> </ul> <li> Are you good with technology</li> <ul> <li><input type = "radio" name = "q2" id="q2_1"> Yes.</input></li> <li><input type = "radio" name = "q2" id="q2_2"> No.</input></li> </ul> <li> Are you looking for an easy to use phone</li> <ul> <li><input type = "radio" name = "q3" id="q3_1"> Yes.</input></li> <li><input type = "radio" name = "q3" id="q3_2"> No.</input></li> </ul> <li> Are you looking for a modern type of phone?</li> <ul> <li><input type = "radio" name = "q4" id="q4_1"> Yes.</input></li> <li><input type = "radio" name = "q4" id="q4_2"> No.</input></li> </ul> <li> How big do you want the phone to be?</li> <ul> <li><input type = "radio" name = "q5" id="q5_1"> Big.</input></li> <li><input type = "radio" name = "q5" id="q5_2"> Medium.</input></li> <li><input type = "radio" name = "q5" id="q5_3"> Small.</input></li> <li><input type = "radio" name = "q5" id="q5_4"> I don't really mind.</input></li> </ul> <li> Do you care about the colour of the phone?</li> <ul> <li><input type = "radio" name = "q6" id="q6_1"> Yes.</input></li> <li><input type = "radio" name = "q6" id="q6_2"> No.</input></li> </ul> <li> Have you ever owned a phone before?</li> <ul> <li><input type = "radio" name = "q7" id="q7_1"> Yes.</input></li> <li><input type = "radio" name = "q7" id="q7_2"> No.</input></li> </ul> <li> Do you want to be able to use the phone to get out of awkward social situations?</li> <ul> <li><input type = "radio" name = "q8" id="q8_1"> Yes.</input></li> <li><input type = "radio" name = "q8" id="q8_2"> No.</input></li> </ul> <li> Do you want to be able to access the app store and download apps using your phone?</li> <ul> <li><input type = "radio" name = "q9" id="q9_1"> Yes.</input></li> <li><input type = "radio" name = "q9" id="q9_2"> No.</input></li> </ul> <li> What happened to the last phone you owned?</li> <ul> <li><input type = "radio" name = "q10" id="q10_1"> I got bored of it.</input></li> <li><input type = "radio" name = "q10" id="q10_2"> It broke.</input></li> <li><input type = "radio" name = "q10" id="q10_3"> The contract ran out.</input></li> <li><input type = "radio" name = "q10" id="q10_4"> Other.</input></li> </ul> </ol> <input type = "button" value = "Submit" onclick="getResults()"> <input type = "reset" value = "Clear"></input> <textarea id="result">The right phone for you will be displayed here.</textarea> </html> <script> function getResults() { if (document.getElementById('q1_1').checked && document.getElementById('q2_1').checked && document.getElementById('q3_1').checked && document.getElementById('q4_1').checked && document.getElementById('q5_1').checked && document.getElementById('q6_1').checked && document.getElementById('q7_1').checked && document.getElementById('q8_1').checked && document.getElementById('q9_1').checked && document.getElementById('q10_1').checked ) { document.getElementById('result').innerHTML = 'Unfortunately, the iPhone is the right phone for you.'; } } </script> </body> But it's just too long winded. Is there any other ways I can design a quiz like this but without having to write a block of code for each radio button?

    Read the article

  • Java EE 6 and NoSQL/MongoDB on GlassFish using JPA and EclipseLink 2.4 (TOTD #175)

    - by arungupta
    TOTD #166 explained how to use MongoDB in your Java EE 6 applications. The code in that tip used the APIs exposed by the MongoDB Java driver and so requires you to learn a new API. However if you are building Java EE 6 applications then you are already familiar with Java Persistence API (JPA). Eclipse Link 2.4, scheduled to release as part of Eclipse Juno, provides support for NoSQL databases by mapping a JPA entity to a document. Their wiki provides complete explanation of how the mapping is done. This Tip Of The Day (TOTD) will show how you can leverage that support in your Java EE 6 applications deployed on GlassFish 3.1.2. Before we dig into the code, here are the key concepts ... A POJO is mapped to a NoSQL data source using @NoSQL or <no-sql> element in "persistence.xml". A subset of JPQL and Criteria query are supported, based upon the underlying data store Connection properties are defined in "persistence.xml" Now, lets lets take a look at the code ... Download the latest EclipseLink 2.4 Nightly Bundle. There is a Installer, Source, and Bundle - make sure to download the Bundle link (20120410) and unzip. Download GlassFish 3.1.2 zip and unzip. Install the Eclipse Link 2.4 JARs in GlassFish Remove the following JARs from "glassfish/modules": org.eclipse.persistence.antlr.jar org.eclipse.persistence.asm.jar org.eclipse.persistence.core.jar org.eclipse.persistence.jpa.jar org.eclipse.persistence.jpa.modelgen.jar org.eclipse.persistence.moxy.jar org.eclipse.persistence.oracle.jar Add the following JARs from Eclipse Link 2.4 nightly build to "glassfish/modules": org.eclipse.persistence.antlr_3.2.0.v201107111232.jar org.eclipse.persistence.asm_3.3.1.v201107111215.jar org.eclipse.persistence.core.jpql_2.4.0.v20120407-r11132.jar org.eclipse.persistence.core_2.4.0.v20120407-r11132.jar org.eclipse.persistence.jpa.jpql_2.0.0.v20120407-r11132.jar org.eclipse.persistence.jpa.modelgen_2.4.0.v20120407-r11132.jar org.eclipse.persistence.jpa_2.4.0.v20120407-r11132.jar org.eclipse.persistence.moxy_2.4.0.v20120407-r11132.jar org.eclipse.persistence.nosql_2.4.0.v20120407-r11132.jar org.eclipse.persistence.oracle_2.4.0.v20120407-r11132.jar Start MongoDB Download latest MongoDB from here (2.0.4 as of this writing). Create the default data directory for MongoDB as: sudo mkdir -p /data/db/sudo chown `id -u` /data/db Refer to Quickstart for more details. Start MongoDB as: arungup-mac:mongodb-osx-x86_64-2.0.4 <arungup> ->./bin/mongod./bin/mongod --help for help and startup optionsMon Apr  9 12:56:02 [initandlisten] MongoDB starting : pid=3124 port=27017 dbpath=/data/db/ 64-bit host=arungup-mac.localMon Apr  9 12:56:02 [initandlisten] db version v2.0.4, pdfile version 4.5Mon Apr  9 12:56:02 [initandlisten] git version: 329f3c47fe8136c03392c8f0e548506cb21f8ebfMon Apr  9 12:56:02 [initandlisten] build info: Darwin erh2.10gen.cc 9.8.0 Darwin Kernel Version 9.8.0: Wed Jul 15 16:55:01 PDT 2009; root:xnu-1228.15.4~1/RELEASE_I386 i386 BOOST_LIB_VERSION=1_40Mon Apr  9 12:56:02 [initandlisten] options: {}Mon Apr  9 12:56:02 [initandlisten] journal dir=/data/db/journalMon Apr  9 12:56:02 [initandlisten] recover : no journal files present, no recovery neededMon Apr  9 12:56:02 [websvr] admin web console waiting for connections on port 28017Mon Apr  9 12:56:02 [initandlisten] waiting for connections on port 27017 Check out the JPA/NoSQL sample from SVN repository. The complete source code built in this TOTD can be downloaded here. Create Java EE 6 web app Create a Java EE 6 Maven web app as: mvn archetype:generate -DarchetypeGroupId=org.codehaus.mojo.archetypes -DarchetypeArtifactId=webapp-javaee6 -DgroupId=model -DartifactId=javaee-nosql -DarchetypeVersion=1.5 -DinteractiveMode=false Copy the model files from the checked out workspace to the generated project as: cd javaee-nosqlcp -r ~/code/workspaces/org.eclipse.persistence.example.jpa.nosql.mongo/src/model src/main/java Copy "persistence.xml" mkdir src/main/resources cp -r ~/code/workspaces/org.eclipse.persistence.example.jpa.nosql.mongo/src/META-INF ./src/main/resources Add the following dependencies: <dependency> <groupId>org.eclipse.persistence</groupId> <artifactId>org.eclipse.persistence.jpa</artifactId> <version>2.4.0-SNAPSHOT</version> <scope>provided</scope></dependency><dependency> <groupId>org.eclipse.persistence</groupId> <artifactId>org.eclipse.persistence.nosql</artifactId> <version>2.4.0-SNAPSHOT</version></dependency><dependency> <groupId>org.mongodb</groupId> <artifactId>mongo-java-driver</artifactId> <version>2.7.3</version></dependency> The first one is for the EclipseLink latest APIs, the second one is for EclipseLink/NoSQL support, and the last one is the MongoDB Java driver. And the following repository: <repositories> <repository> <id>EclipseLink Repo</id> <url>http://www.eclipse.org/downloads/download.php?r=1&amp;nf=1&amp;file=/rt/eclipselink/maven.repo</url> <snapshots> <enabled>true</enabled> </snapshots> </repository>  </repositories> Copy the "Test.java" to the generated project: mkdir src/main/java/examplecp -r ~/code/workspaces/org.eclipse.persistence.example.jpa.nosql.mongo/src/example/Test.java ./src/main/java/example/ This file contains the source code to CRUD the JPA entity to MongoDB. This sample is explained in detail on EclipseLink wiki. Create a new Servlet in "example" directory as: package example;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * @author Arun Gupta */@WebServlet(name = "TestServlet", urlPatterns = {"/TestServlet"})public class TestServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { out.println("<html>"); out.println("<head>"); out.println("<title>Servlet TestServlet</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>Servlet TestServlet at " + request.getContextPath() + "</h1>"); try { Test.main(null); } catch (Exception ex) { ex.printStackTrace(); } out.println("</body>"); out.println("</html>"); } finally { out.close(); } } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); }} Build the project and deploy it as: mvn clean packageglassfish3/bin/asadmin deploy --force=true target/javaee-nosql-1.0-SNAPSHOT.war Accessing http://localhost:8080/javaee-nosql/TestServlet shows the following messages in the server.log: connecting(EISLogin( platform=> MongoPlatform user name=> "" MongoConnectionSpec())) . . .Connected: User: Database: 2.7  Version: 2.7 . . .Executing MappedInteraction() spec => null properties => {mongo.collection=CUSTOMER, mongo.operation=INSERT} input => [DatabaseRecord( CUSTOMER._id => 4F848E2BDA0670307E2A8FA4 CUSTOMER.NAME => AMCE)]. . .Data access result: [{TOTALCOST=757.0, ORDERLINES=[{DESCRIPTION=table, LINENUMBER=1, COST=300.0}, {DESCRIPTION=balls, LINENUMBER=2, COST=5.0}, {DESCRIPTION=rackets, LINENUMBER=3, COST=15.0}, {DESCRIPTION=net, LINENUMBER=4, COST=2.0}, {DESCRIPTION=shipping, LINENUMBER=5, COST=80.0}, {DESCRIPTION=handling, LINENUMBER=6, COST=55.0},{DESCRIPTION=tax, LINENUMBER=7, COST=300.0}], SHIPPINGADDRESS=[{POSTALCODE=L5J1H7, PROVINCE=ON, COUNTRY=Canada, CITY=Ottawa,STREET=17 Jane St.}], VERSION=2, _id=4F848E2BDA0670307E2A8FA8,DESCRIPTION=Pingpong table, CUSTOMER__id=4F848E2BDA0670307E2A8FA7, BILLINGADDRESS=[{POSTALCODE=L5J1H8, PROVINCE=ON, COUNTRY=Canada, CITY=Ottawa, STREET=7 Bank St.}]}] You'll not see any output in the browser, just the output in the console. But the code can be easily modified to do so. Once again, the complete Maven project can be downloaded here. Do you want to try accessing relational and non-relational (aka NoSQL) databases in the same PU ?

    Read the article

  • Resizing text in an HTML 5 page using JQuery

    - by nikolaosk
    This is going to be the ninth post in a series of posts regarding HTML 5. You can find the other posts here, here , here , here, here , here , here and here.In this post I will demonstrate how to implement a very common feature found in websites today, enabling the visitor to increase or decrease the font size of a page. You can use the JQuery code I will write in this post for HTML pages which do not follow the HTML 5 standard. As I said earlier we need to write JavaScript to implement this functionality.I will use the very popular JQuery Library. Please download the library (minified version) from http://jquery.com/downloadIn this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. The HTML markup for the page follows. <!DOCTYPE html><html lang="en">  <head>    <title>HTML 5, CSS3 and JQuery</title>        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >    <link rel="stylesheet" type="text/css" href="style.css">     <script type="text/javascript" src="jquery-1.8.2.min.js">        </script><script type="text/javascript">$(function() {    $('a').click(function() {        var getfont = $('p').css('font-size');        var mynum = parseFloat(getfont, 10);        var newmwasure = getfont.slice(-2);                $('p').css('font-size', mynum / 1.2 + newmwasure);                if(this.id == 'increase') {            $('p').css('font-size', mynum * 1.4 + newmwasure);        }     })    })</script>       </head>  <body>      <div id="header">      <h1>Learn cutting edge technologies</h1>      <h2>HTML 5, JQuery, CSS3</h2>    </div>    <div id="resize">    <a href="" id="increase">Increase Font</a>       |        <a href="" id="decrease">Decrease Font</a>        </div>        <div id="main">          <h2>HTML 5</h2>                        <article>          <p>            HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.          </p>          </article>      </div>             </body>  </html>  There is nothing difficult or fancy in the HTML markup above. I have a link to the external JQuery library and the JQuery code is included inside the .html page.I have two links on this page that will increase/decrease the font size of the contents enclosed inside the <p></p> tags.Let me explain what the JQuery code does.When the user clicks on the link, I store in a variable the current font size of the <p> element that I get back from the CSS function. var getfont = $('p').css('font-size'); So now we have the original value. That will return a value like "16px" "1.2em".Then I need to get the unit of measurement (px,em).I use the slice() function. var newmwasure = getfont.slice(-2); Then I want to get only the numeric part of the returning value.I do that using the parseFloat() function.Have a look at the parseFloat() function.Finally with this bit of code I choose a ratio (I am devising a very simple algorithm for increasing and decreasing) and apply it to the <p> element. I still use the CSS function. You can get but also set the font size for a particular element with the CSS function.So I check for the id=increase and if this matches I will increase the font size of the <p> element.If it does not match we will decrease the font size.   $('p').css('font-size', mynum / 1.2 + newmwasure);                if(this.id == 'increase') {            $('p').css('font-size', mynum * 1.4 + newmwasure);  The code for the css file (style.css) followsbody{background-color:#eaeaea;}p{font-size:0.8em;font-family:Tahoma;}#resize{width:200px;background-color:#dadada;}#resize a {text-decoration:none;}The above CSS rules are very easy to understand. Now I save all my work.I view my page on the browser for the first time.Have a look at the picture below Now I increase the font size by clicking the respective linkHave a look at the picture below  Finally I decrease the font size by clicking on the respective linkHave a look at the picture below   Once more we see that the power and simplicity of JQuery library enables us to write less code but accomplish a lot at the same time. Hope it helps!!  

    Read the article

  • Using JQuery tabs in an HTML 5 page

    - by nikolaosk
    In this post I will show you how to create a simple tabbed interface using JQuery,HTML 5 and CSS.Make sure you have downloaded the latest version of JQuery (minified version) from http://jquery.com/download.Please find here all my posts regarding JQuery.Also have a look at my posts regarding HTML 5.In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.Another excellent resource is HTML 5 Doctor.Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. Let me move on to the actual example.This is the sample HTML 5 page<!DOCTYPE html><html lang="en">  <head>    <title>Liverpool Legends</title>    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >    <link rel="stylesheet" type="text/css" href="style.css">    <script type="text/javascript" src="jquery-1.8.2.min.js"> </script>     <script type="text/javascript" src="tabs.js"></script>       </head>  <body>    <header>        <h1>Liverpool Legends</h1>    </header>     <section id="tabs">        <ul>            <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#first-tab">Defenders</a></li>            <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#second-tab">Midfielders</a></li>            <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#third-tab">Strikers</a></li>        </ul>   <div id="first-tab">     <h3>Liverpool Defenders</h3>     <p> The best defenders that played for Liverpool are Jamie Carragher, Sami Hyypia , Ron Yeats and Alan Hansen.</p>   </div>   <div id="second-tab">     <h3>Liverpool Midfielders</h3>     <p> The best midfielders that played for Liverpool are Kenny Dalglish, John Barnes,Ian Callaghan,Steven Gerrard and Jan Molby.        </p>   </div>   <div id="third-tab">     <h3>Liverpool Strikers</h3>     <p>The best strikers that played for Liverpool are Ian Rush,Roger Hunt,Robbie Fowler and Fernando Torres.<br/>      </p>   </div> </div></section>            <footer>        <p>All Rights Reserved</p>      </footer>     </body>  </html>  This is very simple HTML markup. I have styled this markup using CSS.The contents of the style.css file follow* {    margin: 0;    padding: 0;}header{font-family:Tahoma;font-size:1.3em;color:#505050;text-align:center;}#tabs {    font-size: 0.9em;    margin: 20px 0;}#tabs ul {    float: left;    background: #777;    width: 260px;    padding-top: 24px;}#tabs li {    margin-left: 8px;    list-style: none;}* html #tabs li {    display: inline;}#tabs li, #tabs li a {    float: left;}#tabs ul li.active {    border-top:2px red solid;    background: #15ADFF;}#tabs ul li.active a {    color: #333333;}#tabs div {    background: #15ADFF;    clear: both;    padding: 15px;    min-height: 200px;}#tabs div h3 {    margin-bottom: 12px;}#tabs div p {    line-height: 26px;}#tabs ul li a {    text-decoration: none;    padding: 8px;    color:#0b2f20;    font-weight: bold;}footer{background-color:#999;width:100%;text-align:center;font-size:1.1em;color:#002233;}There are some CSS rules that style the various elements in the HTML 5 file. These are straight-forward rules. The JQuery code lives inside the tabs.js file $(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;});}); I am using some of the most commonly used JQuery functions like hide , show, addclass , removeClass I hide and show the tabs when the tab becomes the active tab. When I view my page I get the following result Hope it helps!!!!!

    Read the article

  • Looking into the JQuery Image Zoom Plugin

    - by nikolaosk
    I have been using JQuery for a couple of years now and it has helped me to solve many problems on the client side of web development.  You can find all my posts about JQuery in this link. In this post I will be providing you with a hands-on example on the JQuery Image Zoom Plugin.If you want you can have a look at this post, where I describe the JQuery Cycle Plugin.You can find another post of mine talking about the JQuery Carousel Lite Plugin here.I will be writing more posts regarding the most commonly used JQuery Plugins. I have been using extensively this plugin in my websites.You can use this plugin to move mouse around an image and see a zoomed in version of a portion of it. In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like. You can use Visual Studio 2012 Express edition. You can download it here.  You can download this plugin from this link I launch Expression Web 4.0 and then I type the following HTML markup (I am using HTML 5) <html lang="en">  <head>    <title>Liverpool Legends</title>        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >        <link rel="stylesheet" type="text/css" href="style.css">        <script type="text/javascript" src="jquery-1.8.3.min.js"> </script>     <script type="text/javascript" src="jqzoom.pack.1.0.1.js"></script>        <script type="text/javascript">        $(function () {            $(".nicezoom").jqzoom();        });    </script>       </head>  <body>    <header>        <h1>Liverpool Legends</h1>    </header>        <div id="main">            <a href="championsofeurope-large.jpg" class="nicezoom" title="Champions">        <img src="championsofeurope.jpg"  title="Champions">    </a>          </div>            <footer>        <p>All Rights Reserved</p>      </footer>     </body>  </html>   This is a very simple markup. I have added one large and one small image (make sure you use your own when trying this example) I have added references to the JQuery library (current version is 1.8.3) and the JQuery Image Zoom Plugin. Then I add 2 images in the main div element.Note the class nicezoom inside the href element. The Javascript code that makes it all happen follows.    <script type="text/javascript">        $(function () {            $(".nicezoom").jqzoom();        });    </script>     It couldn't be any simpler than that. I view my simple in Internet Explorer 10 and it works as expected. I have tested this simple solution in all major browsers and it works fine.Inside the head section we can add another Javascript script utilising some more options regarding the zoom plugin.   <script type="text/javascript">            $(function () {        var options = {                  zoomType: 'standard',                  lens:true,                  preloadImages: true,                  alwaysOn:false,                  zoomWidth: 400,                  zoomHeight: 350,                  xOffset:190,                  yOffset:80,                  position:'right'                          };          $('.nicezoom').jqzoom(options);      });         </script> I would like to explain briefly what some of those options mean. zoomType - Other admitted option values are 'reverse','drag','innerzoom' zoomWidth - The popup window width showing the zoomed area zoomHeight - The popup window height showing the zoomed area xOffset - The popup window x offset from the small image.  yOffset - The popup window y offset from the small image.  position - The popup window position.Admitted values:'right' ,'left' ,'top' ,'bottom' preloadImages - if set to true,jqzoom will preload large images. You can test it yourself and see the results in your favorite browser. Hope it helps!!!

    Read the article

  • Sorting the columns of an HTML table using JQuery

    - by nikolaosk
    In this post I will show you how easy is to sort the columns of an HTML table. I will use an external library,called Tablesorter which makes life so much easier for developers. ?here are other posts in my blog regarding JQuery.You can find them all here. You can find another post regarding HTML tables and JQuery here. We will demonstrate this with a step by step example. I will use Visual Studio 2012 Ultimate. You can also use Visual Studio 2012 Express Edition. You can also use VS 2010 editions.   1) Launch Visual Studio. Create an ASP.Net Empty Web application. Choose an appropriate name for your application. 2) Add a web form, default.aspx page to the application. 3) Add a table from the HTML controls tab control (from the Toolbox) on the default.aspx page 4) Now we need to download the JQuery library. Please visit the http://jquery.com/ and download the minified version.Then we need to download the Tablesorter JQuery plugin. Please donwload it, here. 5) We need to reference the JQuery library and the external JQuery Plugin. In the head section ? add the following lines.   <script src="jquery-1_8_2_min.js" type="text/javascript"></script>  <script src="jquery.tablesorter.js" type="text/javascript"></script>6) We need to type the HTML markup, the HTML table and its columns <body>    <form id="form1" runat="server">    <div>        <h1>Liverpool Legends</h1>        <table style="width: 50%;" border="1" cellpadding="10" cellspacing ="10" class="liverpool">            <thead>                <tr><th>Defenders</th><th>MidFielders</th><th>Strikers</th></tr>            </thead>            <tbody>            <tr>                <td>Alan Hansen</td>                <td>Graeme Souness</td>                <td>Ian Rush</td>            </tr>            <tr>                <td>Alan Kennedy</td>                <td>Steven Gerrard</td>                <td>Michael Owen</td>            </tr>            <tr>                <td>Jamie Garragher</td>                <td>Kenny Dalglish</td>                <td>Robbie Fowler</td>            </tr>            <tr>                <td>Rob Jones</td>                <td>Xabi Alonso</td>                <td>Dirk Kuyt</td>            </tr>                </tbody>        </table>            </div>    </form></body> 7) Inside the head section we also write the simple JQuery code.   <script type="text/javascript"> $(document).ready(function() { $('.liverpool').tablesorter(); }); </script> 8) Run your application.This is how the HTML table looks before the table is sorted on the basis of the selected column.   9) Now I will click on the Midfielders header.Have a look at the picture below  Tablesorter is an excellent JQuery plugin that makes sorting HTML tables a piece of cake. Hope it helps!!!

    Read the article

  • Looking into the JQuery Carousel Lite Plugin

    - by nikolaosk
    I have been using JQuery for a couple of years now and it has helped me to solve many problems on the client side of web development. You can find all my posts about JQuery in this link. In this post I will be providing you with a hands-on example on the JQuery Carousel Lite Plugin.If you want you can have a look at this post, where I describe the JQuery Cycle Plugin. I will be writing more posts regarding the most commonly used JQuery Plugins. I have been using extensively this plugin in my websites.You can show a portion of a set of images with previous and next navigation.In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. You can download this plugin from this linkI launch Expression Web 4.0 and then I type the following HTML markup (I am using HTML 5)<html lang="en">  <head>    <title>Liverpool Legends</title>        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >        <link rel="stylesheet" type="text/css" href="style.css">        <script type="text/javascript" src="jquery-1.8.3.min.js"> </script>     <script type="text/javascript" src="jcarousellite_1.0.1.min.js"></script>      <script type="text/javascript">        $(function () {            $(".theImages").jCarouselLite({                btnNext: "#Nextbtn",                btnPrev: "#Previousbtn"            });        });    </script>       </head>  <body>    <header>        <h1>Liverpool Legends</h1>    </header>        <div id="main">           <img id="Previousbtn" src="previous.png" />        <div class="theImages">            <ul>                <li><img src="championsofeurope.jpg"></li>                <li><img src="steven_gerrard.jpg"></li>                <li><img src="ynwa.jpg"></li>                <li><img src="dalglish.jpg"></li>                <li><img src="Souness.jpg"></li>                  </ul>    </div>    <img id="Nextbtn" src="next.png" />          </div>            <footer>        <p>All Rights Reserved</p>      </footer>     </body>  </html>  This is a very simple markup. I have added my photos (make sure you use your own when trying this example)I have added references to the JQuery library (current version is 1.8.3) and the JQuery Carousel Lite Plugin. Then I add 5 images in the theImages div element.The Javascript code that makes it all happen follows.  <script type="text/javascript">        $(function () {            $(".theImages").jCarouselLite({                btnNext: "#Nextbtn",                btnPrev: "#Previousbtn"            });        });    </script>I also have added some basic CSS style rules in the style.css file. body{background-color:#efefef;color:#791d22;}       #Previousbtn{position:absolute; left:5px; top:100px;}#Nextbtn {position:absolute; left:812px; top:100px;}.theImages {margin-left:145px;margin-top:10px;} It couldn't be any simpler than that. I view my simple in Internet Explorer 10 and it works as expected.I have tested this simple solution in all major browsers and it works fine.Hope it helps!!!

    Read the article

  • Looking into the JQuery Cycle Plugin

    - by nikolaosk
    I have been using JQuery for a couple of years now and it has helped me to solve many problems on the client. You can find all my posts about JQuery in this link. In this post I will be providing you with a hands-on example on the JQuery Cycle Plugin.I have been using extensively this plugin in my websites.You can rotate a series of images using various transitions with this plugin.It is a slideshow type of experience. I will be writing more posts regarding the most commonly used JQuery Plugins.  In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.  You can download this plugin from this link I launch Expression Web 4.0 and then I type the following HTML markup (I am using HTML 5) <!DOCTYPE html><html lang="en">  <head>    <title>Liverpool Legends</title>        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >            <script type="text/javascript" src="jquery-1.8.3.min.js"> </script>     <script type="text/javascript" src="jquery.cycle.all.js"></script>              <script type="text/javascript">        $(function() {            $('#main').cycle({ fx: 'fade'});        });    </script>       </head>  <body>    <header>        <h1>Liverpool Legends</h1>    </header>        <div id="main">                   <img src="championsofeurope.jpg" alt="Champions of Europe">                        <img src="steven_gerrard.jpg" alt="Steven Gerrard">                        <img src="ynwa.jpg" alt="You will never walk alone">                       </div>            <footer>        <p>All Rights Reserved</p>      </footer>     </body>  </html> This is a very simple markup. I have added three photos (make sure you use your own when trying this example)I have added references to the JQuery library (current version is 1.8.3) and the JQuery Cycle Plugin. Then I have added 3 images in the main div element.The Javascript code that makes it all happen follows.  <script type="text/javascript">        $(function() {            $('#main').cycle({ fx: 'fade'});        });    </script>  It couldn't be any simpler than that. I view my simple in Internet Explorer 10 and it works as expected. I have this series of images transitioning one after the other using the "fade" effect. I have tested this simple solution in all major browsers and it works fine.We can have a different transition effect by changing the JS code. Have a look at the code below       <script type="text/javascript">        $(function() {            $('#main').cycle({                     fx: 'cover',        speed: 500,        timeout: 2000                        });        });    </script>   We set the speed to 500 milliseconds, that is the speed we want to have for the ‘cover’ transition.The timeout is set to two seconds which is the time the photo will show until the next transition will take place.We can customise this plugin further but this is a short introduction to the plugin.Hope it helps!!!

    Read the article

  • Smooth animation on a persistently refreshing canvas

    - by Neurofluxation
    Yo everyone! I have been working on an Isometric Tile Game Engine in HTML5/Canvas for a little while now and I have a complete working game. Earlier today I looked back over my code and thought: "hmm, let's try to get this animated smoothly..." And since then, that is all I have tried to do. The problem I would like the character to actually "slide" from tile to tile - but the canvas redrawing doesn't allow this - does anyone have any ideas....? Code and fiddle below... Fiddle with it! http://jsfiddle.net/neuroflux/n7VAu/ <html> <head> <title>tileEngine - Isometric</title> <style type="text/css"> * { margin: 0px; padding: 0px; font-family: arial, helvetica, sans-serif; font-size: 12px; cursor: default; } </style> <script type="text/javascript"> var map = Array( //land [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]] ); var tileDict = Array("http://www.wikiword.co.uk/release-candidate/canvas/tileEngine/land.png"); var charDict = Array("http://www.wikiword.co.uk/release-candidate/canvas/tileEngine/mario.png"); var objectDict = Array("http://www.wikiword.co.uk/release-candidate/canvas/tileEngine/rock.png"); //last is one more var objectImg = new Array(); var charImg = new Array(); var tileImg = new Array(); var loaded = 0; var loadTimer; var ymouse; var xmouse; var eventUpdate = 0; var playerX = 0; var playerY = 0; function loadImg(){ //preload images and calculate the total loading time for(var i=0;i<tileDict.length;i++){ tileImg[i] = new Image(); tileImg[i].src = tileDict[i]; tileImg[i].onload = function(){ loaded++; } } i = 0; for(var i=0;i<charDict.length;i++){ charImg[i] = new Image(); charImg[i].src = charDict[i]; charImg[i].onload = function(){ loaded++; } } i = 0; for(var i=0;i<objectDict.length;i++){ objectImg[i] = new Image(); objectImg[i].src = objectDict[i]; objectImg[i].onload = function(){ loaded++; } } } function checkKeycode(event) { //key pressed var keycode; if(event == null) { keyCode = window.event.keyCode; } else { keyCode = event.keyCode; } switch(keyCode) { case 38: //left if(!map[playerX-1][playerY][1] > 0){ playerX--; } break; case 40: //right if(!map[playerX+1][playerY][1] > 0){ playerX++; } break; case 39: //up if(!map[playerX][playerY-1][1] > 0){ playerY--; } break; case 37: //down if(!map[playerX][playerY+1][1] > 0){ playerY++; } break; default: break; } } function loadAll(){ //load the game if(loaded == tileDict.length + charDict.length + objectDict.length){ clearInterval(loadTimer); loadTimer = setInterval(gameUpdate,100); } } function drawMap(){ //draw the map (in intervals) var tileH = 25; var tileW = 50; mapX = 80; mapY = 10; for(i=0;i<map.length;i++){ for(j=0;j<map[i].length;j++){ var drawTile= map[i][j][0]; var xpos = (i-j)*tileH + mapX*4.5; var ypos = (i+j)*tileH/2+ mapY*3.0; ctx.drawImage(tileImg[drawTile],xpos,ypos); if(i == playerX && j == playerY){ you = ctx.drawImage(charImg[0],xpos,ypos-(charImg[0].height/2)); } } } } function init(){ //initialise the main functions and even handlers ctx = document.getElementById('main').getContext('2d'); loadImg(); loadTimer = setInterval(loadAll,10); document.onkeydown = checkKeycode; } function gameUpdate() { //update the game, clear canvas etc ctx.clearRect(0,0,904,460); ctx.fillStyle = "rgba(255, 255, 255, 1.0)"; //assign color drawMap(); } </script> </head> <body align="center" style="text-align: center;" onload="init()"> <canvas id="main" width="904" height="465"> <h1 style="color: white; font-size: 24px;">I'll be damned, there be no HTML5 &amp; canvas support on this 'ere electronic machine!<sub>This game, jus' plain ol' won't work!</sub></h1> </canvas> </body> </html>

    Read the article

  • Building an ASP.Net 4.5 Web forms application - part 5

    - by nikolaosk
    ?his is the fifth post in a series of posts on how to design and implement an ASP.Net 4.5 Web Forms store that sells posters on line. There are 4 more posts in this series of posts.Please make sure you read them first.You can find the first post here. You can find the second post here. You can find the third post here.You can find the fourth here.  In this new post we will build on the previous posts and we will demonstrate how to display the details of a poster when the user clicks on an individual poster photo/link. We will add a FormView control on a web form and will bind data from the database. FormView is a great web server control for displaying the details of a single record. 1) Launch Visual Studio and open your solution where your project lives2) Add a new web form item on the project.Make sure you include the Master Page.Name it PosterDetails.aspx 3) Open the PosterDetails.aspx page. We will add some markup in this page. Have a look at the code below <asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">    <asp:FormView ID="posterDetails" runat="server" ItemType="PostersOnLine.DAL.Poster" SelectMethod ="GetPosterDetails">        <ItemTemplate>            <div>                <h1><%#:Item.PosterName %></h1>            </div>            <br />            <table>                <tr>                    <td>                        <img src="<%#:Item.PosterImgpath %>" border="1" alt="<%#:Item.PosterName %>" height="300" />                    </td>                    <td style="vertical-align: top">                        <b>Description:</b><br /><%#:Item.PosterDescription %>                        <br />                        <span><b>Price:</b>&nbsp;<%#: String.Format("{0:c}", Item.PosterPrice) %></span>                        <br />                        <span><b>Poster Number:</b>&nbsp;<%#:Item.PosterID %></span>                        <br />                    </td>                </tr>            </table>        </ItemTemplate>    </asp:FormView></asp:Content> I set the ItemType property to the Poster entity class and the SelectMethod to the GetPosterDetails method.The Item binding expression is available and we can retrieve properties of the Poster object.I retrieve the name, the image,the description and the price of each poster. 4) Now we need to write the GetPosterDetails method.In the code behind of the PosterDetails.aspx page we type public IQueryable<Poster> GetPosterDetails([QueryString("PosterID")]int? posterid)        {                    PosterContext ctx = new PosterContext();            IQueryable<Poster> query = ctx.Posters;            if (posterid.HasValue && posterid > 0)            {                query = query.Where(p => p.PosterID == posterid);            }            else            {                query = null;            }            return query;        } I bind the value from the query string to the posterid parameter at run time.This is all possible due to the QueryStringAttribute class that lives inside the System.Web.ModelBinding and gets the value of the query string variable PosterID.If there is a matching poster it is fetched from the database.If not,there is no data at all coming back from the database. 5) I run my application and then click on the "Midfielders" link.Then click on the first poster that appears from the left (Kenny Dalglish) and click on it to see the details. Have a look at the picture below to see the results.   You can see that now I have all the details of the poster in a new page.?ake sure you place breakpoints in the code so you can see what is really going on. Hope it helps!!!

    Read the article

  • Suckerfish Menu Not Working. Nested UL not displaying block

    - by Brett
    I'm going out of my mind with this one. I'm trying to build a suckerfish css drop down menu. I have the first level working ok but I can't get the nested ul (under the Glossary tab) to display in block format and show my a background color. I've been at this for three days and I'm about to go crazy. If anyone can help I'd really appreciate it. You can see it here: www.brettlockhart.com/blast/ body { min-width:640px; margin:0px; padding:0px 40px 0px 40px; background-color:#eee; } /*Nav One styles*/ nav#navOne ul { width:100%; min-width:640px; height:25px; margin:0px auto; padding:0px; background-image:url(/blast/images/navOneBg.png); border-radius:0px 0px 8px 8px; text-align:right; float:right; } nav#navOne ul li { position:relative; display:inline; margin: 0px 0px 0px 10px auto; padding:3px 0px; border-left:1px #0b4c8f solid; line-height:23px; } nav#navOne ul li:last-child { margin-right:10px; } .arrowDown { margin: auto; font-family:Tahoma, Geneva, sans-serif; font-size:.7em; color:#FFF; padding: 0px 5px 0px 0px; } nav#navOne ul li a { margin: 0px auto; padding: 4px 10px 4px 15px; font-family:Tahoma, Geneva, sans-serif; font-size:.7em; color:#FFF; border-left:1px #5d9ee0 solid; text-decoration:none; line-height:23px; } /*Nav One rollover*/ nav#navOne ul li ul { display:none; background-image:none; } nav#navOne ul li:hover ul { display:block !important; } nav#navOne ul li:hover nav#navOne ul li ul li { background-color:#69C !important; left:0px; top:26px; z-index:10; } h1 { float:left; width:158px; text-indent:-9999px; background-image:url(/blast/images/logo.png); background-repeat:no-repeat; } #search { float:right; width:280px; margin:0px; padding:0px; } /*Nav Two styles*/ nav#navTwo h3 { display:inline; } nav#navTwo ul { width:100%; height:50px; margin:0 auto; padding:0px; border:1px solid red; clear:both; } nav#navTwo ul li { display:inline; border: 1px solid green; margin-top:20px; } <header> <nav id="navOne"> <ul> <li><a href="#">Sign In</a></li> <li><a href="#">Register</a></li> <li><a href="#">Print Page</a></li> <li id="glossary"><a href="#">Glossary</a> <ul> <li><a href="#">Item Placeholder</a></li> <li><a href="#">Item Placeholder</a></li> <li><a href="#">Item Placeholder</a></li> <li><a href="#">Item Placeholder</a></li> <li><a href="#">Item Placeholder</a></li> <li><a href="#">Item Placeholder</a></li> </ul> </li> <li><a href="#">Text Size: A A A</a></li> <li><a href="#">Select Your Location</a> <span class="arrowDown">&#x2C5;</span></li> </ul> </nav><!--/navOne--> <h1>Logo</h1> <div id="search"> <form action="?" method="get"> <fieldset> <input type="text" id="searchField"> <input type="submit" id="searchSubmit" value="Submit"> Search:<label for="radioHere">here</label> <input type="radio" id="radioHere" name="here" value="here"> <label for="radioWeb">the web</label> <input type="radio" id="radioWeb" name="the web" value="the web"> </fieldset> </form> </div><!--/search--> <nav id="navTwo"> <ul> <li><h3>Residential:</h3></li> <li>TV</li> <li>Internet</li> <li>Phone</li> <li>Pricing</li> <li class="navTwoSelected">Music</li> <li>Order</li> <li>Billing</li> <li>Support</li> <li>|</li> <li>Business</li> <li>About Us</li> </ul> </nav><!--/navTwo--> <nav id="navThree"> <ul> <li>Today</li> <li>Watch</li> <li>Surf</li> <li>Play</li> <li class="navThreeSelected">Listen</li> <li>Learn</li> <li>Local</li> </ul> <h3>Tools:</h3> <ul> <li>Webmail</li> <li>Account</li> <li>Billing</li> <li>Order Services</li> </ul> </nav><!--/navThree--> <nav id="navFour"> <h3>Your are here:</h3> <ul id="breadcrumbs"> <li>Residential ></li> <li>My Place ></li> <li>Listen ></li> <li class="currentPage">Music</li> </ul> </nav><!--/navFour--> </header>

    Read the article

  • background image not showing in html

    - by Registered User
    I am having following css <!DOCTYPE html > <html> <head> <meta charset="utf-8"> <title>Black Goose Bistro Summer Menu</title> <link href='http://fonts.googleapis.com/css?family=Marko+One' rel='stylesheet' type='text/css'> <style> body { font-family: Georgia, serif; font-size: 100%; line-height: 175%; margin: 0 15% 0; background-image:url(images/bullseye.png); } #header { margin-top: 0; padding: 3em 1em 2em 1em; text-align: center; } a { text-decoration: none; } h1 { font: bold 1.5em Georgia, serif; text-shadow: .1em .1em .2em gray; } h2 { font-size: 1em; text-transform: uppercase; letter-spacing: .5em; text-align: center; } dt { font-weight: bold; } strong { font-style: italic; } ul { list-style-type: none; margin: 0; padding: 0; } #info p { font-style: italic; } .price { font-family: Georgia, serif; font-style: italic; } p.warning, sup { font-size: small; } .label { font-weight: bold; font-variant: small-caps; font-style: normal; } h2 + p { text-align: center; font-style: italic; } ); </style> </head> <body> <div id="header"> <h1>Black Goose Bistro &bull; Summer Menu</h1> <div id="info"> <p>Baker's Corner, Seekonk, Massachusetts<br> <span class="label">Hours: Monday through Thursday:</span> 11 to 9, <span class="label">Friday and Saturday;</span> 11 to midnight</p> <ul> <li><a href="#appetizers">Appetizers</a></li> <li><a href="#entrees">Main Courses</a></li> <li><a href="#toast">Traditional Toasts</a></li> <li><a href="#dessert">Dessert Selection</a></li> </ul> </div> </div> <div id="appetizers"> <h2>Appetizers</h2> <p>This season, we explore the spicy flavors of the southwest in our appetizer collection.</p> <dl> <dt>Black bean purses</dt> <dd>Spicy black bean and a blend of mexican cheeses wrapped in sheets of phyllo and baked until golden. <span class="price">$3.95</span></dd> <dt class="newitem">Southwestern napoleons with lump crab &mdash; <strong>new item!</strong></dt> <dd>Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. <span class="price">$7.95</span></dd> </dl> </div> <div id="entrees"> <h2>Main courses</h2> <p>Big, bold flavors are the name of the game this summer. Allow us to assist you with finding the perfect wine.</p> <dl> <dt class="newitem">Jerk rotisserie chicken with fried plantains &mdash; <strong>new item!</strong></dt> <dd>Tender chicken slow-roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served with fried plantains and fresh mango. <strong>Very spicy.</strong> <span class="price">$12.95</span></dd> <dt>Shrimp sate kebabs with peanut sauce</dt> <dd>Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection. Served with spicy peanut sauce and jasmine rice. <span class="price">$12.95</span></dd> <dt>Grilled skirt steak with mushroom fricasee</dt> <dd>Flavorful skirt steak marinated in asian flavors grilled as you like it<sup>*</sup>. Served over a blend of sauteed wild mushrooms with a side of blue cheese mashed potatoes. <span class="price">$16.95</span></dd> </dl> </div> <div id="toast"> <h2>Traditional Toasts</h2> <p>The ultimate comfort food, our traditional toast recipes are adapted from <a href="http://www.gutenberg.org/files/13923/13923-h/13923-h.htm"><cite>The Whitehouse Cookbook</cite></a> published in 1887.</p> <dl> <dt>Cream toast</dt> <dd>Simple cream sauce over highest quality toasted bread, baked daily. <span class="price">$3.95</span></dd> <dt>Mushroom toast</dt> <dd>Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. <span class="price">$6.95</span></dd> <dt>Nun's toast</dt> <dd>Onions and hard-boiled eggs in a cream sauce over buttered hot toast. <span class="price">$6.95</span></dd> <dt>Apple toast</dt> <dd>Sweet, cinnamon stewed apples over delicious buttery grilled bread. <span class="price">$6.95</span></dd> </dl> </div> <div id="dessert"> <h2>Dessert Selection</h2> <p>Be sure to save room for our desserts, made daily by our own <a href="http://www.jwu.edu/college.aspx?id=19510">Johnson & Wales</a> trained pastry chef.</p> <dl> <dt class="newitem">Lemon chiffon cake &mdash; <strong>new item!</strong></dt> <dd>Light and citrus flavored sponge cake with buttercream frosting as light as a cloud. <span class="price">$2.95</span></dd> <dt class="newitem">Molten chocolate cake</dt> <dd>Bubba's special dark chocolate cake with a warm, molten center. Served with or without a splash of almond liqueur. <span class="price">$3.95</span></dd> </dl> </div> <p class="warning"><sup>*</sup> We are required to warn you that undercooked food is a health risk.</p> </body> </html> but the background image does not appear in body tag you can see background-image:url(images/bullseye.png); this html page is bistro.html and the directory in which it is contained there is a folder images and inside images folder I have a file bullseye.png .I expect the png to appear in background.But that does not happen. For sake of question I am posting the image here also Let me know if the syntax of css wrong? following is image http://i.stack.imgur.com/YUKgg.png

    Read the article

  • Modify MDT wizard to automate computer naming

    - by Jeramy
    I originally posted this question to StackOverflow, but upon further consideration it might be more appropriate here. Situation: I am imaging new systems using MDT Lite-Touch. I am trying to customize the wizard to automate the naming of new systems so that they include a prefix "AG-", a department code which is selected from a drop-down box in the wizard page (eg. "COMM"), and finally the serial number of the computer being imaged, so that my result in this case would be "AG-COMM-1234567890" Status: I have banged away at this for a while but my Google searches have not turned up answers, my trial-and-error is not producing useful error messages and I think I am missing some fundamentals of how to get variables from the wizard page into the variables used by the lite-touch wizard. Progress: I first created the HTML page which I will include below and added a script to the page to concatenate the pieces into a variable called OSDComputername which, for testing, I could output in a msgbox and get to display correctly. The problem with this is I don't know how to trigger the script then assign it to the OSDComputername variable that is used throughout the rest of the Light-Touch process. I changed the script to a function and added it to DeployWiz_Initization.vbs then used the Initialization field in WDS to call it. I'll include the function below. The problem with this is I would get "Undefined Variable" for OSDComputername and I am not sure it is pulling the data from the HTML correctly. I tried adding the scripting into the customsettings.ini file after the "OSDComputername=" This resulted in the wizard just outputting my code in text as the computer name. I am now trying adding variables to "Properties=" (eg.DepartmentName) in the customsettings.ini, pulling thier value from the HTML Form and setting that value to the variable in my function in DeployWiz_Initization.vbs and calling them after "OSDComputername=" in the fashion "OSDComputername="AG-" & %DepartmentName%" in customsettings.ini I am rebuilding right now and will see how this goes Any help would be appreciated. The HTML page: <HTML> <H1>Configure the computer name.</H1> <span style="width: 95%;"> <p>Please answer the following questions. Your answers will be used to formulate the computer's name and description.</p> <FORM NAME="TestForm"> <p>Departmental Prefix: <!-- <label class=ErrMsg id=DepartmentalPrefix_Err>* Required (MISSING)</label> --> <SELECT NAME="DepartmentalPrefix_Edit" class=WideEdit> <option value="AADC">AADC</option> <option value="AEM">AEM</option> <option value="AIP">AIP</option> <option value="COM">COM</option> <option value="DO">DO</option> <option value="DSOC">DSOC</option> <option value="EDU">EDU</option> <option value="EPE">EPE</option> <option value="ITN">ITN</option> <option value="LA">LA</option> <option value="OAP">OAP</option> <option value="SML">SML</option> </SELECT> </p> <p><span class="Larger">Client's Net<u class=larger>I</u>D:</span> <INPUT NAME="ClientNetID" TYPE="TEXT" ID="ClientNetID" SIZE="15"></p> <p>Building: <!-- <label class=ErrMsg id=Building_Err>* Required (MISSING)</label> --> <SELECT NAME="Building_Edit" class=WideEdit> <option value="Academic Surge Facility A">Academic Surge Facility A</option> <option value="Academic Surge Facility B">Academic Surge Facility B</option> <option value="Caldwell">Caldwell</option> <option value="Kennedy">Kennedy</option> <option value="Roberts">Roberts</option> <option value="Warren">Warren</option> </SELECT> </p> <p> <span class="Larger">Room <u class=larger>N</u>umber:</span> <input type=text id="RoomNumber" name=RoomNumber size=15 /> </p> </FORM> </span> </HTML> The Function: Function SetComputerName OSDComputerName = "AG-" & oEnvironment.Item("DepartmentalPrefix_Edit") ComputerDescription = oEnvironment.Item("DepartmentalPrefix_Edit") & ", " & oEnvironment.Item("ClientNetID") & ", " & oEnvironment.Item("RoomNumber") & " " & oEnvironment.Item("Building_Edit") End Function

    Read the article

  • "(401)Authorization Required" when making a web service call using Axis

    - by Arun P Johny
    Hi, I'm using apache axis to connect to my sugar crm instance. When I'm trying to connect to the instance it is throwing the following exception Exception in thread "main" AxisFault faultCode: {http://xml.apache.org/axis/}HTTP faultSubcode: faultString: (401)Authorization Required faultActor: faultNode: faultDetail: {}:return code: 401 &lt;!DOCTYPE HTML PUBLIC &quot;-//IETF//DTD HTML 2.0//EN&quot;&gt; &lt;html&gt;&lt;head&gt; &lt;title&gt;401 Authorization Required&lt;/title&gt; &lt;/head&gt;&lt;body&gt; &lt;h1&gt;Authorization Required&lt;/h1&gt; &lt;p&gt;This server could not verify that you are authorized to access the document requested. Either you supplied the wrong credentials (e.g., bad password), or your browser doesn't understand how to supply the credentials required.&lt;/p&gt; &lt;/body&gt;&lt;/html&gt; {http://xml.apache.org/axis/}HttpErrorCode:401 (401)Authorization Required at org.apache.axis.transport.http.HTTPSender.readFromSocket(HTTPSender.java:744) at org.apache.axis.transport.http.HTTPSender.invoke(HTTPSender.java:144) at org.apache.axis.strategies.InvocationStrategy.visit(InvocationStrategy.java:32) at org.apache.axis.SimpleChain.doVisiting(SimpleChain.java:118) at org.apache.axis.SimpleChain.invoke(SimpleChain.java:83) at org.apache.axis.client.AxisClient.invoke(AxisClient.java:165) at org.apache.axis.client.Call.invokeEngine(Call.java:2784) at org.apache.axis.client.Call.invoke(Call.java:2767) at org.apache.axis.client.Call.invoke(Call.java:2443) at org.apache.axis.client.Call.invoke(Call.java:2366) at org.apache.axis.client.Call.invoke(Call.java:1812) at org.beanizer.sugarcrm.SugarsoapBindingStub.get_server_info(SugarsoapBindingStub.java:1115) at com.greytip.sugarcrm.GreytipCrm.main(GreytipCrm.java:42) This basically says that I do not have the authorization to the resource. The same code is working fine in my testing environment. Sugarsoap service = new SugarsoapLocator(); SugarsoapPortType port = service.getsugarsoapPort(new java.net.URL( SUGAR_CRM_LOCATION + "/soap.php")); System.out.println(port.get_server_info().getVersion()); User_auth userAuth = new User_auth(); userAuth.setUser_name("user_name"); MessageDigest md = MessageDigest.getInstance("MD5"); String password = getHexString(md.digest("password".getBytes())); userAuth.setPassword(password); // userAuth.setVersion("0.1"); Entry_value login = port.login(userAuth, "myAppName", null); String sessionID = login.getId(); Above code is used to connect to the Sugar CRM installation. here line "System.out.println(port.get_server_info().getVersion());" is throwing the exception. One difference I noticed between the test and production environment is when I used the soap url in the browser the production site pops up a 'Authentication Required' popup. When I gives my proxy username and password in this popup, it shows the soap request details. The same is applicable for the login url also. First it will ask for the 'Authentication' then it will take to the sugar crm login page? Is it a server security setting? If it is then how to set this user name and password using java in a web service call. The authentication required popup is same as the one which comes when we try to access the tomcat manager through a browser. Thanks

    Read the article

  • Installing Paperclip - "undefined method `has_attached_file` for" - Ruby on Rails

    - by bgadoci
    I just installed the plugin for Paperclip and I am getting an error message "undefined method has_attached_file for. Not sure why I am getting this. Here is the full error message. NoMethodError (undefined method `has_attached_file' for #<Class:0x10338acd0>): /Users/bgadoci/.gem/ruby/1.8/gems/will_paginate-2.3.12/lib/will_paginate/finder.rb:170:in `method_missing' app/models/post.rb:2 app/controllers/posts_controller.rb:50:in `show' For some reason it is referencing the will_paginate gem. From what I can find, it seems that either there is something wrong w/ my PostsController#index or perhaps a previously attempt at installing the gem instead of the plugin (in which case I have read I should be able to remedy through the /config/environments.rb file somehow). I didn't think that previous gem installation would matter as I did it in an old version of the site that I trashed before installing the plugin. In the current version of the site I show that the Table has been updated with the Paperclip columns after migration. Here is my code: PostsController#index def index @tag_counts = Tag.count(:group => :tag_name, :order => 'count_all DESC', :limit => 20) conditions, joins = {}, :votes @vote_counts = Vote.count(:group => :post_title, :order => 'count_all DESC', :limit => 20) conditions, joins = {}, :votes unless(params[:tag_name] || "").empty? conditions = ["tags.tag_name = ? ", params[:tag_name]] joins = [:tags, :votes] end @posts=Post.paginate( :select => "posts.*, count(*) as vote_total", :joins => joins, :conditions=> conditions, :group => "votes.post_id", :order => "created_at DESC", :page => params[:page], :per_page => 5) @popular_posts=Post.paginate( :select => "posts.*, count(*) as vote_total", :joins => joins, :conditions=> conditions, :group => "votes.post_id", :order => "vote_total DESC", :page => params[:page], :per_page => 3) respond_to do |format| format.html # index.html.erb format.xml { render :xml => @posts } format.json { render :json => @posts } format.atom end end Post Model class Post < ActiveRecord::Base has_attached_file :photo validates_presence_of :body, :title has_many :comments, :dependent => :destroy has_many :tags, :dependent => :destroy has_many :votes, :dependent => :destroy belongs_to :user after_create :self_vote def self_vote # I am assuming you have a user_id field in `posts` and `votes` table. self.votes.create(:user => self.user) end cattr_reader :per_page @@per_page = 10 end /views/posts/new.html.erb <h1>New post</h1> <%= link_to 'Back', posts_path %> <% form_for(@post, :html => { :multipart => true}) do |f| %> <%= f.error_messages %> <p> <%= f.label :title %><br /> <%= f.text_field :title %> </p> <p> <%= f.label :body %><br /> <%= f.text_area :body %> </p> <p> <%= f.file_field :photo %> </p> <p> <%= f.submit 'Create' %> </p> <% end %>

    Read the article

  • MVC 2 with IIS 6 Problems

    - by SlackerCoder
    Hey guys, I'm using IIS 6 on a Windows 2003 Server and I am trying to get an MVC2 project installed on that machine. I am having nightmare-ish problems doing so! I've looked up TONS of references on what to do, and not 1 single one works. (They work for MVC1 projects, as I have a few of those running already using said solutions). Does anyone have any tips/hints/ideas on what needs to be done for MVC2 projects with IIS 6? I am definitely pulling my hair out over this. I have tried it on 2 of my dev servers, and both get the same result. The closest I can get to a served page is an error page "Object reference not set to an instance of an object", however, the page has try/catch blocks that are being ignored, so I dont think its running the code on the controller, I think it's saying that the controller is the error. (For the reference, the error in question is directed at the HomeController.cs file). What I've tried: Wildcard mapping Changing routes to {controller}.mvc Changing routes to {controller}.aspx Adding the .mvc extension to IIS Modifying routes in Global.asax There's a LOT of code in this project so far, so I will only post the first page(s) that should get served: MASTER PAGE: <div class="page"> <div id="header"> <div id="title"> <h1>Meritain RedCard Interface 2.0</h1> </div> <!-- This is the main menu. Each security role will have access to certain buttons. --> <div id="menucontainer"> <% if (Session["UserData"] != null) { %> <% if (/*User Security Checks Out*/) { %> <ul id="menu"> <li><%= Html.ActionLink("Home", "Index", "Home")%></li> <li><%= Html.ActionLink("Selection", "Index", "Select", new { area = "Selector" }, null)%></li> <li><%= Html.ActionLink("Audit", "Index", "Audit", new { area = "Auditor" }, null)%></li> <li><%= Html.ActionLink("Setup", "Index", "Setup", new { area = "Setup" }, null)%></li> <li><%= Html.ActionLink("About", "About", "Home")%></li> </ul> <% } %> <% } %> </div> </div> <div id="main"> <asp:ContentPlaceHolder ID="MainContent" runat="server" /> <div id="footer"> </div> </div> </div> Default.aspx.cs: [I added this file as a potential solution, since it works with MVC 1] protected void Page_Load(object sender, EventArgs e) { string originalPath = Request.Path; HttpContext.Current.RewritePath(Request.ApplicationPath, false); IHttpHandler httpHandler = new MvcHttpHandler(); httpHandler.ProcessRequest(HttpContext.Current); HttpContext.Current.RewritePath(originalPath, false); } HomeController.cs: public ActionResult Index() { loadApplication(); ViewData["Message"] = "Welcome to ASP.NET MVC!"; return View(); } public ActionResult About() { return View(); } private void loadApplication() { Session["UserData"] = CreateUserSecurity(HttpContext.User.Identity.Name.ToString()); } I did not list the CreateUserSecurity method, but all it does it call the DB using the Username and returns the record in the database that matches the username. EDIT: Added code and what I've tried so far (as requested).

    Read the article

  • IE6 iframe anchor links moves iframe up

    - by WastedSpace
    Hi, Having a real head scratching moment... I have a site where there is a footer div that always sits at the bottom of the screen (26px high), and above that I have an iFrame which sizes to 100% of the remaining height. This works well. Even clicking on anchor links inside the iframe works as it should in all browsers (apart from IE6). Unfortunately I still have to support IE6. What is happening in IE6 is that the footer jumps up the page with the iframe still above it when I click on an anchor link. The top part of the iframe is cut off. Even the iframe's scroll bars disappear under the top of the browser. I have created some screen shots to show you what I mean. I have blurred out the actual data for now. How it should look (and does look) in other browsers: http://img100.imageshack.us/i/screen1om.jpg/ How it looks in IE6 before clicking on an anchor link: http://img532.imageshack.us/i/screen2e.jpg/ (I had to make the iframe's height 95%, because if I set it to 100% height weirdly it wouldn't show anything...) How it looks in IE6 after clicking on an anchor link: http://img214.imageshack.us/i/screen3g.jpg/ It's hard for me to show the fool code I am using, as there are lots of other things going on (of which I'm confident doesn't affect the layout), so will try to summarise: The html code (simplified): <div id="ifra"><iframe src="home.php" frameborder="0" name="content_pane" id="content_pane" marginheight="10" marginwidth="10"></iframe></div> <h1 class="toolbar"><a id="footerlink">Site Name</a></h1> The CSS (simplified): html, body { overflow: hidden; } html, body, iframe { height: 100%; } body { padding: 0; margin: 0; } #ifra, iframe { position: absolute; width: 100%; left: 0; } #ifra { top: 0px; bottom: 26px; } iframe { border: 0 none; } .toolbar { height: 26px; background-color: #C2C7C9; position: fixed; bottom: 0; width: 100%; background-image: url(bg.png); background-repeat: repeat-x; background-position: left top; } IE8 specific CSS: #ifra, .toolbar { position: fixed; } IE7 specific CSS: html { padding: 0px; } #ifra, iframe { position: absolute; } #ifra { top: 0px; bottom: 26px; } * html body { padding /**/: 100px 0 50px 0; overflow-y /**/: hidden; } IE6 specific CSS: .toolbar { position: fixed; } * html { overflow-y: hidden; } * html body { overflow-y: auto; height: 100%; } * html .toolbar { position: absolute; } iframe { height: 95%; } #ifra { height: 100%; } I know it's not ideal not seeing the full code, but just wondering if there is anything jumping out at anyone from these lines of code? By the way I did consider dropping the div surrounding the iframe, but for some reason the scroll bars would disappear under the footer in all browsers... Thanks for looking! Ali.

    Read the article

< Previous Page | 26 27 28 29 30 31 32 33 34 35 36 37  | Next Page >