Rectangle 27 28

overflow: hidden
div.scrollTop = div.scrollHeight;

Works beautifully. I guess I intuitively assumed overflow hidden worked almost like display none, in that the content that's hidden doesn't exist and would'nt allow you to scroll inside the div. @josh I have no idea why someone downvoted you.

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

javascript jquery scroll scrollbar
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 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 2

<div style="background-color:red;">
<div id="blah">DEMO TEXT ON MOUSE OVER</div>
</div>
$('#blah').hover(function() {
    $(this).fadeTo(1,1);
},function() {
    $(this).fadeTo(1,0);
});
#blah {
    width:100px;
    height:100px;
    background-color:green;
    visibility: visible;
    opacity:0;
    filter:alpha(opacity=0);
}

While other answers will probably work if I can implement them correctly (my fault). I've been able to get this one working fine, thanks Ashuthinks. One quick question though too, right now you have to hover specifically over the 30px high div that contains the text, could it be linked to the entire image so you can hover over anywhere on the image and it will show the text? The image is in a seperate div.

@tokyodrift I have define width:100px; height:100px; if you dont give it it will take automatically applied for full div :) enjoy

The div containing the text has a width and heigh defined, so the texts black bg is always filling the full width (220px) and a height (50px). Therefore I can't not define it.

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

javascript html css
Rectangle 27 2

You dont need jQuery for this.

function hideElement(elementId)
{
 document.getElementById(elementId).style.display = 'none';
}
function showElement(elementId)
{
 document.getElementById(elementId).style.display = 'block';
}

Then on page load, or in the css you can hide the first div. When the click happens you can then use showElement to show it.

Okay so this seems a better way to go but I can't get it to work, probably doing something stupid, check code above.

html - Javascript hide/show layers - Stack Overflow

javascript html hide show layer
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 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 4

I've got a simple solution working where I have a label surrounding my radio buttons with an image representing the thing being selected:

<label>
    <input type="radio" name="foo">
    <img src="...">
</label>

I have then applied the following styles:

label {
    float: left;
    width: 100px;
    height: 100px;
    position: relative;
    cursor: pointer;
}

label input[type=radio] {
    opacity: 0;
}

label img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
}

:checked + img {
    opacity: 1;
}

Essentially each label becomes a regular sized box that is completely filled by an img. The radio itself is hidden using opacity:0. The user can tell what is selected as the img next to the checked radio will be opaque whereas the others are semi-transparent. You could do various other kind of effects pretty easily.

The thing I like is that the form remains simple to process, it is just a group of radio buttons.

I used opacity for the radio buttons rather than display:none or visibility:hidden as then they are still in the tabindex and the form remains keyboard accessible.

javascript - HTML radio buttons: hide bullets - Stack Overflow

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

Just the bit of hiding the radio buttons (without losing accessibility, of course) can be done with the following CSS:

input[type="radio"] {
    left: -999em;
    position: absolute;
}

Using opacity: 0; isn't ideal, as the button is still there, taking up space in the page. Positioning it out of view is the way to go.

javascript - HTML radio buttons: hide bullets - Stack Overflow

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

Yes, you can add an event listener and when that event is emitted you can have it scroll down to the bottom by checking the height like so

$container = $('.container');
$container[0].scrollTop = $container[0].scrollHeight;

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $container = $('.container');
    $container.append('<p class="row">' + e.target.value + '</p>');
    $container.animate({ scrollTop: $container[0].scrollHeight }, "slow");
  }
});

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 6

I believe you can use the SetDragImage function which is part of the Data Transfer API

The following link has some sample Javascript which attaches an event to the ondragstart event. Using the DataTransfer API you can then set the Drag Image of the event with any Image you want, even an invisible image.

.dragdemo {
    width: 170px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border-radius: 6px;
    background: green; color: #efe;
}
<div id="drag-something" class="dragdemo" draggable="true">drag me</div>
<script>
document.getElementById("drag-something").addEventListener("dragstart", function(e) {
    var crt = this.cloneNode(true);
    crt.style.backgroundColor = "red";
    crt.style.display = "none"; /* or visibility: hidden, or any of the above */
    document.body.appendChild(crt);
    e.dataTransfer.setDragImage(crt, 0, 0);
}, false);
</script>

Exactly what i was looking for. I knew there had to be some kind of build in functionality for this, just couldnt find it! Thanks!

javascript - Hide Drag Preview - HTML Drag and Drop - Stack Overflow

javascript jquery html css drag-and-drop
Rectangle 27 2

You should add all class to every item. Basically, when you select all, you are doing this:

function display(value) {
    //VALUE == "all"
    var country = value;
    //GET EVERY ELEMENT WITH "all" CLASS
    var list = document.getElementsByClassName(country);

    //IN YOUR CASE "list.length == 0" SO NO HIGHLIGHT
    for (var i = 0; i < list.length; i++) {
        list[i].style.display = 'block';
    }            
}

You should post the divs code too to understand better the situation.

In addition to what I wrote if you want to hide all element your display function should be something like:

var allItems = document.getElementsByClassName("all");

for (var i = 0; i < allItems.length; i++) {
    allItems[i].style.display = 'none';
}

var list = document.getElementsByClassName(country);

for (var i = 0; i < list.length; i++) {
    list[i].style.display = 'block';
}

Not tested but should work.

Thanks for the idea, let me try it out :D

That was the thing man :D I'm so happy right now!

html - Javascript show/hide based on option select - Stack Overflow

javascript html
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
Rectangle 27 1

JQuery solution from my code: (just change the IDs).

$(document).ready(function () {
        $("#eye").click(function () {
            if ($("#password").attr("type") === "password") {
                $("#password").attr("type", "text");
            } else {
                $("#password").attr("type", "password");
            }
        });
  });

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

javascript html forms passwords
Rectangle 27 1

Based on what you wrote, you are adding the event both in html and in javascript (inside showHide function). May be you can change your js code from what you have, to:

function showHide()
{
  var input = document.getElementById("pwd");
  if (input.getAttribute("type") === "password") {
    show();
  } else {
    hide();
  }
}

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

javascript html forms passwords