We Keep Coding

How to check width and height from all images has been called by jquery?

i have a problem on jquery image, which i need validate all image has been clicked or show with jquery
here is my code, how i add new images and show the images
<script>
true_image = false;
var _URL = window.URL || window.webkitURL;
$(document).ready(function(){
var abc = 0;
var wrapper = $(".images");
var add_button = $("#add_more");
var x = 1;
$(add_button).click(function(){
x++;
$(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><img src="<?=base_url('/asset/images/BG/close.png')?>" class="remove_field" id="remove_image'+x+'"></img><div>');
});
$(wrapper).on("click",".remove_field", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
});
$('body').on('change', '#file_input', function() {
var image ;
if (this.files && this.files[0]) {
image = new Image;
image.onload =function() {
console.log("width : "+this.width+" height: "+this.height);
if(this.width < 700 || this.height < 650){
alert("The image width is " +this.width + " and image height is " + this.height +", minimum image width is 700 pixel and height is 650 pixel");
$("#submit").prop("disabled",true);
}else{
$("#submit").prop("disabled",false);
}
};
image.src = _URL.createObjectURL(this.files[0]);
if(true_image == true){
abc += 1;
var z = abc - 1;
var x = $(this).parent().find('#previewimg' + z).remove();
$(this).after("<div id='abcd" + abc + "' class='abcd'></div><img class='images_view' width='300' height='200' id='previewimg" + abc + "' src=''/>");
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
$(this).hide();
$("#abcd" + abc).append($("<img/>", {
id: 'img',
src: '<?=base_url('asset/images/BG/close.png')?>',
alt: 'delete'
}).click(function() {
$(this).parent().parent().remove();
if(($('#file_input').val()) == undefined){
$(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><div>');
}
}));
}
}
});
function imageIsLoaded(e) {
$('#previewimg' + abc).attr('src', e.target.result);
$('.remove_field').hide();
};
$('body').on('click', '.images_view', function() {
abc += 1;
var cover = false;
var image_id = this.id;
$('.images_view').filter(function( index ) {
if($( this ).attr( "id" ) === image_id){
$(this).parent().find('#file_input').attr('name','cover');
$(this).parent().find('#cover').remove();
$(this).parent().append("<span class='cover' id='cover'>Cover</span>");
}else{
$(this).parent().find('#file_input').attr('name','file[]');
$(this).parent().find('#cover').remove();
}
})
});
});
</script>
from the above code, i trying to upload multi images so i add a button, and after it was clicked a new <input id="file_input" class="images_file" type="file" name="file[]"/> will be added, than after an images has been selected it could show the images. i want trying to validate the file is an image file, width and height on the image
my problem are, if i selected the false image (not in criteria) the button will be disabled but if in the next select, i choose the true image the button back to normal. I know this will happen because i don't check the old images that has been selected before, and that is my problem i don't know how to check it.
guys can you help me how to solve the problem?

there are so many bugs going on around here :)
first of all;
var add_button = $("#add_more");
var x = 1;
$(add_button).click(function(){
you should do this instead (add_button is assigned already as jQuery object):
add_button.click(function(){
when you click add_button you insert many file inputs with the same id:
$(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><img src="<?=base_url('/asset/images/BG/close.png')?>" class="remove_field"></img><div>');
and you are calling many inputs by assigning here:
$('body').on('change', '#file_input', function() {
so it will trigger more than once for the same ids. and also it won't work as properly if multiple files selected in a single input because you only check the first one here:
if (this.files && this.files[0]) {
as mentioned in comments, you should break down this code and in my suggestion you should write it from scratch..

First of all I want to say sorry, for my code is not clear.
I got the answer for my problem and some code will be changed, and new code will be added
I used JavaScript localStorage to save the the images data so, I could check the last images that has been loaded.
here is how i checked my images with localStorage
function check_image() {
var images_log = JSON.parse(localStorage.getItem("images"));
var type_reg = /^image\/(jpg|png|jpeg)$/;
if(images_log != ""){
for(var i=0;i<images_log.length;i++) {
if(images_log[i]['type'] != undefined){
if(!type_reg.test(images_log[i]['type'])){
$("#submit").prop("disabled", true);
break;
}else{
$("#submit").prop("disabled", false);
}
}
if (images_log[i]['width'] < 700 && images_log[i]['height'] < 650) {
$("#submit").prop("disabled", true);
break;
}else{
$("#submit").prop("disabled", false);
}
}
}else{
$("#submit").prop("disabled", false);
}
}
For the all code i write in question i will explain it part by part.
<script>
var _URL = window.URL || window.webkitURL;
$(document).ready(function(){
localStorage.clear();
var abc = 0;
var wrapper = $(".images");
var add_button = $("#add_more");
var x = 1;
$(add_button).click(function(){
x++;
$(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><img src="<?=base_url('/asset/images/BG/close.png')?>" class="remove_field" id="remove_image'+x+'"></img><div>');
}); //added a new input file and delete button
$(wrapper).on("click",".remove_field", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
if(($('#file_input').val()) == undefined){
$(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><div>');
}
}); //if the delete button clicked, it will remove the input and the delete button
From that part I made a simple button for new input file, which when it clicked a new <input type="file"> will be added, and there is a new button to remove the <input type="file">.
This Part is how the images will be call to be loaded, and add new div for the images.
$('body').on('change', '#file_input', function() {
var image = new Image ;
if (this.files && this.files[0]) {
//i add new var to check the file type
var type = this.files[0].type; // received the type of the file;
var type_reg = /^image\/(jpg|png|jpeg)$/; //for validate the file type
abc += 1;
//this var already loaded in top of script which for sign the image delete button id, and the images id
$(this).after("<div id='delete_image" + abc + "' class='delete_image'></div><img class='images_view' width='300' height='200' id='previewimg" + abc + "' src=''/>");
//add a new div class for the images.
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
$(this).hide();
// for showing the images by call imageIsLoaded function, and hide the <input type="file">
And this part is for deleting the images, if the delete_image id is clicked it will remove the images and <input type="file"> than remove the images_id from the localStorage;
$("#delete_image" + abc).append($("<img/>", {
id: 'img',
src: '<?=base_url('asset/images/BG/close.png')?>',
alt: 'delete'
}).click(function() {
var preview_id = $(this).parent().parent().find('.images_view').attr('id');
var images_log = JSON.parse(localStorage.getItem("images"));
if(images_log != "null" || images_log != null || images_log.length != 0){
for (i=0;i<images_log.length;i++){
if(preview_id == images_log[i]['id']){
images_log.splice(i,1)
}
}
}
localStorage["images"] = JSON.stringify(images_log);
$(this).parent().parent().remove();
if(($('#file_input').val()) == undefined){
$(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><div>');
}
check_image();
}));
Here is for the validation.
//here i changed my code how i disabled the button from on this to call a check_image() function and start using localStorage
if (type_reg.test(type)) { //check the file is an images file with jpg, png and jpeg
image.onload = function() {
//get the last localstorage and added it if a new images
var images_arr = localStorage.getItem("images");
var obj = [];
if(images_arr){
obj= JSON.parse(images_arr);
}
obj.push({"id": "previewimg" + abc, 'width' : this.width,'height' : this.height});
localStorage.setItem("images",JSON.stringify(obj));
//checked the image height and width showing the alert, and call the check_image() function
if(this.width < 700 && this.height < 650){
alert("The image width is " +this.width + " and image height is " + this.height +", minimum image width is 700 pixel and height is 650 pixel, Please use another image!");
check_image();
}else{
check_image();
}
};
} else {
alert('This file type is unsupported.');
var images_arr = localStorage.getItem("images");
var obj = [];
if(images_arr){
obj= JSON.parse(images_arr);
}
obj.push({"id": "previewimg" + abc, 'type' : this.files[0].type});
localStorage.setItem("images",JSON.stringify(obj));
check_image();
}
image.src = _URL.createObjectURL(this.files[0]);
}
}); //end for ('body').on('change', '#file_input', function()
For load the images :
function imageIsLoaded(e) {
$('#previewimg' + abc).attr('src', e.target.result).parent().find('.remove_field').remove();
}
That's all how I upload multiple images, showing the images before uploaded and validation the file.
I'm sorry, if this code is too long because I feel sorry at first time I don't write the code too clear, So here I explain how my code worked

Focus an input field when clicking on an element, except if some text within the container was highlighted

An input field #chatInput needs to be be focused when clicking on a container element #text EXCEPT if text inside that element was (highlighted via either double click or mouse selection)
// what I got so far which is incomplete
$('#text').on('click', function (e) {
$('#chatInput').focus();
});
Fiddle: https://jsfiddle.net/xhykmtwy/4/

You may want to consider the solution below, which checks if some text is selected in the text element after the click event:
$('#text').click(function () {
var container = this;
setTimeout(function () {
var selectedElement = null;
var selectedText = null;
if (window.getSelection) {
// For modern browsers
var selection = window.getSelection();
if (selection) {
selectedText = selection.toString();
if (selection.anchorNode) {
selectedElement = selection.anchorNode.parentNode;
}
}
}
else if (document.selection && document.selection.type === "Text") {
// For IE < 9
var selection = document.selection;
selectedText = selection.createRange().text;
}
if (!(selectedText && selectedText.length > 0) || (selectedElement !== container && !$(container).has(selectedElement))) {
setTimeout(function () { $('#chatInput').focus(); }, 0);
}
}, 0);
});
According to my tests, it works in IE (including IE7), Firefox and Chrome. The only exception is the double-click in IE, which does not select the text. You can see the result in this jsfiddle.
The calls to setTimeout ensures that all the selection processing has been done, especially when clicking on the selected text to deselect it.
Credits:
I used the method proposed by Eineki in How can I get the element in which highlighted text is in? to check if the text element contains the selected text.
The code for processing the selection in IE < 9 was found in Tim Down's answer to the post Get the Highlighted/Selected text.

A bit longer than I initially thought a solution could be but here's what I got:
var mouseDownStart = 0,
lastKeyupTime = 0;
function processKeyDown() {
if (!mouseDownStart) {
mouseDownStart = Date.now();
}
}
function processKeyUp() {
var now = Date.now(),
isDoubleClick = lastKeyupTime && now - lastKeyupTime < 500;
isHighliting = now - mouseDownStart > 150
lastKeyupTime = now;
mouseDownStart = 0;
return {
isDoubleClick: isDoubleClick,
isHighliting: isHighliting
}
}
$('#text').on('mousedown', function (e) {
processKeyDown();
});
$('#text').on('mouseup', function (e) {
var data = processKeyUp();
if (data.isDoubleClick || data.isHighliting) return;
$('#chatInput').focus();
});
Updated fiddle: https://jsfiddle.net/xhykmtwy/1/

Create a new div and display it where the mouse cursor is on page

At the moment, the circles are being appended to <p> in the html markup.
You can see how I have done this below.
But what I actually want is for the div to be created where the mouse cursor is the on the page.
How might I get the position of the cursor and create a div there?
Thanks.
var count = 0;
/*
* Function(makeLetters)
* Removes first character in text box.
* Creates circle Letters using first character.
*/
$(document).click(function (makeLetters) {
//Get characters currently entered into textbox
var letters = $('#letters').val();
//Take the firstLetter only
var firstLetter = letters.substr(0, 1);
//Count how many characters currently entered
var numberOfLetters = letters.length;
//Use length of entry to take all characters except first
var restOfLetters = letters.substr(1, numberOfLetters);
//All characters except first set as textbox entry
$("#letters").val(restOfLetters);
//Check that there is a first character
if (firstLetter != "") {
count++;
//Create a new circle letter by inserting new div class
$("p").append('<div class="circle' + count + '" style="border-radius: 50%;width: 36px;height:36px;padding:8px;background:#FF7D5C;color:black;text-align:center;font:32px Arial, sans-serif;display:inline-block;margin-right:4px;margin-bottom:4px;">' + firstLetter.toUpperCase() + '</div>');
$("p").children().last().hide().fadeIn();
}
});

As far as I'm aware you cant get the mouse position on its own, but you could use jQuery to listen to the mousemove event and store the position in a variable for use later like so:
var mousePosition = { x: 0, y: 0 };
$(document).mousemove(function(e) {
mousePosition.x = e.pageX;
mousePosition.y = e.pageY;
});
Then you would need to use postion: [absolute/fixed]; to position the div based on the mousePosition.

You'd do that by getting the mouse position from the event, that you for some strange reason named makeLetters ?
$(document).click(function(event) {
var letters = $('#letters').val();
var firstLetter = letters.substr(0, 1);
var numberOfLetters = letters.length;
var restOfLetters = letters.substr(1, numberOfLetters);
var mouseLeft = event.pageX;
var mouseTop = event.pageY;
$("#letters").val(restOfLetters);
if (firstLetter != "") {
count++;
var div = $('<div />', {
'class' : 'circle' + count,
text : firstLetter.toUpperCase(),
css : {
position: 'fixed',
top : mouseTop + 'px',
left : mouseLeft + 'px',
display : 'none'
// ... the rest of the styles here
}
});
$("p").append( div.fadeIn() );
}
});

Find out the 'line' (row) number of the cursor in a textarea

I would like to find out and keep track of the 'line number' (rows) of the cursor in a textarea. (The 'bigger picture' is to parse the text on the line every time a new line is created/modified/selected, if of course the text was not pasted in. This saves parsing the whole text un-necessarily at set intervals.)
There are a couple of posts on StackOverflow however none of them specifically answer my question, most questions are for cursor position in pixels or displaying lines numbers besides the textarea.
My attempt is below, it works fine when starting at line 1 and not leaving the textarea. It fails when clicking out of the textarea and back onto it on a different line. It also fails when pasting text into it because the starting line is not 1.
My JavaScript knowledge is pretty limited.
<html>
<head>
<title>DEVBug</title>
<script type="text/javascript">
var total_lines = 1; // total lines
var current_line = 1; // current line
var old_line_count;
// main editor function
function code(e) {
// declare some needed vars
var keypress_code = e.keyCode; // key press
var editor = document.getElementById('editor'); // the editor textarea
var source_code = editor.value; // contents of the editor
// work out how many lines we have used in total
var lines = source_code.split("\n");
var total_lines = lines.length;
// do stuff on key presses
if (keypress_code == '13') { // Enter
current_line += 1;
} else if (keypress_code == '8') { // Backspace
if (old_line_count > total_lines) { current_line -= 1; }
} else if (keypress_code == '38') { // Up
if (total_lines > 1 && current_line > 1) { current_line -= 1; }
} else if (keypress_code == '40') { // Down
if (total_lines > 1 && current_line < total_lines) { current_line += 1; }
} else {
//document.getElementById('keycodes').innerHTML += keypress_code;
}
// for some reason chrome doesn't enter a newline char on enter
// you have to press enter and then an additional key for \n to appear
// making the total_lines counter lag.
if (total_lines < current_line) { total_lines += 1 };
// putput the data
document.getElementById('total_lines').innerHTML = "Total lines: " + total_lines;
document.getElementById('current_line').innerHTML = "Current line: " + current_line;
// save the old line count for comparison on next run
old_line_count = total_lines;
}
</script>
</head>
<body>
<textarea id="editor" rows="30" cols="100" value="" onkeydown="code(event)"></textarea>
<div id="total_lines"></div>
<div id="current_line"></div>
</body>
</html>

You would want to use selectionStart to do this.
<textarea onkeyup="getLineNumber(this, document.getElementById('lineNo'));" onmouseup="this.onkeyup();"></textarea>
<div id="lineNo"></div>
<script>
function getLineNumber(textarea, indicator) {
indicator.innerHTML = textarea.value.substr(0, textarea.selectionStart).split("\n").length;
}
</script>
This works when you change the cursor position using the mouse as well.

This is tough because of word wrap. It's a very easy thing to count the number of line breaks present, but what happens when the new row is because of word wrap? To solve this problem, it's useful to create a mirror (credit: github.com/jevin). Here's the idea:
Create a mirror of the textarea
Send the content from the beginning of the textarea to the cursor to the mirror
Use the height of the mirror to extract the current row
On JSFiddle
jQuery.fn.trackRows = function() {
return this.each(function() {
var ininitalHeight, currentRow, firstIteration = true;
var createMirror = function(textarea) {
jQuery(textarea).after('<div class="autogrow-textarea-mirror"></div>');
return jQuery(textarea).next('.autogrow-textarea-mirror')[0];
}
var sendContentToMirror = function (textarea) {
mirror.innerHTML = String(textarea.value.substring(0,textarea.selectionStart-1)).replace(/&/g, '&').replace(/"/g, '"').replace(/'/g, ''').replace(/</g, '<').replace(/>/g, '>').replace(/\n/g, '<br />') + '.<br/>.';
calculateRowNumber();
}
var growTextarea = function () {
sendContentToMirror(this);
}
var calculateRowNumber = function () {
if(firstIteration){
ininitalHeight = $(mirror).height();
currentHeight = ininitalHeight;
firstIteration = false;
} else {
currentHeight = $(mirror).height();
}
// Assume that textarea.rows = 2 initially
currentRow = currentHeight/(ininitalHeight/2) - 1;
//remove tracker in production
$('.tracker').html('Current row: ' + currentRow);
}
// Create a mirror
var mirror = createMirror(this);
// Style the mirror
mirror.style.display = 'none';
mirror.style.wordWrap = 'break-word';
mirror.style.whiteSpace = 'normal';
mirror.style.padding = jQuery(this).css('padding');
mirror.style.width = jQuery(this).css('width');
mirror.style.fontFamily = jQuery(this).css('font-family');
mirror.style.fontSize = jQuery(this).css('font-size');
mirror.style.lineHeight = jQuery(this).css('line-height');
// Style the textarea
this.style.overflow = "hidden";
this.style.minHeight = this.rows+"em";
var ininitalHeight = $(mirror).height();
// Bind the textarea's event
this.onkeyup = growTextarea;
// Fire the event for text already present
// sendContentToMirror(this);
});
};
$(function(){
$('textarea').trackRows();
});

This worked for me:
function getLineNumber(textarea) {
return textarea.value.substr(0, textarea.selectionStart) // get the substring of the textarea's value up to the cursor position
.split("\n") // split on explicit line breaks
.map((line) => 1 + Math.floor(line.length / textarea.cols)) // count the number of line wraps for each split and add 1 for the explicit line break
.reduce((a, b) => a + b, 0); // add all of these together
};
Inspired by colab's answer as a starting point, this includes the number of word wraps without having to introduce a mirror (as in bradbarbin's answer).
The trick is simply counting how many times the number of columns textarea.cols can divide the length of each segment between explicit line breaks \n.
Note: this starts counting at 1.

Custom styled select box

am trying to use javascript for custom styled select boxes from www.gerrendesign.com/entry_images/selectboxdemo.zip
and as I have plenty entries inside one of select box I need to make but am stuck in creation of scrolling function.
As this select boxes are compatible with almost all older and new browsers. I need only suggestion or solution how to add scroll in this linked/attached files above - if select box is populated with plenty of entries (example cities, states, or exchange rates...)
Am stuck here...
Thanks for your cooperation
Ivan
THIS IS CODE:
$(document).ready(function(){
// first locate all of the select tags on the page and hide them
$("select.changeMe").css('display','none');
//now, for each select box, run this function
$("select.changeMe").each(function(){
var curSel = $(this);
// get the CSS width from the original select box
var gddWidth = $(curSel).css('width');
var gddWidthL = gddWidth.slice(0,-2);
var gddWidth2 = gddWidthL - 28;
var gddWidth3 = gddWidthL - 16;
// build the new div structure
var gddTop = '<div style="width:' + gddWidthL + 'px" class="selectME" tabindex="0"><div class="cornerstop"><div><div></div></div></div><div class="middle"><div><div><div>';
//get the default selected option
var whatSelected = $(curSel).children('option:selected').text();
//write the default
var gddFirst = '<div class="first"><span class="selectME gselected" style="width:'+ gddWidth2 + 'px;">'+ whatSelected +'</span><span id="arrowImg"></span><div class="clears"></div></div><ul class="selectME">';
// create a new array of div options from the original's options
var addItems = new Array();
$(curSel).children('option').each( function() {
var text = $(this).text();
var selVal = $(this).attr('value');
var before = '<li style="width:' + gddWidthL + 'px;"><a href="#" rel="' + selVal + '" tabindex="0" style="width:' + gddWidth3 + 'px;">';
var after = '</a></li>';
addItems.push(before + text + after);
});
//hide the default from the list of options
var removeFirst = addItems.shift();
// create the end of the div selectbox and close everything off
var gddBottom ='</ul></div></div></div></div><div class="cornersbottom"><div><div></div></div></div></div>'
//write everything after each selectbox
var GDD = gddTop + gddFirst + addItems.join('') + gddBottom;
$(curSel).after(GDD);
//this var selects the div select box directly after each of the origials
var nGDD = $(curSel).next('div.selectME');
$(nGDD).find('li:first').addClass("first");
$(nGDD).find('li:last').addClass('last');
//handle the on click functions - push results back to old text box
$(nGDD).click( function(e) {
var myTarA = $(e.target).attr('rel');
var myTarT = $(e.target).text();
var myTar = $(e.target);
//if closed, then open
if( $(nGDD).find('li').css('display') == 'none')
{
//this next line closes any other selectboxes that might be open
$('div.selectME').find('li').css('display','none');
$(nGDD).find('li').css('display','block');
//if user clicks off of the div select box, then shut the whole thing down
$(document.window || 'body').click( function(f) {
var myTar2 = $(f.target);
if (myTar2 !== nGDD) {$(nGDD).find('li').css('display','none');}
});
return false;
}
else
{
if (myTarA == null){
$(nGDD).find('li').css('display','none');
return false;
}
else {
//set the value of the old select box
$(curSel).val(myTarA);
//set the text of the new one
$(nGDD).find('span.gselected').text(myTarT);
$(nGDD).find('li').css('display','none');
return false;
}
}
//handle the tab index functions
}).focus( function(e) {
$(nGDD).find('li:first').addClass('currentDD');
$(nGDD).find('li:last').addClass('lastDD');
function checkKey(e){
//on keypress handle functions
function moveDown() {
var current = $(nGDD).find('.currentDD:first');
var next = $(nGDD).find('.currentDD').next();
if ($(current).is('.lastDD')){
return false;
} else {
$(next).addClass('currentDD');
$(current).removeClass('currentDD');
}
}
function moveUp() {
var current = $(nGDD).find('.currentDD:first');
var prev = $(nGDD).find('.currentDD').prev();
if ($(current).is('.first')){
return false;
} else {
$(prev).addClass('currentDD');
$(current).removeClass('currentDD');
}
}
var curText = $(nGDD).find('.currentDD:first').text();
var curVal = $(nGDD).find('.currentDD:first a').attr('rel');
switch (e.keyCode) {
case 40:
$(curSel).val(curVal);
$(nGDD).find('span.gselected').text(curText);
moveDown();
return false;
break;
case 38:
$(curSel).val(curVal);
$(nGDD).find('span.gselected').text(curText);
moveUp();
return false;
break;
case 13:
$(nGDD).find('li').css('display','none');
}
}
$(document).keydown(checkKey);
}).blur( function() {
$(document).unbind('keydown');
});
});
});

You could render the list inside a div, that has either a fixed height or a max-height (depending on your cross-browser requirements). Presuming the default scroll bar is ok...
If structure is something in the direction of
<div class="select_data_container">
<ul class="select_rows">
<li>row1</li>
<li>row2</li>
</ul>
</div>
CSS-example could be
.select_data_container {overflow-y: auto; height: 200px;}
.select_rows {display:block;}