give space between particular elements in a table

i have two html table's inside a main table. I have to give the space between td of first table so that Heading one should be on top of Element1 and text box and Heading two should be on top of Element2 and select lists which are available in other table. Please suggest how can i achieve this, do i need to modify the html table structure. Please find the fiddle:http://ift.tt/1JroBTx

Below is the css code:

td:nth-child(1) {
    padding-right: 90px;
}

HTML code:

<table>

 <table>
    <tr>
    <td class="hone" class="more-padding-on-right">
            Heading One
    </td>
    <td class="htwo">
           Heading Two
    </td>
    </tr>
 </table>
<table>
<tr valign="top">
<td>  Element1:<input id="myTest" type="text" value="">  </td>  
<td>
Element2:<SELECT id="one" size="10" multiple>
    <OPTION value="a">AAA</OPTION>
    <OPTION value="b">BB</OPTION>
    <OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
<a href="#">&gt;&gt;</a>
</td>
<td>
<SELECT id="two" size="10" multiple>
    <OPTION value="a">FF</OPTION>
    <OPTION value="b">GG</OPTION>
    <OPTION value="c">BHH</OPTION>

</SELECT>
</td>
</tr>
</table>    
</table>

align scrollable table columns with header in css

JsFiddle URL : http://ift.tt/1KLVyuM

<table cellspacing="0" cellpadding="0" border="0" width="325" >
  <tr>
    <td>
       <table cellspacing="0" cellpadding="1" border="1" width="300" >
         <tr>
            <th>Full Name</th>
            <th>Status</th>
            <th>Last reported</th>
         </tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>
       <div class ='cont' style="width:325px; height:48px; overflow:auto;">
         <table class='data' cellspacing="0" cellpadding="1" border="1" width="300"  >
           <tr>
             <td>col 1 data 1</td>
             <td>col 2 data 1</td>
             <td>col 3 data 1</td>
           </tr>
           <tr>
             <td>col 1 data 2</td>
             <td>col 2 data 2</td>
             <td>col 3 data 2</td>
           </tr>
           <tr>
             <td>col 1 data 3</td>
             <td>col 2 data 3</td>
             <td>col 3 data 3</td>
           </tr>
         </table>  
       </div>
    </td>
  </tr>
</table>

The columns are not aligned with the headers.

I want the table used for data to be aligned with the headers.

td width=100px for second table is not working.

CSS Background Image Not Adapting With Screen Size

I am a relatively new at HTML / CSS. I have started to develop a website but my main "hero" image doesn't adapt properly with smaller pages and leaves white space. If you could help me diagnose the problem it would be greatly appreciated.

*/ css */

#intro {
    z-index: 100;
    width: 100%;
    height: 66%;
    background: url("../images/intro2.jpg"); center center no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    top:10%;
    background-position: 0px -150px;
    left: 0;
    position: absolute;
    background-size: 100%;
}
#intro .wrap{
    margin: 0 auto;
    position: relative;
}
#intro .content{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

*/ html */

<section id="intro">
    <div class="wrap">
        <div class="content">
        <h1 id="welcome"> Your number one choice for music <br> in the south coast </h1>
        </div>
    </div>
</section>

The site can also be viewed Here

Best Practice - Shift + Enter in Input

Implementing a UI form and I'm curious what the best practice is for handling SHIFT + ENTER with a HTML input focused.

In a textarea this seems clear: add a new line / don't submit the form.

In an input, I'm not quite certain: should this just do nothing? Submit the form (as with ENTER)?

Rails pre tags are inserting tabs for unknown reason

In one of my views I have the following code with this exact indentation...

<h2>TEST</h2>
<p>This is my code...</p>
<br/><br/>
<pre>
Testing
1
  2
    3
</pre>

However it is rendering like this:

Note that everything in the pre tag is indented beyond where the rest of the code is. I cannot figure out why.

Setting up XML coding for website

I don't have any experience when it comes to coding any type of language, but I do want to try and understand the logic flow. For my website, I am using magento as the backend system and trying to create a blogging page on my site. I have third party developer working for me, but they gave me an estimate that doesn't seem right. In the backend, I can create he CMS page for blog, but I want to design the template or even buy a template off a free lancer. Only thing is that there seems to be two method to design the blog and that is either manually typing in the Xml coding for the page layout or select the xml file from within my server. I don't have admin access to my server because I left that for my developers to work on, but I do have the ftp access. I'm honestly not sure if the ftp is my actual server access or not. To make things short I have two question. First is that is it possible to simply copy and paste the xml coding into the page layout? The other question is if I were to download the xml document, would I simply upload it via ftp access and choose that template on magento backend?

