Search Results

Search found 3226 results on 130 pages for 'border'.

Page 115/130 | < Previous Page | 111 112 113 114 115 116 117 118 119 120 121 122  | Next Page >

  • Why is the W3C box model considered better?

    - by Mel
    Why do most developers consider the W3C box-model to be better than the box-model used by Internet Explorer? I know it's very frustrating developing pages that look the way you want them on Internet Explorer, but I find the W3C box-model to be counter-intuitive. For example, if margins, padding, and border were factored into the width, I could assign fixed width values for all my columns without having to worry about how many columns I have and what changes I make to my padding and margins. Under W3C box model I have to worry about how many columns I have, and develop something akin to a mathematical formula to calculate my values. Changing them would nightmarish, especially for complex layouts. My novice opinion is that it's more restrictive. Consider this small frame-work I wrote: #content { margin:0 auto 30px auto; padding:0 30px 30px 30px; width:900px; } #content .column { float:left; margin:0 20px 20px 20px; } #content .first { margin-left:0; } #content .last { margin-right:0; } .width_1-4 { width:195px; } .width_1-3 { width:273px; } .width_1-2 { width:430px; } .width_3-4 { width:645px; } .width_1-1 { width:900px; } These values I have assigned here will falter unless there are three columns, and thus the margins at 0(first)+20+20+20+20+0(last). It would be a disaster if I wanted to add padding to my columns too, as my entire setup would have to be re calibrated. Now imagine if column width incorporated all the other elements, all I would need to do is change one associated value, and I have my layout. I'm less criticizing it and more hoping to understand why it's better, or why I'm finding it more difficult. Am I doing this whole thing wrong? I don't know very much about this topic, but it seems counter intuitive to use W3C's box-model. Some advice would be really appreciated. Thanks

    Read the article

  • Difficulty adding widgets to django form.

    - by codingJoe
    I have a django app that tracks activities that can benefit a classroom. Using the django examples, I was able to build a form to enter this data. But when I try to add widgets to that form, things get tricky. What I want is a calendar widget that lets the user enter the 'activity_date' field using a widget. If I use Admin interface. The AdminDateWidget works fine. however. This particular user isn't allowed access to the admin interface so I need a different way to present this widget. Also I couldn't figure out how to make the bring the admin widget over into non-admin pages. So I tried a custom widget. This is the first custom widget I've built, so I'm not quite sure what is supposed to be going on here. Any Expert Advice? How do I get my date widget to work? # The Model class Activity(models.Model): activity_date = models.DateField() activity_type = models.CharField(max_length=50, choices=ACTIVITY_TYPES) activity_description = models.CharField(max_length=200) activity_duration= models.DecimalField(decimal_places=2, max_digits=4) est_attendance = models.IntegerField("Estimated attendance") # The Form class ActivityForm(forms.ModelForm): # The following line causes lockup if enabled. # With the DateTimeWidget removed, the form functions correctly except that there is no widget. #activity_date = forms.DateField(label=_('Date'), widget=DateTimeWidget) ##!!! Point of Error !!! class Meta: model = Activity fields = ('activity_date', 'activity_type', 'activity_description', 'activity_duration', 'est_attendance') def __init__(self, *args, **kwargs): super(ActivityForm, self).__init__(*args, **kwargs) instance = getattr(self, 'instance', None) edit_aid = kwargs.get('edit_aid', False) # On a different approach, the following also didn't work. #self.fields['activity_date'].widget = widgets.AdminDateWidget() # The Widget # Example referenced: http://djangosnippets.org/snippets/391/ calbtn = u""" <button id="calendar-trigger">...</button> <img src="%s/site_media/images/icon_calendar.gif" alt="calendar" id="%s_btn" style="cursor: pointer; border: 1px solid #8888aa;" title="Select date and time" onmouseover="this.style.background='#444444';" onmouseout="this.style.background=''" /> <script type="text/javascript"> Calendar.setup({ trigger : "calendar-trigger", inputField : "%s" }); </script>""" class DateTimeWidget(forms.widgets.TextInput): dformat = '%Y-%m-%d %H:%M' def render(self, name, value, attrs=None): print "DTWgt render name=%s, value=%s" % name, value if value is None: value = '' final_attrs = self.build_attrs(attrs, type=self.input_type, name=name) if value != '': try: final_attrs['value'] = \ force_unicode(value.strftime(self.dformat)) except: final_attrs['value'] = \ force_unicode(value) if not final_attrs.has_key('id'): final_attrs['id'] = u'%s_id' % (name) id = final_attrs['id'] jsdformat = self.dformat #.replace('%', '%%') cal = calbtn % (settings.MEDIA_URL, id, id, jsdformat, id) a = u'<input%s />%s' % (forms.util.flatatt(final_attrs), cal) print "render return %s " % a return mark_safe(a) def value_from_datadict(self, data, files, name): print "DTWgt value_from_datadict" dtf = forms.fields.DEFAULT_DATETIME_INPUT_FORMATS empty_values = forms.fields.EMPTY_VALUES value = data.get(name, None) if value in empty_values: return None if isinstance(value, datetime.datetime): return value if isinstance(value, datetime.date): return datetime.datetime(value.year, value.month, value.day) for format in dtf: try: return datetime.datetime(*time.strptime(value, format)[:6]) except ValueError: continue return None

    Read the article

  • Getting <divs>'s to align next to each other

    - by user1322845
    I have the following code I am trying to get working correctly: <div id="newspost_bg"> <article> <p> <header><h3>The fast red fox!</h3></header> This is where the article resides in the article tag. This is good for SEO optimization. <footer>Read More..</footer> </p> </article> </div> <div id="newspost_bg"> hello </div> <div id="newspost_bg"> hello </div> <div id="advertisement"> <script type="text/javascript"><!-- google_ad_client = "ca-pub-2139701283631933"; /* testing site */ google_ad_slot = "4831288817"; google_ad_width = 120; google_ad_height = 600; //--> </script> </div> Here is the css that goes with it: #newspost_bg{ position: relative; background-color: #d9dde1; width:700px; height:250px; margin: 10px; margin-left: 20px; border: solid 10px #1d2631; float:left; } #newspost_bg article{ position: relative; margin-left: 20px; } #advertisement{ float: left; background-color: #d9dde1; width: 125px; height: 605px; margin: 10px; } The problem I'm experiencing is that the advertisements im trying to get setup will align with the last with the id of newspost_bg but im looking to havce it align to the top of the container it is in. I dont know if this is enough info, if not please let me know what you might need. Im new to the web coding scene so any and all critiques help me.

    Read the article

  • did you know some good web site about 'iphone css layouts' ,and can you help me to improve my code..

    - by zjm1126
    i want to create a webpage on iphone , but i can't complete it in a simple way, this is my code: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=5.0,user-scalable=yes"> </head> <body onorientationchange="updateOrientation();" onload=updateOrientation()> <div id="a"> <input id='ab' type="button" value="button" /> </div> <div id=b style="display: none">sssadwq dwqdqw</div> <style type="text/css"> *{ margin:0; padding:0; } /* Reposition on orientation change */ body.landscape{ height: 268px; } body.landscape #a{ height:134px; line-height:134px; } body.landscape #b{ height:114px; width:470px; } body{ height: 416px; } #a{ line-height:208px; height:208px; text-align:center; } #b{ height:198px; width:310px; background:red; border:5px solid black; } </style> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function updateOrientation() { var orientation = window.orientation; switch (orientation) { // If we're horizontal case 90: case -90: // Set orient to landscape $(document.body).addClass("landscape"); break; // If we're vertical default: // Set orient to portrait $(document.body).removeClass("landscape"); break; } } $('#ab').click(function(){ if($('#b').css('display')=='none')$('#b').css('display','block') else $('#b').css('display','none') }) </script> </body> </html> it use much more fixed number,this is not the best way ,i think the best way is to use the percentage more and more, can you do it fo me ,, thanks

    Read the article

  • ui tabs and position relative

    - by ntan
    Hi, I am using ui tabs a lot.In my last project i add an icon just before tabs and the tab links start a strange behavior, you can not click to change the tabs if you are above tab name BUT only when you are outside tab name. Here is the code <div style="float:left;display:inline;width:718px;padding:5px;border:1px solid #ececec"> <!--ICON just before TABs--> <div style="z-index:1;position:relative;top:30px;left:5px"> <img src="../graphics/icons/add.gif" onclick="AddTab();" href="javascript:void(0);" id="addNewTab"/> </div> <div id="tabs" > <ul > <li > <img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" /> <a href="#tab-1"><span id="tabContent-1"><span class="tabText" >TAB1</span></span></a> </li> <li > <img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" /> <a href="#tab-2"><span id="tabContent-2"><span class="tabText" >TAB2</span></span></a> </li> </ul> <div id="tab-1" > contents </div> <div id="tab-2" > contents </div> </div><!--tabs--> I know that ui.css has position relative for tabs .ui-tabs .ui-tabs-nav { list-style:none outside none; padding:0.2em 0.2em 0; position:relative; } and i dont know if meshing up with my icon. If i remove the position:relative from the icon (add.gif) everything works fine Any help is appreciated

    Read the article

  • Ajax load div , part of CSS not working

    - by user225228
    Hello, I'm using the ajax to load a div content, but the div content is not taking the CSS of the page. Example :- This link will load into <a href="#" onclick="javascript:loadAjax('test.html')">Test</a> <div id="result"> <table class="tablesorter"> <thead> <tr> <th>Header 1</th><th>Header 2</th> </tr> </thead> <tbody> <tr><td>Record 1</td><td>Desc 1</td></tr> </tbody> </table> </div> In my CSS : table.tablesorter thead tr th, table.tablesorter tfoot tr th { background-color: #e6EEEE; border: 1px solid #FFF; font-size: 8pt; padding: 4px; } table.tablesorter thead tr .header { background-image: url(bg.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer; } In my test.html, it's the same table with different record : <table class="tablesorter"> <thead> <tr> <th>Header 1</th><th>Header 2</th> </tr> </thead> <tbody> <tr><td>Record 2</td><td>Desc 2</td></tr> </tbody> </table> The issue I'm facing is that before "test.html" is load, the CSS is fine. But after clicking on the link which suppose to loads test.html, the CSS background still shows but "cursor:pointer" and "background-image" not longer works. What should I do to make it work? Thanks in advance!

    Read the article

  • XSL file handling through javascript

    - by Zaid Iqbal
    i want to handle my xsl file through my javascript code. I made my XSL file but i want to dynamically change my XSL file at run time.As in add more attributes in header or data. My javascript code as follow` <script> function loadXMLDoc(dname) { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest(); } else { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET",dname,false); xhttp.send(""); return xhttp.responseXML; } function displayResult() { xml=loadXMLDoc("cdcatalog.xml"); xsl=loadXMLDoc("cdcatalog.xsl"); // code for IE if (window.ActiveXObject) { ex=xml.transformNode(xsl); document.getElementById("example").innerHTML=ex; } // code for Mozilla, Firefox, Opera, etc. else if (document.implementation && document.implementation.createDocument) { xsltProcessor=new XSLTProcessor(); xsltProcessor.importStylesheet(xsl); resultDocument = xsltProcessor.transformToFragment(xml,document); document.getElementById("example").appendChild(resultDocument); } } </script> My XSL file code: <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th align="left">Title</th> <th align="left">Artist</th> <th align="left">Country</th> </tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title" /></td> <td><xsl:value-of select="artist" /></td> <td><xsl:value-of select="country" /></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> `

    Read the article

  • JQuery Cycle, how can I change from image to div?

    - by vick
    <!doctype html> <html> <head> <title>JQuery Cycle Plugin - Example Slideshow</title> <style type="text/css"> .slideshow { height: 232px; width: 232px; margin: auto } .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } </style> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script> <!-- initialize the slideshow when the DOM is ready --> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'shuffle' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> </head> <body> <div class="slideshow"> <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> </div> </body> </html> How can I make this exact scroller work with divs instead of img?? basically, I want to use <div> etc etc etc </div> instead of: <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />

    Read the article

  • 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

  • Why is this unwanted ">" character being displayed when displaying this PHP document in a browser?

    - by CT
    This page takes an asset id from $_GET of the url and displays some info about the asset after querying a mysql database. When I view the page in my browser there is an unwanted "" character within the page and I have no idea why. I've commented where it appears. It appears before the < table create tag right afterward. The < table tag was originally outside the php script section but I threw it in to see if it made a difference. It did not. Thank you all. I am viewing the page in Firefox. The web server is running on an Ubuntu Server 10.04 virtual machine on my laptop. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Wagman IT Asset</title> </head> <body> <div id="page"> <div id="header"> <img src="images/logo.png" /> </div> </div> <div id="content"> <div id="container"> <div id="main"> <div id="menu"> <ul> <table width="100%" border="0"> <tr> <td><li><a href="index.php">Search Assets</a></li></td> <td><li><a href="browse.php">Browse Assets</a></li></td> <td><li><a href="add_asset.php">Add Asset</a></li></td> <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> </table> </ul> </div> <div id="text"> <ul> <li> <h1>View Asset</h1> </li> </ul> //UNWANTED > CHARACTER APPEARS HERE <?php echo "<table width='100%' border='0' cellpadding='2'>"; //make database connect mysql_connect("localhost", "asset_db", "asset_db") or die(mysql_error()); mysql_select_db("asset_db") or die(mysql_error()); //get asset $id = $_GET["id"]; //get type of asset $sql = "SELECT asset.type From asset WHERE asset.id = $id"; $result = mysql_query($sql) or die(mysql_error()); $row = mysql_fetch_assoc($result); $type = $row['type']; switch ($type){ case "Server": $sql = " SELECT asset.id ,asset.company ,asset.location ,asset.purchase_date ,asset.purchase_order ,asset.value ,asset.type ,asset.notes ,server.manufacturer ,server.model ,server.serial_number ,server.esc ,server.user ,server.prev_user ,server.warranty FROM asset LEFT JOIN server ON server.id = asset.id WHERE asset.id = $id "; $result = mysql_query($sql); while($row = mysql_fetch_assoc($result)) { echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Asset ID:</td><td>"; $id = $row['id']; setcookie('id', $id); echo "$id</td></tr>"; echo "<tr<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>><td>Company:</td><td>"; $company = $row['company']; setcookie('company', $company); echo "$company</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Location:</td><td>"; $company = $row['location']; setcookie('location', $location); echo "$location</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Purchase Date:</td><td>"; $purchase_date = $row['purchase_date']; setcookie('purchase_date', $purchase_date); echo "$purchase_date</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Purchase Order:</td><td>"; $purchase_order = $row['purchase_order']; setcookie('purchase_order', $purchase_order); echo "$purchase_order</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Value:</td><td>"; $value = $row['value']; setcookie('value', $value); echo "$value</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Type:</td><td>"; $type = $row['type']; setcookie('type', $type); echo "$type</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Notes:</td><td>"; $notes = $row['notes']; setcookie('notes', $notes); echo "$notes</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Manufacturer:</td><td>"; $manufacturer = $row['manufacturer']; setcookie('manufacturer', $manufacturer); echo "$manufacturer</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Model / Description:</td><td>"; $model = $row['model']; setcookie('model', $model); echo "$model</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Serial Number / Service Tag:</td><td>"; $serial_number = $row['serial_number']; setcookie('serial_number', $serial_number); echo "$serial_number</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Express Service Code:</td><td>"; $escy = $row['esc']; setcookie('esc', $esc); echo "$esc</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>User:</td><td>"; $user = $row['user']; setcookie('user', $user); echo "$user</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Previous User:</td><td>"; $prev_user = $row['prev_user']; setcookie('prev_user', $prev_user); echo "$prev_user</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Warranty:</td><td>"; $warranty = $row['warranty']; setcookie('warranty', $warranty); echo "$warranty</td></tr></table>"; } break; case "Laptop": $sql = " SELECT asset.id ,asset.company ,asset.location ,asset.purchase_date ,asset.purchase_order ,asset.value ,asset.type ,asset.notes ,laptop.manufacturer ,laptop.model ,laptop.serial_number ,laptop.esc ,laptop.user ,laptop.prev_user ,laptop.warranty FROM asset LEFT JOIN laptop ON laptop.id = asset.id WHERE asset.id = $id "; $result = mysql_query($sql); while($row = mysql_fetch_assoc($result)) { echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Asset ID:</td><td>"; $id = $row['id']; setcookie('id', $id); echo "$id</td></tr>"; echo "<tr<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>><td>Company:</td><td>"; $company = $row['company']; setcookie('company', $company); echo "$company</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Location:</td><td>"; $company = $row['location']; setcookie('location', $location); echo "$location</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Purchase Date:</td><td>"; $purchase_date = $row['purchase_date']; setcookie('purchase_date', $purchase_date); echo "$purchase_date</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Purchase Order:</td><td>"; $purchase_order = $row['purchase_order']; setcookie('purchase_order', $purchase_order); echo "$purchase_order</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Value:</td><td>"; $value = $row['value']; setcookie('value', $value); echo "$value</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Type:</td><td>"; $type = $row['type']; setcookie('type', $type); echo "$type</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Notes:</td><td>"; $notes = $row['notes']; setcookie('notes', $notes); echo "$notes</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Manufacturer:</td><td>"; $manufacturer = $row['manufacturer']; setcookie('manufacturer', $manufacturer); echo "$manufacturer</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Model / Description:</td><td>"; $model = $row['model']; setcookie('model', $model); echo "$model</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Serial Number / Service Tag:</td><td>"; $serial_number = $row['serial_number']; setcookie('serial_number', $serial_number); echo "$serial_number</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Express Service Code:</td><td>"; $escy = $row['esc']; setcookie('esc', $esc); echo "$esc</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>User:</td><td>"; $user = $row['user']; setcookie('user', $user); echo "$user</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Previous User:</td><td>"; $prev_user = $row['prev_user']; setcookie('prev_user', $prev_user); echo "$prev_user</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Warranty:</td><td>"; $warranty = $row['warranty']; setcookie('warranty', $warranty); echo "$warranty</td></tr></table>"; } break; case "Desktop": $sql = " SELECT asset.id ,asset.company ,asset.location ,asset.purchase_date ,asset.purchase_order ,asset.value ,asset.type ,asset.notes ,desktop.manufacturer ,desktop.model ,desktop.serial_number ,desktop.esc ,desktop.user ,desktop.prev_user ,desktop.warranty FROM asset LEFT JOIN desktop ON desktop.id = asset.id WHERE asset.id = $id "; $result = mysql_query($sql); while($row = mysql_fetch_assoc($result)) { echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Asset ID:</td><td>"; $id = $row['id']; setcookie('id', $id); echo "$id</td></tr>"; echo "<tr<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>><td>Company:</td><td>"; $company = $row['company']; setcookie('company', $company); echo "$company</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Location:</td><td>"; $company = $row['location']; setcookie('location', $location); echo "$location</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Purchase Date:</td><td>"; $purchase_date = $row['purchase_date']; setcookie('purchase_date', $purchase_date); echo "$purchase_date</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Purchase Order:</td><td>"; $purchase_order = $row['purchase_order']; setcookie('purchase_order', $purchase_order); echo "$purchase_order</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Value:</td><td>"; $value = $row['value']; setcookie('value', $value); echo "$value</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Type:</td><td>"; $type = $row['type']; setcookie('type', $type); echo "$type</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Notes:</td><td>"; $notes = $row['notes']; setcookie('notes', $notes); echo "$notes</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Manufacturer:</td><td>"; $manufacturer = $row['manufacturer']; setcookie('manufacturer', $manufacturer); echo "$manufacturer</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Model / Description:</td><td>"; $model = $row['model']; setcookie('model', $model); echo "$model</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Serial Number / Service Tag:</td><td>"; $serial_number = $row['serial_number']; setcookie('serial_number', $serial_number); echo "$serial_number</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Express Service Code:</td><td>"; $escy = $row['esc']; setcookie('esc', $esc); echo "$esc</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>User:</td><td>"; $user = $row['user']; setcookie('user', $user); echo "$user</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Previous User:</td><td>"; $prev_user = $row['prev_user']; setcookie('prev_user', $prev_user); echo "$prev_user</td></tr>"; echo "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Warranty:</td><td>"; $warranty = $row['warranty']; setcookie('warranty', $warranty); echo "$warranty</td></tr></table>"; } break; } ?> </div> </div> </div> <div class="clear"></div> <div id="footer" align="center"> <p>&nbsp;</p> </div> </div> <div id="tagline"> Wagman Construction - Bridging Generations since 1902 </div> </body> </html>

    Read the article

  • menu with: hover, click, class change and ajax

    - by abdullah kahraman
    Hello! I have made a menu that adds class "active" on hover to each li, and removes the class when hovered out, except on li s that has a class "active" already. So far, this is done. However I have another .click() on every li that loads a content to somewhere with ajax. The problem starts here, when I click, I want to add class "active" to clicked element and remove class from all of them. I add the class, but the li that had class "active" before the click doesn't get "active" when hovered, I think the "active" class is not removed from it? Can anyone help? <div id="menu"> <ul> <li><a href="index.php" id="homeLink">home</a></li> <li><a href="#">news</a></li> <li><a id="test" href="#" class="active">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> <li><a href="contact.php" id="contactLink">contact</a></li> <li id="ajaxP" style="display:none"><img alt="loading" style="border:none;" src="images/ajax-loader.gif"/></li> </ul> </div> Here is the jquery: $("#menu").find("a").not(".active").each(function(){ $(this).hover(function(){ alert($(this)); $(this).addClass("active"); },function(){ $(this).not(".clicking").removeClass("active"); }); }); $("#homeLink").click(function(){ var myThis=$(this); $("#ajaxP").fadeIn("slow"); $("#normalcontent").hide("slow").load("index.php #normalcontent").slideDown("slow"); $("#primarycontainer").hide("slow").load("index.php #primarycontainer").slideDown("slow"); $("#ajaxP").fadeOut("normal"); $("#menu").find("a").each(function(){ $(this).unbind('mouseover').unbind("mouseout"); $(this).removeClass("active clicking"); }); myThis.addClass("active clicking"); return false; });

    Read the article

  • creating a JQuery function

    - by Russell Parrott
    Sorry to bother you guys & girls again on Christmas eve, but I need help creating a reusable JQuery function. I have "badly crafted" this set of code that all works. But I would really like to put it as a function so I don't have to keep repeating everything for each form. I am not too sure about how all the if statements can be combined etc. that is why I wrote it as it is. Any help much appreciated - Oh I suppose it could also be some kind of plugin but that might be the next step if I can understand how the function works. $(':input:visible').live('blur',function(){ if($(this).attr('required')) { if($(this).val() == '' ) { $(this).css({'background-color':'#FFEEEE' }); $(this).parent('form').children('input[type=submit]').hide(); $(this).next('.errormsg').html('OOPs ... '+$(this).prev('label').html()+' is required'); $(this).focus(); $(this).attr('placeholder').hide(); } else { $(this).css({'background-color':'#FFF' , 'border-color':'#999999'}); $(this).next('.errormsg').empty(); $(this).parent('form').children('input[type=submit]').show(); } } return false; }); $(':input[max]').live('blur',function(){ if($(this).attr('max') < parseInt($(this).val()) ){ $(this).next('.errormsg').html( 'OOPs ... the maximum value is '+$(this).attr('max') ); $(this).parent('form').children('input[type=submit]').hide(); $(this).focus(); } else {} return false; }); $(':input[min]').live('blur',function(){ if($(this).attr('min') > parseInt($(this).val()) ){ $(this).next('.errormsg').html( 'OOPs ... the minimum value is '+$(this).attr('min') ); $(this).parent('form').children('input[type=submit]').hide(); $(this).focus(); } else {} return false; }); $(':input[maxlength]').live('keyup',function(){ if($(this).val()==''){ } else { $(this).next('.errormsg').html( $(this).attr('maxlength')- $(this).val().length +' chars remaining'); } return false; }); As said, help much appreciated with one small (I hope) thing, how can I break out of any function IF there are no error messages to actually submit the form?

    Read the article

  • Make html footer occupy the rest of the body

    - by w0rldart
    So I am trying to code the footer of my web app of it occupies the rest of the body's height. Picture: http://img1.uploadscreenshot.com/images/orig/3/8906151296-orig.png Notice the light area beneath the dark area, the dark area should occupy all of it. Some of my html code: <body> .... <footer> <hr> <ul id="footerContainer"> <li class="right"> <ul> <li> <a href="" class="family-filter">Filtro Fami....</a> </li> </ul> </li> </ul> </footer> <script>...</script> </body></html> CSS: .... #footerContainer {width: 90%; min-width: 525px; margin: 0 auto; position: relative;} .... footer hr{ border: 0; height: 30px; background: url('../imgs/footer-top.png') repeat-x scroll; } footer { background: url('../imgs/footer-bg.png') repeat scroll bottom; height: 100%; display: block; margin: 0 auto; padding: 0; overflow: auto; } #footerContainer {margin: 0 auto; position: relative;} #footerContainer li { display: inline;} #footerContainer li .right {float: right;} #footerContainer li a {} Any suggestions? Update1: This is what happens: http://img1.uploadscreenshot.com/images/orig/3/8906391235-orig.png when I set html,body { width: 100%; height: 100%; margin: 0; padding: 0; } Update2: http://awesomescreenshot.com/0382hf1ff Zoom out and in at this page: line25.com/wp-content/uploads/2010/blog-design-coded/demo/… and check the footer area, that's how I need it work on my layout.

    Read the article

  • jQuery - addClass or removeClass - Is there an append class?

    - by iamtheratio
    I have css hover over images for my tabs and I'm trying to get the class to change from .how to .how_on when I click on the image HOW. My tabs are HOW | WHAT | WHEN | WHO | WHY I have classes for each (.how, .how_on), (.what, .what_on), etc... Can I make jQuery add _on to the original class name using click(function(){}); ? HTML: <div id="tab_container"> <ul class="tabs"> <li><a class="how_on" href="#how">How</a></li> <li><a class="why" href="#why">Why</a></li> <li><a class="what" href="#what">What</a></li> <li><a class="who" href="#who">Who</a></li> <li><a class="when" href="#when">When</a></li> </ul> <p><img src="images/tab_top.jpg" width="864px" height="6px" alt="" border="0" /></p> </div> <div class="tab_body"> <!-- HOW --> <div id="how" class="tab"> <strong>HOW IT WORKS:</strong> </div> JQUERY: <script type="text/javascript"> jQuery(document).ready(function(){ //if this is not the first tab, hide it jQuery(".tab:not(:first)").hide(); //to fix u know who jQuery(".tab:first").show(); //when we click one of the tabs jQuery(".tabs a").click(function(){ //get the ID of the element we need to show stringref = jQuery(this).attr("href").split('#')[1]; // adjust css on tabs to show active tab //hide the tabs that doesn't match the ID jQuery('.tab:not(#'+stringref+')').hide(); //fix if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") { jQuery('.tab#' + stringref).show(); } else //display our tab fading it in jQuery('.tab#' + stringref).fadeIn(); //stay with me return false; }); }); </script>

    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

  • asp.net mvc & jquery dialog: What approach do I take to add items to a dropdownlist/select list with

    - by Mark Redman
    Hi, I am new to MVC and have a grasp of the basic model, but still doing everything with postbacks etc. One aspect of the UI I want to build is to have a drop-down-list of items with a button to add an item to the database and refresh the list. Achieving this with WebForms was straight forward as everything was wrapped in UpdatePanels, but what is the best approach to achieve this using MVC? Part of the markup for the list and button look like this: <table> <tr> <td><%=Html.DropDownList("JobTitleSelectList", Model.JobTitleSelectList, "(select job title)", new { @class = "data-entry-field" })%></td> <td>&nbsp;</td> <td><a id="AddJobTitleDialogLink" href="javascript: addJobTitleDialog();" title="Add Job Title"><img id="AddJobTitleButtonImage" src="/Content/Images/Icons/16x16/PlusGrey.png" border="0" /></a></td> </tr> </table> The Dialog is a standard jquery Ui dialog, looks like this: <div id="SingleTextEntryDialog" style="display:none"> <table> <tr> <td>Name:</td> <td><input id="SingleTextEntryDialogText" type="text" size="25" /></td> </tr> </table> </div> I am guessing I need to put this into a UserControl / PartialView (are they the same thing?) Also with the strongly typed View how do I pass the Model or just the SelectList Property to the UserControl or is this not the case? Nor sure if there should be form in the dialog div? or how that is going to postback via ajax. Some examples show a lot of ajax code in the page something like: $.ajax({...}); I assume doing this using jquery is more code than asp.net webforms, but there is just more code to see doing a "View Source" on a page? Your comments appreciated.

    Read the article

  • Need help simplifying my php table

    - by user342391
    I am relatively new to php and have a feeling that I am going the long way round when displaying data from mysql. I have a table a I want to show a few fields from my database. How would I achieve this without having to echo every bit of the table??? Here is the code: <?php $query1 = mysql_send("SELECT firstname, lastname, email, user, country FROM customers WHERE id='".$_COOKIE['custid']."'"); while ($row = mysql_fetch_array($query1)) { echo ' <table id="account_table" style="width:550px; border:none; "> <tr> <td width="155">Contact Name</td>'; echo '<td width="335">'; echo $row['firstname'] ; echo '&nbsp;'; echo $row['lastname']; echo '</td> </tr> <tr> <td>Email Address</td> <td>'; echo $row['email']; echo ' </td> </tr> <tr> <td>Username</td> <td>' ; echo $row['user']; echo '</td> </tr> <tr> <td>Country</td> <td>'; echo $row['country']; echo '</td> </tr> <tr> <td>Time Zone</td> <td>GMT+1</td> </tr> <tr> <td>Activated</td> <td>16 Dec 2009</td> </tr> </table>'; } ?>

    Read the article

  • Hide jQuery Accordion while loading

    - by zac
    I am testing a site build with a slow connection and I noticed the jQuery Accordion stays expanded for a long time, until the rest of the site is loaded, and then finally collapses. Not very pretty. I was wondering how I could keep it collapsed through the loading process and only expand when clicked. I am working with the standalone 1.6 version of the accordion plugin. The basic structure : <div class="sidebar"> <ul id="navigation" class="ui-accordion-container"> <li><a class="head" href="#">1</a> <ul class="sub"> <li><a href="#">1a</a></li> <li><a href="#">2a</a></li> </ul> </li> </ul> </div> and the script jQuery().ready(function(){ jQuery('#navigation').accordion({ active: 'false', header: '.head', navigation: true, animated: 'easeslide', collapsible: true }); }); I tried to hide the elements in the CSS to keep them from appearing while loading but all that achieved is in having them always hidden. Maybe the problem is in the CSS I have a background image in each of the sub menus: #navigation{ margin:0px; margin-left: 10px; padding:0px; text-indent:0px; font-size: 1.1em; width:200px; text-transform: uppercase; padding-bottom: 30px; } #navigation ul{ border-width:0px; margin:0px; padding:0px; text-indent:0px; } #navigation li{ list-style:none outside none; } #navigation li ul{ height:185px; overflow:auto; } #navigation li ul.sub{ background:url('../images/sub.jpg') no-repeat; dispaly: block; } #navigation li li a{ color:#000000; display:block; text-indent:20px; text-decoration: none; padding: 6px 0; } #navigation li li a:hover{ background-color:#FFFF99; color:#FF0000; } Thanks in advance for any advice on how to have this thing run a little smoother and having the accordion always collapsed. -edit - I forgot to mention that I am also hoping for a solution that will allow the nav to still be accessible for those without javscript.

    Read the article

  • Expand and overlap image over a grid of other images

    - by soren121
    I've been fighting with jQuery all night and getting quite frustrated here, so forgive me if the answer was staring me in the face. I have a grid of 15 images contained within a <div>, and when I click on one of them, I want it to expand to three times its original size of 150x105 and overlap the rest. I've got the expanding down, but the overlapping isn't quite working. My current HTML: <div id="image-grid"> <img src="images/after-pictures/1.jpg" class="igc1" /> <img src="images/after-pictures/2.jpg" class="igc2" /> <img src="images/after-pictures/3.jpg" class="igc3" /> <img src="images/after-pictures/4.jpg" class="igc4" /> <img src="images/after-pictures/5.jpg" class="igc5" /> <img src="images/after-pictures/6.jpg" class="igc1" /> <img src="images/after-pictures/7.jpg" class="igc2" /> <img src="images/after-pictures/8.jpg" class="igc3" /> <img src="images/after-pictures/9.jpg" class="igc4" /> <img src="images/after-pictures/10.jpg" class="igc5" /> <img src="images/after-pictures/11.jpg" class="igc1" /> <img src="images/after-pictures/12.jpg" class="igc2" /> <img src="images/after-pictures/13.jpg" class="igc3" /> <img src="images/after-pictures/14.jpg" class="igc4" /> <img src="images/after-pictures/15.jpg" class="igc5" /> </div> The igc* class denotes the column the image is in. CSS: #image-grid { border: 1px solid #aaa; width: 745px; padding: 5px 2px 2px 5px; } #image-grid img { width: 150px; height: 105px; margin: -2px; } jQuery: $('#image-grid img').click(function() { $(this).animate({ width: '450px', height: '315px', zIndex: '10' }, 200); });

    Read the article

  • Navigation bar(s) disappear when the window gets too small

    - by Leron
    The title maybe is a little misleading but I'm not 100% sure how this effect is called. I'm pretty sure what I meant is that my navigation bar is disappearing instead of collapsing. However my set up is this - I am working on the Layout view of ASP.NET MVC 4 project. I'm using bootstrap 3x but also have included jQuery libs so my <head> part is like this: @Scripts.Render("~/Scripts/bootstrap.min.js") @Styles.Render("~/Content/bootstrap.css") @Styles.Render("~/Content/themes/base/jquery.ui.smoothness.css") @Scripts.Render("~/Scripts/jquery-2.0.3.min.js") @Scripts.Render("~/Scripts/jquery-ui-1.10.3.min.js") //just skipped the standard stuff In the body I want to have two navbars and one side menu which will be the same for all my pages but I've noticed that when I start to narrow the window at some point instead of getting an effect similar to this example (noticed how the elements get repositioned) I just got both my navbars gone, I can't see them. The markup for my first navbar is this : <div class="navbar navbar-static-top navbar-inverse navbar-collapse collapse" role="navigation"> <ul class="nav navbar-nav "> <li><a href="#">Info</a></li> <li><a href="#">Info</a></li> </ul> </div> and the second one is : <div class="navbar navbar-collapse collapse" role="navigation" id="main-navigation-bar"> <ul class="nav nav-pills nav-justified"> <li style="border: 1px solid grey"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> In fact the only thing left in my _Layout body is this: <div class="container-fluid"> @RenderBody() </div> which is just for compiling purposes and renders this view : <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> So when I make the window small enough so that my navbars disappear the only thing left is 1..5 numbers from the rendered view. I tested with only one navbar (commented the other) - no matter which one is commented, when I narrow the window I loose the navbar. How can I keep them using bootstrap 3x?

    Read the article

  • Dynamic positioning inside relative div

    - by ian
    I'm trying to get a color picker javascript widget working in a page with a bunch of "stuff" in it that I can't change. Some of the "stuff" is causing the color picker to appear well below the link when clicked. I've reduced it to a simple example below. <html> <head> <script type="text/javascript"> function setPos(aname,dname) { var o=document.getElementById(aname); var ol=o.offsetLeft; while ((o=o.offsetParent) != null) { ol += o.offsetLeft; } o=document.getElementById(aname); var ot=o.offsetTop + 25; while((o=o.offsetParent) != null) { ot += o.offsetTop; } document.getElementById(dname).style.left = ol + "px"; document.getElementById(dname).style.top = ot + "px"; } </script> <style> h1 {height: 50px;} #divMain {position: relative;} </style> </head> <body> <h1></h1> <div id="divMain"> <a href="#" onClick="setPos('link1','div1');return false;" name="link1" id="link1">link 1</a> <div id="div1" style="position:absolute;border-style:solid;left:200px;top:200px;">div 1</div> </div> </body> </html> What's supposed to happen is when you click "link 1", "div1" should move directly below "link 1". What actually happens is that "div 1" appears well below "link 1". If you remove position: relative; from the CSS definition for divMain, "div 1" is positioned correctly. How can I position "div 1" directly beneath "link 1" without removing position: relative;?

    Read the article

  • javascript problem

    - by Gourav
    I have created a dynamic table whose rows gets appended by click of the "Add" button, i want the user not to be able to submit the page if no value is entered in all the rows of the table. how do i achieve this The code is <html> <head> <script type="text/javascript"> function addRowToTable() { var tbl = document.getElementById('tblSample'); var lastRow = tbl.rows.length; var iteration = lastRow+1; var row = tbl.insertRow(lastRow); var cellLeft = row.insertCell(0); var textNode = document.createTextNode(iteration); cellLeft.appendChild(textNode); var cellRight = row.insertCell(1); var el = document.createElement('input'); el.type = 'text'; el.name = 'txtRow' + iteration; el.id = 'txtRow' + iteration; el.size = 40; cellRight.appendChild(el); } function validation() { var a=document.getElementById('tblSample').rows.length; for(i=0;i<a;i++) { alert(document.getElementById('tblSample').txtRow[i].value);//this doesnt work } return true; } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <form name ='qqq' action="sample.html"> <p> <input type="button" value="Add" onclick="addRowToTable();" /> <input type="button" value="Submit" onclick="return validation();" /> </p> <p> <table border="1" id="tblSample"> <tr> <td>1</td> <td>The 1st row</td> </tr> </table> </p> </form> </body> </html> Please suggest

    Read the article

  • Multiple task in one page?(php - mysql - jquery)

    - by python
    My goal is to build an application in a page that can be use multiple task(crud) for example in this html code.there are multiple submit,multiple action in the same page after (user submit (CURD) it will load result table below.) In juery how Can I do this.? <script type="text/javascript" src="jquery.js"></script> <script> $(document).ready(function(){ $("#button1").click(function(){ $('form#crudform').attr({action: "script_1.php"}); $('form#crudform').submit(); }); $("#button2").click(function(){ $('form#crudform').attr({action: "script_2.php"}); $('form#crudform').submit(); }); $("#button3").click(function(){ $('form#crudform').attr({action: "script_3.php"}); $('form#crudform').submit(); }); }); </script> Form CRUD: <form id="crudform" method="post"> <p>Name: <input type="text" name="name"/></p> <p>Age: <input type="text" name="age"/></p> <input type="button" id="button1" value="Cancel" /> <input type="button" id="button2" value="Save" /> <input type="button" id="button3" value="Update" /> </form> Result: <form id="result" method="post"> <table border="1"> <tr> <tr><td></td><td>Name</td><td>Age</td> </tr> <tr><td><input type="checkbox" name="name1"></td><td>Name1</td><td>10</td><tr> <tr><td><input type="checkbox" name="name1"></td><td>Name2</td><td>15</td></tr> <tr><td><input type="checkbox" name="name3"></td><td>Name3</td><td>16</td></tr> </table> <input type="button" id="button4" value="change" /> <input type="button" id="button5" value="drop" /> </form> Anybody know the tutorials relating ..with my tasks.or tips,guide.....are welconme :)

    Read the article

  • what will be the code to move to previous textfield ?

    - by rajesh
    i have the code if i press down button it goes to next textfield but to go to previous textfield what should be the code ... <html> <head> <script language="JavaScript"> function handleKeyDownEvent(elementRef,eventRef) { var charCode = (window.event) ? eventRef.keyCode : eventRef.which; //alert(charCode); // Arrow keys (37:left, 38:up, 39:right, 40:down)... if (charCode == 40) { if (window.event) window.event.keyCode = 9; else event.which = 9; return true; } return true; } </script> </head> <body> <table width="433" border="1" cellspacing="0" cellpadding="0"> <tr> <td width="235" align="center"><input type="text" onKeyDown="handleKeyDownEvent(this,event);" onKeyUp="handleKeyUpEvent(this,event);"></td> <td width="235" align="center"><input type="text" onKeyDown="handleKeyDownEvent(this,event);" onKeyUp="handleKeyUpEvent(this,event);"></td> </tr> <tr> <td width="235" align="center"><input type="text" onKeyDown="handleKeyDownEvent(this,event);" onKeyUp="handleKeyUpEvent(this,event);"></td> <td width="235" align="center"><input type="text" onKeyDown="handleKeyDownEvent(this,event);" onKeyUp="handleKeyUpEvent(this,event);"></td> </tr> <tr> <td> <input type="radio" id="check" name="check" checked> </td> <td> <input type="radio" id="check" name="check" checked> </td> </tr> <tr> <td><input type="checkbox" id="check" name="check"></td> <td><input type="checkbox" id="check" name="check"></td> </tr> </table> </body> </html>

    Read the article

  • Why the vertical scroll bar moves automatically ?

    - by Misha Moroshko
    I don't understand why the vertical scroll bar moves automatically to the most top position when "Line 9" clicked, for example. Further clicks does not move the scroll bar. Could anyone explain why, and how to fix this ? I work with Firefox 3.6.3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <body> <div> <table> <tr row='0'><td class='column1'>Line 0</td></tr> <tr row='1'><td class='column1'>Line 1</td></tr> <tr row='2'><td class='column1'>Line 2</td></tr> <tr row='3'><td class='column1'>Line 3</td></tr> <tr row='4'><td class='column1'>Line 4</td></tr> <tr row='5'><td class='column1'>Line 5</td></tr> <tr row='6'><td class='column1'>Line 6</td></tr> <tr row='7'><td class='column1'>Line 7</td></tr> <tr row='8'><td class='column1'>Line 8</td></tr> <tr row='9'><td class='column1'>Line 9</td></tr> </table> </div> </body> $(document).ready(function() { $(".column1").each(function(index) { $(this).after("<td class='column2'>Details " + index + "</td>"); $(this).toggle(function() { $("[row='" + index + "'] .column2").fadeIn("fast") }, function() { $("[row='" + index + "'] .column2").fadeOut("fast") }); }); }); div { overflow: auto; height: 100px; width: 300px; border: 1px solid blue; } .column1 { cursor: pointer; } .column2 { display: none; }

    Read the article

< Previous Page | 111 112 113 114 115 116 117 118 119 120 121 122  | Next Page >