Develop Reference

Fading in text with jQuery [duplicate]

This question already has answers here:
jQuery text fade/transition from one text to another?
(6 answers)
Closed 6 years ago.
Is there a way to fade in the text when it changes? I'm using jQuery's html() function. I attempted doing it with fadeOut(), but now it's going back and forth between the fadeIn and fadeOut.
Please let me know if there's a better way to do this, does the constant check on browser resize worse than detect if width is a certain size?
https://jsfiddle.net/jzhang172/uhmubhtf/2/
$(function(){
function screenClass() {
if ($( window ).width() <500){
$(".ok span").html("no");
}
else{
$(".ok span").fadeOut();
$(".ok span").fadeIn().html("yes");
}
}
$(window).bind('resize',function(){
screenClass();
});
});
.ok{
background:blue;
height:300px;
width:300px;
transition:1s;
font-size:30px;
color:white;
}
.span{
color:white;
font-size:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"><span></span></div>

I can't comment yet…
I have clone your fiddle and changed the javascript code just a little bit.
https://jsfiddle.net/LoicMars/3gr8fnfn/
$(function() {
yes = true;
no = true;
function screenClass() {
if ($(window).width() < 500 && yes == true) {
$(".ok span").fadeOut(function() {
$(this).fadeIn().html("no");
yes = false;
no = true;
});
} else if ($(window).width() >= 500 && no == true) {
$(".ok span").fadeOut(function() {
$(this).fadeIn().html("yes");
yes = true;
no = false;
});
}
}
$(window).bind('resize', function() {
screenClass();
});
});
I have add 2 variables for preventing the constant fading blink effect when resizing.

Two functions on Keypress won't work (textarea)

I have created two function on Enter Key press
to hide show dive on Enter key press
to auto resize textarea Height on Enter when it reached to end.
Here is the fiddle : http://jsfiddle.net/rz3f3gng/2/
$('.one').hide();
$(function() {
//hide show dive on enter press and on other keys hide div
$('#mainContent').on('keypress', function(e) {
if (e.which == 13) {
e.preventDefault();
$('.one').show();
} else {
$('.one').hide();
}
});
function TextareaAuto(o) {
o.style.height = "200px";
o.style.height = (2 + o.scrollHeight) + "px";
}
});
.one {
width: 100px;
height: 30px;
background: red;
}
textarea {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="one">
</div>
<textarea id="mainContent" onkeydown="TextareaAuto(this)" style="overflow:hidden">
</textarea>
Only One function seems to work at time, either Hide show div or auto size textarea.

You should never mix inline event handlers with jQuery handlers. Just use two jQuery handlers or call the function from the existing handler:
e.g.
$('#mainContent').on('keypress', function(e){
if (e.which == 13) {
e.preventDefault();
$('.one').show();
}
else{
$('.one').hide();
}
TextareaAuto(this);
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/rz3f3gng/3/
Update
As you still want the Enter to work (see comment below), just get rid of your e.preventDefault()
e.g.
$('#mainContent').on('keypress', function(e){
if (e.which == 13) {
$('.one').show();
}
else{
$('.one').hide();
}
TextareaAuto(this);
});
http://jsfiddle.net/TrueBlueAussie/rz3f3gng/4/
Which now means it can be reduced using toggle() to
$('#mainContent').on('keypress', function(e){
$('.one').toggle(e.which == 13);
TextareaAuto(this);
});
http://jsfiddle.net/TrueBlueAussie/rz3f3gng/5/

How to execute a JS code block on pressing ESC key?

I want to execute a JS code when user presses ESC key. Please help me how can I do this? My current code is not working. I don't know where I'm doing wrong? I'm just a beginner so please help me out..
function hideModalKeyPress(e)
{
if(e.keyCode == 27)
{
document.getElementsByClassName('modalOverlay')[0].style.visibility = "hidden";
}
}
.modalOverlay
{
width: 200px;
height: 200px;
opacity: 0.8;
background-color: black;
visibility: visible;
}
<div class="modalOverlay" onkeydown="hideModalKeyPress(e);">Press ESC to hide me.</div>
/*
* I want to set the div's visibility to hidden
* when user presses ESC key
*/

You could use jQuery and do the following:
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$(".modalOverlay").css('visibility', 'hidden');
}
});
JSFiddle
Or in pure JavaScript:
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
document.getElementById("modal").style.visibility = "hidden";
}
};
JSFiddle