JQuery validation message appearing weirdly between two radio buttons

I am using JQuery Validation plugin to validate my form. The validation messages for all the fields except radio button are showing properly below the respective field.But for radio button the messages are showing between first two radio buttons.

gender : {
    required : true
    }


<html:radio property="gender" value="1"
        name="formBean" styleId="gender">&nbsp;Male&nbsp;</html:radio>
    <html:radio property="gender" value="0"
        name="formBean" styleId="gender">&nbsp;Female&nbsp;</html:radio>

Is there any way the error message shown after or below the radio buttons?

Thanks in advance.

Submitting Values From a Jquery Slider

Hey guys I have this code here for a jquery slider. I want to take the value of the slider out and use an http post method to submit the value to a database. I have a processing form which I used successfully for textboxes and radio buttons. I was hoping to save the value of the slider in a hidden field and just post it. I know this gets the value from the slider.

    var selection = $( ".selector" ).slider( "value" );

Now how can I add this into the value in this submit form?

    <input type='hidden' class="mainForm" id="fieldBox_5" name="field_5" value=selection>

This is my whole code.

    <<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Slider bound to select</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="style.css">
  <script>
  $(function() {
    var select = $( "#minbeds" );
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
      min: 1,
      max: 10,
      range: "min",
      value: select[ 0 ].selectedIndex + 1,
      slide: function( event, ui ) {
        select[ 0 ].selectedIndex = ui.value - 1;
      }
    });
    $( "#minbeds" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  });
  var selection = $( ".selector" ).slider( "value" );
  </script>
</head>
<body>

<form id="mainForm_1" class="MainForm" method=post enctype=multipart/form-data action=processorss.php onSubmit="return validatePage1();">



  <label for="minbeds" class="mainForm">Rate Your Prefence for Fish 1-10</label>
 <select name="minbeds" id="minbeds">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <li class="mainForm">



  <input type='hidden' class="mainForm" id="fieldBox_5" name="field_5" value=selection>

                    <input id="saveForm" class="mainForm" type="submit" value="Submit" />
                </li>
</form>


</body>
</html>

Div HEIGHT same as width to make a circle

I have an horizontal rectangle div container (parent)

with another smaller one inside (child).

I want to make the smaller one (child) look like a circle and the height should always be the same as the parent div for all resolutions.

I found a lot of solutions showing how to make a 1:1 proportional div (for instance, this example!) but all of them were based on the width of the div and not the height. This means that i need to know the width to apply the solutions but in my case, i can't do that , since I know the height (100% of the height of the parent) but I don't know the width.

Ive tried to adapt the solution but I was not successful.

Any idea how i can make a 1:1 div knowing the height of the div ?

Thanks !

css - padding - width affecting height

Ok,

Consider the following code:

<div class="grid-container">
    <div class="grid-20 padright">       
        <h3 class="padhalf blue-header">
            This is 20% Wide
        </h3>        
    </div>    
    <div class="grid-80 padleft">
        <h3 class="padhalf blue-header">
            This is 80% Wide
        </h3>
    </div>
</div>

<div style="clear: both; height: 15px;"></div><!-- Just a spacer -->

<div class="grid-container">
    <div class="grid-50 padright">       
        <h3 class="padhalf blue-header">
            This is 50% wide
        </h3>        
    </div>    
    <div class="grid-50 padleft">
        <h3 class="padhalf blue-header">
            This is 50% wide
        </h3>
    </div>
</div>

And the CSS:

