Hallo,
I'm working on a website which is pretty simple and old. We just use standard ASP there is no JavaScript framework or something and I can't really program JavaScript.
I have a cell in a table and in there I want to have between 1 and 7 select's. If there are seven I don't have enough space and because our company uses Internet Explorer the select boxes don't get bigger when you open them.
So I thought i could do some kind of javascript or something to just make one of the select boxes bigger when the mouse is over it.
How would I do that?
Have you tried Cialis ? :p
Seriously now, if the select boxes change size on mouseover they may break layout and depending on conditions make it impossible to select something..
the way to do it though would be
<script type="text/javascript">
var selects = document.getElementsByTagName('select')
for (var i=0;i<selects.length;i++)
{
selects[i].onfocus = function(){
this.oldwidth = this.style.width;
this.style.width = 'auto';
}
selects[i].onblur = function(){
this.style.width = this.oldwidth;
}
}
</script>
can be seen live at http://www.jsfiddle.net/YN37p/
update
also have a look at http://www.jsfiddle.net/YN37p/1/ for use of classes and a workaround to an issue in the previous solution, where you need to click twice to open select box.
Related
Excuse my limited ability to be able to frame the question. I need to check 100 boxes to apply an accounting rule to 100 bank entries (in FreeAgent). In the console in Google Chrome I have typed the following, which succesfully checks the first box in the list. (Once it works I will put it in a loop so it checks all of them but I'm not at that point yet.)
var x = document.getElementsByClassName('FormElement-checkbox');
x[1].firstElementChild.checked = true;
When I try to continue with the procedure, the web page doesn't "realise" that the boxes have been checked. I can only get it to work if I physically click the checkboxes individually on the page - the fact they appear checked doesn't seem to matter to the page. So there is obviously something I am missing.
I can succesfully enter text into boxes and select items in drop downs. I have tried inspecting the checkbox element and seeing what happens when it is checked by clicking on it, but I can't see any difference in the HTML. I have explored a lot of the attributes in the javascript for that object when typing
x;
which is how I found the .firstElementChild.checked = true in the first place.
I don't know whether it is something specific to the page itself or whether in general I don't have enough experience to be able to tackle all data entry situations yet. I have tried searching for answers on this forum and elsewhere.
Have you tried something like this:
var x = document.getElementsByClassName('FormElement-checkbox')
x[0].checked = true;
or use the click() method on checkbox element.
Part of HTML document might be helpful.
This happens most likely because of some JS/CSS trickery - the elements are listening to click event rather than change in HTML property. Try raising .click event
var cbs = document.getElementsByClassName("FormElement-checkbox")
for (var i = 0; i < cbs.length; i++){
cbs[i].click()
}
Try this:
var x = document.getElementsByClassName('FormElement-checkbox');
var result = "document.getElementsByClassName('FormElement-checkbox')";
for (var i=0, len=x.length|0; i<len; i=i+1|0) {
result += "\n " + x[i].textContent;
}
You can also try using:
document.querySelector(".FormElement-checkbox")
to get the first element with the class_name (or)
document.querySelectorAll(".FormElement-checkbox")
to get a list of elements with the class_name
You can find everything about Document.getElementsByClassName() here at this link
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.
I'm using the jQuery TextExt plugin (http://textextjs.com/) to create an input field where the user can enter languages as tags, similar to the Facebook way of entering Tags.
Overall, the plugin works great.
However, I have hit a snag, which I can't seem to overcome. I am using TextExt on an Input field, like this:
<script type="text/javascript">
$('#id_languages').textext({
plugins : 'tags prompt suggestions arrow autocomplete',
tagsItems : ['English'],
suggestions : languages, //variable set earlier
prompt : 'Add more here...',
});
</script>
Which works as it should. Now, the more tags I add, the more the input field grows (as expected).
However, at some point, it grows beyond the height that is acceptable in my given layout.
Is there a working way of specifying the max height of the input element using TextExt, plus adding a vertical scrollbar, without having the Suggestions dropdown pop up inside the div with the scrollbar?
I hope that makes sense, I'm a bit confused myself at the moment.
I've checked the source code, and there's no place it can be changed in order to accomplish what you need without a hack.
The closest answer to that is to limit the number of tags per input, which can be
done like described here: How to limit total number of inputs to textExt plugin?
$('#id_languages').textext({
plugins : 'tags autocomplete',
tagsItems : Sourcearray,
ext: {
tags: {
addTags: function(tags) {
if(checkLength()) {
$.fn.textext.TextExtTags.prototype.addTags.apply(this, arguments);
}
}
}
}
});
and here's the validation function checkLength():
function checkLength(){
if($("#id_languages").next().children().length < 4){
return true;
}
return false;
}
Where the number 4 is the number of tags allowed.
If this wouldn't be satisfactory, you will have to hack into textext.core.js and textext.plugin.tags.js and look for the following functions:
invalidateBounds(), preInvalidate() and postInvalidate() and play with the height manipulation.
I am making an application which makes use of context menus and has selection. Right now i can select 1 element, but what i want to do is to ctrl+click to allow me to say append the elements into an array for the selection of MULTIPLE elements simultaneously. That way i can affect the attributes of N things at the same time.
I Need it to be something like Control+Clicking, if there was a better idea, i could be interested. Maybe Shift+click but that has the general understanding of selecting everything ebtween X and Y, where as users are more familiar with clicking individual items with ctrl.
I know how to do the append thing, but i wasnt sure how to do the:
var ev = mouse||window.event;
var t_sel = ev.target || ev.srcElement;
...
$('.item').click(function(e) {
if (e.ctrlKey || e.metaKey) {
// required code to make selection
// propably, add class to item to style it like selected item and check hidden checkbox
$(this).toogleClass('selected');
$(this).find('input[type=checkbox]').attr('checked', !$(this).find('input[type=checkbox]')('checked'));
}
});
This will allow you to detect a control click:
$(document).click(function(e) {
if(e.ctrlKey) {
//You do your stuff here.
}
});
I've used shiftcheckbox to have the ability to select a range of checkboxes in a grid.
The code is available so you can alter it to fit your needs. You may also use it as inspiration for a functionallity that suits you.
https://github.com/nylen/shiftcheckbox
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.