I'm creating a jQuery placeholder that acts like chrome/firefox default placeholders for browsers that don't support but I can't get the placholder div's html to change as fast as how the default placeholder for chrome/firefox changes. It only changes when I let go of the key or if you leave a key pressed it only changes when there's at least 2 characters in the input. How can I fix this?
http://jsfiddle.net/HW7tK/2/
<html>
<head>
<title>Place Holder</title>
<style media="screen" type="text/css">
input{
position:absolute;
top:4px;
left:4px;
background:transparent;
}
#default{
top:30px;
}
#ph{
color:LightGray;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function() {
$("#txt")
.keypress(function(){
if($('#txt').val().length > 0){
$('#ph').html('');
} else {
$('#ph').html('Custom Place Holder');
}
})
.keyup(function() {
if($('#txt').val().length > 0){
$('#ph').html('');
} else {
$('#ph').html('Custom Place Holder');
}
});
}
</script>
</head>
<body>
<div id="ph">Custom Place Holder</div>
<input id="txt" type="text" />
<input id="default" type="text" placeholder="Default Placeholder"/>
</body>
</html>
Im not sure if it makes that much difference, but I made the small change to using keydown in place of keypress and visually looks pretty indistinguishable from the default behaviour:
http://jsfiddle.net/HW7tK/4/
Try this.
Instead of append html, try to hide the div. It may fulfill your satisfaction
if($('#txt').val().length > 0){
$('#ph').hide();
} else {
$('#ph').show();
}
Related
This question already has an answer here:
Disable right click on specific <div> or class="" [closed]
(1 answer)
Closed 5 years ago.
I am looking for a solution to disable right click over a specific div. I have this code that does this, but it also display an alert (i fixed this) and it works on the whole page.
<script language="JavaScript">
<!--
//Disable right mouse click Script
//By Oscar Frank
//For full source code, visit http://www.oscarmini.com
var message="";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("return false")
// -->
</script>
Can someone help me make this work only one or more specific divs? Thanks! I am a noob.
On the div that you are trying to disable right click events, you can just add this:
oncontextmenu="return false;"
Example:
<div oncontextmenu="return false;">This div won't have the right click menu</div>
You have to add an event on the specific div ( you can get the div by id document.getElementById ) and add an event listener for contextmenu.
Example:
document.getElementById("divId").addEventListener("contextmenu ", function(){
console.log("Right Click");
return false;
});
All you want to do is disable right mouse click in specific div as I understand.
You can use the jQuery plugin for that. Here is the code that you can refer.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
border: 2px solid black;
height: 100px;
}
</style>
</head>
<body>
<div id="demo">
This is the Phone and NO ONE SHOULD RIGHT CLICK THIS! >:)
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$('#demo').bind('contextmenu', function(e) {
return false;
});
</script>
</body>
</html>
I'd like that somebody could give me an heads-up with the code to achieve this events:
User clicks a button;
Button disappears;
Text fades in saying "Saved!" in the SAME POSITION of the button;
Text fades out;
Button (from 2nd step) reappears.
Here's the code of the button:
<input type="submit" name="gravarpalp" value="Save" />
Thanks in advance!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#saveme').click(function() {
$('#saveme').fadeOut('slow', function() {
$('#saved').fadeIn('slow', function() {
$('#saved').fadeOut('slow', function() {
$('#saveme').fadeIn('slow', function() {
});
});
});
});
});
});
</script>
</head>
<body>
<div id="saved" style="position:absolute;top:10px;left:10px;display:none">Saved</div>
<input type="submit" name="gravarpalp" value="Save" id="saveme" style="position:absolute;top:10px;left:10px;"/>
</body>
</html>
I would use jquery to accomplish this.
First, put the controls inside of a div with the following css properties set
<div>
<span id="fadeSpan" style='position: relative; display: none;>Saved!</span>
<input id="fadeButton" type="submit" name="gravarpalp" value="Save" style='position: relative;' onclick='fadeEffect();' />
</div>
Then add the following function in a script tag. This isn't tested though, it's just to get you started.
function() fadeEffect(){
$('#fadeButton').fadeToggle();
$('#fadeSpan').fadeToggle();
setTimeout(function(){
$('#fadeButton').fadeToggle();
$('#fadeSpan').fadeToggle();
}, 3000);
}
Check out this link. Looks like you should just be able to set the ForeColor of a Label to a color value that has a different alpha value.
button1.Visible = false;
//make label fade in (alpha value++)
//once opacity reaches 255, make it fade out (alpha value--)
button1.Visible = true;
I think you will need some sort of timer so the fade in and out isn't so instant. I'll try explaining better if you need.
EDIT: Sorry, I assumed this was a WinForms app... This won't work for a web application. Try using jQuery or javascript.
sorry for not supplying a fiddle, I can't get it set up there.
However, I use the following code to programatically open and close a popup. Only that it doesn't close and stays open. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<script>
$(document).ready(function()
{
$("#initialpopup").popup("open");
setTimeout(function()
{
$("#initialpopup").popup("close");
}, 500);
});
</script>
</head>
<body>
<div data-role="page" data-theme="a" data-content-theme="c">
<div data-role="popup" id="initialpopup" data-overlay-theme="a" data-theme="a">Foobar</div>
</div>
</body>
</html>
you can try
$('#initialpopup').popup('open', {transition: 'pop'});
window.setTimeout('$("#initialpopup").popup("close");', 500);
I am not sure if this is the same case as the one reported here, but I had the same problem and fixed it with this extra CSS:
.ui-popup-container [data-role=popup] {
visibility: hidden;
}
.ui-popup-container.ui-popup-active [data-role=popup] {
visibility: inherit;
}
.ui-popup-screen.out {
visibility: hidden;
}
I believe there was a screw-up in the library at some point in time, or we might be missing something...
I feel this is related to the animations somehow, but I haven't found a way to properly fix it.
Here is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.7.2.min.js"></script>
<style>
div{
border:2px solid black;
width:200px;
min-height:300px;
}
</style>
</head>
<body>
<div>
<p id="demo">This will change</p>
<input type="button" value="OK" onclick="myFunction()"/>
</div>
<script>
$(document).ready(function()
{
$("input").click(function()
{
if($("div").height("300px") === true){
document.getElementById("demo").innerHTML="HELLO WORLD!";
}
});
});
</script>
</body>
</html>
I want to do is like this, If div height is equal to 300px the "This will change" paragraph will change to Hello World on the click of a button. Sorry this is my first time on javascript
$("div").height("300px") sets the height of the div, it does not return true if the height equals 300px.
You want $('div').height() === 300
http://api.jquery.com/height/
I'm noticing a couple things right off the bat. First, the .height function returns the numeric value without "px". Second, you are placing a value inside the .height function,meaning you are setting its value to "300px". Lastly, you are using the === operator which only returns true if the type and value are the same. Instead, try this:
if($("div").height() == 300)
On another note, you'll eventually want to give your input and div ids and access them through those ids, just in case your markup has more than one of each later on.
<html lang="en">
<head>
<style>
#thisdiv {padding:10px; margin:-15px 0 0 40px; background-color:#333; position:absolute; display:none;}
div.block {margin-top:10px; width:200px;}
div#thisdiv a {color:#fff;}
</style>
</head>
<body>
<div id ="one" class="block">one</div>
<div id="thisdiv">hello</div>
<div id ="two"class="block">two</div>
<div id ="three"class="block">three/div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#one').hover(function() {
$('#thisdiv').fadeIn(400);
});
$('div:not(#thisdiv)').mouseleave(function() {
$('#thisdiv').fadeOut(400)
});
});
</script>
</body>
</html>
#thisdiv doesn't fadeOut. I could have used the following, but it only fades out if the cursor mouse outs of #thisdiv. Is there any way i can solve this so when the cursor navigates away from anyway, the div still fade out.
$('#thisdiv').mouseleave(function() {
$('#thisdiv').fadeOut(400)
});
I couldn't figure out what's why jquery's :not selector is not doing what I wanted to.
Am i using it wrongly?
1 - You need to use mouseover, not hover for the first binding:
$('#one').mouseover(function() {
$('#thisdiv').fadeIn(400);
});
hover accepts two function parameters (mouseover/mouseout).
2 - Your closing div tag at the end of your markup is broken (missing a <):
<div id ="three"class="block">three/div> <-- here
I tested your code having made the above modifications, and it seems to work as you want it to (if I've understood correctly). Test it here.
if you are going to explicitly set the time, you will need to pass it in as a hash parameter. Otherwise you can use 'slow', 'fast' or the default which is 400.
$('#my_button').mouseleave(function(){ $(this).fadeOut({duration:1000}) })