*, *:before, *:after {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.grid-20 { float: left; width: 20%; }
.grid-50 { float: left; width: 50%; }
.grid-80 { float: left; width: 80%; }

.grid-container {
    margin: 0 auto;
    padding-left: 1%;
    padding-right: 1%;
}
.grid-container:after {
    clear: both;
}

.blue-header {
    background-color: #00f;
    color: #fff;
}

.padhalf {
    padding: 0.5% 0.5% 0.7% 0.5%;
}

.padright {
    padding-right: 1%;
}

.padleft {
    padding-left: 1%;
}

And the JSFiddle: http://ift.tt/1zMZtqm

I don't know why the height of the H3 elements changes when the width changes. Why does the width or padding affect the height?

When the parents are identical width, all is OK. When they are not, the height of the child H3 seems to change proportionately.

Thanks,

Access Javascript prototype function inside Image.onload

I'm quite new to Javascript and I've been tasked to create a widget for a site we're developing. The problem is that I'm getting an error when trying to call a prototype function from within the onload() event of an Image. I'll now provide a simplified version of the widget:

---

In our constructor, we dynamically create a canvas element, attach it to the given container, and load the image to be drawn.

function Widget(container_id, size) {

    this.size = size;

    // creating canvas.
    this.canvas = document.createElement("canvas");
    this.canvas.setAttribute("width", this.size);
    this.canvas.setAttribute("height", this.size);

    // adding canvas to DOM.
    var container = document.getElementById(container_id);
    container.appendChild(this.canvas);

    // loading images.
    this.image = new Image();
    this.image.onload = function() {
        this._draw(); // ERROR here.
    }
    this.image.src = "my_image.png";
}

Later we define the drawing function.

Widget.prototype._draw = function() {

    var ctx = this.canvas.getContext("2d");
    ctx.drawImage(this.image, 0, 0, this.size, this.size);
};

And we use it like this:

<htmL>
  ...
  <div id="container"></div>
  ...
  <script>
    var widget = new Widget("container", 50);
  </script>
  ...
</html>

---

Now, when we load this page in the browser (Firefox 37.0, in this case), we get the following error:

TypeError: this._draw is not a function

What's the issue, and, which is the correct way to accomplish this? Thanks a lot!

jQuery - Ask for width or height in percent % and returns me in 0 pixels

I've set styles in % like:

<style>
#somediv {width:70%}
</style>
<div id="#somediv"></div>

And it returns me the result in pixels with jQuerys css() function

$(document).ready(function(){
var css = $("#somediv").css('width');
console.log(css);
})

How to auto fill in text boxes with data from database?

I want to fill all the text boxes with data that corresponds to the name that is chosed on the dropdown box. I have searched for codes for it to work and unluckily none of it works.

PHP

<?php
    include("webconfig.php");
    session_start();    
?>

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" href="img/logo_trans.png">
    <link rel="stylesheet" href="css/iconFont.css">
    <link rel="stylesheet" href="css/metro-bootstrap.css">
    <link rel="stylesheet" href="css/metro-bootstrap-responsive.css">

    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/jquery/jquery.widget.min.js"></script>            
    <script src="js/load-metro.js"></script>

    <!-- Local JavaScript -->
    <script src="js/docs.js"></script>
    <script src="js/github.info.js"></script>
    <script src="js/Chart.js"></script>
    <script src="js/metro-dropdown.js"></script>
<title>AS_SIGNS</title>
</head>

<body class="metro">
        <nav class="horizontal-menu" style="background:#037E04;">
            <ul>
             <center><li><a href="index.php"><h1><font color="#FFFFFF">AS Signs</font></h1></a></li></center>
            </ul>
       </nav>

    <div style="width:70%; height:60%; position:absolute; left:0;">
        <div  style="width:100%; height:100%;overflow:scroll; overflow-x:hidden; overflow-y:auto;">
        <div style="width:50%; float:left;">
            <h2>New Service Call</h2>
            <form method="post" name="form">
                    <table  class="table bordered" width="100%">
                    <tr>    
                        <td>Customer ID</td>
                        <td><input type="text" name="custid" /></td>
                    </tr>

                    <tr>    
                        <td>Customer Name</td>
                        <td>
                        <select name="CUSTOMER_NAME" style="width:205px" required>
                                <option value="default"></option>
                                 <?php
                                    $sql1 = "SELECT * FROM CUSTOMER_MASTER";
                                    $sth = ibase_query($conn, $sql1) or die(ibase_errmsg());

                                    $num = '';

                                    while($row = ibase_fetch_assoc($sth))
                                    {


                                    $name = $row["ACCOUNT_NAME"];

                                    echo "<option value=\"$name\">$name</option>";

                                    }
                                ?>


                        </select>
                        </td>   
                        </tr>
                    <tr>
                        <td>Address</td>
                        <td><input type="text" name="ADDRESS" value="<?php echo "$add"?>"></td>
                    </tr>
                    </table>

        </div>
        <div style="width:50%; float:right;">
             <h2 style="visibility:hidden;">cqcqcqcqc</h2>
                    <table  class="table bordered" width="100%">

                    <tr>
                        <td>Contact Person</td>
                        <td><input type="text" name="CONTACT_PERSON" value="<?php echo "$contperson"?>"></td>
                    </tr>
                    <tr>
                        <td>Contact Number</td>
                        <td><input type="text" name="CONTACT_NUMBER" value= "<?php echo "$contnum"?>"> </td>
                    </tr>
                    </table>    
                     <input type="submit" name="btnSave" value="SAVE" />
                     <input type="button" name="load" value="LOAD" />

                    <?php
                    if(isset($_POST['load']))
        {
                    $sql = "SELECT * FROM CUSTOMER_MASTER WHERE CUSTOMER_NAME = '$name'";
                    $result = ibase_query($query, $conn);
                    $details = ibase_fetch_assoc($result);                                  

                    $sth = ibase_query($conn, $sql) or die(ibase_errmsg());

                    $add = $details["ADDRESS"];
                    $name = $_POST["ACCOUNT_NAME"];
                    $servicenum = $details["SERVICE_CALL_NUMBER"];
                    $contperson = $details["CONTACT_PERSON"];
                    $contnum = $details["CONTACT_NUMBER"];


                    }

                    ?>

                    <?php
                    $sql = "SELECT * FROM SERVICE_REPORTS";


                    $sth = ibase_query($conn, $sql) or die(ibase_errmsg());
                    $add = $_POST["ADDRESS"];
                    $name = $_POST["CUSTOMER_NAME"];
                    $servicenum = $_POST["SERVICE_CALL_NUMBER"];
                    $contperson = $_POST["CONTACT_PERSON"];
                    $contnum = $_POST["CONTACT_NUMBER"];



        if(isset($_POST['btnSave']))
        {

            ibase_query($conn, "INSERT INTO SERVICE_REPORTS (CUSTOMER_NAME, ADDRESS, CONTACT_PERSON, CONTACT_NUMBER) VALUES('$name', '$add', '$contperson', '$contnum')") or die (ibase_errmsg());

            echo "Record Saved";
        }


    ?>
          </form>   
        </div>
        </div>
    </div>

  <div class="span5" style="position: absolute;right:0; top:100px;">
        <nav class="sidebar dark">
            <ul>
                <li class="active"><a href="#"><i class="icon-home"></i>Home</a></li>
                <li class="stick bg-red">
                    <a class="dropdown-toggle" href="#"><i class=""></i>Service Call</a>
                        <ul class="dropdown-menu" data-role="dropdown" data-effect="slide">
                            <li><a href="servicecallnew.php">New Service</a></li>
                            <li><a href="#">Service Call List</a></li>
                        </ul>
                </li>                            
                <li class="stick bg-red">
                    <a class="dropdown-toggle" href="#"><i class="icon-sale"></i>File Maintenance</a>
                    <ul class="dropdown-menu" data-role="dropdown" data-effect="slide">
                        <li><a href="items.php?itd=&action">Items</a></li>
                        <li><a href="categories.php">Categories</a></li>
                        <li><a href="contractors.php">Contractors</a></li>
                        <li><a href="suppliers.php">Suppliers</a></li>
                    </ul>
                </li>

                  <li class="stick bg-red">
                    <a class="dropdown-toggle" href="#"><i class="icon-box-add"></i>Production</a>
                    <ul class="dropdown-menu" data-role="dropdown">




                                <li><a href="estimatelist.php">Estimate / Quotation</a></li>
                                <li><a href="bomlist.php">Bill of Materials</a></li>
                                <li><a href="bomposting.php">BOM Posting</a></li>
                                <li><a href="issuancelist.php">Issuance</a></li>
                                <li><a href="adjplist.php">Adjustment</a></li>


                      </ul>
                  </li>


                  <li class="stick bg-red">
                    <a class="dropdown-toggle" href="#"><i class="icon-box-add"></i>Inventory</a>
                    <ul class="dropdown-menu" data-role="dropdown"> 
                                <li><a href="receiving.php">Receiving</a></li>

                      </ul>
                  </li>

                  <li class="stick bg-red">
                    <a class="dropdown-toggle" href="#"><i class="icon-printer"></i>Reports</a>
                    <ul class="dropdown-menu" data-role="dropdown">

                             <!--   <li><a onClick="<?php echo "window.open('report_prod.php?type=estimate','mywindow3')"; ?>">Estimate / Quotation</a></li>
                                <li><a onClick="<?php echo "window.open('report_prod.php?type=bom','mywindow3')"; ?>">Bill of Materials</a></li>
                                <li><a onClick="<?php echo "window.open('report_prod.php?type=issuance','mywindow3')"; ?>">Issuance</a></li>
                                <li><a onClick="<?php echo "window.open('report_prod.php?type=adj','mywindow3')"; ?>">Adjustment</a></li>

                                <li><a onClick="<?php echo "window.open('rptinventory.php?','mywindow8','menubar=0,location=1,status=1,scrollbars=1,width=1000,height=500,left=0,top=0,screenX=50,screenY=100')"; ?>">Inventory</a></li>-->

                                    <li><a href="signspec.php">Sign Spec</a></li>
                                    <li><a href="warehouse.php">Warehouse</a></li>


                      </ul>
                  </li>
                                 <li class="stick bg-red"><a href="#"><i class="icon-cog"></i>Settings</a></li>
                <li class="stick bg-red"><a href="logout.php"><i class="icon-switch"></i>Logout</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

Add X pixels to current position CSS

So, I'm trying to recreate a .gif I found online in pure CSS. However, I've run into a problem when creating the animation-part of this. Here's the GIF I'm trying to recreate:

As you can see, the source image breaks up in:

1. 3 walls
2. 9 columns
3. 27 cubes

And then returning by changing to 9 rows, 3 flats and a cube again.

I've measured everything in pixels and everything fits in the completely "exploded" state, but I can't seem to figure out how to animate it properly.

In this fiddle you can see I've managed to get to the 9 columns. However, when I try to animate to the 27 cubes (changing from styling columns to single cubes), I apply margin that also affect the cubes in the "columns-stage". See this fiddle

Note: Hover over the test area to trigger the animation!

Is there a way I can stage the margin (all the margin-tops from line 125) to occur on the moment they do in the 2nd fiddle, but not influence the blocks before the 2 second delay is actually taking place? I was thinking of saying margin-top should get X + 30px or something, but I can't seem to find something like that for CSS. Do I have to resort to jQuery? (I wanted to test how far I could get with CSS, so rather not!)

This is one of those pieces where a block is only getting its margin-top changed, the rest of the CSS and HTML can be found in the Fiddles (it is simply too much to copy/paste everything here):

#test-area:hover + #cube .block111, #test-area:hover + #cube .block121, #test-area:hover + #cube .block131 {
    margin-top: -30px;
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
}

