Search Results

Search found 215 results on 9 pages for 'thead'.

Page 5/9 | < Previous Page | 1 2 3 4 5 6 7 8 9  | Next Page >

  • checkbox update the record using jquery?

    - by python
    <? include("connect.php"); $sql="select * from sampledb"; $res=mysql_query($sql) or die("query failed"); ?> <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript"> function updateCheckVal() { var valcheck = []; $('#checkbox :checked').each(function() { valcheck.push($(this).val()); }); $('#store_checkbox').val(valcheck) } $(function() { $('#checkbox input').click(updateCheckVal); updateCheckVal(); }); $(function(){ $("a.modify").click(function(){ var val = []; $(':checkbox:checked').each(function(i){ val[i] = $(this).val(); }); $("#deleted_id").val(val); page=$(this).attr("href"); $("#Formcontent").html("loading...").load(page); return false; }); }); </script <form name=""> <table width="100%" border="1" cellpadding="1" cellspacing="1"> <thead> <tr bgcolor="#CCCCCC"> <th></th> <th>ID</th> <th>Fullname</th> </tr> </thead> <tbody> <? while($row=mysql_fetch_assoc($res)){?> <tr> <td id="checkbox"><input type="checkbox" name="chk[]" class="chk" value=<?php echo $row["student_id"];?> ></td> <td><?php echo $row["id"];?></td> <td><?php echo $row["fullname"];?></td> </tr> <? }?> </tbody> </table> <input type="hidden" name="store_checkbox" id="store_checkbox" value=""> <a href="formstudent.php?action=update&id=<?php echo $_POST["store_checkbox"]; ?>" class="modify">modify</a> I want to pass the checkbox value that is checked in something like this: example :formstudent.php?action=update&id=1, I am doing here is pass like this but does not work. <a href="formstudent.php?action=update&id=<?php echo $_POST["store_checkbox"]; ?>" Anybody know how to do this?

    Read the article

  • Matching array elements to get an array element at another index

    - by bccarlso
    I have a PHP array that I'm using to generate an HTML form. The PHP array is this: <?php $vdb = array ( array( "Alabama", 275), array( "Alaska", 197), array( "Arizona", 3322)); ?> The PHP to generate the HTML form is below. I need to have the value be the name of the state, because there is some AJAX I'm using to display which states a user has chosen. <?php echo "<table border='1'><thead><tr><th></th><th>State</th><th>Contacts</th><th>Email</th></tr></thead>"; for ($row = 0; $row < 42; $row++) { echo "<tr><td class='input_button'><input type='checkbox' name='vdb[]' value='".$vdb[$row][0]."' title='".$vdb[$row][1]."' /></td>"; echo "<td>".$vdb[$row][0]."</td>"; echo "<td>".$vdb[$row][1]."</td>"; } echo "</table>"; ?> What I'm trying to do is, on submission of the form, with the states the user selected, loop through the PHP array and total the numbers from the selected states. So if I checked Alabama and Alaska, I'd want to add 275 + 197. This is what I thought would have worked, but it's not: <?php $vendors = array(); if (isset($_POST["vdb"])) { $vendors = $_POST["vdb"]; } $ven_i = 0; $ven_j = 0; $ven_total = 0; foreach ($vendors as $value) { foreach ($vdb as $vdb_value) { if ($vendors[$ven_i] == $vdb[$ven_j][0]) { $ven_total += $vdb[$ven_j][1]; } $ven_j++; } $ven_i++; } ?> and then $ven_total should be the total I'm looking for. However, $ven_total just ends up being the first checkbox selected, and it ignores the rest. I am doing this correctly with the AJAX, displaying the total on the front end, but I don't know how to pass that on to the form submission. I'd rather not using GET and URL variables, because a user could type something into the URL and modify the count. Any idea what I'm doing wrong, or a better way to approach this that I would be able to understand? (Very much a novice programmer.)

    Read the article

  • javascript DOM how to know what node is?

    - by Fernando SBS
    here is the source code: <table id="movements" cellpadding="1" cellspacing="1"><thead><tr><th colspan="3">Movimentações de tropas:</th></tr></thead><tbody><tr> <td class="typ"><a href="build.php?gid=16"><img src="img/x.gif" class="att1" alt="Tropas atacantes chegando" title="Tropas atacantes chegando" /></a><span class="a1">&raquo;</span></td> <td><div class="mov"><span class="a1">1&nbsp;Ataque</span></div><div class="dur_r">em&nbsp;<span id="timer1">13:21:06</span>&nbsp;hrs.</div></div></td></tr><tr> <td class="typ"><a href="build.php?gid=16"><img src="img/x.gif" class="def1" alt="Tropas de reforço chegando" title="Tropas de reforço chegando" /></a><span class="d1">&raquo;</span></td> <td><div class="mov"><span class="d1">1&nbsp;Reforço</span></div><div class="dur_r">em&nbsp;<span id="timer2">0:14:55</span>&nbsp;hrs.</div></div></td></tr><tr> <td class="typ"><a href="build.php?gid=16"><img src="img/x.gif" class="att2" alt="Próprias tropas atacando" title="Próprias tropas atacando" /></a><span class="a2">&laquo;</span></td> <td><div class="mov"><span class="a2">1&nbsp;Ataque</span></div><div class="dur_r">em&nbsp;<span id="timer3">0:08:50</span>&nbsp;hrs.</div></div></td></tr><tr> <td class="typ"><a href="build.php?gid=16"><img src="img/x.gif" class="def2" alt="Próprias tropas reforçando" title="Próprias tropas reforçando" /></a><span class="d2">&laquo;</span></td> <td><div class="mov"><span class="d2">1&nbsp;Reforço</span></div><div class="dur_r">em&nbsp;<span id="timer4">2:50:45</span>&nbsp;hrs.</div></div></td></tr></tbody></table> and this is the View Source Chart of the document html (for easy DOM working): I would like to get to the 0:14:55 value coming from <span class="d1">, how to do it? EDIT Marcel Korpel: The value is always in the span in a div coming directly after a div containing a span with class d1, like: <div class="mov"><span class="d1">1&nbsp;Reforço</span></div><div class="dur_r">em&nbsp;<span id="timer2">0:14:55</span>&nbsp;hrs.</div>

    Read the article

  • How I can locate element depend on it value?

    - by Nikolay Kulakov
    I have some table: Title 1 | Title 2 | Title 3 | -------------------------------------------------- string value 1 | string value 2 | string value 3 | -------------------------------------------------- string value 4 | string value 5 | string value 6 | and some step: "And click on its < name", where < name can be anything from first column. So, how I can found needed element and click on its? Table code <div id="grid" class="k-grid k-widget" data-role="grid" tabindex="0" style=""> <div class="k-grid-header" style="padding-right: 17px;"> <div class="k-grid-header-wrap"> <table cellspacing="0"> <colgroup> <col style="width: 30px;"> <col style="width: 300px;"> <col> <col style="width: 200px;"> </colgroup> <thead> <tr> <th class="k-header" data-title="ID" data-field="id">ID</th> <th class="k-header" data-title="????????????" data-field="name" data-role="sortable" data-dir="asc"> <a class="k-link" href="#"> 2nd part ???????????? <span class="k-icon k-arrow-up"></span> </a> </th> <th class="k-header" data-title="????????" data-field="description">????????</th> <th class="k-header" data-field="undefined" data-role="sortable"> </tr> </thead> </table> </div> </div>

    Read the article

  • Jquery: how to trigger td a when tr is clicked

    - by Poku
    Hey, I have a table where the first td in the trs contains a link. I want this anchor to be triggered (clicked) no matter where i click in the containing tr. I have read and tried alot of recents post and suggentions on this topic but i can't get this to work. I tried the trigger() and triggerHandle() functions, but it does not trigger the anchor click that i want. There must be others who have had the need to trigger a anchor click when a tr is clicked, so that the user doesn't have to click the tds anchor link. It sure is a nice UI feature if its possible? Here is the code i have tried: <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="javascripts/jquery-1.4.2.js"></script> <script type="text/javascript" charset="utf-8"> /* Initialise the table with the required column sorting data types */ jQuery(document).ready(function () { jQuery("#rowClick tr").click(function (e) { jQuery("#clickevent", this).trigger("click"); }); }); </script> </head> <body id="dt_example"> <table id="rowClick"> <thead> <tr> <th style="width: 30px">id</th> <th style="width: 200px">navn</th> </tr> </thead> <tbody> <tr> <td><a href="datatabletext.asp?test=1" id="clickevent">1</a></td> <td>Jesper</td> </tr> <tr> <td><a href="datatabletext.asp?test=2" id="clickevent">2</a></td> <td>Bjarne</td> </tr> <tr> <td><a href="datatabletext.asp?test=3" id="clickevent">3</a></td> <td>Søren</td> </tr> </tbody> </table> </body>

    Read the article

  • Filter Datagrid onLoad

    - by Morgan Delvanna
    My data grid successfully filters when I select a month from a dropdown list, however when I try to filter it onLoad it just doesn't filter. The dropdown successfully displays the current month, and the grid should also show the current month data. <script type="text/javascript"> dojo.require("dojox.grid.DataGrid"); dojo.require("dojox.data.XmlStore"); dojo.require("dijit.form.FilteringSelect"); dojo.require("dojo.data.ItemFileReadStore"); dojo.require("dojo.date"); theMonth = new Date(); dojo.addOnLoad(function() { dojo.byId('monthInput').value = month_name[(theMonth.getMonth()+1)]; var filterString='{month: "' + theMonth.getMonth() + '"}'; var filterObject=eval('('+filterString+')'); dijit.byId("eventGrid").filter(filterObject); } ); var eventStore = new dojox.data.XmlStore({url: "events.xml", rootItem: "event", keyAttribute: "dateSort"}); function monthClick() { var ctr, test, rtrn; test = dojo.byId('monthInput').value; for (ctr=0;ctr<=11;ctr++) { if (test==month_name[ctr]) { rtrn = ctr; } } var filterString='{month: "' + rtrn + '"}'; var filterObject=eval('('+filterString+')'); eventGrid.setQuery(filterObject); } </script> </head> <body class="tundra"> <div id="header" dojoType="dijit.layout.ContentPane" region="top" class="pfga"></div> <div id="menu" dojoType="dijit.layout.ContentPane" region="left" class="pfga"></div> <div id="content" style="width:750px; overflow:visible" dojoType="dijit.layout.ContentPane" region="center" class="pfga"> <div dojotype="dojo.data.ItemFileReadStore" url="months.json" jsID="monthStore"></div> <div id="pagehead" class="Heading1" >Upcoming Events</div> <p> <input dojoType="dijit.form.FilteringSelect" store="monthStore" searchAttr="month" name="id" id="monthInput" class="pfga" onChange="monthClick()" /> </p> <table dojoType="dojox.grid.DataGrid" store="eventStore" class="pfga" style="height:500px; width:698px" clientSort="true" jsID="eventGrid"> <thead> <tr> <th field="date" width="80px">Date</th> <th field="description" width="600px">Description</th> </tr> <tr> <th field="time" colspan="2">Details</th> </tr> </thead> </table> </div> <div id="footer"></div>

    Read the article

  • jquery on click sibling selection

    - by Deviland
    I generate a Table from a database to look like this <table id="items"> <thead> <tr> <th>Details</th> <th>Goldmine ID</th> <th>&nbsp;</th> </tr> </thead> <tbody> <tr> <td class="evenrow">This is a test Description generated through UNIT Tests for the category description</td> <td class="evenrow"><input type="text" value="" id="106" class="gminput"></td> <td class="butCell evenrow"><button class="saveButton updateitem">Update</button></td> </tr> <tr> <td class="oddrow">This is a test Description generated through UNIT Tests for the category description</td> <td class="oddrow"><input type="text" value="" id="107" class="gminput"></td> <td class="butCell oddrow"><button class="saveButton updateitem">Update</button></td> </tr> <tr> <td class="evenrow">This is a test Description generated through UNIT Tests for the category description</td> <td class="evenrow"><input type="text" value="" id="108" class="gminput"></td> <td class="butCell oddrow"><button class="saveButton updateitem">Update</button></td> </tr> </tbody> </table> I am trying to get the input box value and id returned by the relevant row's button click so far I have tried this but failed $('body').on('click', '.updateitem', function(event) { event.preventDefault(); $(this).parent().siblings().forEach(function(index) { alert(($(this).val())); }); var par = sib.parent('td'); par.addClass('redBorder'); });

    Read the article

  • Simple Form validation failing Backbone

    - by Corey Buchillon
    Im not exactly adept at coding so Im probably missing something, but my view here is failing to refuse submission when one or both of the fields are empty. I have a feeling something isnt connected right to my template for the row and the view of the form Form = Backbone.View.extend({ //form vie el: '.item-form', initialize: function(){ }, events: { 'click #additem': 'addModel' }, addModel: function(itemName, price){ // simple validation before adding to collection if (itemName !="" && price !="" ){ var item = new Item({ itemName: this.$("#item").val(), price: this.$("#price").val()}); items.add(item); $("#message").html("Please wait; the task is being added."); item.save(null, {success: function (item, response,options) { item.id= item.attributes._id.$id; item.attributes.id = item.attributes._id.$id; new ItemsView({collection: items}); $("#message").html(""); } }); this.$("#item").val(''); this.$("#price").val(''); } else { alert('Please fill in both fields'); } } }); and HTML <table class="itemTable"> <thead> <tr> <th>Item</th> <th>Price</th> <th></th> </tr> </thead> <tbody class="tableBody"> <script type="text/template" id="table-row"> <td><%= itemName %></td> <td><%= price %></td> <td><button class="complete">Complete</button> <button class="remove">Remove</button></td> </script> </tbody> </table> <form class="item-form"> <input type="text" name="item" id="item" placeholder="Item"/> <!-- goes to itemName in the template for the body --> <input type="text" name="price" id="price" placeholder="Price" /><!--goes to price in the template for the body --> <button type="button" id="additem">Add</button> </form> <div id="message"></div>

    Read the article

  • how to add a dynamic param

    - by user569846
    the jquery plugin that im using is this http://code.google.com/p/jquery-in-place-editor/ if i have a table like this <table> <thead> <tr> <th>id</th> <th>first name </th> <th>last name </th> </tr> </thead> <tbody> <tr> <td class="id">1</td> <td class="fname">sarmen</td> <td class="lname">mikey</td> </tr> <tr> <td class="id">2</td> <td class="fname">john</td> <td class="lname">angelo</td> </tr> <tr> <td class="id">3</td> <td class="fname">sarmen</td> <td class="lname">grande</td> </tr> </tbody> </table> and my js looked something like this $("td.fname").editInPlace({ url: 'ajax.php', params: '', show_buttons: true }); then lets say i click on the first record to edit it which is fname of sarmen. how can i pass a param that only accociates id 1 ? because if i do a query of lets say "update tbl_users set fname = '$_POST['update_value']' where fname = '$_POST['original_html']'" (note: im just showing an example so no need to clean posts if that was bothering you :) ) if i run this query the fname of sarmen will update in two records rather than one. How can i only update to id of 1 being to update only one record.

    Read the article

  • send data from one table to another page

    - by user91599
    I have this table I want when I click on a link in a table row that do a redirect to another page the data will be sent to the new page that can help me I have not found how to start I'm really stuck code table <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> <thead> <tr> <th>Date</th> <th>provider</th> <th>CI</th> <th>CELL</th> <th>BSC</th> <th>Commentaire</th> <th>nbr</th> <th>Type</th> <th><img src="{{ asset('image/Modify.png') }}" ALIGN="CENTER"/></th> <th><img src="{{ asset('image/Info.png') }}" ALIGN="CENTER"/></th> <th><img src="{{ asset('image/Male.png') }}" ALIGN="CENTER"/></th> <th>type_alertes</th> </tr> </thead> <tbody> <div class="textbox"> <h2> Information KPI dégradées</h2> <div class="textbox_content" id="kpi_dégrades"> {% for liste in listes %} <tr class="gradeU"> <td>{{ liste.DAT }} </td> <td>{{ liste.PROVIDER}} </td> <td>{{ liste.CI}} </td> <td>{{ liste.CELL}} </td> <td>{{ liste.BSC}}</td> <td>{{ liste.Cmts}}</td> <td >{{ liste.nbr}}</td> <td>{{ liste.TYPE}}</td> <td><a class="edit" href="">Edit</a></td> <td onclick="getInfo('{{ liste.CELL}}')">Information KPI dégradés</td> <td>{{ liste.user_name}}</td> <td>{{ liste.type_alertes}}</td> </tr> {% endfor %} </div> </div> </tbody>

    Read the article

  • Jquery question : maintain focus upon appending a row?

    - by PoppySeedsAndAppleJuice
    The function below checks whether the id entered is already in the database, and if it is, then it adds some html to the table. I'm not sure if it's directly related to my issue or not, but, essentially, a user will place the focus on the id input field and enters an id. Using ajax, it posts to a php script and returns data if rows are found and nothing if it doesn't. If the user then tabs over to the next input field (zipcode), or clicks in another input field, they essentially have to do so twice. The cursor "flashes" in the field briefly and then focuses out. I tried adding in a focus(), but the behavior didn't change. So, the html looks like this: <table id="tableSearchData" class="searchlist" style="width: 789px;"> <thead> <tr> <th>ID</th> <th>Zip Code</th> <th>Radius (in miles)</th> </tr> </thead> <tbody> <tr class="odd"> <!-- PROBLEM is described below --> <!-- User clicks in <input name="id[]"> and ID is checked --> <!-- User presses "tab" or clicks in <input name="zipcode[] (in the *same* row) and cursor flashes, then goes out of focus so that the user has to click in the field again --> <td class="center sorting_1"><input type="text" value="" name="id[]"></td> <td class="center"><input type="text" value="" name="zipcode[]"></td> <td class="center"><input type="text" value="" name="radius[]"></td> </tr> </tbody> </table> Here's the jquery function... Like I said, I'm not sure if it's directly related to the problem I'm having, but, thought I should include it because I suppose it's likely there is something happening there... $("#tableSearchData > tbody > tr > td > input[name=id[]]").focusout(function() { var row = $(this).closest("tr").get(0); var sData = $(this).serialize(); $.ajax({ type: "POST", url: "checkid.php", data: sData, success: function(html) { $(row).replaceWith(html); $(".preset").each(function() { $(this).attr("disabled", true); }); $(row).closest("input[name=zipcode[]]").focus(); } }); });

    Read the article

  • Proper html markup of table tags?

    - by Gazow
    kind of a silly question, but ive been seeing things such as tbody and thead/tfood tags in other peoples tables are these required even if they're empty for good markup? or can i just leave them out? thanks

    Read the article

  • Dynamically created textboxes and changes plus jQuery in ASP.NET?

    - by gazeebo
    Hi all, I was wondering how to read off a value from a textbox that resides in a partialview and output the value into a textbox within the initial window. Here's my code... <script type="text/javascript"> $(document).ready(function (e) { // Calculate the sum when the document has been loaded. var total = 0; $("#fieldValues :input.fieldKronor").each(function (e) { total += Number($(this).val()); }); // Set the value to the correspondent textbox $("#fieldSummation").text(total); // Re-calculate on change $("#fieldValues :input.fieldKronor").change(function (e) { var total = 0; $("#fieldValues :input.fieldKronor").each(function (e) { total += Number($(this).val()); }); $("#fieldSummation").text(total); }); }); </script> Here's the table where in info is... <table id="fieldValues" style="width: 60%; margin-bottom: 2em"> <thead> <tr> <th>Rubrik, t.ex. teknik*</th> <th>Kronor (ange endast siffror)*</th> </tr> </thead> <asp:Panel ID="pnlStaffRows" runat="server"></asp:Panel> <tfoot> <tr> <th></th> <th>Total kostnad</th> </tr> <tr> <td></td> <td><input type="text" value="" class="fieldSummation" style="width:120px" /></td> </tr> </tfoot> </table> And here's the partialview... <tr> <td class="greyboxchildsocialsecuritynumberheading4" style="padding-bottom:1em"> <asp:TextBox ID="txtRubrikBox" ToolTip="Rubrik" runat="server" Width="120"></asp:TextBox> </td> <td class="greyboxchildnameheading3" style="padding-bottom:1em"> <asp:TextBox ID="txtKronorBox" class="fieldKronor" ToolTip="Kronor" runat="server" Width="120"></asp:TextBox> </td> </tr>

    Read the article

  • HTML table print large column

    - by Emma
    Windows XP, IE 7 If the data in one of the column in table is more than say 800 bytes, it seems to print partial pages. Previews also appears same (span into multiple partial pages). What is the best way so that large number of rows with wide coulumns (fixed width) are printed properly without giving blank or partial page. Used table with thead and colgroup with width in 14%.

    Read the article

  • HTML Dynamic Number of Dropdowns

    - by Evilsithgirl
    I have this form on which I would like to create a dynamic number of dropdowns. I have a list of categorized applications which I would like each to have its own dropdown that submits data for each dropdown. The dropdown options will be the same for each. Here is my code. I am not sure how to pass the unique data to the server. As you can see I currently have an iteration over a list of applications that I would like to make each select in that iteration its own dropdown. Thanks in advance. <html:form action="/CategorizeApps.do"> <h3>Uncategorized</h3> <br/> Categorize each application using the dropdown menu then click categorize.<br/> <table class="list"> <thead> <tr class="controls"> <td><input type="submit" name="btnAction" value="Categorize"/></td> </tr> <tr class="fields"> <td>ID</td> <td>Name</td> <td></td> </tr> </thead> <tbody> <logic:iterate id="uncat" name="appsUncat" scope="session"> <tr class="hlist"> <td><bean:write property="id" name="uncat" scope="page"/></td> <td><bean:write property="name" name="uncat" scope="page"/></td> <td><select id="category" name="category"> <logic:iterate id="categories" name="Categories" scope="session"> <option value="<bean:write name="categories" property="id" scope="page"/>"><bean:write name="categories" property="name" scope="page"/></option> </logic:iterate> </select></td> </tr> </logic:iterate> </tbody> </table> </html:form>

    Read the article

  • MySQL Database Query - Codeigniter

    - by user2450349
    I am building an application with Codeigniter and need some help with a DB query. I have a table called users with the following fields: user_id, user_name, user_password, user_email, user_role, user_manager_id In my app, I pull all records from the user table using the following: function get_clients() { $this->db->select('*'); $this->db->where('user_role', 'client'); $this->db->order_by("user_name", "Asc"); $query = $this->db->get("users"); return $query->result_array(); } This works as expected, however when I display the results in the view, I also want to display a new column called Manager which will display the managers user_name field. The user_manager_id is the id of the user from the same table. Im guessing you can create an outer join on the same table but not sure. In the view, I am displaying the returned info as follows: <table class="table table-striped" id="zero-configuration"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Manager</th> </tr> </thead> <tbody> <?php foreach($clients as $row) { ?> <tr> <td><?php echo $row['user_name']; ?> (<?php echo $row['user_username']; ?>)</td> <td><?php echo $row['user_email']; ?></td> <td><?php echo $row['???']; ?></td> </tr> <?php } ?> </tbody> </table> Any idea of how I can form the query and display the manager name is the view? Example: user_id user_name user_password user_email user_role user_manager_id 1 Ollie adjjk34jcd [email protected] client null 2 James djklsdfsdjk [email protected] client 1 When i query the database, i want to display results like this: Ollie [email protected] James [email protected] Ollie

    Read the article

  • How to manage and make look of complex data <table> identical in all browser?

    - by metal-gear-solid
    What are helpful CSS properties which can be helpful for table? I have to make so many complex tables which have different type of colors in columns, thead, borders, padding, alternate row and column colors etc. I want to use as less as possible of css classes. How to make complex tables design with combination of as much as possible of HTML tags and CSS properties? and should look identical in all browsers.

    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

  • 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

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

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

    Read the article

  • jQuery DataTables server side processing and ASP.Net

    - by Chad
    I'm trying to use the server side functionality of the jQuery Datatables plugin with ASP.Net. The ajax request is returning valid JSON, but nothing is showing up in the table. I originally had problems with the data I was sending in the ajax request. I was getting a "Invalid JSON primative" error. I discovered that the data needs to be in a string instead of JSON serialized, as described in this post: http://encosia.com/2008/06/05/3-mistakes-to-avoid-when-using-jquery-with-aspnet-ajax/. I wasn't quite sure how to fix that, so I tried adding this in the ajax request: "data": "{'sEcho': '" + aoData.sEcho + "'}" If the aboves eventually works I'll add the other parameters later. Right now I'm just trying to get something to show up in my table. The returning JSON looks ok and validates, but the sEcho in the post is undefined, and I think thats why no data is being loaded into the table. So, what am I doing wrong? Am I even on the right track or am I being stupid? Does anyone ran into this before or have any suggestions? Here's my jQuery: $(document).ready(function() { $("#grid").dataTable({ "bJQueryUI": true, "sPaginationType": "full_numbers", "bServerSide":true, "sAjaxSource": "GridTest.asmx/ServerSideTest", "fnServerData": function(sSource, aoData, fnCallback) { $.ajax({ "type": "POST", "dataType": 'json', "contentType": "application/json; charset=utf-8", "url": sSource, "data": "{'sEcho': '" + aoData.sEcho + "'}", "success": fnCallback }); } }); }); HTML: <table id="grid"> <thead> <tr> <th>Last Name</th> <th>First Name</th> <th>UserID</th> </tr> </thead> <tbody> <tr> <td colspan="5" class="dataTables_empty">Loading data from server</td> </tr> </tbody> </table> Webmethod: <WebMethod()> _ Public Function ServerSideTest() As Data Dim list As New List(Of String) list.Add("testing") list.Add("chad") list.Add("testing") Dim container As New List(Of List(Of String)) container.Add(list) list = New List(Of String) list.Add("testing2") list.Add("chad") list.Add("testing") container.Add(list) HttpContext.Current.Response.ContentType = "application/json" Return New Data(HttpContext.Current.Request("sEcho"), 2, 2, container) End Function Public Class Data Private _iTotalRecords As Integer Private _iTotalDisplayRecords As Integer Private _sEcho As Integer Private _sColumns As String Private _aaData As List(Of List(Of String)) Public Property sEcho() As Integer Get Return _sEcho End Get Set(ByVal value As Integer) _sEcho = value End Set End Property Public Property iTotalRecords() As Integer Get Return _iTotalRecords End Get Set(ByVal value As Integer) _iTotalRecords = value End Set End Property Public Property iTotalDisplayRecords() As Integer Get Return _iTotalDisplayRecords End Get Set(ByVal value As Integer) _iTotalDisplayRecords = value End Set End Property Public Property aaData() As List(Of List(Of String)) Get Return _aaData End Get Set(ByVal value As List(Of List(Of String))) _aaData = value End Set End Property Public Sub New(ByVal sEcho As Integer, ByVal iTotalRecords As Integer, ByVal iTotalDisplayRecords As Integer, ByVal aaData As List(Of List(Of String))) If sEcho <> 0 Then Me.sEcho = sEcho Me.iTotalRecords = iTotalRecords Me.iTotalDisplayRecords = iTotalDisplayRecords Me.aaData = aaData End Sub Returned JSON: {"__type":"Data","sEcho":0,"iTotalRecords":2,"iTotalDisplayRecords":2,"aaData":[["testing","chad","testing"],["testing2","chad","testing"]]}

    Read the article

  • rendering a grid from a table: "this.mainBody is undefined"

    - by farhad
    Hello! I have a static html table on a page and i would like to transform it to a grid; so i applied this function after loading the table: function createTable() { // create the grid var grid = new Ext.ux.grid.TableGrid("tabella-colocazioni", { stripeRows: true // stripe alternate rows }); grid.render(); } I got this piece of code from here: http://www.java2s.com/Code/JavaScript/Ext-JS/CreateagridwithfromanexistingunformattedHTMLtable.htm . The result is the error "this.mainBody is undefined on ext-all-debug.js" on FireBug and the grid is empty. The html code of the table is this: <table cellspacing="0" id="tabella-colocazioni"> <thead> <tr style="background:#eeeeee;"> <th>Colocazione</th> <th>Frequenza</th> </tr> </thead> <tbody> <tr> <td>plusquam patria</td> <td>1</td> </tr> <tr> <td>patria pietate</td> <td>1</td> </tr> <tr> <td>Et patria</td> <td>1</td> </tr> <tr> <td>patria prohibet</td> <td>1</td> </tr> <tr> <td>Multos patria</td> <td>1</td> </tr> <tr> <td>patria reddidit</td> <td>1</td> </tr> <tr> <td>patronum patria</td> <td>1</td> </tr> <tr> <td>patria moesta</td> <td>1</td> </tr> </tbody> </table> What is the problem? Thank you very much.

    Read the article

  • Not use CSS definitions for one <FORM>

    - by Svisstack
    I have template from themeforest and i dont want edit css from this template, because i don't have time for it. But i want integrate paypal buttons to my webpage, problem is paypal button use tag for selection payment option. I have overloaded style for tag and this not look like should. How to not use CSS for this element. I dont want use and if i don't must then i dont want edit this CSS;-) This css look wired, i must edit her to solve this problem? What is best solution for this? /*//// - Forms - ////*/ form { margin-bottom:20px; } body.ie7 form, body.ie8 { margin-bottom:40px; } form p { margin-bottom:15px; } form label { float:left; width:140px; margin-top:5px; } form input, form textarea, form select { padding:10px 5px; background:#fff url(../img/bg-input.gif) repeat-x top; border:1px solid #D9D9D9; width:448px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } form input.small { width:35px; } html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } Can anyone help me?

    Read the article

  • Ajax - How refresh <DIV> after submit

    - by user107712
    Hi, How refresh part of page ("DIV") after my application release a submit? I'm use JQuery with plugin ajaxForm. I set my target with "divResult", but the page repeat your content inside the "divResult". Sources: $(document).ready(function() { $("#formSearch").submit(function() { var options = { target:"#divResult", url: "http://localhost:8081/sniper/estabelecimento/pesquisar.action" } $(this).ajaxSubmit(options); return false; }); }) Page ... ... <div id="divResult" class="quadro_conteudo" > <table id="tableResult" class="tablesorter"> <thead> <tr> <th style="text-align:center;"> <input id="checkTodos" type="checkbox" title="Marca/Desmarcar todos" /> </th> <th scope="col">Name</th> <th scope="col">Phone</th> </tr> </thead> <tbody> <s:iterator value="entityList"> <s:url id="urlEditar" action="editar"><s:param name="id" value="%{id}"/></s:url> <tr> <td style="text-align:center;"><s:checkbox id="checkSelecionado" name="selecionados" theme="simple" fieldValue="%{id}"></s:checkbox></td> <td> <s:a href="%{urlEditar}"><s:property value="name"/></s:a></td> <td> <s:a href="%{urlEditar}"><s:property value="phone"/></s:a></td> </tr> </s:iterator> </tbody> </table> <div id="pager" class="pager"> <form> <img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/first.png" class="first"/> <img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/prev.png" class="prev"/> <input type="text" class="pagedisplay"/> <img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/next.png" class="next"/> <img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/last.png" class="last"/> <select class="pagesize"> <option selected="selected" value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="<s:property value="totalRegistros"/>">todos</option> </select> <s:label>Total de registros: <s:property value="totalRegistros"/></s:label> </form> </div> <br/> </div> Thanks!!!

    Read the article

< Previous Page | 1 2 3 4 5 6 7 8 9  | Next Page >