mercredi 6 mai 2015

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: enter image description here

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>

enter image description here

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) enter image description here

with another smaller one inside (child).

enter image description here

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: enter image description here

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:

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?

Invoke Java class pulled from Sigar library into web page

This small java class is running perfect and retrieving the expected data which is the number of core in processor, the problem is I'm looking for a way to display this output into web format such as JSP or HTML I have tried to invoke into JSP and JSTL but is fail and showing Sigar error:

java.lang.UnsatisfiedLinkError: org.hyperic.sigar.Sigar.getCpuInfoList()[Lorg/hyperic/sigar/CpuInfo;

My JSP file:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Memory Data</h1>
        <%@ page import="mydata.test.*"%>
        <%
      Sigar sigar = new Sigar();
      test mytest = new test();

      out.println(sigar.getCpuInfoList());

%>
    </body>
</html>

My test.java class:

public class test {

    public test() {
        Sigar sigar = new Sigar();
        String output = " ";
        CpuInfo[] cpuInfoList = null;
        try {
            cpuInfoList = sigar.getCpuInfoList();
        } catch (SigarException e) {
            return;
        }

        for (CpuInfo info : cpuInfoList) {
            output += "Core: " + info.getCoresPerSocket()+"\n";
        }
        System.out.println(output);
    }

    public static void main(String[] args) {
        test main = new test();
    }
}

adding and remove classes on click events

I am working on a click event, which intially is pretty standard.

on.click: Remove the active class from all list items, then add active to the clicked list item.

ie

var li = $('.child-item');
li.click(function(){
  li.removeClass('active');
  li.addClass('active');
});  

Works as expected. However, I also need a condition that if the active class is clicked again, it will remove the active class from the clicked item.

I tried this:

$('.child-item').toggle(function(e){

   $('.child-item').removeClass('active');
   var filterValue = $(this).attr('data-filter');
   $(this).addClass('active');

}, function() {
   $('.child-item').removeClass('active');
   $(this).removeClass('active');           
});    

but often the toggle is in the off state, so it requires a double click to get the toggle back on track. This seems like it would be a pretty straightforward solution, but I cannot seem to get it to work.

Added a jsFiddle here with another option. This is fine for when the same element is clicked, but it doesn't clear all active classes on each click.

Static background-image "pulsates" rapidly - very strange

This is the weirdest thing I've ever seen.

I have a class of div that has a background-image, defined as such:

background-image: url("circle.png")
background-size: contain

You can see the divs here: Rouvou.com/fiction. They're called .circle-blue or .circle-red and both classes behave identically.

So here's where it gets weird: on a Lenovo ThinkCentre machine with a ThinkVision monitor, using Firefox, they "pulsate" rapidly, or grow by a pixel in width and height rightwards and downwards, and then shrink again, very rapidly, like a flicker.

Since the Lenovo is a school computer with only two browsers installed, the only other browser I could test it on was IE, in which this behavior was not found. I wish I could post video here to show it, but here's a screenshot of one of the divs:

The Circles

I've tested it on almost every browser on many other types of machines, and the only place I've ever found this behavior was Firefox on a Lenovo ThinkCentre, with a ThinkVision monitor.

Has anyone run into anything like this before? What could possibly be causing it? Can anyone at least reproduce the problem on their machine/browser?

I'm using Firefox 31.0, if that matters.

How Polymer Hero Transition works

First off I'm having a tough time understanding the fundamentals of the hero-transition within Polymer. I am attempting to build a hero transition card like the one in the example provided by them, which can be found here. Below I've built the mini card and I'm just trying to understand the transition and how the larger card works with the smaller one.

My specific question is, how does the transition bind to each element? Do I need to complete the CSS for both before I can begin playing with the core-animated-pages? Does having an embedded template matter?

Any guidance would be extremely helpful.

<script src="../components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../components/core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="../components/core-image/core-image.html">
<link rel="import" href="../components/paper-shadow/paper-shadow.html">
<polymer-element name="chip-card">
    <template>
        <style>
            #page2 {
                width: 100%;
                height: 100%;
            }
            #paper_shadow {
                position: relative;
                display: inline-block;
                font-family:'Roboto', sans-serif;
                font-size: 12px;
                color: white;
            }
            #chip_body {
                height: 400px;
                width: 300px;
                background-color: aqua;
                color: black;
            }
            #chip_top {
                background-color: deeppink;
                background-image: url();
                background-size: cover;
                background-position: center center;
                width: 100%;
                position: relative;
            }
            #chip_bottom {
                background-color: #fbfbfb;
                width: 100%;
                height: 20%;
                position: relative;
                font-size: 1.2em;
                word-wrap: break-word;
            }
            #text {
                padding-left: 5%;
                padding-right: 2.5%;
                overflow: hidden;
            }
            #coreImage {
                display: block;
            }
            #card_container {
                width: 70%;
                height: 600px;
                background-color: aqua;
                color: black;
            }
            #card_right {
                height: 100%;
                width: 30%;
            }
            #card_left {
                background-color: darkblue;
                height: 100%;
                width;
                70%;
            }
            #card_left_top {
                padding-right: 20px;
                padding-top: 20px;
                background-color: skyblue;
            }
            #circle {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background-color: red;
            }
            #header_text {
            }
            #card_content {
                width:100%;
                background-color: lightcoral;
            }
        </style>
        <core-animated-pages transitions="hero-transition" selected={{page}}>
            <section>
                <paper-shadow z="1" id='paper_shadow' on-mouseover="{{raise}}" on-mouseout="{{lower}}" animated=true; hero-p="" on-tap="{{transition}}">
                    <div id="chip_body" hero-id="chip_body" vertical layout center justified>
                        <div id="chip_top" flex>
                            <div id="coreImage">
                                <content select="#core-image"></content>
                            </div>
                        </div>
                        <div id="chip_bottom" vertical layout start-justified>
                            <div id='text'>
                                <content select="#chip_bottom"></content>
                            </div>
                        </div>
                    </div>
                </paper-shadow>
            </section>
            <section id="page2">
                <div id="card_container" hero-id="chip_body" on-tap="{{transition}}" hero=""></div>
            </section>
        </core-animated-pages>
    </template>
    <script>
        Polymer('chip-card', {
            page: 0,

            raise: function() {
                this.$.paper_shadow.setZ(2);
            },
            lower: function() {
                this.$.paper_shadow.setZ(1);
            },
            transition: function(e) {
                if (this.page === 0) {
                    this.$.paper_shadow = e.currentTarget;
                    this.page = 1;
                } else {
                    this.page = 0;
                }
            }

        });
    </script>