BeautifulSoup and Large html

I was trying to scrape a number of large Wikipedia pages like:

http://ift.tt/1GOKWHO

Unfortunately BeautifulSoup is not able to work with such a large content, and it truncates the page.

CSS doesn't work on iPhone/iPad

I am new to html/css. The css that I created for my website works fine on my MacBook screen, and it also looks fine in responsive design view on Firefox in all the media query sizes that I have created for. However, when I open the website on my iPhone or iPad, the css doesn't work. The background image is zoomed in and the style is collapsed. I uploaded/refreshed all the related files to my server and tried several times, but it still gives me the same problem.

Does anyone give me a possible solution? Thank you!

 `<!doctype html>
<html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AU</title>
    <link href="css/stylesheet.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/video.js"></script>
    <script type="text/javascript" src="js/parallax.js"></script>

    <link rel="shortcut icon" type="image/png" href="images/favion.png" />
    </head>

    <body>
    <section class="module parallax parallax-1">
      <div class="container">
        <div class="box"><img src="images/AUlogo.png" /><span class="aki">AU<h2>sometor</h2></span></div>
        </div>
        <div class="button"><a href="#entries">view projects</a></div>

        <div class="footer">
                <ul>
                <li><a href="index.html"><h3>eng</h3></a></li>
                <li><a href="indexjpn.html"><h3>jpn</h3></a></li>
            </ul>
        </div>
    </section>`  

