Never used JavaScript Before and I'm trying to fix this form in share point.
I want this text box to be small (like 1 row), until the user clicks it and then it should expand into a larger text box with like 10 rows. I apologize if this has been answered before, I don't even know what I should be looking for. Here is code I have that doesn't work, but does pop up an error message(I did not write this code):
alert(DescriptionID);
document.getElementById(DescriptionID).addEventListener("onmouseover", function(){
document.getElementById(DescriptionID).rows= "10";
});
document.getElementById(DescriptionID).addEventListener("onmouseout", function(){
document.getElementById(DescriptionID).rows= "1";
});
EDIT:
Here is what the current code will display:
EDIT2:
Thanks to a ton of help from you guys/gals I am close to finished! I can now understand it significantly better at least! Here is a picture of the code. The object is actually an "ms-formbody" ???
AND ANOTHER EDIT:
So here is the error i'm getting after using Johhny's code:
If you are using jQuery, this might work for you:
HTML:
<textarea id="expandingTextarea" rows="1">Enter Text</textarea>
JavaScript:
$(document).ready(function() {
$('#expandingTextarea').on('mouseover', function() {
$(this).attr('rows', '10');
});
$('#expandingTextarea').on('mouseout', function() {
$(this).attr('rows', '1');
});
});
I created an example here.
Update:
Using a click event to change/toggle to row count:
$(document).ready(function() {
$('#expandingTextarea').on('click', toggleExpand);
function toggleExpand() {
var oldRowCount = $(this).attr('rows');
var newRowCount = parseInt(oldRowCount) === 1 ? 10 : 1;
$(this).attr('rows', newRowCount);
}
});
Demo here.
In fact, you don't need JS to achieve what you want. CSS can do it for you.
<!--html-->
<textarea class="descr">This is description</textarea>
/*css*/
.descr {height: 20px;}
.descr:hover, .descr:focus {height: 120px;}
alter the height instead of the "rows" property.
open up the page in chrome, open the developer tools (View->Developer->Developer Tools) and then use "inspect" to select the text area you want to manipulate.
try playing around with the css of that element. then, write your javascript to change just the property that you want.
https://developer.chrome.com/devtools
The code you showed looks fine but DescriptionID should contain the ID of the description box. You can check what it is by right clicking on the description form and clicking "inspect element". Then assign var DescriptionID = "someID" at the beginning of the code.
Also, you might consider altering the height, not the rows.
If the form doesn't have an ID, look for an option to change the HTML and add one. If you don't have such an option, it's still possible to achieve what you want to do but you have to look beyond getElementById.
Related
I'm building a search by tags input box as seen here:
http://jsfiddle.net/Newtt/7nUAf/
Forgive the terrible styling as this is just a small component of a larger application and I've just added the styles needed to show my issue.
My search box is a div that has it's text inserted using Jquery as follows:
$(document).ready(function () {
$('.search-box').click(function () {
$('.search-options').toggle();
});
$('.options').click(function () {
var d = $('.search-box').html();
console.log(d);
var c = $(this).html();
console.log(c);
if (d != '') {
$('.search-box').html(d + ', ' + c);
} else {
$('.search-box').html(c);
}
$('.search-options').hide();
});
$('#reset').click(function () {
$('.search-box').html('');
});
});
where .search-box is the input div, .options are the clickable options from the drop down box search-options.
Currently, the text of each option is inserted into the search-box div. I need this to be styled dynamically while it enters the search box.
I tried something on the lines of:
$('<span>').addClass('tag').append(
$('<span>').text(value).append(' '),
$('<a>', {
href : '#',
title : 'Removing tag',
text : 'x'
});
where the tag class is defined in the style sheet to style the element to look like a tag,
but this doesn't work at all. Can someone help me out with how to achieve styling the input text to look like a tag from, say, Evernote notebooks?
Thanks!
I adapted your fiddle. Just wrap c in a span with a class (like you were trying to do in the second part of your post) and apply styles in css. I have just made the background red, but it should be easy enough to make it look like a tag like the ones in the drop down do.
http://jsfiddle.net/7nUAf/1/
JS:
$('.options').click(function () {
var d = $('.search-box').html();
var c = $(this).html();
$('.search-box').append('<span class="tag">'+c +'</span>');
$('.search-options').hide();
});
CSS:
.tag {
background: red;
}
For what you are looking to do - there are lots of excellent plug ins already available that provide much "prettier" functionality and with much less work on your part. Some have already been suggested in the comments - I might suggest consider using "chosen". The syntax is amazingly simple. Just create a select box as follows:
<select id="test" multiple>
<option>pdf</option>
<option>document</option>
</select>
Then in your document ready function you simply need to call chosen plugin:
$(document).ready(function () {
$('#test').chosen({width: "80%"});
});
I put together an example that does this on JSFiddle here: http://jsfiddle.net/7nUAf/3/. Once you get to the point that you have it working you can easily style the elements by inspecting what elements chosen is creating. For example the "li.search-choice" selector will allow you to style the selected items.
In General - even if you don't like this particular plug in, always consider running a search for existing items that do what you are looking for. In the case that these aren't perfect you can always improve them and provide that insight back to the community as a whole. In that way, everyone learns together.
Best of luck!
I have working on this problem for a couple weeks off and on. What I am trying to do is have placeholders to show users where they can type. When they do type, I want the placeholder to disappear, but reappear again when the div is empty.
Every thing I have found has to do with cross-browser placeholder support for inputs and textareas, and trying to apply the code for them to my issue results in failure.
I am using h1s for titles and standard divs for descriptions.
My code looks like this:
HTML
<div class="page-desc" contenteditable="true" data-placeholder="Write your description here."></div>
jQuery
var placeholder = '<span class="placeholder">Write your title here</span>';
$(this).html(placeholder);
I have more jQuery code, but it sucks. I am currently using keyup to hide the placeholder, and that's obviously not working. Can someone help me out?
I am totally open to using vanilla JavaScript as well.
You can have something like this:
$('#xdiv').html($('#xdiv').data('placeholder'));
$('#xdiv').keydown(function() {
if ($(this).html() == $(this).data('placeholder')) {
$('#xdiv').html('');
}
})
$('#xdiv').keyup(function() {
if ($(this).html() == '') {
$('#xdiv').html($('#xdiv').data('placeholder'));
}
})
Initially it sets DIV's HTML to placeholder text. Then when user begins to type (on keydown) it checks if DIV still has the placeholder text and if so - removes it. And since user can delete all the data - it checks (on keyup) if DIV is empty, and if so - restores placeholder's text.
Demo: http://jsfiddle.net/bP7RF/
there's a way to do it in css (modern browser only)
.pageDesc:empty:after {content : "Write your description here.";}
Javascript solution (not as pretty, but more cross-browser):
$("#in").keyup(function(){
if(!$(this).html()){
$(this).html($(this).attr('data-placeholder'));
$(this).attr('showing-placeholder',true);
}
});
$("#in").keydown(function(){
if($(this).attr('showing-placeholder')){
$(this).html('');
$(this).attr('showing-placeholder','');
}
});
Working Example: JSFiddle;
Why not use the Blur and Focus event handlers from jQuery and check the Text value of the Div?
Code for quick look:
$('[contenteditable="true"]').blur(function() {
var text = $.trim($(this).text());
var ph = $('<span/>',{ 'class':"placeholder"})
.text($(this).data('placeholder')||'');
if (text == '') {
$(this).html(ph);
}
}).focus(function() {
if ($(this).children('.placeholder').length > 0) {
$(this).html('<span> </span>');
}
});
Fiddle for example: http://jsfiddle.net/qvvVr/1/
Why can't you use the placeholder attribute of the input element.
It seems to do exactly what you want and it's very well supported
(http://caniuse.com/input-placeholder).
Sorry if I have missed something.
What I'm trying to do is append to text from a input field to a div as the user is typing...
So they can see what the text will look like.
What I have is the below.
jQuery('#options_6_text').keyup(function() {
jQuery('.product_zoom').appendTo(jQuery(jQuery(this).val()));
console.log(jQuery(this).val())
});
Now the console.log is working as I would have thought, however the text does not seem to be appending to the .product_zoom div, any ideas what I'm doing wrong??
Thanks!
EDIT
jQuery('#options_6_text').bind('keyup blur', function() {
jQuery('.product_zoom').text(jQuery(this).val());
});
This allowed me to do exactly what I was after.
Thanks
Change to this:
jQuery('.product_zoom').html(this.value);
You're going to want to use .html() for this, this way it replaces the div content each time the user types, the append() was adding to the current content each time.
Demo: http://jsfiddle.net/rRnSB/
Simply doing it like this: SIMPLE FIDDLE
$('#options_6_text').keyup(function() {
$('.product_zoom').text(this.value);
});
This should be so simple, but I'm making heavy weather of it.
Div region set out as:
<div class="maincontent">
Stuff in my div
</div>
CSS for that div:
.maincontent{
height: 100%;
background-size: 100%;
margin-left:1%;
margin-right:1%;
font-size:16px;
}
Then I have:
onLoad=changeBackground();
But before that I have the function:
function changeBackground(){
document.getElementByAnything('maincontent').style.backgroundColor="yellow";
}
I know its making the call to the function because if I put an alert box in there that shows. But no matter what combination of getElementBy I can't make any changes to the background?
Please help as its driving me insane!
TIA
Have you tried giving your div an id and using document.getElementById('divId') instead? I think if you want to get the element by class you have to use jquery.
getElementById('maincontent')
and change your div to have an id="maincontent"
Try giving the element an id and doing document.getElementById and then do console.log in firebug or other developer tools and verify that you are actually getting a dom element back.
Once you have verified that you should then be able to switch the background color
You're trying to select the div using its class. This isn't quite as straightforward as getting it by id. Try this:
<div class="maincontent" id='mainContent'>
Stuff in my div
</div>
function changeBackground(){
document.getElementById('mainContent').style.backgroundColor="yellow";
}
You can see a working example here: JSFiddle
If you want to get the element using its class, I would recommend using Jquery or another library.
If you're using in line Javascript then use, instead:
onchange="changeBackground(this)"
And:
function changeBackground(elem){
elem.style.backgroundColor = "yellow";
}
Edited as I suddenly remembered you were discussing events based on div elements. As a div doesn't natively support the onchange event, I'd suggest amending your code to the following (though changing the event-type onmouseover to whatever event you find most appropriate):
function changeBackground(elem){
elem.style.backgroundColor = 'yellow';
};
JS Fiddle demo.
Also, to remove the events from in-line code, and to make the JavaScript more portable and less 'intrusive':
function changeBackground(elem){
elem.style.backgroundColor = 'yellow';
}
var maincontents = document.getElementsByClassName('maincontent');
for (var i=0,len=maincontents.length; i<len; i++){
maincontents[i].onmouseover = function(){
changeBackground(this);
}
}
JS Fiddle demo.
Bear in mind, though, that some browsers (such as Internet Explorer 8 and below) don't support getElementsByClassName().
I recommend using jQuery if you want to select a DOM by class name.
Put this code in your <head> part of your html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
and change your function to
function changeBackground() {
$(".maincontent").css("background-color","yellow");
}
I want to use an image for an unchecked checkbox and another image for a checked checkbox. I don't want to add labels, classes or anything like that. I want to leave the HTML alone, have it just display <input type="checkbox" /> I don't mind using JavaScript or jQuery, as long as I can leave the HTML alone.
This is an example of what I'm looking for but it only works in Webkit browsers.
http://jsfiddle.net/7kScn/
Without adding labels, or classes or IDs, would there be a solution for this?
it might help to go for Jquery UI
Checkbox eg. http://jqueryui.com/button/#checkbox
Radio eg. http://jqueryui.com/button/#radio
gl hf
this looks like an interesting option, although it appears to be only in beta:
http://widowmaker.kiev.ua/checkbox/
Fun friday challenge, here's my somewhat hacky implementation. Keep in mind for a real app you'll have to include better input type targeting and more robust selectors:
JSFiddle:
http://jsfiddle.net/2RNVh/
$("input").each(function() {
var $this = $(this);
$this.hide();
var $image = $("<img src='http://refundfx.com.au/uploads/image/checkbox_empty.png' />").insertAfter(this);
$image.bind("click", function() {
var $checkbox = $(this).prev("input");
$checkbox.prop("checked", !$checkbox.prop("checked"));
checkImage();
})
function checkImage() {
if($image.prev("input").prop("checked")) {
$image.attr("src", "http://refundfx.com.au/uploads/image/checkbox_full.png");
} else {
$image.attr("src", "http://refundfx.com.au/uploads/image/checkbox_empty.png");
}
}
});
Unfortunately, I must have not been clear, yes, there are very flexible and nice things you can do with jQuery, CSS (X)HTML and Whatever else... but in essence, they convert the input into a div. It was also hard to find something good for select drop downs. I ended up finding this for the select boxes and I am going to try to see if I can do something similar for checkboxes and radio buttons. http://bavotasan.com/2011/style-select-box-using-only-css/
I just found something perfect. http://acidmartin.wordpress.com/2011/06/23/imageless-css-3-custom-checkboxes-and-radio-buttons/
Although the colors and font is pretty ugly, it accomplishes what I needed it to, plus those are easy to change.