I have a simple transition thing, where a message says something like "Click here to type" and this is a div which when clicked, hides this div and shows the textarea with a flashing cursor. I have the focus through onload when the page initially loads but I'm after, triggering the focus when wanted.
So I have something like this:
interface
<div id="message" onclick="showPad();"><span class="message">Click to write</span></div>
<form name="entry">
<textarea id="writingpad" name="writingpad" placeholder="write here"></textarea>
</form>
javascript
<script>
function showPad() {
document.getElementById('message').style.display = "none";
document.getElementById('writingpad').style.display = "inline-block";
// this is what I've tried for focus
document.entry.writingpad.focus(); // didn't work
$('#writingpad').live('focus', function() {
// document.entry.input.focus(); possibly redundant
}
$('#writingpad').focus(); // doesn't work
}
</script>
working script
function showPad() {
$('#writingpad').focus();
}
The focusing in your script works, the issue is with the loading.
Instead of using onLoad and live event delegations, you could make sure the script is placed in <head> or <body>.
Also don't need jQuery for this - pure JS:
var message = document.getElementById('message');
var textarea = document.getElementById("writingpad");
function showPad() {
message.style.display = "none";
textarea.style.display = "inline-block";
textarea.focus();
}
Demo
This should work for you.
$(document).ready(function() {
$('#message').click(function() {
$(this).hide();
$('#writingpad').css('display', 'inline-block').focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message"><span class="message">Click to write</span></div>
<form name="entry">
<textarea id="writingpad" name="writingpad" placeholder="write here"></textarea>
</form>
EDIT
The reason why your version is not working is because you have function that you forget to close it.
$('#writingpad').live('focus', function() {
// document.entry.input.focus(); possibly redundant
}
Should be:
$('#writingpad').live('focus', function() {
// document.entry.input.focus(); possibly redundant
});
Check this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function showPad() {
document.getElementById('message').style.display = "none";
document.getElementById('writingpad').style.display = "inline-block";
// this is what I've tried for focus
document.entry.writingpad.focus(); // didn't work
$('#writingpad').live('focus', function() {
// document.entry.input.focus(); possibly redundant
});
$('#writingpad').focus(); // doesn't work
}
</script>
<div id="message" onclick="showPad();">
<span class="message">Click to write</span>
</div>
<form name="entry">
<textarea id="writingpad" name="writingpad" placeholder="write here"></textarea>
</form>
Related
I have a form inside a panel. The panel opens and closes when a button is clicked. When the panel is opened [i.e., with the click of the button], I want to focus on the first input text box in the form which is inside the panel. When I close the panel [i.e., again clicking on the same button], I want to loose the focus from that input box.
So, in simple words, I want to toggle the focus on the text input box when the onclick event happens on the button.
I gave the input text box an id and did the following:
<input type="text" id="code" placeholder="enter code">
Inside the script tag:
$('.button-element').click(function(){ $('#code').focus();});
This makes the focus on the input text box but I want to remove the focus when I click the button again.
Please help me with this.
Thank you.
You could use this snippet (tested on chrome):
var $code = $('#code');
$('.button-element').on('mousedown', function () {
$(this).data('inputFocused', $code.is(":focus"));
}).click(function () {
if ($(this).data('inputFocused')) {
$code.blur();
} else {
$code.focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="code" placeholder="enter code">
<button class="button-element">btn</button>
I know this is a very late answer, but here is a solution which adds a new jQuery method.
You can add this to top of your $.onready:
jQuery.fn.toggleFocus = function(){
if (this.is(":focus")) {
this.blur();
} else {
this.focus();
}
}
Usage:
$(".button-element").toggleFocus()
Try this:
var code = $('#code');
$('.button-element').click(function() {
if(code.is(":focus")) {
code.blur();
} else {
code.focus();
}
});
You can update your code to following
var focusInput = true;
$('.button-element').click(function(){
if(focusInput) {
$('#code').focus();
} else {
$('#code').blur();
}
focusInput = !focusInput;
});
Since you have not given any HTML,you need to change the code according to your need.
$('.button-element').click(function()
{
if($("#ID-of-panel").is(':visible'))
$('#code').blur();
else
$('#code').focus();
});
Textarea is disable on page load. Textarea will be enable after click on button. I want to add focus on textarea after textarea is enable on button click using javascript.
Here is my code:-
<div id="fav-focus"><textarea name="remark" id="remark'.$value['id'].'" rol="4" cols="20" class="fav-view" disabled="disabled">'.$value['remark'].'</textarea> </div>
<a id="favt_edit" class="editfavorite editfavorite'.$value['id'].' buttonNew greenB normal" title="'.$value['id'].'">Edit</a>
<Script>document.getElementById('favt_edit').onclick = function() {
document.getElementById('fav-focus').focus();
};
</script>
Kindly advice me any solution.
<script>
document.getElementById('favt_edit').onclick = function() {
document.getElementsByName('remark')[0].disabled = false;
document.getElementsByName('remark')[0].focus();
};
</script>
You can use this code for enabling as well as focusing your textarea.
<script>document.getElementById('favt_edit').onclick = function() {
$('#fav-focus').find('textarea').removeAttr('disabled').trigger('focus');
};
</script>
Replace your jquery function with this.It will definately work.
i would like to create a one-page website where on click of the button the impressum-div will fade in. Another Click on the same button would then fadeOut the impressum-div.
I already managed it to fadeIn the div on click.
But when I try to use "if" the whole thing doesn't work anymore.
I already found some tipps here and tried them all but nothing really worked for me..
Here my Script-Code:
<script type="text/javascript">
$(document).ready(function() {
function display() {
if (document.getElementById("impressum").style=="none") {
$('#impressum').fadeIn();
}
if (document.getElementById("impressum").style=="block") {
$('#impressum').fadeOut();
}
}
});
</script>
I tried this in several versions (with .click() and so on..), so this is probably totally wrong.
Here my HTML-Code:
<input type="button" id="iButton" value="Impressum" onclick="javascript:display()"/>
<div id="impressum" style="display:none">
<p>Here Impressum</p></div>
Help is very much appreciated, if you could post a complete Function it would bethe best because i am only putting parts wildly together..
Greetings
Just use fadeToggle()
<input type="button" id="iButton" value="Impressum" onclick="javascript:display()" />
<div id="impressum" style="display:none">
<p>Here Impressum</p>
</div>
then
$(document).ready(function () {
$('#iButton').click(function () {
$('#impressum').stop(true).fadeToggle();
})
});
Demo: Fiddle
HTML
<div id="impressum" style="display:none">
<p>Here Impressum</p>
</div>
JavaScript
$('#iButton').click(function () {
$('#impressum').stop(true).fadeToggle();
});
fiddle: http://jsfiddle.net/xKpLe/
You cannot retrieve the display value like that, you need to use window.getComputedStyle:
var elem = document.getElementById("impressum"),
display = window.getComputedStyle(elem,null).getPropertyValue("display");
Fiddle Demo
/* 1: <div onclick="display(this);"></div>*/
var display = function(elm){
var status = G(elm).attrib('data-display')||'false';
if(status=='false'){
G(elm).css({display:'block'});
G(elm).attrib('data-display', 'true');
return false;}
if(status=='true'){
G(elm).css({display:'none'});
G(elm).attrib('data-display', 'false');
return false;}
};
/* 2 */
/* elm.onclick = display;*/
var display = function(ev){
var elm = this||G(ev).source(); //Choice
var status = G(elm).attrib('data-display')||'false';
if(status=='false'){
G(elm).css({display:'block'});
G(elm).attrib('data-display', 'true');
return false;}
if(status=='true'){
G(elm).css({display:'none'});
G(elm).attrib('data-display', 'false');
return false;}
};
I have the following code.
<!DOCTYPE html>
<html>
<head>
<title>Focus issue</title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var text = document.getElementById('text')
window.onload = function() {
text.focus()
}
window.onhashchange = function() {
text.focus()
}
}//]]>
</script>
</head>
<body>
<textarea id="text"></textarea>
<p>Click to focus</p>
</body>
</html>
Here is a JSFiddle demo of the above code: http://jsfiddle.net/DvU63/
Why doesn't the focus go on the textarea box when the page loads? On clicking the link, the focus does go on the textarea box, but I also want the focus to go to the textarea box on page load. Why doesn't it happen?
Note: I am aware of the HTML5 autofocus attribute for textarea. But this question is about why the above JavaScript code does not do what I intend to do.
You're doing the .focus() statement from inside an onload handler that is itself defined inside an onload handler. This inner onload will not be called because by the time you define it the onload event will have occurred. Try this:
window.onload=function(){
var text = document.getElementById('text')
text.focus()
window.onhashchange = function() {
text.focus()
}
}
Your demo, updated: http://jsfiddle.net/DvU63/2/
do this
<script type='text/javascript'>
window.onload=function(){
var text = document.getElementById('text')
text.focus();
window.onhashchange = function() {
text.focus();
}
}
</script>
fiddle
I'm testing javascript code for day/light background switch and I don't know how to do something. I'm newbie to javascript, so I'm learning new stuff.
So what I want to do?
When I click for example on button "Day" (which change background to yellow), I want that style for yellow background stay in the code after page is refreshed. I heard something about Cookies/LocalStorage, but I don't know how to implement it for this code.
Feel free to change whole code if you know easier way to do this, but please explain why it's better or why it should be like that.
Thanks in advance for your help.
Here is the code:
HTML:
<body id="body">
<input type="button" onclick="day();" value="Day" />
<input type="button" onclick="night();" value="Night" />
<input type="button" onclick="reset();" value="Reset" />
</body>
CSS:
.darkSwitch {
background: #808080;
}
.lightSwitch {
background: #ffff99;
}
JavaScript:
function day() {
body.className = "lightSwitch";
};
function night() {
body.className = "darkSwitch";
};
function reset() {
body.className = "";
};
$(function() {
var button = $('input[type=button]');
button.on('click', function() {
button.not(this).removeAttr('disabled');
$(this).attr('disabled', '');
});
});
Last edit: now disabling selected button on page load, CODE NOT IN THIS POST, see the latest JSFiddle
Explanation
What I did:
The code is put in between<script> tags at the end of the <body> (personnal preference)
I added the parameter event to the onClick event of the button element.
I added event.preventDefault() at the start of the onclick event of the button element: ensuring the page is NOT refreshed on the click of a button.
Warning: ALL the buttons will behave the same in your page. If you have other buttons, I suggest you add another class for those three buttons and bind the event on the button.myClass element.
I added a condition on the button state change, so the reset button won't get disabled.
eval($(this).val().toLowerCase()+"();"); gets the value of the the clicked button and executes the function attached to it.
Solution
HTML
<body id="body">
<input type="button" class="changeBg" onclick="day();" value="Day" />
<input type="button" class="changeBg" onclick="night();" value="Night" />
<input type="button" class="changeBg" onclick="reset();" value="Reset" />
</body>
JavaScript
(JSFiddle) <-- Check this out Updated with classes & cookies
function day() {
body.className = "lightSwitch";
};
function night() {
body.className = "darkSwitch";
};
function reset() {
body.className = "";
};
$(function () {
/* RegEx to grab the "bgColor" cookie */
var bgColor = document.cookie.replace(/(?:(?:^|.*;\s*)bgColor\s*\=\s*([^;]*).*$)|^.*$/, "$1");
var button = $('input[type=button].changeBg');
button.on('click', function (event) {
event.preventDefault();
/* Executing the function associated with the button */
eval($(this).val().toLowerCase() + "();");
button.not($(this)).removeAttr('disabled');
if ($(this).val() != "Reset") {
$(this).attr('disabled', '');
/* Here we create the cookie and set its value, does not happen if it's Reset which is fired. */
document.cookie = "bgColor="+$(this).val();
}
});
/* If the cookie is not empty on page load, execute the function of the same name */
if(bgColor.length > 0)
{
eval(bgColor.toLowerCase()+'()');
/* Disable the button associated with the function name */
$('button[value="'+bgColor+'"]').attr("disabled","disabled");
}
});
I recommend you don't use cookies unless localStorage is not supported. They slow your site down.
if(localStorage){
localStorage.setItem("bgColor", "lightSwitch");
}else{
document.cookie = "bgColor=lightSwitch";
}