Search Results

Search found 3759 results on 151 pages for 'border radius'.

Page 139/151 | < Previous Page | 135 136 137 138 139 140 141 142 143 144 145 146  | Next Page >

  • ImageView place at center on click in gallery view

    - by TGMCians
    i used gallery view in which i place multiple imageview dynamically but on click imageview place at center and second question how to start first imageview from left of screen. I do not want to change the place until user scroll horizontally by finger . Is there any way to achieve this. Please help for this.. private class ImageAdapter extends BaseAdapter{ public ImageAdapter() { //To set blank at bottom and make visible TextView textView = (TextView)findViewById(R.id.textView2); textView.setVisibility(View.VISIBLE); //To set the visibility visible of gallery myGallery.setVisibility(View.VISIBLE); } public int getCount() { return ProductItemArray.Image_URL.length; } public Object getItem(int position) { return null; } public long getItemId(int position) { return 0; } public View getView(int position, View arg1, ViewGroup arg2) { ImageView bottomImageView = new ImageView(context); if(Helper.isTablet(context)) bottomImageView.setLayoutParams(new Gallery.LayoutParams(VirtualMirrorActivity.convertDpToPixel(100, context), VirtualMirrorActivity.convertDpToPixel(100, context))); else bottomImageView.setLayoutParams(new Gallery.LayoutParams(VirtualMirrorActivity.convertDpToPixel(80, context), VirtualMirrorActivity.convertDpToPixel(80, context))); UrlImageViewHelper.setUrlDrawable(bottomImageView, ProductItemArray.Image_URL[position]); bottomImageView.setBackgroundResource(R.layout.border); return bottomImageView; } } myGallery.setAdapter(new ImageAdapter()); myGallery.setSelection(1); myGallery.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, final int position, long arg3) { linearLayout.removeView(frameImageView); Thread newThread = new Thread(new Runnable() { public void run() { URL url_1 = null; try { isAlreadyExistInWishlist = false; VMProductListPaging.productUrl = ProductItemArray.Image_small_URL[position]; VMProductListPaging.productId = ProductItemArray.productId[position]; VMProductListPaging.productName = ProductItemArray.product_Name[position]; url_1 = new URL(ProductItemArray.Image_small_URL[position]); bmp = BitmapFactory.decodeStream(url_1.openConnection().getInputStream()); isExecuted = true; bitmapHandler.sendMessage(bitmapHandler.obtainMessage()); } catch (Exception e) { //Toast.makeText(context,"Sorry!! This link appears to be broken",Toast.LENGTH_LONG).show(); } } }); newThread.start(); } }); Layout.xml <Gallery android:id="@+id/galleryView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:spacing="5dp" android:layout_below="@+id/sendPhoto" android:layout_marginTop="10dp" android:visibility="gone"/>

    Read the article

  • Add color to selected <li> item / override <ul> style

    - by Alana
    I have navigation for which I need to set a color for the selected item. It's flat HTML and CSS. Here's the menu code: <ul id="top_navigation"> <li class="border_red"><a href="index.html">Home</a></li> <li class="border_red"><a href="about.html">About</a></li> <li class="border_red"><a href="services.html"><font color="#cf3533">Services</font></a></li> <li class="border_red"><a href="careers.html">Careers</a></li> <li class="border_red"><a href="news.html">News</a></li> <li class="border_red"><a href="sitemap.html">Sitemap</a></li> <li><a href="contact.html">Contact</a></li> </ul> And here's the CSS - there's the basic set up and then a class to put the pipe between the items: #top_navigation { width: 696px; margin: 0px; padding: 0 0 0 4px; list-style-type: none; overflow: hidden; } #top_navigation li { width: auto; height: 17px; margin: 0px; padding: 1px 10px 0 10px; float: left; } #top_navigation li a { margin: 0px; padding: 0px; display: block; font-size: 12px; text-align: center; text-decoration: none; } #top_navigation li a:hover { color: #cf3533; } This sets the pipe on the right. .border_red { border-right: 1px solid #d7d7d7; } I tried combining the two and creating a _selected style, and the pipe shows up, but I can't get the color to change for the selected. I have to be WCAG Priorities 1,2,3-compliant, so I can't just set it manually with .

    Read the article

  • jQuery animate slidding background image using mouse position wont stop... just keeps going

    - by simian
    I have a neat little jQuery script I am working on. Goal: parent div with overflow hidden holds a larger div with image. When I move the mouse to the left or right of the parent div, the div with image changes margin-left to move left or right. Problem is... if I move the mouse out of the parent div (left or right), the image keeps going. I need the image to stop when the mouse is not on the inside left or right edge of the parent div. Any ideas? <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> //<![CDATA[ jQuery.noConflict (); jQuery(document).ready(function(){ jQuery('#container').mousemove(function(e){ var parentWidth = jQuery('#container').width(); var parentWidthLeft = Math.round(.1 * jQuery('#container').width()); var parentWidthRight = Math.round(jQuery('#container').width() - parentWidthLeft); var parentHeight = jQuery('#container').height(); var parentOffset = jQuery('#container').offset(); var X = Math.round(e.pageX - parentOffset.left); var Y = Math.round(e.pageY - parentOffset.top); if (X<parentWidthLeft) { jQuery('#image').animate({'left': '-' + parentWidth }, 5000); } if (X>parentWidthRight) { jQuery('#image').animate({'left': parentWidth }, 5000); } if (X<=parentWidthRight && X>=parentWidthLeft) { jQuery('#image').stop(); } if (X<1) { jQuery('#image').stop(); } }); jQuery('#container').mouseleave(function(){ jQuery('#image').stop(); }); }); // ]]> </script> </head> <body> <div id="container" style="width: 500px; height: 500px; overflow: hidden; border: 10px solid #000; position: relative; margin: auto auto;"> <div id="image" style="position: absolute; left: 0; top: 0;"><img src="http://dump4free.com/imgdump/1/Carmen-Electra_1wallpaper1024x768.jpg" alt="" /></div> </div> </body> </html>

    Read the article

  • Passing input value thru XML loop and return value

    - by Mike Dyer
    "X" is reading the form value, but it is still passing and older "var thisMarket" value. The objective is to take a zip code via HTML form: <form id="market" name="market" onSubmit="return validateZIP(this.zip.value);" method="get" action=""> <input type="text" name="zip" id="zip" value="zipcode" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;" style="float:left; width:100px; margin-top:5px;"> <input type="image" style="float:left; margin-top:5px; border: 0pt none ; width: 22px; height:17px;" src="images/nav/bottom/linkbar/btn_search_btn.gif" onClick="findLda();"> </form> The script being passed thru is: function findLda(x){ marketName = new Array(); marketURL = new Array(); zip = new Array(); zip_temp = new Array(); zipMatch = false; var shareZip = "Shared Zips"; var thisMarket = "Market value"; xmlDoc=loadXML("/_includes/market.xml"); var Offer,node; document.getElementById('market').innerHTML=''; for(var j=0; j<xmlDoc.getElementsByTagName('market').length; j++){ node = xmlDoc.getElementsByTagName('market')[j]; marketName.push(node.childNodes[3].textContent); marketURL.push(node.childNodes[5].textContent); for(var k=0; k<node.getElementsByTagName('zip').length; k++){ if(node.getElementsByTagName('zip')[k].textContent!=null){ zip_temp.push(node.getElementsByTagName('zip')[k].textContent); } } zip.push(zip_temp); zip_temp = new Array(); } //loop the zip Array to find a match for the query Zip. for(k=0; k<zip.length; k++){ for(m=0; m<zip[k].length; m++){ if(x == zip[k][m].toString()){ zipMatch=true; thisMarket=marketName[k].toString(); } } } alert(thisMarket); } The objective naturally is to take field input (A), pass it thru market.xml - initialize a loop and match a zip (B), alert the result (C). Looking for any direction with what is existing or a completely new direction. Thanks!

    Read the article

  • My horizontal drop down with CSS, sub navigation menu items are being displayed on top of each other

    - by Rigo Collazo
    my sub navigation menu items are being displayed on top of each other here is the code: /* NAVIGATION */ .nav-bar {width: 100%; height: 80px; background-image:url(../images/bg-menu80.jpg);} .nav-hold {overflow: hidden;} .nav-list {float: right;} .nav-list li {float: left; width: auto; position: relative;} .nav-list li a {text-decoration: none; display:block; padding: 30px 7px 20px 7px; color: #f9f9f9; font-size: .9em; font-weight: bold;} .nav-list li ul {display: none;} .nav-list li a:hover {text-decoration: none; display: block; padding: 30px 7px 20px 7px; color: #000; font-size: .9em; font-weight: bold; background-color: #e7e4e4;} .nav-list li a:hover li{display: block; position: absolute; margin: 0; padding: 0;} .nav-list li a:hover li{float: left;} .nav-list li:hover li a{ background-color: #333; border-bottom: 1px solid #fff; color: #FFF;} <ul class="nav-list" id="navigation"><!--Menu list--> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li> <ul><a href="members.html">Members</a> <li><a href="board.html">Board of Directors</a></li> <li><a href="committee.html">Committee</a></li> </ul></li> <li><a href="join.html">Join Us</a></li> <li><a href="events.html">Events</a></li> <li><a href="rules.html">Rules &amp; Guidelines</a></li> <li><a href="archive.html">Archive</a></li> <li><a href="contact.html">Contact Us</a></li> <li><a href="#">Login</a></li> </ul><!--ENDS Menu list-->

    Read the article

  • two sql queries in one place

    - by Luke
    <?php $results = mysql_query("SELECT * FROM ".TBL_SUB_RESULTS." WHERE user_submitted != '$_SESSION[username]' AND home_user = '$_SESSION[username]' OR away_user = '$_SESSION[username]' ") ; $num_rows = mysql_num_rows($results); if ($num_rows > 0) { while( $row = mysql_fetch_assoc($results)) { extract($row); $q = mysql_query("SELECT name FROM ".TBL_FRIENDLY." WHERE id = '$ccompid'"); while( $row = mysql_fetch_assoc($q)) { extract($row); ?> <table cellspacing="10" style='border: 1px dotted' width="300" bgcolor="#eeeeee"> <tr> <td><b><? echo $name; ?></b></td> </tr><tr> <td width="100"><? echo $home_user; ?></td> <td width="50"><? echo $home_score; ?></td> <td>-</td> <td width="50"><? echo $away_score; ?></td> <td width="100"><? echo $away_user; ?></td> </tr><tr> <td colspan="2"><A HREF="confirmresult.php?fixid=<? echo $fix_id; ?>">Accept / Decline</a></td> </tr></table><br> <? } } } else { echo "<b>You currently have no results awaiting confirmation</b>"; } ?> I am trying to run two queries as you can see. But they aren't both working. Is there a better way to structure this, I am having a brain freeze! Thanks OOOH by the way, my SQL wont stay in this form! I will protect it afterwards

    Read the article

  • need help in positioning

    - by teki
    i am using "beassistance validation" for my form and using tooltip plugin and it work fine except that positioning. please have a look at this link and i upload my form to get an idea what i am talking about. what i want is: if my validation fails i want to display the message after the tooltip icon, but its displaying the message before the tooltip icon. please see here here is the .css i am using: validation .css #aspnetForm { width: 670px; } #aspnetForm label.error { margin-left: 10px; width: auto; display: inline; } form.cmxform { width: 50em; } em.error { background: url("Images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; } em.success { background: url("Images/checked.gif") no-repeat 0px 0px; padding-left: 16px; } form.cmxform label.error { margin-left: auto; width: 250px; } #aspnetForm label.error { background: url("Images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; padding-bottom: 2px; font-weight: bold; color: #EA5200; } #aspnetForm label.checked { background: url("Images/checked.gif") no-repeat 0px 0px; } em.error { color: black; } #warning { display: none; } <asp:Label runat="server" ID='Label8' >Start Date:</asp:Label> <asp:TextBox ID="txtStartDate" runat='server' ></asp:TextBox> <a style="cursor: hand" class="tooltip" title="Select the starting date of a visit, example 05/05/2010 (MM/DD/YYYY)!"> <img alt="" src="Scripts/JQuery/Tooltip/icon_tooltip.gif" style="width: 11px; height: 11px" /></a> <p> </p> <asp:Label runat="server" ID='Label9' >End Date:</asp:Label> <asp:TextBox ID="txtEndDate" runat='server' ></asp:TextBox> <a style="cursor: hand" class="tooltip" title="Select the end date of a visit, example 05/06/2010 (MM/DD/YYYY)!"> <img alt="" src="Scripts/JQuery/Tooltip/icon_tooltip.gif" style="width: 11px; height: 11px" /></a> tooltip.css #tooltip{ position:absolute; border:1px solid #333; background:#f7f5d1; padding:2px 5px; color:#333; display:none; }

    Read the article

  • Update (ajax) only part of table without affecting whole table

    - by ile
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="list"> <tr> <th><a href="#" class="sortby">Full Name</a></th> <th><a href="#" class="sortby">City</a></th> <th><a href="#" class="sortby">Country</a></th> <th><a href="#" class="sortby">Status</a></th> <th><a href="#" class="sortby">Education</a></th> <th><a href="#" class="sortby">Tasks</a></th> </tr> <div class="dynamicData"> <tr> <td>Firstname Lastname</a></td> <td>Los Angeles</td> <td>USA</td> <td>Married</td> <td>High School</td> <td>4</td> </tr> </tr> <tr> <td>Firstname Lastname</a></td> <td>Los Angeles</td> <td>USA</td> <td>Married</td> <td>High School</td> <td>4</td> </tr> </div> </table> The idea is to update table rows when clicking on link with clasl "sortby" which is part of th table tag. I tried inserting div but this doesn't work. Separating this in two tables is not good solution because witdh in both tables cell are not following each other. Any other solution? Thanks

    Read the article

  • Why is the data I am printing not in a table format

    - by udaya
    Hi This is my program .when i submit the print button i can print the datas but they are not aligned in the table formatthe format in which i need the print to be...How can i print in the correct format <html> <head> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script> <script type="text/javascript"> function PrintElem(elem) { //alert('ddd'); Popup($(elem).text()); } function Popup(data) { var mywindow = window.open('', 'mydiv', 'height=400,width=600'); mywindow.document.write('<html><head><title>my div</title>'); /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />'); mywindow.document.write('</head><body >'); mywindow.document.write(data); mywindow.document.write('</body></html>'); mywindow.document.close(); mywindow.print(); return true; } </script> </head> <body> <div id="mydiv"> <table width="200" border="1"> <tr> <td>sss</td> <td>sssss;</td> <td>snssbsp;</td> </tr> <tr> <td>ssss;</td> <td>sssnbsp;</td> <td>snbsp;</td> </tr> <tr> <td>snbsp;</td> <td>snbsp;</td> <td>snbsp;</td> </tr> </table> </div> <input type="button" value="Print Div" onClick="PrintElem('#mydiv')" /> </body> </html>

    Read the article

  • how to list out the submited data in same page where form submitted?

    - by OM The Eternity
    I have a form with 3 text values and one image.. I want to save these values such that i can display these records in the list below.. how can i do that... I am using osCommerce For example: <form method="post" id="fm-form" action ="" enctype="multipart/form-data"> <label>Name:</label> <input type="text" id="fm-name" name="fm-name" value="" /> <label>Email:</label> <input type="text" id="fm-email" name="fm-email" value="" /> <label>Birthdate:</label> <input type="text" id="fm-birthdate" name="fm-birthdate" value="" /> <input type="file" id="fm-image" name="fm-image"/> <input type="submit" id="fm-submit" value="Save it"> </form> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr > <td align="center" class="productListing-heading">Product(s)</td> <td align="center" class="productListing-heading">Edit</td> <td align="center" class="productListing-heading">Delete</td> </tr> <?php for($i=0;$i<$count_image;$i++){?> <tr> <td align="left" class="productListing-data1"> <?php echo tep_image(DIR_WS_IMAGES . $file_realname, $save_image[$i], '110', '110');?> </td> <td align="center" class="productListing-data1">Edit</td> <td align="center" class="productListing-data1">Delete</td> </tr> <tr><td>&nbsp;</td></tr> <?php }?> </table> In the above format as the form is submitted the image has to be stored in a count_image array variable... and the on its count, the list below the form is displayed.. but i cannot get it worked.. could u pls help in doing this...

    Read the article

  • gauge chart is not displaying any thing

    - by Sandy
    i am trying to display the latest speed in mysql database on guage chart. i have tried so many things but gauge is not display plz any can help me...my code is attached and php part shows the correct value but dont know why guage is not display <?php $host="localhost"; // Host name $username="root"; // Mysql username $password=""; // Mysql password $db_name="mysql"; // Database name $tbl_name="gpsdb"; // Table name // Connect to server and select database. $con=mysql_connect("$host", "$username")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select DB"); $data = mysql_query("SELECT speed FROM gpsdb WHERE DeviceId=1234 ORDER BY TIME DESC LIMIT 1") or die(mysql_error()); while ($nt = mysql_fetch_assoc($data)) { $speed = $nt['speed']; $jsonTable = json_encode($speed); echo $jsonTable; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <script type="text/javascript" src="//www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['gauge']}); </script> <script type="text/javascript"> function drawVisualization() { // Create and populate the data table. var data = new google.visualization.DataTable(<?=$speed?>); // Create and draw the visualization. new google.visualization.Gauge(document.getElementById('visualization')). draw(data); } google.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="visualization" style="width: 600px; height: 300px;"></div> </body> </html>

    Read the article

  • how to disable on click event

    - by user1819709
    function insertQuestion(form) { var x = "<img src='Images/plussigndisabled.jpg' width='30' height='30' alt='Look Up Previous Question' class='plusimage' name='plusbuttonrow'/><span id='plussignmsg'>(Click Plus Sign to look <br/> up Previous Questions)</span>" ; if (qnum == <?php echo (int)$_SESSION['textQuestion']; ?>) { $('#mainPlusbutton').replaceWith(x); } //append rows into a table code, not needed for this question } .... $('.plusimage').live('click', function() { plusbutton($(this)); }); function plusbutton(plus_id) { // Set global info plusbutton_clicked = plus_id; // Display an external page using an iframe var src = "previousquestions.php"; $.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">'); return false; } <form id="QandA" action="<?php echo htmlentities($action); ?>" method="post"> <table id="question"> <tr> <td colspan="2"> <a onclick="return plusbutton();"> <img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" id="mainPlusbutton" name="plusbuttonrow"/> </a> <span id="plussignmsg">(Click Plus Sign to look up Previous Questions)</span> </td> </tr> </table> <table id="questionBtn" align="center"> <tr> <th> <input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" /> </th> </tr> </table> </form> In the code above I am able to replace an image with another image when the if statement is met. But my problem is that when the image is replaced, it does not disable the on click event. My question is that when the image is replaced, how do I disable the onclick event onclick="return plusbutton();? Could unbind click work in this situation. I don't want to use href=# because I don't want to include # at the end of the url

    Read the article

  • KineticJS issue with repeatable mouse event

    - by nuclearpeace
    I have noob issue here (i obviously missing something). I simplified it from my bigger application: When i click blue rectangle, i add another layer to the stage that includes red rectangle (clickable), when i clik this red rectangle it removes second layer with red rect. Problem: When i click blue rect second time, nothing happens :( i.e. app works only once, and i need to add/remove second layer(with red rect) repeatedly. What's wrong? :) You can see it here, Fiddle http://jsfiddle.net/mAX8r/ Code: <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } canvas { border: 1px solid #9C9898; } </style> <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js"> </script> <script> window.onload = function() { var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layerBlue = new Kinetic.Layer(); var layerRed = new Kinetic.Layer(); var rectBlue = new Kinetic.Rect({ x: 100, y: 75, width: 100, height: 50, fill: 'blue', stroke: 'black', strokeWidth: 4 }); var rectRed = new Kinetic.Rect({ x: 300, y: 75, width: 100, height: 50, fill: 'red', stroke: 'black', strokeWidth: 4 }); // mouse events rectBlue.on('click', function() { stage.add(layerRed); stage.draw(); }); rectRed.on('click', function() { layerRed.remove(); stage.draw(); }); // add the shape to the layer layerBlue.add(rectBlue); layerRed.add(rectRed); // add the layer to the stage stage.add(layerBlue); }; </script> </head> <body> <div id="container"></div> </body> </html>

    Read the article

  • Registration form validation not validating

    - by jgray
    I am a noob when it comes to web development. I am trying to validate a registration form and to me it looks right but it will not validate.. This is what i have so far and i am validating through a repository or database. Any help would be greatly appreciated. thanks <?php session_start(); $title = "User Registration"; $keywords = "Name, contact, phone, e-mail, registration"; $description = "user registration becoming a member."; require "partials/_html_header.php"; //require "partials/_header.php"; require "partials/_menu.php"; require "DataRepository.php"; // if all validation passed save user $db = new DataRepository(); // form validation goes here $first_nameErr = $emailErr = $passwordErr = $passwordConfirmErr = ""; $first_name = $last_name = $email = $password = $passwordConfirm = ""; if(isset($_POST['submit'])) { $valid = TRUE; // check if all fields are valid { if ($_SERVER["REQUEST_METHOD"] == "POST") { if (empty($_POST["first_name"])) {$first_nameErr = "Name is required";} else { // $first_name = test_input($_POST["first_name"]); // check if name only contains letters and whitespace if (!preg_match("/^[a-zA-Z ]*$/",$first_name)) { $first_nameErr = "Only letters and white space allowed"; } } if (empty($_POST["email"])) {$emailErr = "Email is required";} else { // $email = test_input($_POST["email"]); // check if e-mail address syntax is valid if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email)) { $emailErr = "Invalid email format"; } } if (!preg_match("/(......)/",$password)) { $passwordErr = "Subject must contain THREE or more characters!"; } if ($_POST['password']!= $_POST['passwordConfirm']) { echo("Oops! Password did not match! Try again. "); } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } } } if(!$db->isEmailUnique($_POST['email'])) { $valid = FALSE; //display errors in the correct places } // if still valid save the user if($valid) { $new_user = array( 'first_name' => $_POST['first_name'], 'last_name' => $_POST['last_name'], 'email' => $_POST['email'], 'password' => $_POST['password'] ); $results = $db->saveUser($new_user); if($results == TRUE) { header("Location: login.php"); } else { echo "WTF!"; exit; } } } ?> <head> <style> .error {color: #FF0000;} </style> </head> <h1 class="center"> World Wide Web Creations' User Registration </h1> <p><span class="error"></span><p> <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" onsubmit="return validate_form()" > First Name: <input type="text" name="first_name" id="first_name" value="<?php echo $first_name;?>" /> <span class="error"> <?php echo $first_nameErr;?></span> <br /> <br /> Last Name(Optional): <input type="text" name="last_name" id="last_name" value="<?php echo $last_name;?>" /> <br /> <br /> E-mail: <input type="email" name="email" id="email" value="<?php echo $email;?>" /> <span class="error"> <?php echo $emailErr;?></span> <br /> <br /> Password: <input type="password" name="password" id="password" value="" /> <span class="error"> <?php echo $passwordErr;?></span> <br /> <br /> Confirmation Password: <input type="password" name="passwordConfirm" id="passwordConfirm" value="" /> <span class="error"> <?php echo $passwordConfirmErr;?></span> <br /> <br /> <br /> <br /> <input type="submit" name="submit" id="submit" value="Submit Data" /> <input type="reset" name="reset" id="reset" value="Reset Form" /> </form> </body> </html> <?php require "partials/_footer.php"; require "partials/_html_footer.php"; ?> class DataRepository { // version number private $version = "1.0.3"; // turn on and off debugging private static $debug = FALSE; // flag to (re)initialize db on each call private static $initialize_db = FALSE; // insert test data on initialization private static $load_default_data = TRUE; const DATAFILE = "203data.txt"; private $data = NULL; private $errors = array(); private $user_fields = array( 'id' => array('required' => 0), 'created_at' => array('required' => 0), 'updated_at' => array('required' => 0), 'first_name' => array('required' => 1), 'last_name' => array('required' => 0), 'email' => array('required' => 1), 'password' => array('required' => 1), 'level' => array('required' => 0, 'default' => 2), ); private $post_fields = array( 'id' => array('required' => 0), 'created_at' => array('required' => 0), 'updated_at' => array('required' => 0), 'user_id' => array('required' => 1), 'title' => array('required' => 1), 'message' => array('required' => 1), 'private' => array('required' => 0, 'default' => 0), ); private $default_user = array( 'id' => 1, 'created_at' => '2013-01-01 00:00:00', 'updated_at' => '2013-01-01 00:00:00', 'first_name' => 'Admin Joe', 'last_name' => 'Tester', 'email' => '[email protected]', 'password' => 'a94a8fe5ccb19ba61c4c0873d391e987982fbbd3', 'level' => 1, ); private $default_post = array( 'id' => 1, 'created_at' => '2013-01-01 00:00:00', 'updated_at' => '2013-01-01 00:00:00', 'user_id' => 1, 'title' => 'My First Post', 'message' => 'This is the message of the first post.', 'private' => 0, ); // constructor will load existing data into memory // if it does not exist it will create it and initialize if desired public function __construct() { // check if need to reset if(DataRepository::$initialize_db AND file_exists(DataRepository::DATAFILE)) { unlink(DataRepository::DATAFILE); } // if file doesn't exist, create the initial datafile if(!file_exists(DataRepository::DATAFILE)) { $this->log("Data file does not exist. Attempting to create it... (".__FUNCTION__.":".__LINE__.")"); // create initial file $this->data = array( 'users' => array( ), 'posts' => array() ); // load default data if needed if(DataRepository::$load_default_data) { $this->data['users'][1] = $this->default_user; $this->data['posts'][1] = $this->default_post; } $this->writeTheData(); } // load the data into memory for use $this->loadTheData(); } private function showErrors($break = TRUE, $type = NULL) { if(count($this->errors) > 0) { echo "<div style=\"color:red;font-weight: bold;font-size: 1.3em\":<h3>$type Errors</h3><ol>"; foreach($this->errors AS $error) { echo "<li>$error</li>"; } echo "</ol></div>"; if($break) { "</br></br></br>Exiting because of errors!"; exit; } } } private function writeTheData() { $this->log("Attempting to write the datafile: ".DataRepository::DATAFILE." (".__FUNCTION__.":".__LINE__.")"); file_put_contents(DataRepository::DATAFILE, json_encode($this->data)); $this->log("Datafile written: ".DataRepository::DATAFILE." (line: ".__LINE__.")"); } private function loadTheData() { $this->log("Attempting to load the datafile: ".DataRepository::DATAFILE." (".__FUNCTION__.":".__LINE__.")"); $this->data = json_decode(file_get_contents(DataRepository::DATAFILE), true); $this->log("Datafile loaded: ".DataRepository::DATAFILE." (".__FUNCTION__.":".__LINE__.")", $this->data); } private function validateFields(&$info, $fields, $pre_errors = NULL) { // merge in any pre_errors if($pre_errors != NULL) { $this->errors = array_merge($this->errors, $pre_errors); } // check all required fields foreach($fields AS $field => $reqs) { if(isset($reqs['required']) AND $reqs['required'] == 1) { if(!isset($info[$field]) OR strlen($info[$field]) == 0) { $this->errors[] = "$field is a REQUIRED field"; } } // set any default values if not present if(isset($reqs['default']) AND (!isset($info[$field]) OR $info[$field] == "")) { $info[$field] = $reqs['default']; } } $this->showErrors(); if(count($this->errors) == 0) { return TRUE; } else { return FALSE; } } private function validateUser(&$user_info) { // check if the email is already in use $this->log("About to check pre_errors: ".DataRepository::DATAFILE." (".__FUNCTION__.":".__LINE__.")", $user_info); $pre_errors = NULL; if(isset($user_info['email'])) { if(!$this->isEmailUnique($user_info['email'])) { $pre_errors = array('The email: '.$user_info['email'].' is already used in our system'); } } $this->log("After pre_error check: ".DataRepository::DATAFILE." (".__FUNCTION__.":".__LINE__.")", $pre_errors); return $this->validateFields($user_info, $this->user_fields, $pre_errors); } private function validatePost(&$post_info) { // check if the user_id in the post actually exists $this->log("About to check pre_errors: ".DataRepository::DATAFILE." (".__FUNCTION__.":".__LINE__.")", $post_info); $pre_errors = NULL; if(isset($post_info['user_id'])) { if(!isset($this->data['users'][$post_info['user_id']])) { $pre_errors = array('The posts must belong to a valid user. (User '.$post_info['user_id'].' does not exist in the data'); } } $this->log("After pre_error check: ".DataRepository::DATAFILE." (".__FUNCTION__.":".__LINE__.")", $pre_errors); return $this->validateFields($post_info, $this->post_fields, $pre_errors); } private function log($message, $data = NULL) { $style = "background-color: #F8F8F8; border: 1px solid #DDDDDD; border-radius: 3px; font-size: 13px; line-height: 19px; overflow: auto; padding: 6px 10px;"; if(DataRepository::$debug) { if($data != NULL) { $dump = "<div style=\"$style\"><pre>".json_encode($data, JSON_PRETTY_PRINT)."</pre></div>"; } else { $dump = NULL; } echo "<code><b>Debug:</b> $message</code>$dump<br />"; } } public function saveUser($user_info) { $this->log("Entering saveUser: (".__FUNCTION__.":".__LINE__.")", $user_info); $mydata = array(); $update = FALSE; // check for existing data if(isset($user_info['id']) AND $this->data['users'][$user_info['id']]) { $mydata = $this->data['users'][$user_info['id']]; $this->log("Loaded prior user: ".print_r($mydata, TRUE)." (".__FUNCTION__.":".__LINE__.")"); } // copy over existing values $this->log("Before copying over existing values: (".__FUNCTION__.":".__LINE__.")", $mydata); foreach($user_info AS $k => $v) { $mydata[$k] = $user_info[$k]; } $this->log("After copying over existing values: (".__FUNCTION__.":".__LINE__.")", $mydata); // check required fields if($this->validateUser($mydata)) { // hash password if new if(isset($mydata['password'])) { $mydata['password'] = sha1($mydata['password']); } // if no id, add the next available one if(!isset($mydata['id']) OR (int)$mydata['id'] < 1) { $this->log("No id set: ".DataRepository::DATAFILE." (".__FUNCTION__.":".__LINE__.")"); if(count($this->data['users']) == 0) { $mydata['id'] = 1; $this->log("Setting id to 1: ".DataRepository::DATAFILE." (".__FUNCTION__.":".__LINE__.")"); } else { $mydata['id'] = max(array_keys($this->data['users']))+1; $this->log("Found max id and added 1 [".$mydata['id']."]: ".DataRepository::DATAFILE." (".__FUNCTION__.":".__LINE__.")"); } } // set created date if null if(!isset($mydata['created_at'])) { $mydata['created_at'] = date ("Y-m-d H:i:s", time()); } // update modified time $mydata['modified_at'] = date ("Y-m-d H:i:s", time()); // copy into data and save $this->log("Before data save: (".__FUNCTION__.":".__LINE__.")", $this->data); $this->data['users'][$mydata['id']] = $mydata; $this->writeTheData(); } return TRUE; } public function getUserById($id) { if(isset($this->data['users'][$id])) { return $this->data['users'][$id]; } else { return array(); } } public function isEmailUnique($email) { // find the user that has the right username/password foreach($this->data['users'] AS $k => $v) { $this->log("Checking unique email: {$v['email']} == $email (".__FUNCTION__.":".__LINE__.")", NULL); if($v['email'] == $email) { $this->log("FOUND NOT unique email: {$v['email']} == $email (".__FUNCTION__.":".__LINE__.")", NULL); return FALSE; break; } } $this->log("Email IS unique: $email (".__FUNCTION__.":".__LINE__.")", NULL); return TRUE; } public function login($username, $password) { // hash password for validation $password = sha1($password); $this->log("Attempting to login with $username / $password: (".__FUNCTION__.":".__LINE__.")", NULL); $user = NULL; // find the user that has the right username/password foreach($this->data['users'] AS $k => $v) { if($v['email'] == $username AND $v['password'] == $password) { $user = $v; break; } } $this->log("Exiting login: (".__FUNCTION__.":".__LINE__.")", $user); return $user; } public function savePost($post_info) { $this->log("Entering savePost: (".__FUNCTION__.":".__LINE__.")", $post_info); $mydata = array(); // check for existing data if(isset($post_info['id']) AND $this->data['posts'][$post_info['id']]) { $mydata = $this->data['posts'][$post_info['id']]; $this->log("Loaded prior posts: ".print_r($mydata, TRUE)." (".__FUNCTION__.":".__LINE__.")"); } $this->log("Before copying over existing values: (".__FUNCTION__.":".__LINE__.")", $mydata); foreach($post_info AS $k => $v) { $mydata[$k] = $post_info[$k]; } $this->log("After copying over existing values: (".__FUNCTION__.":".__LINE__.")", $mydata); // check required fields if($this->validatePost($mydata)) { // if no id, add the next available one if(!isset($mydata['id']) OR (int)$mydata['id'] < 1) { $this->log("No id set: ".DataRepository::DATAFILE." (".__FUNCTION__.":".__LINE__.")"); if(count($this->data['posts']) == 0) { $mydata['id'] = 1; $this->log("Setting id to 1: ".DataRepository::DATAFILE." (".__FUNCTION__.":".__LINE__.")"); } else { $mydata['id'] = max(array_keys($this->data['posts']))+1; $this->log("Found max id and added 1 [".$mydata['id']."]: ".DataRepository::DATAFILE." (".__FUNCTION__.":".__LINE__.")"); } } // set created date if null if(!isset($mydata['created_at'])) { $mydata['created_at'] = date ("Y-m-d H:i:s", time()); } // update modified time $mydata['modified_at'] = date ("Y-m-d H:i:s", time()); // copy into data and save $this->data['posts'][$mydata['id']] = $mydata; $this->log("Before data save: (".__FUNCTION__.":".__LINE__.")", $this->data); $this->writeTheData(); } return TRUE; } public function getAllPosts() { return $this->loadPostsUsers($this->data['posts']); } public function loadPostsUsers($posts) { foreach($posts AS $id => $post) { $posts[$id]['user'] = $this->getUserById($post['user_id']); } return $posts; } public function dump($line_number, $temp = 'NO') { // if(DataRepository::$debug) { if($temp == 'NO') { $temp = $this->data; } echo "<pre>Dumping from line: $line_number\n"; echo json_encode($temp, JSON_PRETTY_PRINT); echo "</pre>"; } } } /* * Change Log * * 1.0.0 * - first version * 1.0.1 * - Added isEmailUnique() function for form validation and precheck on user save * 1.0.2 * - Fixed getAllPosts() to include the post's user info * - Added loadPostsUsers() to load one or more posts with their user info * 1.0.3 * - Added autoload to always add admin Joe. */

    Read the article

  • mysql search using for loop from php.

    - by deb
    hi, i am a beginner. but I'm practicing a lot for few days with php mysql, and I am trying to use for loop to search an exploded string, one by one from mysql server. Till now I have no results. I'm giving my codes, <?php // Example 1 $var = @$_GET['s'] ; $limit=500; echo " "; echo "$var"; echo " "; $trimmed_array = explode(" ", $var); echo "$trimmed_array[0]"; // piece1 echo " "; $count= count($trimmed_array); echo $count; for($j=0;$j<$count;$j++) { e cho "$trimmed_array[$j]";; echo " "; } echo " "; for($i=0; $i<$count ; $i++){ $query = "select * from book where name like \"%$trimmed_array[$i]%\" order by name"; $numresults=mysql_query($query); $numrows =mysql_num_rows($numresults); if ($numrows == 0) { echo "<h4>Results</h4>"; echo "<p>Sorry, your search: &quot;" . $trimmed_array[i] . "&quot; returned zero results</p>"; } if (empty($s)) { $s=0; } $query .= " limit $s,$limit"; $result = mysql_query($query) or die("Couldn't execute query"); echo "<p>You searched for: &quot;" . $var . "&quot;</p>"; echo "Results<br /><br />"; $count=1; while ($row= mysql_fetch_array($result)) { $name = $row["name"]; $publisher=$row["publisher"]; $total=$row["total"]; $issued=$row["issued"]; $available=$row["available"]; $category=$row["category"]; echo "<table border='1'><tr><td>$count)</td><td>$name&nbsp;</td><td>$publisher&nbsp;</td><td>$total&nbsp;</td><td>$issued&nbsp;</td><td>$available&nbsp;</td><td>$category&nbsp;</td></tr></table>" ; $count++ ; } } ?>

    Read the article

  • HTML how to automate the creation of/programmatically create divs?

    - by bernlim
    I have a div grid like this: <div id="MainDiv" style="border:1px solid black; width:162px; height:160px;"> <div id="Column1" style="float:left"> <div id="sq1" style="width:40px; height:40px;"> </div> <div id="sq2" style="width:40px; height:40px;"> </div> <div id="sq3" style="width:40px; height:40px;"> </div> <div id="sq4" style="width:40px; height:40px;"> </div> </div> <div id="Column2" style="float:left"> <div id="sq5" style="width:40px; height:40px;"> </div> <div id="sq6" style="width:40px; height:40px;"> </div> <div id="sq7" style="width:40px; height:40px;"> </div> <div id="sq8" style="width:40px; height:40px;"> </div> </div> <div id="Column3" style="float:left"> <div id="sq9" style="width:40px; height:40px;"> </div> <div id="sq10" style="width:40px; height:40px;"> </div> <div id="sq11" style="width:40px; height:40px;"> </div> <div id="sq12" style="width:40px; height:40px;"> </div> </div> How do I write just a few lines of code to automate the entire process?

    Read the article

  • aligning divs in <td> to top of <td>

    - by twitter
    update: added jsfiddle: http://jsfiddle.net/WgzgF/11/ I have a table with a bunch of <td>. Each td has a div .tdcont which is like a wrapper of all content in that td. In .tdcont, I have 2 groups of divs .alwaystop and .below-at. <td class="table-td"> <div class="tdcont"> <div class="alwaystop"> <div class="at1">at1</div> <div class="at2">at2</div> <div class="at3">at3</div> </div> <div class="below-at"> <div class="bat1">bat1</div> <div class="bat2">bat2</div> <div class="bat3">bat3</div> </div> </div> </td> The problem I'm having is that alwaystop is supposed to align itself to the top border of the cell and below-at is supposed to come right under it like this _____________________________________________________ at1 at2 at3 | at1 at2 at3 | at1 at2 at3 | bat1 bat2 bat3 | bat1 bat2 bat3 | bat1 bat2 bat3 | small image here | big image here | | | is taking lots | | | of space | | __________________|_________________|________________| What I'm finding is that alwaystop and below-at center themselves vertically like you see in this fiddle http://jsfiddle.net/WgzgF/11/ so if one of the adjacent cells in this row is long, alwaystop centers itself to this row's height like this _____________________________________________________ | at1 at2 at3 | | | bat1 bat2 bat3 | | at1 at2 at3 | big image here | at1 at2 at3 | bat1 bat2 bat3 | is taking lots | bat1 bat2 bat3 | small image here | of space | | __________________|_________________|________________| What I want to do is make alwaystop always start from the top of the cell regardless of adjacent cells' heights, then the below-at comes under it. How can I do this? I should add that I have the content of alwaystop is floated left, so is the content of below-at, so they're supposed to be like 2 rows inside that td. .at1, .at2, .at3{ float:left; } .bat1, .bat2, .bat3{ float:left; } The css for alwaystop and below-at is empty. I tried a whole bunch of stuff like vertical-align and absolute positioning, but nothing worked and I just gave up and deleted them. .alwaystop{ } .below-at{ }

    Read the article

  • iframe 100% height causing vertical scrollbar

    - by Keevon
    I'm trying to layout a design that has a fixed height header at the top of the screen, and then an iframe below taking up the remaining space. The solution I came up with is as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css"><!-- * {margin: 0;} html, body {height: 100%;width: 100%;margin: 0;padding: 0;}--></style> </head> <body> <div style="height:70px;background-color:blue;"></div> <div style="position:absolute;top:70px;bottom:0;left:0;right:0;"> <iframe src="http://www.google.com" frameborder="0" style="border:0;padding:0;margin:0;width:100%;height:100%;"></iframe> </div> </body> </html> Essentially, I'm creating an absolutely positioned div below the header and sizing it to take up the rest of the space, then putting the full size iframe in there. The problem I'm running into is that if you paste the code exactly as seen below, using XHTML Strict, in each browser (tested w/ chrome/safari/ie8) you will see a vertical scroll bar with a few pixels of white space below the div. Doing some experimenting, I found that if I remove the doctype completely it works in safari/chrome, but IE gets even worse, setting the iframe height to 300px or so. If I set the doctype to transitional, it works in safari/chrome but has the same problem as in the strict case for IE8. If I use the HTML5 doctype, it has the same problem as strict in all browsers. Finally, if I remove the iframe in any of these cases, everything is laid out just fine. Anyone have any ideas?

    Read the article

  • How to bridge Debian guest VM to VPN via Cisco AnyConnect Client running on Windows Vista host

    - by bgoodr
    I am running Cisco Anyconnect VPN Client version 2.5.3054 on a laptop running Windows Vista Home Premium (version 6.0.6002) Service Pack 2. I am running the VMware Player version 4.0.2 build-591240. The host operating system running under VMware Player is Debian 6.0.2.1 i386. The laptop is connected to a wireless connection, and I can browse the web from Windows Vista using Firefox just fine. I am able to boot into the Debian VM and open up a browser and access websites on the WAN from within the VM just fine. I can ping real Linux hosts on my LAN via: ping <lan_system>.local where <lan_system> is the hostname returned from uname -a on that system on my LAN. From a DOS CMD shell, I am able to ping hosts that exist on the remote network served by the Cisco AnyConnect Client's VPN network (and without the .local suffix applied as above): ping <remote_system> However, from within the Debian VM, I expect to be able to also ping those same remote hosts (<remote_system>) that are tunnelled over the VPN set up by Cisco AnyConnect Client. Let's say that I can ping a <remote_system> called flubber from a DOS CMD prompt just fine. When I execute Linux ping command from inside the Debian VM via: ping flubber It returns immediately with this output: ping: unknown host flubber For reference since I suspect it will be useful, here is the output of the route print command from the DOS CMD prompt: route print =========================================================================== Interface List 30 ...00 05 9a 3c 7a 00 ...... Cisco AnyConnect VPN Virtual Miniport Adapter for Windows 11 ...00 1b 9e c4 de e5 ...... Atheros AR5007EG Wireless Network Adapter 26 ...00 50 56 c0 00 01 ...... VMware Virtual Ethernet Adapter for VMnet1 28 ...00 50 56 c0 00 08 ...... VMware Virtual Ethernet Adapter for VMnet8 1 ........................... Software Loopback Interface 1 12 ...02 00 54 55 4e 01 ...... Teredo Tunneling Pseudo-Interface 13 ...00 00 00 00 00 00 00 e0 Microsoft ISATAP Adapter #3 32 ...00 00 00 00 00 00 00 e0 Microsoft ISATAP Adapter #4 27 ...00 00 00 00 00 00 00 e0 isatap.{E5292CF6-4FBB-4320-806D-A6B366769255} 17 ...00 00 00 00 00 00 00 e0 Microsoft ISATAP Adapter #2 20 ...00 00 00 00 00 00 00 e0 Microsoft ISATAP Adapter #8 22 ...00 00 00 00 00 00 00 e0 Microsoft ISATAP Adapter #10 24 ...00 00 00 00 00 00 00 e0 Microsoft ISATAP Adapter #11 25 ...00 00 00 00 00 00 00 e0 Microsoft ISATAP Adapter #12 29 ...00 00 00 00 00 00 00 e0 isatap.{C3852986-5053-4E2E-BE60-52EA2FCF5899} 41 ...00 00 00 00 00 00 00 e0 Microsoft ISATAP Adapter #14 =========================================================================== At the top window border of the VM, clicking on Virtual Machine, then clicking on Virtual Machine Settings, then clicking on Network Adapter, I have these two options checked: [X] Bridged: Connected directly to the physical Network [X] Replicate physical network connection state [ ] NAT: used to share the hosts's IP address [ ] Host-only: A private network shared with the host [ ] LAN segment: [ ] <LAN Segments...> <Advanced> I've toyed with the other options such as NAT and Host-only but that had no effect. Is there some way to allow the VM to access those <remote_system>'s?

    Read the article

  • Debian, 6rd tunnel, and connection troubles

    - by Chris B
    Long story short I am having issues with IPv6 using a 6rd tunnel with my ISP, charter business. They offer a 6rd tunnel that I think I have properly set up, but the server doesn’t reply to every ipv6 request. When the server has the network interfaces idle with no traffic for about 10 minutes, then IPv6 stops accepting inbound connections. to re-allow it, I must go into the server, and make it do a outbound ipv6 connection (normally a ping) to start it back up. Whats weird though i that if I run iptraf when its not working, it still shows a inbound ipv6 packet… the server is just not replying, and I can’t figure out why. Also, if I try to access my server over IPv6 from a house about 1 mile away on the same ISP, it is never able to connect. it always times out, but again the iptraf shows a ipv6 inbound packet. Again, it just does not reply. To test if my server is accessible through IPv6 I always have to use my vzw 4g phone (they use IPv6) or ipv6proxy dot net. Here is all of the configuration information my ISP gives on there tunnel server: 6rd Prefix = 2602:100::/32 Border Relay Address = 68.114.165.1 6rd prefix length = 32 IPv4 mask length = 0 Here is my /etc/network/interfaces for ipv6 (used x's to block real addresses) auto charterv6 iface charterv6 inet6 v4tunnel address 2602:100:189f:xxxx::1 netmask 32 ttl 64 gateway ::68.114.165.1 endpoint 68.114.165.1 local 24.159.218.xxx up ip link set mtu 1280 dev charterv6 here is my iptables config filter :INPUT DROP [0:0] :fail2ban-ssh – [0:0] :OUTPUT ACCEPT [0:0] :FORWARD DROP [0:0] :hold – [0:0] -A INPUT -p tcp -m tcp —dport 22 -j fail2ban-ssh -A INPUT -m state —state RELATED,ESTABLISHED -j ACCEPT -A INPUT -p tcp -m multiport -j ACCEPT —dports 80,443,25,465,110,995,143,993,587,465,22 -A INPUT -i lo -j ACCEPT -A INPUT -p tcp -m tcp —dport 10000 -j ACCEPT -A INPUT -p tcp -m tcp —dport 5900:5910 -j ACCEPT -A fail2ban-ssh -j RETURN -A INPUT -p icmp -j ACCEPT COMMIT and last here is my ip6tables firewall config filter :INPUT DROP [1653:339023] :FORWARD DROP [0:0] :OUTPUT ACCEPT [60141:13757903] :hold – [0:0] -A INPUT -m state —state RELATED,ESTABLISHED -j ACCEPT -A INPUT -p tcp -m multiport —dports 80,443,25,465,110,995,143,993,587,465,22 -j ACCEPT -A INPUT -i lo -j ACCEPT -A INPUT -p tcp -m tcp —dport 10000 -j ACCEPT -A INPUT -p tcp -m tcp —dport 5900:5910 -j ACCEPT -A INPUT -p ipv6-icmp -j ACCEPT COMMIT So Summary: 1.iptraf always shows IPv6 traffic, so its always making it to the server 2.server stops replying on ipv6 after no traffic for awhile (10 minutesish) until a outbound connection is made, then the process repeats. 3.server is NEVER accessable vi same ISP (yet iptraf still shows ipv6 request) Notes: When I try to access it from the same ISP from across town, even with iptables and ip6tables allowing ALL inbound traffic, this is what iptraf shows. IPv6 (92 bytes) from 97.92.18.xxx to 24.159.218.xxx on eth0 ICMP dest unrch (port) (120 bytes) from 24.159.218.xxx to 97.92.18.xxx on eth1 its strange, like its trying to forward to LAN? (eth1 is LAN, eth0 is WAN) even with the IPv6 address being set in the hosts file to the servers domain name. With iptables set up normally with the above configurations it only says this: IPv6 (100 bytes) from 97.92.18.xxx to 24.159.218.xxx on eth0 Im REALLY stuck on this, and any help would be GREATLY appreciated.

    Read the article

  • How do you handle authentication across domains?

    - by William Ratcliff
    I'm trying to save users of our services from having to have multiple accounts/passwords. I'm in a large organization and there's one group that handles part of user authentication for users who are from outside the facility (primarily for administrative functions). They store a secure cookie to establish a session and communicate only via HTTPS via the browser. Sessions expire either through: 1) explicit logout of the user 2) Inactivity 3) Browser closes My team is trying to write a web application to help users analyze data that they've taken (or are currently taking) while at our facility. We need to determine if a user is 1) authenticated 2) Some identifier for that user so we can store state for them (what analysis they are working on, etc.) So, the problem is how do you authenticate across domains (the authentication server for the other application lives in a border region between public and private--we will live in the public region). We have come up with some scenarios and I'd like advice about what is best practice, or if there is one we haven't considered. Let's start with the case where the user is authenticated with the authentication server. 1) The authentication server leaves a public cookie in the browser with their primary key for a user. If this is deemed sensitive, they encrypt it on their server and we have the key to decrypt it on our server. When the user visits our site, we check for this public cookie. We extract the user_id and use a public api for the authentication server to request if the user is logged in. If they are, they send us a response with: response={ userid :we can then map this to our own user ids. If necessary, we can request additional information such as email-address/display name once (to notify them if long running jobs are done, or to share results with other people, like with google_docs). account_is_active:Make sure that the account is still valid session_is_active: Is their session still active? If we query this for a valid user, this will have a side effect that we will reset the last_time_session_activated value and thus prolong their session with the authentication server last_time_session_activated: let us know how much time they have left ip_address_session_started_from:make sure the person at our site is coming from the same ip as they started the session at } Given this response, we either accept them as authenticated and move on with our app, or redirect them to the login page for the authentication server (question: if we give an encrypted portion of the response (signed by us) with the page to redirect them to, do we open any gaping security holes in the authentication server)? The flaw that we've found with this is that if the user visits evilsite.com and they look at the session cookie and send a query to the public api of the authentication server, they can keep the session alive and if our original user leaves the machine without logging out, then the next user will be able to access their session (this was possible before, but having the session alive eternally makes this worse). 2) The authentication server redirects all requests made to our domain to us and we send responses back through them to the user. Essentially, they act as a proxy. The advantage of this is that we can handshake with the authentication server, so it's safe to be trusted with the email address/name of the user and they don't have to reenter it So, if the user tries to go to: authentication_site/mysite_page1 they are redirected to mysite. Which would you choose, or is there a better way? The goal is to minimize the "Yet Another Password/Yet another username" problem... Thanks!!!!

    Read the article

  • Initial Cisco ASA 5510 Config

    - by Brendan ODonnell
    Fair warning, I'm a but of a noob so please bear with me. I'm trying to set up a new ASA 5510. I have a pretty simple set up with one /24 on the inside NATed to a DHCP address on the outside. Everything on the inside works and I can ping the outside interface from external devices. No matter what I do I can't get anything internal to route across the border to the outside and back. To try and eliminate ACL issues as a possibility I added permit any any rules to the incoming access lists on the inside and outside interfaces. I'd appreciate any help I can get. Here's the sh run. : Saved : ASA Version 8.4(3) ! hostname gateway domain-name xxx.local enable password xxx encrypted passwd xxx encrypted names ! interface Ethernet0/0 nameif outside security-level 0 ip address dhcp setroute ! interface Ethernet0/1 nameif inside security-level 100 ip address 10.x.x.x 255.255.255.0 ! interface Ethernet0/2 shutdown no nameif no security-level no ip address ! interface Ethernet0/3 shutdown no nameif no security-level no ip address ! interface Management0/0 nameif management security-level 100 ip address 192.168.1.1 255.255.255.0 management-only ! ftp mode passive dns domain-lookup inside dns server-group DefaultDNS name-server 10.x.x.x domain-name xxx.local same-security-traffic permit inter-interface same-security-traffic permit intra-interface object network inside-network subnet 10.x.x.x 255.255.255.0 object-group protocol TCPUDP protocol-object udp protocol-object tcp access-list outside_access_in extended permit ip any any access-list inside_access_in extended permit ip any any pager lines 24 logging enable logging buffered informational logging asdm informational mtu management 1500 mtu inside 1500 mtu outside 1500 no failover icmp unreachable rate-limit 1 burst-size 1 icmp permit any inside icmp permit any outside no asdm history enable arp timeout 14400 ! object network inside-network nat (any,outside) dynamic interface access-group inside_access_in in interface inside access-group outside_access_in in interface outside timeout xlate 3:00:00 timeout pat-xlate 0:00:30 timeout conn 1:00:00 half-closed 0:10:00 udp 0:02:00 icmp 0:00:02 timeout sunrpc 0:10:00 h323 0:05:00 h225 1:00:00 mgcp 0:05:00 mgcp-pat 0:05:00 timeout sip 0:30:00 sip_media 0:02:00 sip-invite 0:03:00 sip-disconnect 0:02:00 timeout sip-provisional-media 0:02:00 uauth 0:05:00 absolute timeout tcp-proxy-reassembly 0:01:00 timeout floating-conn 0:00:00 dynamic-access-policy-record DfltAccessPolicy user-identity default-domain LOCAL aaa authentication ssh console LOCAL aaa authentication http console LOCAL http server enable http 192.168.1.0 255.255.255.0 management http 10.x.x.x 255.255.255.0 inside http authentication-certificate management http authentication-certificate inside no snmp-server location no snmp-server contact snmp-server enable traps snmp authentication linkup linkdown coldstart warmstart telnet timeout 5 ssh 192.168.1.0 255.255.255.0 management ssh 10.x.x.x 255.255.255.0 inside ssh timeout 5 ssh version 2 console timeout 0 dhcp-client client-id interface outside dhcpd address 192.168.1.2-192.168.1.254 management dhcpd enable management ! threat-detection basic-threat threat-detection statistics access-list no threat-detection statistics tcp-intercept webvpn username xxx password xxx encrypted ! class-map inspection_default match default-inspection-traffic ! ! policy-map type inspect dns preset_dns_map parameters message-length maximum client auto message-length maximum 512 policy-map global_policy class inspection_default inspect dns preset_dns_map inspect ftp inspect h323 h225 inspect h323 ras inspect rsh inspect rtsp inspect esmtp inspect sqlnet inspect skinny inspect sunrpc inspect xdmcp inspect sip inspect netbios inspect tftp inspect ip-options inspect icmp ! service-policy global_policy global prompt hostname context no call-home reporting anonymous Cryptochecksum:fe19874e18fe7107948eb0ada6240bc2 : end no asdm history enable

    Read the article

  • Our Look at Opera 10.50 Web Browser

    - by Asian Angel
    Everyone has been talking about the newest version of Opera recently but perhaps you have not looked at it too closely yet. Today we will take a look at 10.50 and let you see what this “new browser” is all about. The New Engines Carakan JavaScript Engine: Runs web applications up to 7 times faster than its predecessor Futhark Vega Graphics Library: Enables super fast and smooth graphics on everything from tab switching to webpage animation Presto 2.5: Provides support for HTML5, CSS2.1 and the latest CSS3 standards A Look at the Features Available If you have installed or used older versions of Opera before then the default look after a clean install will probably seem rather different. The main differences in appearance are mainly located within the “glass border” areas of the browser. The “Speed Dial” setup looks and works just as well as in previous versions. You can set a favorite wallpaper or image as your background and choose the number of “dials” using the “Configure Speed Dial Command”. One of the “standout” differences is the “O Button”. All of the menus have been condensed into this single access point but it only takes a few moments to find what you are looking for. If you have used the style before in earlier versions of Opera some of the items have been moved around. For those who prefer the “Menu Bar” that can be easily restored using the “Show Menu Bar Command”. If desired you can actually “extend” the “Tab Bar” downwards to display thumbnails of your open tabs. Just use your mouse to grab the bottom of the “Tab Bar” and adjust it to suit your personal needs. The only problem with this feature is that it will quickly use up a good sized portion of your available UI and browser window space. The “Password Manager” is ready to access when needed…the background for the button will turn a shiny metallic blue when you open a webpage that you have “Login Information” saved for. One of the new features is a small “Recycle Bin Button” in the upper right corner. Clicking on this will display a list of recently closed tabs letting you have easy access to any tabs that you may have accidentally closed. This is definitely a great feature to have as an easy access button. For those who were used to how the “Zoom Feature” looked before it has a new “look” to it. Instead of the pop-up menu-type listing of “view sizes” present before you now have a slider button that you can use to adjust the zooming level. For our default setup here the “Sidebar Panels” available were: “Bookmarks, Widgets, Unite, Notes, Downloads, History, & Panels”. Additional panels such as “Links, Windows, Search, Info, etc.” are available if you want and/or need them (accessible using the “Panels Plus Sign Button”). The “Opera Link Button” makes it easy for you to synchronize your “Speed Dial, Bookmarks, Personal Bar, Custom Searches, History & Notes”. Note: “Opera Link” requires an account and can be signed up for using the link provided below. Want to share files with your family and friends? “Unite” allows you to do that and more. With “Unite” you can: “Stream Music, Show Photo Galleries, Share Files and/or Folders, & host webpages directly from your browser”. We have a more in-depth look at “Unite” in our article here. Note: Use of “Unite” requires an Opera account. Got a slow internet connection? “Opera Turbo” can help with that by running the web traffic through their “compression servers” to speed up your web browsing. Keep in mind that “Opera Turbo” will not engage if you are accessing a secure website (i.e. your bank’s website) thus preserving your security. Note: “Opera Turbo” can be set up to automatically detect slow internet connections (i.e. crowded Wi-Fi in a cafe). Opera has a built-in “Private Browsing Mode” now for those who prefer anonymous browsing and want to keep the “history records clean” on their computer. To access it go to “Tabs and windows” and select “New private tab” or “New private window” as desired. When you open your new “Private Tab or Window” you will see the following message with details on how Opera will handle browsing information and a large “door hanger symbol”. Notice that the one tab is locked into “Private Browsing Mode” while the others are still working in “Regular Browsing Mode”. Very nice! A miniature version of the “door hanger symbol” will be present on any tab that is locked into “Private Browsing Mode”. If you are using Windows 7 then you will love how things look from your “Taskbar”. Here you can see four very nice looking thumbnails for the tabs that we had open. All that you have to do is click on the desired thumbnail… The “Context Menu” looks just as lovely as the thumbnails and definitely has some terrific functionality built into it. Add Enhanced Aero Capability If you love “Aero” and want more for your new Opera install then we have the perfect theme for you. The theme’s name is Z1-AV69 and once you have downloaded it you will need to place it in the “Skins Subfolder” in Opera’s “Program Files Folder”. Note: For our example we used version 1.10 but version 2.00 is now available (link provided below). Once you have restarted Opera, go to the “O Menu” and select “Appearance”. When the “Appearance Window” opens click on “Z1-Glass Skin” and then click “OK”. All of a sudden you will have more “Aero Goodness” to enjoy. Compare this screenshot with the one at the top of this article…the only part that is not transparent now is the browser window area itself. Want even more “Aero Goodness”? Right click on the “Tab Bar” and set “Tab Bar Placement” to “Left”. Note: You can achieve the same effect by setting the “Tab Bar Placement” to “Right”. With the “Speed Dial” visible you will be able to see your wallpaper with ease. While this is obviously not for everyone it does make for a great visual trick. Portable Versions Perhaps you need this wonderful new version of Opera to go with you wherever you do during the day. Not a problem…just visit the Opera USB website to choose a version that works best for you. You can select from “Zip or Exe” setup files and if needed update an older portable version using a “Zipped Update Files Package”. If you are updating an older version keep in mind that you will need to delete the old “OperaUSB.exe. File” due to changes with the new setup files. During our tests updating older portable versions went well for the most part but we did experience a few “odd UI quirks” here and there…so we recommend setting up a clean install if possible. Conclusion The new 10.50 release is a pleasure to use and is a recommended install for your system. Whether you are considering trying Opera for the first time or have been using it for a bit we think that you will pleased with everything that the 10.50 release has to offer. For those who would like to add User Scripts to Opera be certain to look at our how-to article here. Links Download Opera 10.50 for your location (Windows) Get the latest Snapshot versions for Linux & Mac Sign up for an Opera Link account View In-Depth detail on Opera 10.50’s features Download the Z1-AV69 Aero Theme Download Portable Opera 10.50 Similar Articles Productive Geek Tips Set the Speed Dial as the Opera Startup PageSet Up User Scripts in Opera BrowserScan Files for Viruses Before You Download With Dr.WebTurn Your Computer into a File, Music, and Web Server with Opera UniteSet the Default Browser on Ubuntu From the Command Line TouchFreeze Alternative in AutoHotkey The Icy Undertow Desktop Windows Home Server – Backup to LAN The Clear & Clean Desktop Use This Bookmarklet to Easily Get Albums Use AutoHotkey to Assign a Hotkey to a Specific Window Latest Software Reviews Tinyhacker Random Tips Revo Uninstaller Pro Registry Mechanic 9 for Windows PC Tools Internet Security Suite 2010 PCmover Professional Make your Joomla & Drupal Sites Mobile with OSMOBI Integrate Twitter and Delicious and Make Life Easier Design Your Web Pages Using the Golden Ratio Worldwide Growth of the Internet How to Find Your Mac Address Use My TextTools to Edit and Organize Text

    Read the article

  • Metro: Introduction to the WinJS ListView Control

    - by Stephen.Walther
    The goal of this blog entry is to provide a quick introduction to the ListView control – just the bare minimum that you need to know to start using the control. When building Metro style applications using JavaScript, the ListView control is the primary control that you use for displaying lists of items. For example, if you are building a product catalog app, then you can use the ListView control to display the list of products. The ListView control supports several advanced features that I plan to discuss in future blog entries. For example, you can group the items in a ListView, you can create master/details views with a ListView, and you can efficiently work with large sets of items with a ListView. In this blog entry, we’ll keep things simple and focus on displaying a list of products. There are three things that you need to do in order to display a list of items with a ListView: Create a data source Create an Item Template Declare the ListView Creating the ListView Data Source The first step is to create (or retrieve) the data that you want to display with the ListView. In most scenarios, you will want to bind a ListView to a WinJS.Binding.List object. The nice thing about the WinJS.Binding.List object is that it enables you to take a standard JavaScript array and convert the array into something that can be bound to the ListView. It doesn’t matter where the JavaScript array comes from. It could be a static array that you declare or you could retrieve the array as the result of an Ajax call to a remote server. The following JavaScript file – named products.js – contains a list of products which can be bound to a ListView. (function () { "use strict"; var products = new WinJS.Binding.List([ { name: "Milk", price: 2.44 }, { name: "Oranges", price: 1.99 }, { name: "Wine", price: 8.55 }, { name: "Apples", price: 2.44 }, { name: "Steak", price: 1.99 }, { name: "Eggs", price: 2.44 }, { name: "Mushrooms", price: 1.99 }, { name: "Yogurt", price: 2.44 }, { name: "Soup", price: 1.99 }, { name: "Cereal", price: 2.44 }, { name: "Pepsi", price: 1.99 } ]); WinJS.Namespace.define("ListViewDemos", { products: products }); })(); The products variable represents a WinJS.Binding.List object. This object is initialized with a plain-old JavaScript array which represents an array of products. To avoid polluting the global namespace, the code above uses the module pattern and exposes the products using a namespace. The list of products is exposed to the world as ListViewDemos.products. To learn more about the module pattern and namespaces in WinJS, see my earlier blog entry: http://stephenwalther.com/blog/archive/2012/02/22/metro-namespaces-and-modules.aspx Creating the ListView Item Template The ListView control does not know how to render anything. It doesn’t know how you want each list item to appear. To get the ListView control to render something useful, you must create an Item Template. Here’s what our template for rendering an individual product looks like: <div id="productTemplate" data-win-control="WinJS.Binding.Template"> <div class="product"> <span data-win-bind="innerText:name"></span> <span data-win-bind="innerText:price"></span> </div> </div> This template displays the product name and price from the data source. Normally, you will declare your template in the same file as you declare the ListView control. In our case, both the template and ListView are declared in the default.html file. To learn more about templates, see my earlier blog entry: http://stephenwalther.com/blog/archive/2012/02/27/metro-using-templates.aspx Declaring the ListView The final step is to declare the ListView control in a page. Here’s the markup for declaring a ListView: <div data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource:ListViewDemos.products.dataSource, itemTemplate:select('#productTemplate') }"> </div> You declare a ListView by adding the data-win-control to an HTML DIV tag. The data-win-options attribute is used to set two properties of the ListView. The ListView is associated with its data source with the itemDataSource property. Notice that the data source is ListViewDemos.products.dataSource and not just ListViewDemos.products. You need to associate the ListView with the dataSoure property. The ListView is associated with its item template with the help of the itemTemplate property. The ID of the item template — #productTemplate – is used to select the template from the page. Here’s what the complete version of the default.html page looks like: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ListViewDemos</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet"> <script src="//Microsoft.WinJS.0.6/js/base.js"></script> <script src="//Microsoft.WinJS.0.6/js/ui.js"></script> <!-- ListViewDemos references --> <link href="/css/default.css" rel="stylesheet"> <script src="/js/default.js"></script> <script src="/js/products.js" type="text/javascript"></script> <style type="text/css"> .product { width: 200px; height: 100px; border: white solid 1px; } </style> </head> <body> <div id="productTemplate" data-win-control="WinJS.Binding.Template"> <div class="product"> <span data-win-bind="innerText:name"></span> <span data-win-bind="innerText:price"></span> </div> </div> <div data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource:ListViewDemos.products.dataSource, itemTemplate:select('#productTemplate') }"> </div> </body> </html> Notice that the page above includes a reference to the products.js file: <script src=”/js/products.js” type=”text/javascript”></script> The page above also contains a Template control which contains the ListView item template. Finally, the page includes the declaration of the ListView control. Summary The goal of this blog entry was to describe the minimal set of steps which you must complete to use the WinJS ListView control to display a simple list of items. You learned how to create a data source, declare an item template, and declare a ListView control.

    Read the article

  • Mobile Friendly Websites with CSS Media Queries

    - by dwahlin
    In a previous post the concept of CSS media queries was introduced and I discussed the fundamentals of how they can be used to target different screen sizes. I showed how they could be used to convert a 3-column wide page into a more vertical view of data that displays better on devices such as an iPhone:     In this post I'll provide an additional look at how CSS media queries can be used to mobile-enable a sample site called "Widget Masters" without having to change any server-side code or HTML code. The site that will be discussed is shown next:     This site has some of the standard items shown in most websites today including a title area, menu bar, and sections where data is displayed. Without including CSS media queries the site is readable but has to be zoomed out to see everything on a mobile device, cuts-off some of the menu items, and requires horizontal scrolling to get to additional content. The following image shows what the site looks like on an iPhone. While the site works on mobile devices it's definitely not optimized for mobile.     Let's take a look at how CSS media queries can be used to override existing styles in the site based on different screen widths. Adding CSS Media Queries into a Site The Widget Masters Website relies on standard CSS combined with HTML5 elements to provide the layout shown earlier. For example, to layout the menu bar shown at the top of the page the nav element is used as shown next. A standard div element could certainly be used as well if desired.   <nav> <ul class="clearfix"> <li><a href="#home">Home</a></li> <li><a href="#products">Products</a></li> <li><a href="#aboutus">About Us</a></li> <li><a href="#contactus">Contact Us</a></li> <li><a href="#store">Store</a></li> </ul> </nav>   This HTML is combined with the CSS shown next to add a CSS3 gradient, handle the horizontal orientation, and add some general hover effects.   nav { width: 100%; } nav ul { border-radius: 6px; height: 40px; width: 100%; margin: 0; padding: 0; background: rgb(125,126,125); /* Old browsers */ background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */ } nav ul > li { list-style: none; float: left; margin: 0; padding: 0; } nav ul > li:first-child { margin-left: 8px; } nav ul > li > a { color: #ccc; text-decoration: none; line-height: 2.8em; font-size: 0.95em; font-weight: bold; padding: 8px 25px 7px 25px; font-family: Arial, Helvetica, sans-serif; } nav ul > li a:hover { background-color: rgba(0, 0, 0, 0.1); color: #fff; }   When mobile devices hit the site the layout of the menu items needs to be adjusted so that they're all visible without having to swipe left or right to get to them. This type of modification can be accomplished using CSS media queries by targeting specific screen sizes. To start, a media query can be added into the site's CSS file as shown next: @media screen and (max-width:320px) { /* CSS style overrides for this screen width go here */ } This media query targets screens that have a maximum width of 320 pixels. Additional types of queries can also be added – refer to my previous post for more details as well as resources that can be used to test media queries in different devices. In that post I emphasize (and I'll emphasize again) that CSS media queries only modify the overall layout and look and feel of a site. They don't optimize the site as far as the size of the images or content sent to the device which is important to keep in mind. To make the navigation menu more accessible on devices such as an iPhone or Android the CSS shown next can be used. This code changes the height of the menu from 40 pixels to 100%, takes off the li element floats, changes the line-height, and changes the margins.   @media screen and (max-width:320px) { nav ul { height: 100%; } nav ul > li { float: none; } nav ul > li a { line-height: 1.5em; } nav ul > li:first-child { margin-left: 0px; } /* Additional CSS overrides go here */ }   The following image shows an example of what the menu look like when run on a device with a width of 320 pixels:   Mobile devices with a maximum width of 480 pixels need different CSS styles applied since they have 160 additional pixels of width. This can be done by adding a new CSS media query into the stylesheet as shown next. Looking through the CSS you'll see that only a minimal override is added to adjust the padding of anchor tags since the menu fits by default in this screen width.   @media screen and (max-width: 480px) { nav ul > li > a { padding: 8px 10px 7px 10px; } }   Running the site on a device with 480 pixels results in the menu shown next being rendered. Notice that the space between the menu items is much smaller compared to what was shown when the main site loads in a standard browser.     In addition to modifying the menu, the 3 horizontal content sections shown earlier can be changed from a horizontal layout to a vertical layout so that they look good on a variety of smaller mobile devices and are easier to navigate by end users. The HTML5 article and section elements are used as containers for the 3 sections in the site as shown next:   <article class="clearfix"> <section id="info"> <header>Why Choose Us?</header> <br /> <img id="mainImage" src="Images/ArticleImage.png" title="Article Image" /> <p> Post emensos insuperabilis expeditionis eventus languentibus partium animis, quas periculorum varietas fregerat et laborum, nondum tubarum cessante clangore vel milite locato per stationes hibernas. </p> </section> <section id="products"> <header>Products</header> <br /> <img id="gearsImage" src="Images/Gears.png" title="Article Image" /> <p> <ul> <li>Widget 1</li> <li>Widget 2</li> <li>Widget 3</li> <li>Widget 4</li> <li>Widget 5</li> </ul> </p> </section> <section id="FAQ"> <header>FAQ</header> <br /> <img id="faqImage" src="Images/faq.png" title="Article Image" /> <p> <ul> <li>FAQ 1</li> <li>FAQ 2</li> <li>FAQ 3</li> <li>FAQ 4</li> <li>FAQ 5</li> </ul> </p> </section> </article>   To force the sections into a vertical layout for smaller mobile devices the CSS styles shown next can be added into the media queries targeting 320 pixel and 480 pixel widths. Styles to target the display size of the images in each section are also included. It's important to note that the original image is still being downloaded from the server and isn't being optimized in any way for the mobile device. It's certainly possible for the CSS to include URL information for a mobile-optimized image if desired. @media screen and (max-width:320px) { section { float: none; width: 97%; margin: 0px; padding: 5px; } #wrapper { padding: 5px; width: 96%; } #mainImage, #gearsImage, #faqImage { width: 100%; height: 100px; } } @media screen and (max-width: 480px) { section { float: none; width: 98%; margin: 0px 0px 10px 0px; padding: 5px; } article > section:last-child { margin-right: 0px; float: none; } #bottomSection { width: 99%; } #wrapper { padding: 5px; width: 96%; } #mainImage, #gearsImage, #faqImage { width: 100%; height: 100px; } }   The following images show the site rendered on an iPhone with the CSS media queries in place. Each of the sections now displays vertically making it much easier for the user to access them. Images inside of each section also scale appropriately to fit properly.     CSS media queries provide a great way to override default styles in a website and target devices with different resolutions. In this post you've seen how CSS media queries can be used to convert a standard browser-based site into a site that is more accessible to mobile users. Although much more can be done to optimize sites for mobile, CSS media queries provide a nice starting point if you don't have the time or resources to create mobile-specific versions of sites.

    Read the article

< Previous Page | 135 136 137 138 139 140 141 142 143 144 145 146  | Next Page >