Rectangle 27 3

You could call 'e.stopPropagation()' on the event from within your click event handler when a user clicks within your div - this will stop the event from 'bubbling' up the DOM.

And then if you attach an event handler to the BODY element listening for clicks, you can use that event handler to hide the DIV; knowing that a click on the DIV itself won't bubble the event up to the BODY handler.

In this way any click on another element, unless the handler also calls stopPropagation(), will get caught by your handler. So if there are other cases where you don't want the div to hide you can stop it happening by calling stopPropagation() as required.

$("#edit-button").click( function(e) {
    $("#edit").toggle();
    e.stopPropagation();
});

$('#edit').click(function(e) {
    e.stopPropagation();
});

$("body").click( function(e) {
    $("#edit").hide();
});

Added an example. You'll need to fix the ID of 'edit-button' though. Untested but should work ;)

I tried this, however the div won't even appear now. I changed the var names as needed and there are no extenuating factors in the rest of the code. I'm not particularly strong with jQuery, so perhaps I'm missing something important/obvious?

Ah ok, in the css I changed it from visibility: hidden to display: none and now the code works. Also had to change #body -> body and show() -> toggle(). Thanks for the help.

Awesome. Thanks for editing the post with corrections.

javascript - How do I hide a div if the user clicks outside of the div...

javascript jquery html hide
Rectangle 27 19

You are binding click event every time you click a button. You don't want multiple event handlers. Plus you are redefining var pwShown = 0 on every click so you can never revert input state (pwShown stays the same).

Remove onclick attribute and bind click event with addEventListener:

function show() {
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'text');
}

function hide() {
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'password');
}

var pwShown = 0;

document.getElementById("eye").addEventListener("click", function () {
    if (pwShown == 0) {
        pwShown = 1;
        show();
    } else {
        pwShown = 0;
        hide();
    }
}, false);
<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
<button type="button" id="eye">
    <img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" />
</button>

Can we change the icon after clicked

html - Show/hide password onClick of button using Javascript only - St...

javascript html forms passwords
Rectangle 27 1

You should try to re-use nodes before creating/removing them. The less JavaScript has to engage with the DOM the faster, and hance smoother your animation and the UX will be. Since you're not retrieving any dynamic information on the hover event you can just put the .icon elements into your initial html, with a display: none property. And either in CSS or using JS show/hide on hover. Also scripts block page load, so to an extent they impact performance, obviously depending on the length of your script.

/* Default */
.layout-product .icon {
  display: none;
}

.layout-product:hover .icon {
  display: block; /* or inline-block or whatever you like that isn't none */
}
<div class="layout-product">
  <a href="http://www.mysite.com/product/lorem-ipsum-1">
    <div class="product-image">
      <img src="http://www.mysite.com/images/thumbnail/lorem-ipsum-1.jpg" alt="">
      <span class="icon top-left"></span>
      <span class="icon top-right"></span>
      <span class="icon bottom-left"></span>
      <span class="icon bottom-right"></span>
    </div>
  </a>
</div>

If you would like greater flexibility with your animation you could use Javascript instead of the CSS I provided.

// I have used a toggle which means it applies for both .mouseenter and .mouseleave 
// which the .hover function alias. If you pass one function rather than two it will
// Use that function for both events. Customize as you like.
$('.layout-product').hover(function(e) { 

  $(this).find('.icon').fadeToggle();

});

Also it goes without saying if you could avoid the use of empty elements in your html and use whichever css properties you can, either background of border-image as you mentioned, then that would be preferential, less DOM elements is better performance and maintainability, and purely presentational elements should be avoided where possible for semantics (separation of Presentation from Content).

border-image
background

Thanks for the advice, you're completely right it would just be a lot easier to just include them in the HTML, I was trying to stay away from that though because adding four elements to for each product to the DOM just for a hover effect seems a bit much, so I was thinking about just creating a transparent PNG with the border img on the corners and then just overlaying it on top ofthe product image what do you think about that? Thanks again!

@MitchellLayzell Is that using CSS border-image, background or html + css?

That's with background I'm trying to figure of the simplest way to add and icon to each corner of the product image

@MitchellLayzell Yeah, I think multiple background would be the way to go, but you might have to use Modernizr to provide a decent fallback, I read that on css-tricks.com/stacking-order-of-multiple-backgrounds. Good luck!

Awesome thanks for the link and your time!