>     `> ` 
.container {
    max-width: 1366px;
    margin: 0 auto;
    height: auto;
    }

html, h1, .aki {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

ul {
    list-style-type: none;
    text-align: center;
    }

li {
    display: inline-block;
    }

a {
    text-decoration: none;
    }

section.module:last-child {
  margin-bottom: 0;
}


.box { /*grey box*/
    width: 100%;
    background: rgba(148, 147, 147, 0.3);
    position: absolute;
    margin-top: 0%; /*DON'T TOUCH!Matches the top of the container*/
    padding-top: 1%;
    padding-bottom: 1%;
    }

.box img { /*logo inside the grey box*/
    align: middle;
    display: inline-block;
    }

.button {
    background-color: #05a9b3;
    border-radius: 4px;
    color: #fff;
    text-decoration:none;
    text-transform: uppercase;
    text-align: center;
    -webkit-transition: none;
    transition: none;
    box-shadow: 0 3px 0 #04929b;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    margin: 0 auto; 
}   

.entries a:hover, a:active, a:link, a:visited{
    color: #fff;}

.button:hover {
    background-color: #07bfca;
    box-shadow: 0 3px 0 #05a9b3;
    color: #fff;
}

.button:active {
    top: 3px;
    box-shadow: none;
    color: #fff;
}


section.module.parallax {
  padding: 10.625em 0;/*DON'T TOUCH!*/
  background-position: 0 0;
}

section.module.parallax-1 { /*background of top page*/
    background: url(../images/plbg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
     width: 100%;
     position: relative;
     margin: 0 auto;
    }

.footer { /*eng+jpn*/
    width: 96%;
    margin: 0 auto;
    }

.footer a:link, a:visited {
    color: #fff;
}
.footer a:hover, .footer a:active {
    color: #05a9b3;
}

`

`

Unexpected page breaks when printing UIWebView

TLDR: If you print UIWebView which contains HTML content consisting of elements with text aligned right / center, resulting document will have pages with unexpectedly large bottom margins.

I came across this issue, and was quite surprised when I could not google anyone with similar problem. I have filed a radar with apple (#20760071) and also created an issue on ResearchKit's GitHub repo, as this affects their ORKHTMLPDFWriter.

AFAIK this also affects all libraries that use UIWebView for converting HTML to PDF, I have tested:

• BNHtmlPdfKit
• NDHTMLtoPDF

I am wondering if anyone can come up with some workaround.

How to reproduce:

NSMutableString* html = [NSMutableString string];
[html appendString:@"<html><body>"];
for (int i=0; i<200; i++) {
    [html appendString:@"<div align=\"right\">line</div>"];
}
[html appendString:@"</body></html>"];

UIPrintInteractionController* pc = [UIPrintInteractionController sharedPrintController];

UIPrintInfo* printInfo = [UIPrintInfo printInfo];
printInfo.outputType = UIPrintInfoOutputGrayscale;

pc.printInfo = printInfo;
pc.showsPaperSelectionForLoadedPapers = YES;

UIWebView* web = [UIWebView new];
[web loadHTMLString:html baseURL:nil];
pc.printFormatter = web.viewPrintFormatter;

[pc.printPageRenderer addPrintFormatter:web.viewPrintFormatter startingAtPageAtIndex:0];

[pc presentAnimated:YES completionHandler:^(UIPrintInteractionController *printInteractionController, BOOL completed, NSError *error) {
    NSLog(@"%d -- %@",completed, error);

}];

You can also clone the project demonstrating this issue in ResearchKit.

Translate Grabbed Html Files

I have a grabbed website and its in english. I want to translate it to another languages but I really dont want to translate line by line. I need a program that identify the texts (not html tags or css codes or etc.) and show me up them to translate. Also i want to translate a group of files and they may updated mounthly so i dont want to translate again and i expect the program identify the changes and just show me them to translate after a mounth.

For example, this is the html file:

<body>
<a href="http://ift.tt/fyw30c">
<h1 class="header1" id="inh1">Hello World</h1>
</a>

and the program just show me this "Hello World" and a field to translate, and next replace it. like this:

Hello World ---> سلام دنیا

and Export this html file:

<body>
<a href="http://ift.tt/fyw30c">
<h1 class="header1" id="inh1">سلام دنیا</h1>
</a>

sorry for language mistakes. goodluck

Where do the bullets come from on elements?

My (possibly erroneous) understanding is that different HTML elements are separated in their functionality by their default CSS styling, semantics aside.

Using custom CSS, you could (inadvisably) make any HTML element behave like any other.

If that is correct, the only thing I cannot account for is the bullets on <li> elements. What CSS causes them? How can you add that to other elements?

HTML/PHP Form doesn't sent data to MySQL Database

Hi this is my first question, so tell me if i do something wrong. I'm new to PHP so this is kinda new to me. Anyway im creating a site so i can access my recepies online.

This is the form:

<form action="Form.php" method="post" class="basic-grey">
<h1><a href="index.html">Receita</a>
    <span>Aqui podes adicionar uma nova receita</span>
</h1>
<label>
    <span>Titulo :</span>
    <input id="titulo" type="text" size="20" maxlength="100" name="titulo" placeholder="Introduza o Titulo" />
</label>

<label>
    <span>Categoria :</span><select  maxlength="10" name="categoria">
    <option value="categoria">--- Seleccione aqui a Categoria ---</option>
    <option name=" " value="sopa">Sopa</option>
    <option name="entrada" value="entrada">Entrada</option>
    <option name="carne" value="carne">Carne</option>
    <option name="peixe" value="peixe">Peixe</option>
    <option name="salada" value="salada">Salada</option>
    <option name="sobremesa" value="sobremesa">Sobremesa</option>
    </select>

</label>

<label>
    <span>Ingredientes :</span>
    <textarea id="ingredientes" size="20" maxlength="1000" name="ingredientes" placeholder="Introduza os ingredientes"></textarea>
</label> 
<label>
    <span>Preparação :</span>
    <textarea id="preparacao" size="20" maxlength="1000" name="preparacao" placeholder="Introduza o modo de preparação"></textarea>
</label> 
<label>
    <span>Notas :</span>
    <textarea id="notas" size="20" maxlength="1000" name="notas" placeholder="Aqui pode adicionar uma nota"></textarea>
</label> 
<label>
    <span>&nbsp;</span> 
    <input type="submit" class="button" value="Enviar" /> 
</label>   

</form>

This is the code to handle the form:

<?php
// processing form values


if ($_SERVER['REQUEST_METHOD'] == 'POST'){

$titulo = $_POST['titulo'];
$categoria = $_POST['categoria'];
$ingredientes = $_POST['ingredientes'];
$preparacao = $_POST['preparacao'];
$notas = $_POST['notas'];


if(!empty($titulo) && !empty($categoria) && !empty($ingredientes) && !empty($preparacao) && !empty($notas)){

    include('connection.php');

    mysqli_query($dbc, "INSERT INTO receita(Titulo,Categoria,Ingredientes,Preparacao,Notas) VALUES ('$titulo','$categoria','$ingredientes','$preparacao','$notas')");
    $registered = mysqli_affected_rows($dbc);
    echo $registered." row is affected, everything worked fine!";
}else{
    echo "Please fill all values on the form";
}

}else{

echo "No form has been submitted";

}

?>

And what happens its that if i input something like this it doesn't work:

Titulo:Açorda de camarao

Categoria: Peixe

Ingredientes: 800 g de camarao; 4 dentes de alho; 1 ramo de salsa ou coentros; 3 ovos inteiros; 1.5 dl de Azeite; 1.5 pão por pessoa; sal; piri-piri

Preparação: Coze-se o camarão com sal e piri-piri e reserva-se a agua. De seguida demolha-se o pão na agua do camarão. Aquece-se o azeite com os alhos e os coentros e de seguida junta-se o camarão e por ultimo o pão. Mexe-se tudo para cozer o pão e ganhar consistencia. Por ultimo junta-se os ovos e envolve-se tudo.

Nota: Receita para 4 pessoas

But if i input like this it works:

Titulo:gfdsfdsa

Categoria: Peixe

Ingredientes: hudsbfbdsf fdsfidsfidsfsd, fdsjifjdsifdis 0palpdsandnsaud jkdosakodsakodmnsa jidsjaidsa

Preparação: nfjdbshfbhdbjfdjs dsajijdisandiabuu fjndoisjfojidsanfds

Nota: fbhdubsufbndsnfs

My database table:

Nome    Tipo    Agrupamento (Collation) Atributos   Nulo    Omissao Extra   

1 ID bigint(50) Não None AUTO_INCREMENT Muda Muda Elimina
2 Titulo varchar(100) utf8_general_ci Não None Muda Muda Elimina 3 Categoria varchar(10) utf8_general_ci Não None Muda Muda
4 Ingredientes varchar(1000) utf8_general_ci Não None Muda 5 Preparacao varchar(1000) utf8_general_ci Não None Muda Muda 6 Notas varchar(1000) utf8_general_ci Não None Muda Muda

Sorry if this post its to long. Any ideas how to fix it?