</polymer-element>

redirect form based on option selection

How do I redirect the user based on two options on drop down menu's?

i have read a few similar questions but couldnt relate the advice as the form code I am using is very long and complicated. I have taken out a lot of the code so I hope i'm not missing anything out thats important.

I am trying to redirect the user based on if they pick 1)Audition Only 2)Workshop Only or 3)Workshop + Audition

As well as if they choose to attend

1) London 2) Birmingham 3) Manchester

So that someone doing an Audition in London would get directed to a different place than someone doing an Audition in Manchester.

If you can I would appreciate the help!

<form name="signupForm" id="signupForm" target="_top" method="post" action="http://ift.tt/1Eh6ET8" onsubmit="return checkMandatory();"> 
<table><tbody>
<tr>
<td> 
<ul id="teamFields"> 

</li> 
<li class="formRow userFieldName" id="field_User8" ><label class="fieldName" id="labelUser8" for="signup_User8">Would you like to attend the workshop and/or audition?<span class="reqMarker">*</span></label> <select name="User8" id="signup_User8"><option value="">Choose</option> <option value="Workshop Only" >Workshop Only</option><option value="Workshop + Audition" >Workshop + Audition</option><option value="Audition Only" >Audition Only</option></select>
</li> 
<li class="formRow userFieldName" id="field_User5" style="display: none;"><label class="fieldName" id="labelUser5" for="signup_User5">Please select the closest city to where you live from the list</label> <select name="User5" id="signup_User5"><option value="">Choose</option> <option value="London" >London</option><option value="Birmingham" >Birmingham</option><option value="Manchester" >Manchester</option></select>
</li> 
<li class="formRow userFieldName" id="field_User21" style="display: none;"><label class="fieldName" id="labelUser21" for="signup_User21">Please select the city closest to where you live</label> <select name="User21" id="signup_User21"><option value="">Choose</option> <option value="London" >London</option><option value="Birmingham" >Birmingham</option><option value="Manchester" >Manchester</option></select>
</li> 
<li class="formRow userFieldName" id="field_User20" style="display: none;"><label class="fieldName" id="labelUser20" for="signup_User20">Please select the closest city to where you live</label> <select name="User20" id="signup_User20"><option value="">Choose</option> <option value="Manchester" >Manchester</option><option value="Birmingham" >Birmingham</option><option value="London" >London</option></select>