javascript - jQuery Border Image (top-left, top-right, bottom-left, bo...

javascript jquery html css css3
Rectangle 27 13

This is the simplest of all....

<html>
<head> </head>

<body>
Pasword : <input type="password" name="password" id="password" />

<br/>
<br />

<button type="button" id="eye" onclick="if(password.type=='text')password.type='password'; else password.type='text';">
    toggle
</button>

</body>
</html>

html - Show/hide password onClick of button using Javascript only - St...

javascript html forms passwords
Rectangle 27 5

You don't need to maintain one extra "pwShown" variable to decide whether to show text or hide it. All you need to do is to examine "type" attribute of "pwd" element as below :

document.getElementById("eye").addEventListener("click", function(e){
        var pwd = document.getElementById("pwd");
        if(pwd.getAttribute("type")=="password"){
            pwd.setAttribute("type","text");
        } else {
            pwd.setAttribute("type","password");
        }
    });
<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
        <button type="button" id="eye">
            <img src="eye.png" alt="eye"/>
         </button>

html - Show/hide password onClick of button using Javascript only - St...

javascript html forms passwords
Rectangle 27 2

#content-mid .col-2 .features .feature-1{
    border: 1px solid #E5E5E5;
    float: left;
    height: 160px;
    overflow: hidden;
    padding: 5px;
    position: relative;
    width: 220px;
    z-index:-1;
}
#content-mid .col-2 .features .image_holder_home_page{
    height: 160px;
    overflow: hidden;
    position: relative;
    width: 220px;
}

#content-mid .col-2 .features .feature-1 .header{
    background: none repeat scroll 0 0 #0098FF;
    height: 30px;
    position: absolute;
    width: 95.5%;
}

Please add above css code into your site. because some dive elements are overflowing. this will fix that issue.

html - Display/Hide a div on JavaScript hover - Stack Overflow

javascript html css
Rectangle 27 18

I know its not relevant to this post but might help others converting HTML to PDF on client side. This is a simple solution if you use kendo. It also preserves the css (most of the cases).