This worked for me:
document.addEventListener("keydown", hideModalKeyPress, false);
function hideModalKeyPress(e) {
if(e.keyCode === 27)
{
document.getElementsByClassName('modalOverlay')[0].style.visibility = "hidden";
}
}
Here is the working jsfiddle:
https://jsfiddle.net/7jrfrz26/

Disable Ctrl+A,Ctrl+C key functions to HTMl page [duplicate]

This question already has answers here:
How can i disable the ctrl + a using javascript?
(3 answers)
Closed 9 years ago.
How do I disable Ctrl+A and ctrl+C keys to my whole page? I want to disable Copy, paste functionality from the keyboard. I found a few links which disable only one textbox. but I want to disable the ctrl functionality to the whole HTML page.
I pasted the below code in tag and added the disablePage in body onload function.
<!DOCTYPE html>
<html lang="en">
<head>
<title>html2canvas example</title>
<script type="text/javascript" src="img/html2canvas.js"></script>
<script language=JavaScript>
function ieClicked() {
if (document.all) {
return false;
}
}
function firefoxClicked(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=firefoxClicked;
}else{
document.onmouseup=firefoxClicked;
document.oncontextmenu=ieClicked;
}
document.oncontextmenu=new Function("return false")
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
<style>
canvas{border:1px solid #222}
</style>
</head>
<body>
<a class="upload" >Upload to Imgur</a>
<a href="#" download="canvasexport.pdf" onclick="window.print()" ><img src="images/print-icon.png" alt="Print" width="16" height="16" ></a>
<a href="#" id="download" download="diversio.pdf" onclick="printImg();">
<img src="images/print-icon.png" alt="Print" width="16" height="16" >
</a>
<h2>this is <b>bold</b> <span style="color:red">red</span></h2>
<p> Feedback form with screenshot This script allows you to create feedback forms which include a screenshot,
created on the clients browser, along with the form.
The screenshot is based on the DOM and as such may not be 100% accurate to the real
representation as it does not make an actual screenshot, but builds the screenshot based on the
information available on the page. How does it work? The script is based on the html2canvas library,
which renders the current page as a canvas image, by reading the DOM and the different styles applied
to the elements. This script adds the options for the user to draw elements on top of that image,
such as mark points of interest on the image along with the feedback they send.
It does not require any rendering from the server, as the whole image is created on the clients browser.
No plugins, no flash, no interaction needed from the server, just pure JavaScript! Browser compatibility Firefox 3.5+ Newer versions of Google Chrome, Safari & Opera IE9
</p>
</body>
</html>

Try this out:
function disableselect(e) {
return false;
}
function reEnable() {
return true;
}
document.onselectstart = new Function("return false");
if (window.sidebar) {
document.onmousedown = disableselect;
document.onclick = reEnable;
}
Place this in your <head> tags and the user cannot select text on your page.However, there is no guarantee way to prevent your contents from being stolen.The JavaScript above can be easily bypassed by an experience internet user. E.g. If the browser's JavaScript is disabled, the code will not work. Working copy is available in here.

<html>
<head>
</head>
<body onkeypress="return disableCtrlKeyCombination(event);" onkeydown = "return disableCtrlKeyCombination(event);" >
how to disable the mouse right click and Ctrl +C in your web page ?
<script language=JavaScript>
<!--
//Disable right mouse click Script
var message="Function Disabled!";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
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")
function disableCtrlKeyCombination(e)
{
//list all CTRL + key combinations you want to disable
var forbiddenKeys = new Array('a', 'c', 'x', 'v');
var key;
var isCtrl;
if(window.event)
{
key = window.event.keyCode; //IE
if(window.event.ctrlKey)
isCtrl = true;
else
isCtrl = false;
}
else
{
key = e.which; //firefox
if(e.ctrlKey)
isCtrl = true;
else
isCtrl = false;
}
//if ctrl is pressed check if other key is in forbidenKeys array
if(isCtrl)
{
for(i=0; i<forbiddenKeys.length; i++)
{
//case-insensitive comparation
if(forbiddenKeys[i].toLowerCase() == String.fromCharCode(key).toLowerCase())
{
alert('Key combination CTRL + ' +String.fromCharCode(key)+' has been disabled.');
return false;
}
}
}
return true;
}
// -->
</script>
</body>
</html>

In Script it will detect ctrl + a,ctrl + A,ctrl + c,ctrl + C, ctrl + u,ctrl + U
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
var isCtrl = false;
document.onkeyup=function(e)
{
if(e.which == 17)
isCtrl=false;
}
document.onkeydown=function(e)
{
if(e.which == 17)
isCtrl=true;
if(((e.which == 85) || (e.which == 117) || (e.which == 65) || (e.which == 97) || (e.which == 67) || (e.which == 99)) && isCtrl == true)
{
// alert(‘Keyboard shortcuts are cool!’);
return false;
}
}

Disabling BACKSPACE in chrome

I have an input field for mobile numbers and i want that inside that input field "+91" should be visible to the user all the time.. means he can not erase it.
So i planned to disable BACKSPACE and DELETE button when the value of INPUT FIELD is equal to +91
The startegy is working fine for me in FIREFOX but its all screwed up in CHROME.
I googled a lot but couldnt find any successfull code for Disabling Backspace in CHROME. :(
Here is my code for FIREFOX
<script language="JavaScript" type="text/javascript">
document.onkeypress = function(e) // FireFox/Others
{
var t=e.target.id;
var kc=e.keyCode;
if ((kc == 8 || kc == 46) && t == "phonen" && document.getElementById(t).value=="+91")
{ e.preventDefault();
return false;}
else {
return true
}
}
function sett(e)
{e.value="+91";}
</script>
Can anyone suggest me how can i do the same in CHROME???

As I wrote in a comment... Don't even bother with this kind of approach. Just fake it. Here's a simple way (though you might want to adjust fonts, spacing, etc.):
html:
<div class="prefix-wrapper">
<span class="prefix">+91</span>
<input type="text" value="">
</div>
css:
.prefix-wrapper {
position: relative;
}
.prefix-wrapper .prefix {
position: absolute;
z-index: 2;
top: 3px;
left: 5px;
color: #999;
}
input {
padding-left: 30px;
}
demo: http://jsbin.com/elatot/1/

User still can click with a mouse or move the cursor and edit +91 strings.
I would suggest that you bind .keyup and .change handlers to your input and check then if it contains your prefix(note that jQuery would be it much easier). Like this:
$('#your_input_id').on('keyup change', function() {
if ( $(this).val().indexof('+91') != 0) $(this).val('+91');
});

A solution not using jQuery would be to hook up to the change/keyup events directly:
var checkPhone = function (e) {
if (e.target.value.indexOf('+91') != 0) {
e.target.value = '+91';
}
}
var phoneElement = document.getElementById('phonen');
phoneElement.onchange = checkPhone;
phoneElement.onkeyup = checkPhone;

Try this with jQuery:
// HTML Code
<input type="text" name="phone" id="phone" class='phone' placeholder='+918888888888' value='' maxlength='13' />
// jQuery code
$(document).keydown(function (e) {
var l = $('.phone').val().length;
var elid = $(document.activeElement).hasClass('phone');
if (e.keyCode === 8 && elid && l == 3) {
return false;
} else {
return true;
}
});
Fiddle DEMO