</li> 
</ul>
<ul id="teamSelection"> 
<li class="formRow joinRow"><span id="confirmText"> </span>
</li> 
<input type="hidden" name="AutomaticTeamIDs" value="4" /> 
<input type="hidden" name="AutomaticTeamIDs" value="3" /> 
<input type="hidden" name="AutomaticTeamIDs" value="1" /> 
</ul> 
</td> 
</tr> </tbody>
</table> 
<div id="reqInfo">* required information
</div> 
<input id="formSubmit" type="submit" name="formSubmit" style="font-weight: bold; font-size: 16px; color: #000000; border-style: solid; border-width: 8px !important; border-color: #d3d3d3 !important; border-radius: 0px !important; padding: 16px !important; background: #a9a9a9 !important; box-shadow: none !important;" value="Sign Me Up" /> 
<input type="hidden" name="Referrer" value="" /> 
<input type="hidden" name="qstring" value="9ec6ce8b4e17b30b7c2a75edc1c1a684716721de718b41870cfebdceacea9f01" /> 
<input type="hidden" name="formSubmitCheck" value="1" /> 
</form> 
<div id="formBottom">
</div> 
</div> 
</div> 
</body>
</html>`

Please can someone advise what needs changing?

AngularJS, NodeJs and ExpressJS

The program is just to do a sum to learning how to works angular, express and nodejs.

My library is:

angular.js angular-route.js

I am trying run this code but I am geeting that error:

Uncaught TypeError: url.match is not a function (13:04:31:527 | error,  javascript)
  at completeRequest (public_html/js/libs/http://ift.tt/1Eh6Fq6)
  at xhr.onreadystatechange              (public_html/js/libs/http://ift.tt/1RdoW1J)

My HTML is:

<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="js/libs/http://ift.tt/1Eh6Fqd" type="text/javascript"></script>
    <script src="js/libs/http://ift.tt/1RdoWhX" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>

</head>
<body ng-controller="AppCtrl" >

    <form >
        <input type="text" ng-model="url" size="80" aria-label="URL" />
        <br>
        <br>            Parameter 1: 
        <input type="text" ng-model="param1">
        <br>
        <br>
        Parameter 2: 
        <input type="text" ng-model="param2">
    </form>
    <br>
    <br>
     <button id="samplegetbtn" ng-click="click('http://localhost:8000/calc/param1/:param1/param2/:param2')">Sample GET</button>
     <br>
     <div >Sum: {{data}}</div>
    <br>
</body>

My Server side is:

var url = require('url');
//Require express, 
var express = require('express');
//and create an app
var app = express();

//app.get() which represents the HTTP GET method
app.get('/', function (req, res) {

  res.send('Hello World!');

});

//app.get() which represents the HTTP GET method
app.get('http://localhost:8000/calc/param1/:param1/param2/:param2', function (req, res) {

var a = parseInt(req.params.param1);
  console.log(a);
  var b = parseInt(req.params.param2);
  console.log(b);


var output = a + b;
  console.log(output);
  res.sendStatus(output);

});



var server = app.listen(8000, function () {

  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://' + host + ':' + port);

});

My script with AngularJS:

(function(angular) {
'use strict';
 angular.module('myCalc', ['ngRoute'])



 .controller('AppCtrl', function($scope, $http, $templateCache) {
    $scope.click = function(url) {
    $scope.url = url;
    var param1 = $scope.param1;
  var param2 = $scope.param2;

$http.get({ url: $scope.url, param1: $scope.param1, param2: $scope.param2, cache: $templateCache}).
 //    $http.get({ url: $scope.url,  cache: $templateCache}).
        success(function(data) {
        $scope.data = data;
       }).
        error(function(data) {
        $scope.data = data || "Request failed";
      });

  };

})


 .config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when('http://localhost:8000/calc/param1/:param1/param2/:param2', {
    templateUrl: 'index.html',
    controller: 'AppCtrl'


   // configure html5 to get links working on jsfiddle
   $locationProvider.html5Mode(true);
 });
})(window.angular);

BeautifulSoup (bs4) parsing wrong

Parsing this sample document with bs4, from python 2.7.6:

<html>
<body>
<p>HTML allows omitting P end-tags.

<p>Like that and this.

<p>And this, too.

<p>What happened?</p>

<p>And can we <p>nest a paragraph, too?</p></p>

</body>
</html>

Using:

from bs4 import BeautifulSoup as BS
...
tree = BS(fh)

HTML has, for ages, allowed omitted end-tags for various element types, including P (check the schema, or a parser). However, bs4's prettify() on this document shows that it doesn't end any of those paragraphs until it sees </body>:

<html>
 <body>
  <p>
   HTML allows omitting P end-tags.
   <p>
    Like that and this.
    <p>
     And this, too.
     <p>
      What happened?
     </p>
     <p>
      And can we
      <p>
       nest a paragraph, too?
      </p>
     </p>
    </p>
   </p>
  </p>
 </body>

It's not prettify()'s fault, because traversing the tree manually I get the same structure:

<[document]>
    <html>
        ␊
        <body>
            ␊
            <p>
                HTML allows omitting P end-tags.␊␊
                <p>
                    Like that and this.␊␊
                    <p>
                        And this, too.␊␊
                        <p>
                            What happened?
                        </p>
                        ␊
                        <p>
                            And can we 
                            <p>
                                nest a paragraph, too?
                            </p>
                        </p>
                        ␊
                    </p>
                </p>
            </p>
        </body>
        ␊
    </html>
    ␊
</[document]>

Now, this would be the right result for XML (at least up to </body>, at which point it should report a WF error). But this ain't XML. What gives?

How to implement jQuery inputmask to @Html.TextBoxFor()

I have an @Html.TextBoxFor(m => m.Expiration, new {@placeholder="MM/YY"}) that I'm trying to apply RobinHerbots jquery.inputmask (http://ift.tt/1yHWP3N) to so as the user types they would see something similar to

Starting: MM/YY

After First Character: 0M/YY

Second Character: 04/YY

and so on.

I've applied

$("#Expiration").inputmask({mask:"MM/YY",greedy:false});

However I get MM/YY in my text input without being able to click on it. Any assistance would be great.

Jquery Sortable retrieve hidden Id on change

i am using the jquery sortable arrange images in a certain order, all i want to do is on change get the hidden id of the image and the new current position number so i can run an ajax request to update the new position in my database, however when i change the image position the alert is not triggered(in below code) so i am wondering what i am doing wrong.

Jquery code

<script>
        $(function() {
            $("#sortable").sortable({
                stop: function(event, ui) {

                    $('input.imageHiddenImageId').each(function(idx) {

                        var imageId = (this).val();
                        alert("New position: " + ui.item.index() + "id:" + imageId);
                        //Run some AJAX code to server
                    });

                }
            });
            $( "#sortable" ).disableSelection();
        });
    </script>

HTML code

<ul id="sortable">
   <li class="ui-state-default">
      <img src="http://localhost/site/gallery/3.png" style="max-width: 100%; height: auto;">
      <input type="hidden" class="imageHiddenImageId" id="imageHiddenImageId" name="imageHiddenImageId" value="45">
      <input type="hidden" id="imageHiddenNo" name="imageHiddenNo" value="2">
    </li>
 </ul>

Thanks for the help

Remove img in html that non contain src attribute

I need remove all img element in html that non contain src attribute with preg_match and PHP

something like:

<html>
 <img src="someurl" alt="something"  />
 <img  alt="something"  />
<html />

in

<html>
 <img src="someurl" alt="something"  />
<html />

Tanks

Apache2 custom 404 Page won't load (.htaccess)

i want to create a custom errorpage for my small webserver which runs on apache2 on raspbian. But sadly the created page isn't loaded by a browser in case of an URL which can't be resolved ... the browser just prints the path to the created errorpage on the upper left-hand corner.

html of the custom page so far:

<!DOCTYPE html><html><head></head><body><p>Nooooot found ...</p></body></html>

html of the loaded page:

<html><head></head><body>sites/errorsites/404.html</bod></html>

My .htaccess-file, which is placed in /var/www/

Options -Indexes
ErrorDocument 404 sites/errorsites/404.html

Location of my errorsites-dir with custom errorsites: /var/www/sites/

(Of course I set "AllowOverride" in the default-file in /etc/apache2/sites-available to "all".)

Thanks for the help

Lukas

Edit: default-file of apache:

ServerAdmin webmaster@localhost

DocumentRoot /var/www
<Directory />
    Options FollowSymLinks
    AllowOverride None
</Directory>
<Directory /var/www/>
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Order allow,deny
    allow from all
</Directory>

ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
<Directory "/usr/lib/cgi-bin">
    AllowOverride None
    Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
    Order allow,deny
    Allow from all
</Directory>

ErrorLog ${APACHE_LOG_DIR}/error.log

# Possible values include: debug, info, notice, warn, error, crit,
# alert, emerg.
LogLevel warn

CustomLog ${APACHE_LOG_DIR}/access.log combined

Display uploaded images on button click

On click of button preview i need the uploaded images to be shown ,the scripts it's working fine for changing event but not for the click one.

HTML

 <form action="test.php" enctype="multipart/form-data" id="mainform" method="post" name="mainform">
Imagine 1:<br>
 <input type="file" name="img1" id="img1"><br>
     <br><br>     
Imagine 2 :<br>
 <input type="file" name="img2" id="img2"><br>
     <br>
 Imagine 3 :<br>
 <input type="file" name="img3" id="img3"><br> 
     <br>
 Imagine 4 :<br>
 <input type="file" name="img4" id="img4"><br>    
     <br>
 Imagine 5 :<br>
 <input type="file" name="img5" id="img5"><br>   
     <br>
 Imagine 6 :<br>
 <input type="file" name="img6" id="img6"><br>   
     <br>
 Imagine 7 :<br>
 <input type="file" name="img7" id="img7"><br>    
     <br>
 Imagine 8 :<br>
 <input type="file" name="img8" id="img8"><br>    
     <br>
 Imagine 9 :<br>
 <input type="file" name="img9" id="img9"><br>   
     <br>
 Imagine 10 :<br>
 <input type="file" name="img10" id="img10"><br>    
     <br>
 Imagine 11 :<br>
 <input type="file" name="img11" id="img11"><br> 
     <br>
 Imagine 12 :<br>
 <input type="file" name="img12" id="img12"><br>    
     <br>
 Imagine 13 :<br>
 <input type="file" name="img13" id="img13"><br>    
     <br>
 Imagine 14 :<br>
 <input type="file" name="img14" id="img14"><br>     
     <br>
 Imagine 15 :<br>
 <input type="file" name="img15" id="img15"><br>    
     <br />
     Preview:
     <br />
     <input type="checkbox" id="previz" />Preview
</form>
<div id="#previzdiv">
<img src="" id="preview-img1">
<img src="" id="preview-img2">
<img src="" id="preview-img3">
<img src="" id="preview-img9">
<img src="" id="preview-img5">
</div>

Jquery:

$("#center2 #forme #previz").change(function(){
if(this.checked){
for(i=1;i<15;i++){
j = $("form#mainform #img"+i);
console.log(j);
readURL(j);
}
}

});
function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                imgId = '#preview-'+$(input).attr('id');
                $(imgId).attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
      }


      $("form#mainform input[type='file']").change(function(){
        readURL(this);
        console.log(this);
      });

The console log from "j" should look like <input type="file" name="img1" id="img1"> yet it different from what change event is console logging.Is the approach correct? JSFIDDLE:http://ift.tt/1JrktCS

Maintaining reactjs element state when removing it from the DOM

I'm building an website using ReactJS. I have a div in place, and its content is decided based on the state of a radio button (it changes the value of media):

<div className="card_container">
     { this.state.media=="image" ? <MediaCard /> : <TextCard /> }
</div>

Both the elements rendered inside card_container have a text field, and I'd like for their content not to be discarded when switching between states. For example, if in the text area inside MediaCard I type "foo", switch to TextCard and then back to MediaCard, then I lose the text I have entered in the text area.

How can I maintain the original MediaCard element and just re-render the original with the text and all of its props and state?

EDIT: At the moment, I have solved this by bubbling up the properties of the contained elements, and then pass them as props when I re-render those elements. It's an ugly solution, though, and I'd rather find a better one...

difference between window and document in jQuery

i wanna know whats the difference between document && window in jQuery ??

These two are used quite often, but i hv never got the difference between them.

jQuery Caching & traversing Objects

I'm trying to get my head around jQuery caching and how it improves performance and how it should be used?

As I understand it, when you use a jQuery selector you are searching the DOM and creating a jQuery object which you can traverse. Does that mean if you create a jQuery object of the html body tag you can avoid the need to traverse the DOM when creating new jQuery objects? Would there be any point to doing that?

Considering ...

var htmlBody = $('body');
$('header',htmlBody).css('background','green');
$('footer',htmlBody).css('background','yellow');

Would the above piece of code be cheaper/use less resources by creating new objects and traversing the DOM than...

$('header').css('background','green');
$('footer').css('background','yellow');

I have looked at various html table tutorials, both on the w3c and other websites, but I can't seem to get the colspan tag to work right

I am trying to create a program guide for my online radio station, using a table, in which some programs are played at the same time each day. In that case, the cells for that row should be merged. I am totally blind, and so can't tell how this looks, but the screen reader sure doesn't read it right, which would lead me to believe that it isn't displaying right either. The content of the table is in Spanish, but that shouldn't effect the html. I have been fighting with this all morning and don't know what else to do. If anyone can help I would be very grateful. Here is my code. I am not that good with html.

<table stile=“width:100%”>
   <tr>
      <th>Hora</th>
      <th>Lunes</th>
      <th>Martes</th>
      <th>Miércoles</th>
      <th>Jueves</th>
      <th>Viernes</th>
      <th>Sábado</th>
      <th>Domingo</th>
   </tr>
   <tr>
      <td> 00:00</td>
      <td colspan=“7”>Música</td>
   </tr>
   <tr>
      <td>00:30</td>
      <td colspan=“7”>Música</td>
   </tr>
   <tr>
      <td>01:00</td>
      <td colspan=“7”>Lectura Bíblica: El Nuevo Testamento en 40 Días</td>
   </tr>
   <tr>
      <td>01:30</td>
      <td colspan=“7”> Música</td>
   </tr>
   <tr>
      <td>02:00</td>
      <td colspan=“5”>Aliento Para Tu Alma</td>
      <td colspan=“2”>Música</td>
   </tr>
   <tr>
      <td>02:30</td>
      <td colspan=“7”>Música</td>
   </tr>
   <tr>
      <td>03:00</td>
      <td colspan=“6”>Música</td>
      <td>Pildoritas y Reflexiones</td>
   </tr>
   <tr>
      <td>03:30</td>
      <td colspan=“6”>Música</td>
      <td> Pildoritas y Reflexiones</td>
   </tr>
   <tr>
      <td>04:00</td>
      <td colspan=“7”>Promesas de Dios</td>
   </tr>
   <tr>
      <td>04:30</td>
      <td colspan=“7”>Promesas de Dios</td>
   </tr>
   <tr>
      <td>05:00</td>
      <td colspan=“5”>Momento Decisivo</td>
      <td colspan=“2”>Música</td>
   </tr>
   <tr>
      <td>05:30</td>
      <td colspan=“5”>Música<br>Motivación<br>Firmes y Adelante</td>
      <td colspan=“2”>Música</td>
   </tr>
   <tr>
      <td>06:00</td>
      <td colspan=“5”Primera Luz</td>
      <td colspan=“2”>Música</td>
   </tr>
   <tr>
      <td>06:30</td>
      <td colspan=“5”>Primera Luz</td>
      <td colspan=“2”>Música</td>
   </tr>
   <tr>
      <td>07:00</td>
      <td colspan=“5”>Ciencia y Tecnología<br>Ciudad Medica<br>Batuta y Pincel<br>Circulo Radial de Lectura</td>
      <td>Música</td>
      <td>Tiempos de Restauración</td>
   </tr>
   <tr>
      <td>07:30</td>
      <td colspan=“5”>Instituto Bíblico del Aire<br>Un Momento con Alberto Motessi</td>
      <td>Música<br>Un Momento con Alberto Motessi</td>
      <td>Pensemos</td>
   </tr>
   <tr>
      <td>08:00</td>
      <td colspan=“5”>Visión Para Vivir</td>
      <td>Tiempos de Restauración</td>
      <td>Momento Oportuno</td>
   </tr>
   <tr>
      <td>08:30</td>
      <td colspan=“6”>El Amor que Vale</td>
      <td>Música</td>
   </tr>
   <tr>
      <td>09:00</td>
      <td colspan=“5”>Música</td>
      <td colspan=“2”>Lectura Bíblica: El Nuevo Testamento en 40 días</td>
   </tr>
   <tr>
      <td>09:30</td>
      <td colspan=“7”>Música</td>
   </tr>
   <tr>
      <td>10:00</td>
      <td colspan=“5”>Tiempos de Restauración</td>
      <td>Top 20</td>
      <td>Música</td>
   </tr>
   <tr>
      <td>10:30</td>
      <td colspan=“5”>Todo es Posible<br>Un Minuto con Mariam</td>
      <td>Top 20</td>
      <td>Música</td>
   </tr>
   <tr>
      <td>11:00</td>
      <td colspan=“5”>Lectura Bíblica: El Nuevo Testamento en 40 Días</td>
      <td>Top 20</td>
      <td>Los Megachicos</td>
   </tr>
   <tr>
      <td>11:30</td>
      <td colspan=“5”>Música</td>
      <td>Top 20</td>
      <td>Música</td>
   </tr>
   <tr>
      <td>12:00</td>
      <td colspan=“5”>El Mundo Hoy</td>
      <td>Sabor Latino</td>
      <td>Dante Gebel Live</td>
   </tr>
   <tr>
      <td>12:30</td>
      <td colspan=“5”>Música</td>
      <td>Sabor Latino</td>
      <td>Música</td>
   </tr>
   <tr>
      <td>13:00</td>
      <td colspan=“5”>Más Vale Tarde</td>
      <td>Sabor Latino</td>
      <td>Mundo Cristiano</td>
   </tr>
   <tr>
      <td>13:30</td>
      <td colspan=“5”>Más Vale Tarde</td>
      <td>Sabor Latino</td>
      <td>Música</td>
   </tr>
   <tr>
      <td>14:00</td>
      <td colspan=“5”>Más Vale Tarde</td>
      <td>El Show de la Música</td>
      <td>Vale la Pena</td>
   </tr>
   <tr>
      <td>14:30</td>
      <td colspan=“5”>Más Vale Tarde</td>
      <td>El Show de la Música</td>
      <td>Música</td>
   </tr>
   <tr>
      <td>15:00</td>
      <td colspan=“5”>Al Oido<br>Encuentro<br>Vida en Familia Hoy</td>
      <td>El Show de la Música</td>
      <td>Música</td>
   </tr>
   <tr>
      <td>15:30</td>
      <td colspan=“5”>Conociendo la Verdad<br>Cosas de Niños, Locuras de Padres<br>De Pelos</td>
      <td>El Show de la Música</td>
      <td>Música</td>
   </tr>
   <tr>
      <td>16:00</td>
      <td colspan=“5”>Juego Limpio</td>
      <td>Fuego</td>
      <td>El Show de la Música</td>
   </tr>
   <tr>
      <td>16:30</td>
      <td colspan=“5”>Juego Limpio</td>
      <td>Fuego</td>
      <td>El Show de la Música</td>
   </tr>
   <tr>
      <td>17:00</td>
      <td colspan=“5”El Antivirus</td>
      <td>Música</td>
      <td>El Show de la Música</td>
   </tr>
   <tr>
      <td>17:30</td>
      <td colspan=“5”>El Antivirus</td>
      <td>Música</td>
      <td>El Show de la Música</td>
   </tr>
   <tr>
      <td>18:00</td>
      <td colspan=“5”>El Antivirus</td>
      <td>Al Punto con Jefrey de León</td>
      <td>Música</td>
   </tr>
   <tr>
      <td>18:30</td>
      <td colspan=“5”>El Antivirus</td>
      <td>Al Punto con Jefrey de León</td>
      <td>Música</td>
   </tr>
   <tr>
      <td>19:00</td>
      <td colspan=“5”>El Antivirus</td>
      <td>Al Punto con Jefrey de León</td>
      <td>Top 20</td>
   </tr>
   <tr>
      <td>19:30</td>
      <td colspan=“5”>El Antivirus</td>
      <td>Al Punto con Jefrey de León</td>
      <td>Top 20</td>
   </tr>
   <tr>
      <td>20:00</td>
      <td>Porque Eres Mamá</td>
      <td>El Mundo de Juan Romero</td>
      <td>Al Punto con Jefrey de León</td>
      <td>El Mundo de Juan Romero</td>
      <td>Extremo</td>
      <td>Mundo Cristiano</td>
      <td>Top 20</td>
   </tr>
   <tr>
      <td>20:30</td>
      <td>Porque Eres Mamá</td>
      <td>Entre Amigos</td>
      <td>Al Punto con Jefrey de León</td>
      <td>Entre Amigos</td>
      <td>Música</td>
      <td>Música</td>
      <td>Top 20</td>
   </tr>
   <tr>
      <td>21:00</td>
      <td colspan=“2”>>Música</td>
      <td>Al Punto con Jefrey de León</td>
      <td>Música</td>
      <td>El Sótano</td>
      <td>Notimisiones Remar</td>
      <td>Música</td>
   </tr>
   <tr>
      <td>21:30</td>
      <td colspan=“2”>Música</td>
      <td>Al Punto con Jefrey de León</td>
      <td>Música</td>
      <td>El Sótano</td>
      <td>Más de la Vida</td>
      <td>Música</td>
   </tr>
   <tr>
      <td>22:00</td>
      <td colspan=“4”>Promesas de Dios</td>
      <td>El Sótano</td>
      <td>Música</td>
      <td>El Mundo de Juan Romero</td>
   </tr>
   <tr>
      <td>22:30</td>
      <td colspan=“4”>Promesas de Dios</td>
      <td>El Sótano</td>
      <td>Música</td>
      <td>Entre Amigos</td>
   </tr>
   <tr>
      <td>23:00</td>
      <td colspan=“4”>Pildoritas y Reflexiones</td>
      <td>Shockrave</td>
      <td>Pildoritas y Reflexiones</td>
      <td>Música</td>
   </tr>
   <tr>
      <td>23:30</td>
      <td colspan=“4”>Pildoritas y Reflexiones</td>
      <td>Shockrave</td>
      <td>Pildoritas y Reflexiones</td>
      <td>Música</td>
   </tr>
   <tr>
      <td colspan=“8”><b>Hora del Centro de los EEUU (CST/CDT)</b></td>
   </tr>
</table>

Positioning Elements on Edge of Container

Hopefully this is better explained with the picture I mocked up here:

enter image description here

I have a full-width, 100vh area that has a .container that's 100% width / 1200px max-width and 100vh as well (centered of course.). Inside of this container I'll have 3 elements (the red X's).

How can I get the center point of these elements to literally stick to the edges of the container? My end goal is to have them seemingly floating, but then as the screen width shrinks and the .container width starts to collapse that the items follow that edge and look to be just peaking into the screen.

CodePen

Connecting circles in CSS3

I want to connect my circles with line going between them in CSS3 but i don't know how to.

.circle
{
    display: inline-block;
    margin-right: 10px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: orange;
    border: 2px black solid;
}
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

Unable to scroll down and view text because of css3 hight vh property

In the responsive one page site- The 'About Us' tab has more text than the other tabs- and the overflowed text is not seen.

The site uses css3, it uses the vh property, for making the site responsive- and it works, but as a result I can't scroll down to view large text tab.

I have added an example for you to try: Code example (there's also a share link which you can download the content) Notice only the 'About us' tab has "too much" text, the other tabs works fine. I would like the be able to see the whole text at the 'About Us' tab.

html (navbar):

<nav class="nav nav--active">
    <ul class="nav__list">
        <li class="nav__item">
            <a href="" class="nav__link"> <div class="nav__thumb color1" data-letter="a"></div>
            <p class="nav__label">
                About
            </p> </a>
        </li>
        <li class="nav__item">
            <a href="" class="nav__link"> <div class="nav__thumb color2" data-letter="p"></div>
            <p class="nav__label">
                Products
            </p> </a>
        </li>
    </ul>
</nav>

content:

<div class="page">
    <section class="section section--active color1" data-letter="a">
        <article class="section__wrapper">
            <h1 class="section__title">About us</h1>
            <p>
                John Doe is ... long text
            </p>
        </article>
    </section>
    ...
</div>

css3:

.page{
    height: 100vh;
}

To sum it up: The css3 height vh property prevent the page from scrolling down to view the text. How to fix that?

JQuery autocomplete combobox line items breaking in IE (all versions) this will take a looksie

I have an autocomplete combo-box inside a div which opens up into a dialog box. In IE the line items are crammed together and text is not a all visible. You can get the source code, such as I have, directly from JQuery and experience the error such as I have.

For an explanation of use (in case you think it is necessary): This is a pop-up holding a combobox for email addresses. I'm after the dialog loads I use BindUsers to retrieve the list and use the success to build. I've experienced another issue here where I would add a null or "Enter an email" value and when I append the rest of the options the element I previously added is overwritten.

Also the alert which should fire, never fires....

If this isn't enough, you might shoot some ducks and not down vote every post you don't understand. I'm looking for a relatively quick response... Thanks. Link to src: http://ift.tt/1DNMHCN

 function BindUsers(){
            $.ajax({ url: '<%=Page.ResolveClientUrl("~/Chat_getCurrentTickets.aspx")%>',
                data: { fetch: "GetUserList"}, 
                async: false,
                type: 'GET',
                dataType: "json",
                success: onBindUserSuccess, 
                error: function(){(alert('Error getting list of recipients'))}});      
        }

        function onBindUserSuccess(data){           
            
            //opt.value = '-1';
            //opt.text = 'Enter an email';
            //$('#combobox').append(opt);
            //$('#combobox').selectedIndex = -1;

            for(var i=0;i< data.length;i++){
                var opt = document.createElement('option');
                if(data[i].OperatorName.trim() != ''){
                    opt.value = data[i].Email;
                    opt.text = data[i].OperatorName;
                    $('#combobox').append(opt);
                }
            }
        }

        (function( $ ) {
            $.widget( "custom.combobox", {
                _create: function() {
                    this.wrapper = $( "<span>" )
                      .addClass( "custom-combobox" )
                      .insertAfter( this.element );
 
                    this.element.hide();
                    this._createAutocomplete();
                    this._createShowAllButton();
                },
 
                _createAutocomplete: function() {
                    var selected = this.element.children( ":selected" ),
                      value = selected.val() ? selected.text() : "";
 
                    this.input = $( "<input>" )
                      .appendTo( this.wrapper )
                      .val( value )
                      .attr( "title", "" )
                      .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
                      .autocomplete({
                          delay: 0,
                          minLength: 0,
                          source: $.proxy( this, "_source" )
                      })
                      .tooltip({
                          tooltipClass: "ui-state-highlight"
                      });
 
                    this._on( this.input, {
                        autocompleteselect: function( event, ui ) {
                            ui.item.option.selected = true;
                            this._trigger( "select", event, {
                                item: ui.item.option
                            });
                        },
 
                        autocompletechange: "_removeIfInvalid"
                    });
                },
 
                _createShowAllButton: function() {
                    var input = this.input,
                      wasOpen = false;
 
                    $( "<a>" )
                      .attr( "tabIndex", -1 )
                      .attr( "title", "Show All Items" )
                      .tooltip()
                      .appendTo( this.wrapper )
                      .button({
                          icons: {
                              primary: "ui-icon-triangle-1-s"
                          },
                          text: false
                      })
                      .removeClass( "ui-corner-all" )
                      .addClass( "custom-combobox-toggle ui-corner-right" )
                      .mousedown(function() {
                          wasOpen = input.autocomplete( "widget" ).is( ":visible" );
                      })
                      .click(function() {
                          input.focus();
 
                          // Close if already visible
                          if ( wasOpen ) {
                              return;
                          }
 
                          // Pass empty string as value to search for, displaying all results
                          input.autocomplete( "search", "" );
                      });
                },
 
                _source: function( request, response ) {
                    var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
                    response( this.element.children( "option" ).map(function() {
                        var text = $( this ).text();
                        if ( this.value && ( !request.term || matcher.test(text) ) )
                            return {
                                label: text,
                                value: text,
                                option: this
                            };
                    }) );
                },
 
                
 
                _destroy: function() {
                    this.wrapper.remove();
                    this.element.show();
                }
            });
        })( jQuery );

        //$( ".combobox" ).autocomplete({
        //    appendTo: "#dialog"
        //});
 
        $(function() {
            $( "#combobox" ).combobox();
            $("#combobox").change(function() {
                alert($(this).val());  //To fetch the value                 
            });
            $( "#toggle" ).click(function() {
                $( "#combobox" ).toggle();
            });
        });
<div id="dialog" title="Help Desk Email" style="display:none;" class="ui-front">                  
                    <div style="width:100%;"> 
                        <div>
                            <div style="width:100%;display:inline-block">
                                <input type="button" id="btnSend" value="Send" onclick="btnSendClickEvent()" style="margin:25px 25px 5px 5px" />
                                <label title="Select a recipient" id="RadCBTo" style="height:25px;margin-right:36px">To: </label>                            
                                <select id="combobox" >
                                    <option value="" selected="selected">Insert or select and email address</option>
                                </select>            
                            </div>
                            <div>
                                <label id="label2" style="height:20px;width:300px; margin:25px 5px 5px 80px">Subject: </label>
                                <input type="text" id="txtSubject" style="height:20px;width:550px;" />
                                <input type="hidden" id="tbTo" />                            
                            </div>
                            <div>
                                <textarea id="tdBody" aria-multiline="true" style="margin:25px 5px 5px 138px; width:inherit;" cols="90" rows="25"></textarea> 
                                <label id="label1" style="background-color:red;"></label>  
                                <input type="hidden" id="resolve"/>                            
                            </div>               
                        </div>                                                  
                    </div>              
                </div>

This is what I get in chrome and not what I get in IE... That is the problem.enter image description here

This is what I get in IE, not what I want

I have an autocomplete combo-box inside a div which opens up into a dialog box. In IE the line items are crammed together and text is not a all visible. You can get the source code, such as I have, directly from JQuery and experience the error such as I have.

For an explanation of use (in case you think it is necessary): This is a pop-up holding a combobox for email addresses. I'm after the dialog loads I use BindUsers to retrieve the list and use the success to build. I've experienced another issue here where I would add a null or "Enter an email" value and when I append the rest of the options the element I previously added is overwritten.

Also the alert which should fire, never fires....

If this isn't enough, you might shoot some ducks and not down vote every post you don't understand. Not every question needs code, its pretty obvious you don't know what the problem is and I'm looking for a relatively quick response instead of wasting half an hour formulating a question so people who had no idea what I was experience could try and get few up-votes.

getting values from php dynamically created checkboxes with jquery

H Im trying to get the value of a check box to send in a ajax request to a php page, the checkboxes are dynamically created using php. So far my code allows me to show an instruction to the user telling the user to choose an admin to delete from the list dynamically created. Then when a checkbox is checked the instrcution hides and the delete admin button is shown. Next on clicking the delete button I'm trying to confirm the user wants to delete the admin chosen and click to confirm or cancel. The real problem I'having is getting the value of the chosen checked checkbox to pass to the php processing page, so far I have managed to get the value of the first checkbox to pass no matter which checkbox is checked

Jquery

<script type="text/javascript">

$(document).ready(function() {

    var checkboxes = $("input[type='checkbox']");

checkboxes.click(function() {
    $('.delete_admin_but').show();
    $('#adminDeleteNotice').hide();
    var deleteAdminName=$(this).attr('id');
});

    $(".delete_admin_but").click(function() {



//  if(confirm("Are you sure you want to delete the Admin")) {

    $("#deleteAdminError").html('<img src="image/ajax-loader.gif" width="16" height="16" alt=""/>');




$.post("includes/delete_admin.inc.php",{deleteAdminname:deleteAdminName},function(json)   {
    if(json.result === "success") {
        $("#deleteAdminError").html(json.message);
//  $('.add_intern').get(0).reset();
    }else{
        $("#deleteAdminError").html(json.message);
    }
});



});//submit click
});//doc ready
</script>

html form

<div id="deleteAdmin" style="display:none">

<form id="adminDelete">

          <div class="delete_admin_list">

            <?php while($row = mysqli_fetch_array($result1)) { ?>

              <input type="checkbox" id="<?php echo $row['name']; ?>" value="<?php echo $row['id']; ?>" name="delete[]" class="checkboxAdmin" />

              <div id="admin_db_detail"><?php echo $row['name']; ?> - <?php echo $row['email']; ?></div>

              <?php } ?>

      </div>        


<div id="adminDeleteNotice" style="display:block">Please Choose an Admin to Delete</div>

<input name="delete_admin_but" id="delete_admin_but" type="button" class="delete_admin_but" value="Delete Admin" style="display:none"/>

</form>

<div id="deleteAdminError"></div>

</div>

If anyone could help me figure this out I would be greatful

Getting the layered navigation and toolbar ouside Magento

Im trying to get the layered navigation of a category links from a php that is outside magento.

I can create all of the category html, but the problem is that the layered links are created with the params of frontcontroller (at the same way of the toolbar links).

If i have a filter selected the creation of layered links doesnt take account of it, and also the layered links havent the category url...

I try to recreate the frontcontroller of the category page inside magento on my php ouside that, but i haven success... Even i recreate the $_SERVER, but the controller seems to not find a router...

In the php if i use mage::run, it do the operation of calcule correctly but mage::run makes the response and isnt i want because i need an xml output only of layered navigation.

If i use mage::app i can get the category html, but the controler isnt calculated correctly although is the same $_SERVER[request_uri] and havent correct links. The front controller havent action...

In the frontcontroller request i see two differences: in magento dispathed is true, but in the php no, and in magento de request_uri are rewrited to catalog/category/view/id/7?color=99 while in the php not hombre.html?color=99

Im missing anything, i need to initialize the front controller? o reinitialize???

Or there a different way to get the layered navigation from outside magento??

Set the height of a div to the same as a PHP value

I am attempting to make a small custom graph, and I would like to set the height of each part of the graph to a PHP variable.

I have a container with a fixed height:

.container {
   height: 200px;
}

I then have 3 additional divs within the container, lets say 'a', 'b' and 'c'. The values of a, b, and c are all taken from a database, so their height needs to be dynamic. In PHP, I get the weight of each div through simple math: $a_weight = $a / ($a + $b + $c) (for a). I would then like to set the height of div a to that weight. So, div a would be $a_height = $a_weight * 200. For example, if $a_weight = 30%, the resulting height of div a would be $a_height = 60px (.30*200).

Is this possible to do? Can I then do something like:

<div class="a" height=".$a_height."></div>

If not, what would be the best practice in order to get a value from a database (mysql), and set the height of an element proportionally based on that element.

div increases height, and moves a div next to it in Bootstrap

I'm using Bootstrap right now and i'm having an issue.

This is my code:

<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">...</div>
<div id="fotos" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
<div id="secciondos" class="col-xs-12 col-sm-8 col-md-9 col-lg-6 col-lg-push-3">...</div>

My layouts look like this:

http://ift.tt/1JQxdX4

But when my calendar height is bigger, this is what happens:

http://ift.tt/1JQxeKw

What can I do to fix it?.

Is it acceptable to have redundant language attributes in HTML?

In terms of accessibility, is it OK to have something like:

<html lang="en">
    <body>
      <h2 lang="fr">Imagine this is in French</h2>
      <h2 lang="en">English headline</h2>
      <h2 lang="en">English headline</h2>
      <h2 lang="fr">Imagine this is in French</h2>
    </body>
</html>

Please note this is just a rough and ready example to demonstrate, I don't need HTML validation.

As you can see from the example, I assume that the ideal scenario would be to have the above but without lang definitions for the English headlines since it's given by the overall document. But is there any harm in defining them from an accessibility point of view?

Bootstrap button alignment small screen width

okay I'm styling some buttons for a mini survey site I am building and I am happy with how it looks on a desktop, but when i resize the browser window to a size that resembles a phone I cant get the buttons to just align under eachother. the desktop sized version has 2 rows, one with 3 buttons and one with 2 buttons.

full size desktop it looks ok : enter image description here

reduced width: enter image description here

my button code :

<div class="panel-body" style="padding-bottom:0px;">
    <div class="row"> 
        <div class="btn-group btn-group-justified mg0 pd0"role="group" aria-label="...">
        <div class="col-xs-6 col-sm-4 mg0 pd0">
        <button type="button" class="btn btn-default btn-lg btn-block" id="btnChoice1" value="<?php echo $aId[0];?>"><?php echo $aTitle[0];?></button>
        </div><div class="col-xs-6 col-sm-4 mg0 pd0">
        <button type="button" class="btn btn-default btn-lg btn-block" id="btnChoice2" value="<?php echo $aId[1];?>"><?php echo $aTitle[1];?></button>
        </div><div class="col-xs-6 col-sm-4 mg0 pd0">
        <button type="button" class="btn btn-default btn-lg btn-block" id="btnChoice3" value="<?php echo $aId[2];?>"><?php echo $aTitle[2];?></button>
        </div>
    </div>
    </div><div class="row">
      <div class="btn-group btn-group-justified mg0"role="group" aria-label="...">
          <div class="col-xs-6 mg0 pd0">
        <button type="button" class="btn btn-default btn-lg btn-block" id="btnChoice4" value="<?php echo $aId[3];?>"><?php echo $aTitle[3];?></button>
          </div><div class="col-xs-6 mg0 pd0">
         <button type="button" class="btn btn-default btn-lg btn-block" id="btnChoice5" value="<?php echo $aId[4];?>"><?php echo $aTitle[4];?></button>
          </div>
      </div>
    </div>
</div>

I am trying to get the buttons to align themselves one per one under eachother instead of 2 buttons then one then 2 again and text getting outside the buttons in the second picture...

any help?

thanks