var generatePDF = function() {
  kendo.drawing.drawDOM($("#formConfirmation")).then(function(group) {
    kendo.drawing.pdf.saveAs(group, "Converted PDF.pdf");
  });
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>

<body>
  <br/>
  <button class="btn btn-primary" onclick="generatePDF()"><i class="fa fa-save"></i> Save as PDF</button>
  <br/>
  <br/>
  <div id="formConfirmation">

    <div class="container theme-showcase" role="main">
      <!-- Main jumbotron for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Theme example</h1>
        <p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
      </div>
      <div class="page-header">
        <h1>Buttons</h1>
      </div>
      <p>
        <button type="button" class="btn btn-lg btn-default">Default</button>
        <button type="button" class="btn btn-lg btn-primary">Primary</button>
        <button type="button" class="btn btn-lg btn-success">Success</button>
        <button type="button" class="btn btn-lg btn-info">Info</button>
        <button type="button" class="btn btn-lg btn-warning">Warning</button>
        <button type="button" class="btn btn-lg btn-danger">Danger</button>
        <button type="button" class="btn btn-lg btn-link">Link</button>
      </p>
      <p>
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-link">Link</button>
      </p>
      <p>
        <button type="button" class="btn btn-sm btn-default">Default</button>
        <button type="button" class="btn btn-sm btn-primary">Primary</button>
        <button type="button" class="btn btn-sm btn-success">Success</button>
        <button type="button" class="btn btn-sm btn-info">Info</button>
        <button type="button" class="btn btn-sm btn-warning">Warning</button>
        <button type="button" class="btn btn-sm btn-danger">Danger</button>
        <button type="button" class="btn btn-sm btn-link">Link</button>
      </p>
      <p>
        <button type="button" class="btn btn-xs btn-default">Default</button>
        <button type="button" class="btn btn-xs btn-primary">Primary</button>
        <button type="button" class="btn btn-xs btn-success">Success</button>
        <button type="button" class="btn btn-xs btn-info">Info</button>
        <button type="button" class="btn btn-xs btn-warning">Warning</button>
        <button type="button" class="btn btn-xs btn-danger">Danger</button>
        <button type="button" class="btn btn-xs btn-link">Link</button>
      </p>
      <div class="page-header">
        <h1>Tables</h1>
      </div>
      <div class="row">
        <div class="col-md-6">
          <table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-md-6">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="2">1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>Mark</td>
                <td>Otto</td>
                <td>@TwBootstrap</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-md-6">
          <table class="table table-condensed">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="page-header">
        <h1>Thumbnails</h1>
      </div>
      <img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
      <div class="page-header">
        <h1>Labels</h1>
      </div>
      <h1>
        <span class="label label-default">Default</span>
        <span class="label label-primary">Primary</span>
        <span class="label label-success">Success</span>
        <span class="label label-info">Info</span>
        <span class="label label-warning">Warning</span>
        <span class="label label-danger">Danger</span>
      </h1>
      <h2>
        <span class="label label-default">Default</span>
        <span class="label label-primary">Primary</span>
        <span class="label label-success">Success</span>
        <span class="label label-info">Info</span>
        <span class="label label-warning">Warning</span>
        <span class="label label-danger">Danger</span>
      </h2>
      <h3>
        <span class="label label-default">Default</span>
        <span class="label label-primary">Primary</span>
        <span class="label label-success">Success</span>
        <span class="label label-info">Info</span>
        <span class="label label-warning">Warning</span>
        <span class="label label-danger">Danger</span>
      </h3>
      <h4>
        <span class="label label-default">Default</span>
        <span class="label label-primary">Primary</span>
        <span class="label label-success">Success</span>
        <span class="label label-info">Info</span>
        <span class="label label-warning">Warning</span>
        <span class="label label-danger">Danger</span>
      </h4>
      <h5>
        <span class="label label-default">Default</span>
        <span class="label label-primary">Primary</span>
        <span class="label label-success">Success</span>
        <span class="label label-info">Info</span>
        <span class="label label-warning">Warning</span>
        <span class="label label-danger">Danger</span>
      </h5>
      <h6>
        <span class="label label-default">Default</span>
        <span class="label label-primary">Primary</span>
        <span class="label label-success">Success</span>
        <span class="label label-info">Info</span>
        <span class="label label-warning">Warning</span>
        <span class="label label-danger">Danger</span>
      </h6>
      <p>
        <span class="label label-default">Default</span>
        <span class="label label-primary">Primary</span>
        <span class="label label-success">Success</span>
        <span class="label label-info">Info</span>
        <span class="label label-warning">Warning</span>
        <span class="label label-danger">Danger</span>
      </p>
      <div class="page-header">
        <h1>Badges</h1>
      </div>
      <p>
        <a href="#">Inbox <span class="badge">42</span></a>
      </p>
      <ul class="nav nav-pills" role="tablist">
        <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a>
        </li>
        <li role="presentation"><a href="#">Profile</a>
        </li>
        <li role="presentation"><a href="#">Messages <span class="badge">3</span></a>
        </li>
      </ul>
      <div class="page-header">
        <h1>Dropdown menus</h1>
      </div>
      <div class="dropdown theme-dropdown clearfix">
        <a id="dropdownMenu1" href="#" class="sr-only dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li class="active"><a href="#">Action</a>
          </li>
          <li><a href="#">Another action</a>
          </li>
          <li><a href="#">Something else here</a>
          </li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a>
          </li>
        </ul>
      </div>
      <div class="page-header">
        <h1>Navs</h1>
      </div>
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#">Home</a>
        </li>
        <li role="presentation"><a href="#">Profile</a>
        </li>
        <li role="presentation"><a href="#">Messages</a>
        </li>
      </ul>
      <ul class="nav nav-pills" role="tablist">
        <li role="presentation" class="active"><a href="#">Home</a>
        </li>
        <li role="presentation"><a href="#">Profile</a>
        </li>
        <li role="presentation"><a href="#">Messages</a>
        </li>
      </ul>
      <div class="page-header">
        <h1>Navbars</h1>
      </div>
      <nav class="navbar navbar-default">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a>
              </li>
              <li><a href="#about">About</a>
              </li>
              <li><a href="#contact">Contact</a>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a>
                  </li>
                  <li><a href="#">Another action</a>
                  </li>
                  <li><a href="#">Something else here</a>
                  </li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a>
                  </li>
                  <li><a href="#">One more separated link</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <!--/.nav-collapse -->
        </div>
      </nav>
      <nav class="navbar navbar-inverse">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a>
              </li>
              <li><a href="#about">About</a>
              </li>
              <li><a href="#contact">Contact</a>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a>
                  </li>
                  <li><a href="#">Another action</a>
                  </li>
                  <li><a href="#">Something else here</a>
                  </li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a>
                  </li>
                  <li><a href="#">One more separated link</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <!--/.nav-collapse -->
        </div>
      </nav>
      <div class="page-header">
        <h1>Alerts</h1>
      </div>
      <div class="alert alert-success" role="alert">
        <strong>Well done!</strong> You successfully read this important alert message.
      </div>
      <div class="alert alert-info" role="alert">
        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
      </div>
      <div class="alert alert-warning" role="alert">
        <strong>Warning!</strong> Best check yo self, you're not looking too good.
      </div>
      <div class="alert alert-danger" role="alert">
        <strong>Oh snap!</strong> Change a few things up and try submitting again.
      </div>
      <div class="page-header">
        <h1>Progress bars</h1>
      </div>
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span>
        </div>
        <div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span>
        </div>
        <div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span>
        </div>
      </div>
      <div class="page-header">
        <h1>List groups</h1>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <ul class="list-group">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
          </ul>
        </div>
        <!-- /.col-sm-4 -->
        <div class="col-sm-4">
          <div class="list-group">
            <a href="#" class="list-group-item active">
              Cras justo odio
            </a>
            <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
            <a href="#" class="list-group-item">Morbi leo risus</a>
            <a href="#" class="list-group-item">Porta ac consectetur ac</a>
            <a href="#" class="list-group-item">Vestibulum at eros</a>
          </div>
        </div>
        <!-- /.col-sm-4 -->
        <div class="col-sm-4">
          <div class="list-group">
            <a href="#" class="list-group-item active">
              <h4 class="list-group-item-heading">List group item heading</h4>
              <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            </a>
            <a href="#" class="list-group-item">
              <h4 class="list-group-item-heading">List group item heading</h4>
              <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            </a>
            <a href="#" class="list-group-item">
              <h4 class="list-group-item-heading">List group item heading</h4>
              <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            </a>
          </div>
        </div>
        <!-- /.col-sm-4 -->
      </div>
      <div class="page-header">
        <h1>Panels</h1>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
              Panel content
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
              Panel content
            </div>
          </div>
        </div>
        <!-- /.col-sm-4 -->
        <div class="col-sm-4">
          <div class="panel panel-success">
            <div class="panel-heading">
              <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
              Panel content
            </div>
          </div>
          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
              Panel content
            </div>
          </div>
        </div>
        <!-- /.col-sm-4 -->
        <div class="col-sm-4">
          <div class="panel panel-warning">
            <div class="panel-heading">
              <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
              Panel content
            </div>
          </div>
          <div class="panel panel-danger">
            <div class="panel-heading">
              <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
              Panel content
            </div>
          </div>
        </div>
        <!-- /.col-sm-4 -->
      </div>
    </div>
</body>

</html>

what about scroll, if there were data is to much of long, then pdf should be export like that isn't that right?, i have tried it and up voted it, but in my case there is scroll-able data in my div, can you please add scroll-able true here? i have tried a lot.

@Jigar7521 as far as I've seen in kendo pdf export, there are limitations. Like if your div is hidden it will give you a blank pdf. There is a work around as suggested in kendo, here docs.telerik.com/kendo-ui/framework/drawing/. So if you have a scroll-able element workaround is create a div with style="position: absolute;width: 800px;left: -10000px;top: 0;" and pan everything whichever way you want to export in pdf. Or use kendo grid with scrollable->virtual and it has option to export pdf with all data in the grid.

@Mahib What about svg elements like nvd3 charts? because its not display in pdf.

javascript - Generate PDF from HTML using pdfMake in Angularjs - Stack...

javascript angularjs pdf pdfmake
Rectangle 27 2

[name='payment_options']
change
this.value==="2"
  • Than manipulate the prop type respectively
$(document).on("change", "[name='payment_options']", function() {
  $("#trx_id").prop("type", this.value==="2" ? "text" : "hidden");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" name="payment_options" value=1 autocomplete="off" checked>Cash on Delivery
  </label>
  <label class="btn btn-default" id="bkash-radio">
    <input type="radio" name="payment_options" value=2 autocomplete="off">bKash
  </label>
</div>

<input type="hidden" name="trx_id" id="trx_id" class="form-control" placeholder="Enter Transaction ID"/>

javascript - How can I hide element using jQuery? - Stack Overflow

javascript jquery html hide
Rectangle 27 2

[name='payment_options']
change
this.value==="2"
  • Than manipulate the prop type respectively
$(document).on("change", "[name='payment_options']", function() {
  $("#trx_id").prop("type", this.value==="2" ? "text" : "hidden");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" name="payment_options" value=1 autocomplete="off" checked>Cash on Delivery
  </label>
  <label class="btn btn-default" id="bkash-radio">
    <input type="radio" name="payment_options" value=2 autocomplete="off">bKash
  </label>
</div>

<input type="hidden" name="trx_id" id="trx_id" class="form-control" placeholder="Enter Transaction ID"/>

javascript - How can I hide element using jQuery? - Stack Overflow

javascript jquery html hide
Rectangle 27 2

[name='payment_options']
change
this.value==="2"
  • Than manipulate the prop type respectively
$(document).on("change", "[name='payment_options']", function() {
  $("#trx_id").prop("type", this.value==="2" ? "text" : "hidden");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" name="payment_options" value=1 autocomplete="off" checked>Cash on Delivery
  </label>
  <label class="btn btn-default" id="bkash-radio">
    <input type="radio" name="payment_options" value=2 autocomplete="off">bKash
  </label>
</div>

<input type="hidden" name="trx_id" id="trx_id" class="form-control" placeholder="Enter Transaction ID"/>

javascript - How can I hide element using jQuery? - Stack Overflow

javascript jquery html hide
Rectangle 27 5

To the point, you need to grab the generated HTML element from the DOM in JavaScript and then toggle its CSS display property between block and none. As far as I know, RichFaces doesn't provide out-of-the-box scripts/facilities for this, but it is basically not that hard:

function toggleDetails(link, show) {
    var elementId = determineItSomehowBasedOnGenerated(link.id);
    document.getElementById(elementId).style.display = (show ? 'block' : 'none');
}

with

<h:outputLink onclick="toggleDetails(this, true); return false;">show</h:outputLink>
<h:outputLink onclick="toggleDetails(this, false); return false;">hide</h:outputLink>

+1. You can also use the in-built Richfaces jQuery rich:jQuery to do the similar thing very easy.

Did you check the generated HTML source? Don't you see patterns in generated ID's? Make use of it! :) It's no rocket science. Substring, split, append, etc on the separator character :. I simply couldn't answer that in detail because the lack of information in your question and I don't do RichFaces so I couldn't tell its generated HTML from top of head. I thought it was straightforward enough for you. Nevertheless, you can find another example in this answer :)

In the future, just comment to ask for clarification a bit sooner instead of one month later with a mad smell. I don't shy away from updating the answer with an extended explanation/example how to achieve that :)

java - Show/Hide RichFaces component onclick client-side? (without AJA...

java javascript jsf seam richfaces
Rectangle 27 2

Just found an easy solution using onmouseover / out event handler.

hideDiv() function is called only if variable mouse_out is true.

var mouse_out;
mydiv.onmouseover = function(){ mouse_out = false }; // mouse is over div
mydiv.onmouseout = function(){ mouse_out = true }; // mouse outside
document.onclick = function(){
   if(mouse_out)
      hideDiv(),   // hides mydiv
      document.onclick = null; // disables next clicks on document
};

It works on every browser I tested, also IE 5. (IE4 and NS4 I don't know)

By far the best method I've seen. Most require juggling dynamic events as they happen -- this tracks the state of the div and takes action based on that state, not some other action. I use a slight variant; I track the state of the div by adding and removing a class instead of a variable. This makes it easier to track status on multiple divs and more easily handle complex logic that changes the state. But the core pattern is the same.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - Hide Div onclick outside - Stack Overflow

javascript html hide
Rectangle 27 2

Follow these steps: Give the image an id as EYE. Also get an image called Hide Eye.png (an eye icon with a diagonal cut) and place it in the same folder where you are placing this html document. Type this in your HTML document along with the basic code you had typed earlier.

<script>
showHide () {
var a=document.getElementById("pwd");
if (a.getAttribute("type")==="password")  {
document.getElementById("pwd").setAttribute("type","text");
document.getElementById("EYE").setAttribute("src","Hide Eye.png");
}
else {
document.getElementById("pwd").setAttribute("type","password");
document.getElementById("EYE").setAttribute("src","eye.png");
}
}
</script>

Note : There are few edits made in the source code from that present in the video.

html - Show/hide password onClick of button using Javascript only - St...

javascript html forms passwords
Rectangle 27 3

Using the adjacent (+) selector, hide the text after the image and show it when the image is hovered.

This is referred to as an adjacent selector. It will select only the specified element that immediately follows the former specified element.

  • The text is hidden with opacity: 0
  • The text is shown on hover with opacity: 1
  • The transition smoothly fades the text in and out

Note: The text could also be hidden with display: none and shown with display: block, but this method cannot be transitioned.

.skill + .exp {
  opacity: 0;
  transition: opacity 1s;
}
.skill:hover + .exp {
  opacity: 1;
}
<img src="http://www.placehold.it/300" alt="Javascript" class="skill">
<p class="exp">Text goes here</p>

javascript - Display text when hovering over image - Stack Overflow

javascript html css
Rectangle 27 1

Like you said, you already have an array storing all your state. You can serialize this using JSON.stringify() and put the result into localStorage.

// your array
 var divstate = [ ... ];

 // store it
 localStorage.setItem( 'divstate', JSON.stringify( divstate ) );

If you want to retrieve the array again, use JSON.parse():

// restore
 var divstate = JSON.parse( localStorage.getItem( 'divstate' );

To store the actual ids of all divs, you probably will use something like this

var divstate = {
  'divid1': true,
  'divid2': false,
  ...
};

This can easily be used with the above pattern.

For the above code I would suggest loading the state variable once at page load using the above statement.

Then transform the function like this:

function ShowHide(id) {
  var el = document.getElementById(id);

  if ( divstate[id] === true ) {
    divstate[id] = false;
    el.style.display = 'none';
  } else {
    divstate[id] = true;
    el.style.display = '';
  }

  localStorage.setItem( 'divstate', JSON.stringify( divstate ) );
}

That way the divstate is updated and stored with each function call.

Note, that I would not recommend this, if the number of divs is too high, but for smaller amounts this should be sufficient.

See my edit to my question to see a rough draft of the code I am using to hide my divs. How can I implement local storage into that along with your code?

Thanks :D I will try it out as soon as Im around my code again. I would upvote but I dont have the reputation :(

javascript - LocalStorage storing multiple div hides - Stack Overflow

javascript html hide local-storage
Rectangle 27 4

Firstly, it should be wrapped inside a $(document).ready:

$(document).ready(function(){  
  var iOS = false,
  p = navigator.platform;
  if( p === 'iPad' || p === 'iPhone' || p === 'iPod' ) {
     iOS = true;
  }
  if (iOS === false) {
     $("input[type=button]").hide();
  }
});

Now, the only potential problem you have left is your check case case using navigator.platform.

According to the specification, navigator.platform returns one of the following values: "Win32", "Linux i686", "MacPPC", "MacIntel" - none of which match your check case.

However, other sources on the internet seem to suggest that it does indeed return "iPhone", "iPad" etc. on the respective devices. As I don't own one of these devices, I can't test that theory out. But if it doesn't work as suggested, there are other documented ways to detect the iPhone, iPad and iPod - see Detect iPad users using jQuery?.

Once you've tested a solution that detects all three iOS products, store it in your p variable and your code should function as you wish.

  • You should only have one <body>, and can merge the two seperate <script>'s into one.
<!DOCTYPE html>
<html>
  • <input>'s are supposed to be used in <form>'s.
  • I've also changed the type of the input from submit to button.
  • As @better_use_mkstemp mentioned, I don't see the need for the autoplay attribute on your <input> in this use-case (especially as you don't want it to be playable on iOS devices anyway).
<body onload="load();">
 <video id="vid" src="http://awp.diaart.org/ali/test/movies/testmovie.mov" width="640" height="480" autoplay></video>
  <br>  
  <input type="button" value="Play" onclick="document.getElementById('vid').play();"> 
</body>

In addition to this, remove autoplay if you really want the play button to be used sometimes. You could also set an id for the button and do something like: document.getElementById('playButton').style.visibility='hidden';. Also an easy way to check the value of p, do an alert(p) to have it pop up.

@better_use_mkstemp True, I was wondering about the need for autoplay. Will incorporate into an edit along with more about the p variable.

$(document).ready();

@JodyHeavener Well, I can understand the article, I barely have to use $(document).ready() either, I guess people have their preferences. However, that article mentions "If you want the function..", but the OP's code here is loose code, not related to any function.

@Zenith - you have brought me to the peak of the mountain-top. You deserve your handle. Many thanks rain down upon thee from said mountain.

javascript - Hide HTML element if user is on an iOS device? - Stack Ov...

javascript jquery ios html5
Rectangle 27 3

Continue to use javascript to do the scrolling, and put the div containing your simulator inside another div that's slightly less wide and do overflow hidden on the outer div. I've used this technique a couple of times, and it's pretty fun.

The only thing your should be careful of is that scrollbars are slightly different widths in different browsers, so be careful.

<div id="outside">
    <div id="inside">
        <div>more content 1</div>
        <div>more content 2</div>
        <div>more content 3</div>
        <div>more content 4</div>
        <div>more content 5</div>
        <div>more content 6</div>
        <div>more content 7</div>
        <div>more content 8</div>
        <div>more content 9</div>
        <div>more content 8</div>
        <div>more content 7</div>
        <div>more content 6</div>
        <div>more content 5</div>
        <div>more content 4</div>
        <div>more content 3</div>
        <div>more content 2</div>
        <div>more content 1</div>
    </div>
</div>
div#outside {
    width: 120px;
    height: 100px;
    overflow: hidden;
}

div#inside {
    width: 135px;
    height: 100px;
    overflow-y: auto;
}

Check out this fiddle -> http://jsfiddle.net/5bkz5/1/ <- and scroll down over the text!

javascript - How to keep a div scrolled to the bottom as HTML content ...

javascript jquery scroll scrollbar
Rectangle 27 2

If I understand this correctly, you want radio buttons but you don't want the buttons themselves to appear. Keep in mind that just removing the buttons will NOT provide the user experience you are looking for. You need to have some form of user feedback.

You have two options:

1) Program this using javascript / jquery. With that in mind I would suggest you use radio buttons as a starting placeholder, and then use javascript (ideally via a jquery plugin) which will redraw the page and replace the buttons with clickable divs and a dynamically changing hidden field value.

2) Use the CSS meta class of :checked which unfortunately doesn't appear to have cross browser support.

javascript - HTML radio buttons: hide bullets - Stack Overflow

javascript html css progressive-enhancement graceful-degradation
Rectangle 27 1

What you can do is Place your online part of code in a div let us say with id as online and offline part in a div with id as offline.

In the beginning keep nothing selected and then when online is selected show the online div while hiding the offline and when the offline is selected show offline and hide online part.

A simpler example can be:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="testType">
<option value = "" selected disabled>Select mode</option>
<option value = "online">Online</option>
<option value = "offline">Offline</option>
</select>
<hr/>
<br/>
<div id="online" style="display:none;">I am online part</div>
<br/>
<div id="offline" style="display:none;">I am offline part</div>
<br/>



<script>
$(document).ready(function () {
    $("#testType").change(function () {
        toggleFields();
    });

});
function toggleFields() {
    if ($("#testType").val() == "online")
    {
        $("#offline").hide();
        $("#online").show();
    }
    else
    {
        $("#online").hide();
        $("#offline").show();
    }
}
</script>

As suggested by @Scott Marcus You can simply set the callback function as:

$("#testType").change(toggleFields);

and need not wrap it as an anonymous function.

This would be a more efficient approach.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <select id="testType">
    <option value = "" selected disabled>Select mode</option>
    <option value = "online">Online</option>
    <option value = "offline">Offline</option>
    </select>
    <hr/>
    <br/>
    <div id="online" style="display:none;">I am online part</div>
    <br/>
    <div id="offline" style="display:none;">I am offline part</div>
    <br/>



    <script>
    $(document).ready(function () {
        $("#testType").change(toggleFields);
    });
    function toggleFields() {
        if ($("#testType").val() == "online")
        {
            $("#offline").hide();
            $("#online").show();
        }
        else
        {
            $("#online").hide();
            $("#offline").show();
        }
    }
    </script>

There is no need to wrap toggleFields() in an anonymous function that is being registered as the callback for the change event of the dropdown. Also, it is not a good idea to have a basic else condition for the if as this won't scale well.

javascript - Hide show toggle fields in html through JS - Stack Overfl...

javascript jquery toggle hide show
Rectangle 27 1

You need to declare pwShown variable as global one.

var pwShown = 0;
function showHide()
{
 ...
}

html - Show/hide password onClick of button using Javascript only - St...

javascript html forms passwords