i would like to inform guest that he skip important form section.
That's why i want to change background color div to some else when he scroll and did not checked anyone input or write text to input
I wrote some like this
$(function(){
$(document).scroll(function(){
if($(this).scrollTop() >= $('#questrow1').offset().top - -100) && document.getElementsByClassName("wiztype").checked = false; {
$("#questrow1").addClass('redback');
}
});
});
Without that
&& document.getElementsByClassName("wiztype").checked = false;
Colorize is fine but checking inputs must works.
= will not compare value and rather assign it. Here's updated expression -
$(function() {
$(document).scroll(function() {
if (($(this).scrollTop() >= ($('#questrow1').offset().top - -100)) && !document.getElementsByClassName("wiztype").checked) {
$("#questrow1").addClass('redback');
}
});
});
= false is not a comparison but an assignment. You'll want == (or simply a negation of the checked property since you want false).
However, getElementsByClassName returns a collection of elements, so you'll need to loop over all of them.
Also - -100 is just + 100
$(function(){
$(document).scroll(function(){
var checkboxes = document.getElementsByClassName("wiztype");
var hasChecked = false;
for(var i = 0; i < checkboxes.length; ++i) {
if(checkboxes.item(i).checked) {
hasChecked = true;
break;
}
}
if($(this).scrollTop() >= $('#questrow1').offset().top + 100 && !hasChecked) {
$("#questrow1").addClass('redback');
}
});
});
Related
I was helped along a while back with some code for changing background color in a table cell; the final solution works very well:
change between 3 different background color based on cell value
Now I'd like to add another condition for this, please take a look here to see what I mean: unable to post link: jsfiddle dot net/Bouncer/LeyqceLe/4/
Is this at all possible without loosing the current function?
Here it is my friend: jsFiddle
It gets the value of avai :
var diff = $('td.avai').html();
then checks if the value of the avai cell is other than 20, and skips the cell colouring:
if(diff != 20) { ... }
if i understand right this is what you want?
// JavaScript Document
var cell = $('td.bg_status');
// Get the td value
var avai_value = $('.avai').text();
cell.each(function() {
var cell_value = $(this).html();
// continue if td value is not 20
if(avai_value!=20){
if ((cell_value >= 0) && (cell_value <=19)) {
$(this).css({'background' : '#FF9900'});
} else if ((cell_value >= 20) && (cell_value <=39)) {
$(this).css({'background' : '#99cc00'});
} else if (cell_value >= 40) {
$(this).css({'background' : '#99ccff'});
}
}
});
I forgot to mention earlier that my site is running Joomla! 3. I was just informed that Joomla doesn't allow to use $ signs for a while for jQuery codes. Also the line with avai_value caused an error and had to be rewritten like so:
// JavaScript Document
if(jQuery('td.avai').length){
var cell = jQuery('td.bg_status');
var diff = jQuery('td.avai').html();
cell.each(function() {
var cell_value = jQuery(this).html();
if(diff != 20) {
if ((cell_value >= 0) && (cell_value <=19)) {
jQuery(this).css({'background' : '#FF9900'});
} else if ((cell_value >= 20) && (cell_value <=39)) {
jQuery(this).css({'background' : '#99cc00'});
} else if (cell_value >= 40) {
jQuery(this).css({'background' : '#99ccff'});
}
}
});
}
I need the <textarea> to vertically grows as the user types in and I found this code on the net http://perplexed.co.uk/596_expanding_textarea_as_you_type.htm
I want it to be written in jQuery but as I turn the code into jQuery it does not work.
This is the javascript version:
<textarea id="text"></textarea>
var textArea = document.getElementById('text')
textArea.addEventListener('input', function () {
while (
textArea.rows > 1 && textArea.scrollHeight < textArea.offsetHeight) {
textArea.rows--;
}
var h = 0;
while (textArea.scrollHeight > textArea.offsetHeight && h !== textArea.offsetHeight) {
h = textArea.offsetHeight;
textArea.rows++;
}
textArea.rows++
});
fiddle http://jsfiddle.net/dcdeiv/dsL6g/3/
however I don't want to use an ID or a class, I want that to work for each textarea, so I tryed to use an each function:
<textarea></textarea>
$.fn.growRows = function() {
return this.each(function() {
var textArea = $( this ),
scrollHeight = textArea.scrollTop(),
offsetHeight = textArea.height(),
rows = textArea.attr( rows ),
h = 0;
textArea.keyup(function() {
while ( rows > 1 && scrollHeight < offsetHeight ) {
rows--;
}
while ( scrollHeight > offsetHeight && h !== offsetHeight ) {
h = offsetHeight;
rows++;
}
rows++;
});
});
}
$( 'textarea' ).growRows();
but it does not work anyway.
fiddle http://jsfiddle.net/dcdeiv/BQB4M/
This might not be what you're looking for but check out my fiddle. Code below as well:
$.fn.growRows = function() {
return this.each(function() {
var textArea = $(this);
textArea.on('keyup', function() {
textArea[0].rows = textArea.val().split('\n').length || 1;
});
textArea.trigger('keyup'); //set initial size
});
};
$('textarea').growRows();
Also, in your fiddle, you had a few javascript errors that could prevent you from getting it working. You need to include jQuery as a library in JSFiddle and textArea.attr( rows ) needs to actually be textArea.attr( 'rows' ). Please note that even if you make these changes, your fiddle does not work. When you inc/dec your rows variable, nothing will happen.
If your only concern is about getting all textarea's not depending of classes/ids, it is still possible to do without jquery by using getElementsByTagName('textarea'). Then, to achieve the autoexpanding we need to bind an event listener to each of the textarea's obtained, doing some changes to original code, we get:
HTML:
<textarea></textarea>
<textarea></textarea>
Javascript:
var textArea = document.getElementsByTagName('textarea'); //get all textareas
for (var i = 0; i <= textArea.length-1; i++) { //loop through textareas
textArea[i].addEventListener('input', function () { //binds listener
while (
this.rows > 1 && this.scrollHeight < this.offsetHeight) {
this.rows--;
}
var h = 0;
while (this.scrollHeight > this.offsetHeight && h !== this.offsetHeight) {
h = this.offsetHeight;
this.rows++;
}
this.rows++
});
}
FIDDLE: http://jsfiddle.net/dsL6g/6/
Demo
var flag=false;
$(document).live('mouseup', function () { flag = false; });
var colIndex; var lastRow;
$(document).on('mousedown', '.csstablelisttd', function (e) {
//This line gets the index of the first clicked row.
lastRow = $(this).closest("tr")[0].rowIndex;
var rowIndex = $(this).closest("tr").index();
colIndex = $(e.target).closest('td').index();
$(".csstdhighlight").removeClass("csstdhighlight");
if (colIndex == 0 || colIndex == 1) //)0 FOR FULL TIME CELL AND 1 FOR TIME SLOT CELL.
return;
if ($('#contentPlaceHolderMain_tableAppointment tr').eq(rowIndex).find('td').eq(colIndex).hasClass('csstdred') == false)
{
$('#contentPlaceHolderMain_tableAppointment tr').eq(rowIndex).find('td').eq(colIndex).addClass('csstdhighlight');
flag = true;
return false;
}
});
document.onmousemove = function () { return false; };
$(".csstablelisttd").live('mouseenter', function (e) {
// Compares with the last and next row index.
var currentRow = $(this).closest("tr")[0].rowIndex;
var currentColoumn = $(e.target).closest('td').index();
// cross row selection
if (lastRow == currentRow || lastRow == currentRow - 1 || lastRow == currentRow + 1)
{
lastRow = $(this).closest("tr")[0].rowIndex;
}
else
{
flag = false;
return;
}
// cross cell selection.
if (colIndex != currentColoumn)
{
flag = false;
return;
}
if (flag)
{
$('#contentPlaceHolderMain_tableAppointment tr').eq(currentRow).find('td').eq(currentColoumn).addClass('csstdhighlight');
e.preventDefault();
return false;
}
});
Cell selection stops when I move the cursor fast over the table.
What should I do to prevent the selection from stopping while moving the cursor fast on table cells.
I dont want to change the html of the page.
The problem mostly occurs in IE 7.
I have handled the event mousedown, mouseenter on tr class.
I think the selection logic is incorrectly getting stuck in a flag = false state.
When the mouse moves quickly the lastRow == currentRow || lastRow == currentRow - 1 || lastRow == currentRow + 1 will evaluate to false since the currentRow is not next to the lastRow, therefore flag is set to false (in the else). Then for all subsequent mouseenter events flag will always be false and the highlight class will never get added.
The problem occurs on Chrome also and I assume is far more pronounced on IE7 because the JavaScript engine is so much slower in IE7. I think that the JavaScript is quite complex and also the .live() jQuery function should be avoided since it was removed in jQuery 1.9. .on() (as you already use in another event binding) is the preferred method now.
I have included an alternate approach to highlighting the last table cell of each row if the left mouse button is held down, which is a lot simpler. If I have understood the code correctly, the only functionality missing is checking if a current row is either side of a previous row, as I couldn't see a good reason for this extra checking.
There is still the possibility that if a user is moving the mouse quickly over the rows, I would expect the that some rows miss the mouseenter event as the mouse is too quick. You may be able to use a mousemove event handler on the <table> itself to help address this.
The demo uses jQuery 1.9.1, and I also removed the table height to better demonstrate the code.
JavaScript
// disable text selection
document.onselectstart = function() {
return false;
}
var $table = $('#contentPlaceHolderMain_tableAppointment');
$table.on('mouseenter', 'td:last-child', function(e) {
if (e.which === 1) {
$(this).addClass('csstdhighlight');
}
}).on('click', function() {
$table.find('.csstdhighlight').removeClass('csstdhighlight');
});
I'd be happy to explain my example code in more detail if necessary :-)
Note: An answer (https://stackoverflow.com/a/6195715/637889) on jQuery: Detecting pressed mouse button during mousemove event was very helpful when I was looking at this.
Edit: Updated demo based on revised requirements:
JavaScript
// disable text selection
document.onselectstart = function() {
return false;
}
var $table = $('#contentPlaceHolderMain_tableAppointment');
var startIndex = -1;
var direction = 0;
$table.on('mouseenter', 'td:last-child', function(e) {
var $this = $(this);
var rowIndex = $this.parent().index();
if (direction === 0 && startIndex != -1) {
direction = rowIndex > startIndex ? 1 : -1;
}
if (e.which === 1 && (
(direction === -1 && rowIndex < startIndex) ||
(direction === 1 && rowIndex > startIndex))
) {
$(this).addClass('csstdhighlight');
}
}).on('mousedown', 'td:last-child', function() {
var $this = $(this);
startIndex = $this.parent().index();
$this.addClass('csstdhighlight');
}).on('mouseup', 'td:last-child', function() {
direction = 0;
startIndex = -1;
}).on('click', 'td:last-child', function() {
$table.find('.csstdhighlight').removeClass('csstdhighlight');
});
i am using inputTextArea. Actually i want to limit it's max length. I am using function like
<script type="text/javascript">
function limitTextArea(element, limit) {
if (element.value.length > limit) {
element.value = element.value.substring(0, limit);
}
}
</script>
<textarea id="description" name="description"
onkeyup="limitTextArea(this, 1000);"
onkeydown="limitTextArea(this, 1000)">
</textarea>
But what is happening suppose i write a long text in the textarea. A scrollbar is shown in the textarea. But when i reach the maxlimit and then try to write a character then the textarea scrollbar move to top.
I want that once user reach it's max limit then the scrollbar as well as cursor stuck at that position.
Why it is behaving like textarea scrollbar move to top when i try to write something after max limit?
Thanks
Referred:How to impose maxlength on textArea in HTML using JavaScript
window.onload = function() {
var txts = document.getElementsByTagName('TEXTAREA')
for(var i = 0, l = txts.length; i < l; i++) {
if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) {
var func = function() {
var len = parseInt(this.getAttribute("maxlength"), 10);
if(this.value.length > len) {
alert('Maximum length exceeded: ' + len);
this.value = this.value.substr(0, len);
return false;
}
}
txts[i].onkeyup = func;
txts[i].onblur = func;
}
}
}
http://viralpatel.net/blogs/2008/12/set-maxlength-of-textarea-input-using-jquery-javascript.html
You can use this also to prevent the user from writing more than you want in a textarea.
Atleast this code prevents my textarea from scrolling to top
jQuery(document).ready(function($) {
$('textarea.max').keyup(function() {
var $textarea = $(this);
var max = 400;
if ($textarea.val().length > max) {
var top = $textarea.scrollTop();
$textarea.val($textarea.val().substr(0, max));
$textarea.scrollTop(top);
}
});
}); //end if ready(fn)
Here is the reference from which i got the idea to use it like this
How to prevent textarea from scrolling to the top when its value changed?
Better Solution:
jQuery(document).ready(function($) {
var max = 400;
$('textarea.max').keypress(function(event) {
if (event.which < 0x20) {
// e.which < 0x20, then it's not a printable character
// e.which === 0 - Not a character
return; // Do nothing
}
if (this.value.length == max) {
event.preventDefault();
} else if (this.value.length > max) {
// Maximum exceeded
this.value = this.value.substring(0, max);
}
}); //end of keypress(fn)
}); //end if ready(fn)
Thanks
I have a bug in Javascript where I am animating the margin left property of a parent container to show its child divs in a sort of next/previous fashion. Problem is if clicking 'next' at a high frequency the if statement seems to be ignored (i.e. only works if click, wait for animation, then click again) :
if (marLeft === (-combinedWidth + (regWidth) + "px")) {
//roll margin back to 0
}
An example can be seen on jsFiddle - http://jsfiddle.net/ZQg5V/
Any help would be appreciated.
Try the below code which will basically check if the container is being animated just return from the function.
Working demo
$next.click(function (e) {
e.preventDefault();
if($contain.is(":animated")){
return;
}
var marLeft = $contain.css('margin-left'),
$this = $(this);
if (marLeft === (-combinedWidth + (regWidth) + "px")) {
$contain.animate({
marginLeft: 0
}, function () {
$back.fadeOut('fast');
});
} else {
$back.fadeIn(function () {
$contain.animate({
marginLeft: "-=" + regWidth + "px"
});
});
}
if (marLeft > -combinedWidth) {
$contain.animate({
marginLeft: 0
});
}
});
Sometimes is better if you create a function to take care of the animation, instead of writting animation code on every event handler (next, back). Also, users won't have to wait for the animation to finish in order to go the nth page/box.
Maybe this will help you:
if (jQuery) {
var $next = $(".next"),
$back = $(".back"),
$box = $(".box"),
regWidth = $box.width(),
$contain = $(".wrap")
len = $box.length;
var combinedWidth = regWidth*len;
$contain.width(combinedWidth);
var currentBox = 0; // Keeps track of current box
var goTo = function(n) {
$contain.animate({
marginLeft: -n*regWidth
}, {
queue: false, // We don't want animations to queue
duration: 600
});
if (n == 0) $back.fadeOut('fast');
else $back.fadeIn('fast');
currentBox = n;
};
$next.click(function(e) {
e.preventDefault();
var go = currentBox + 1;
if (go >= len) go = 0; // Index based, instead of margin based...
goTo(go);
});
$back.click(function(e) {
e.preventDefault();
var go = currentBox - 1;
if (go <= 0) go = 0; //In case back is pressed while fading...
goTo(go);
});
}
Here's an updated version of your jsFiddle: http://jsfiddle.net/victmo/ZQg5V/5/
Cheers!
Use a variable to track if the animation is taking place. Pseudocode:
var animating = false;
function myAnimation() {
if (animating) return;
animating = true;
$(this).animate({what:'ever'}, function() {
animating = false;
});
}
Crude, but it should give you the idea.
Edit: Your current code works fine for me as well, even if I jam out on the button. On firefox.