Browsing the JavaScript category

Image upload from iPhone/iPad rotates 90 degrees

One of my latest projects dealt with image manipulation, and I had a real struggle coming to the final version of the code.
The size of an image (in MB/KB) is partially dependent on the size of the image (pixels).  If you have two images of the same content with one being 3000px x 3000px – and the other is 50px x 50px – then chances are the smaller one (in pixels) will load faster.  This is especially important for users on a mobile device, as they may be on a slower connection.
This is why many sites – including FaceBook, store multiple-sized images (of the same thing). They’ll store the “original” and a “thumbnail” (and various sizes of the thumbnail).  When a user needs to view a “lot” of pictures, the thumbnails will be shown (which are faster); and then the user clicks on one, they can see the larger picture (which will take longer to load).  The larger picture is not loaded automatically, in an effort to save download time.
So for my app, I needed to store multiple sizes of the same picture.  But taking this a step further: what if, when the user sends (uploads) the file to the server, it was already in a reduced size, thus making the app load faster? I began looking into JavaScript solutions.  Note: it is possible to load the “original” image to the server, and use a server-side language to create multiple-sized thumbnails.  And I do do this; but I wanted to avoid it for the initial file upload.
So I needed to take the contents of a “file input” and put it onto the screen (visible, or not) – perhaps in an IMG tag or a CANVAS.  Then I had to resize the image (make it smaller in pixels >> smaller in file size >> faster to upload).  But I had to figure out how to get it from an HTML component (not the “file” input type) to the server.  To do this, you have to convert the image/canvas to a Blob.  Note: on the server side, I had a validation check for “the file that the user is trying to upload: is it of a certain data type?”  But when it’s converted to a Blob, there is no file extension!  So that caused some of my server-side checks to fail…
Anyways, this was all working, except that Apple has a “feature” in that they can (inaccurately) detect the orientation of the image.  Basically when you upload an image from an iPhone/iPad, it will rotate it 90 degrees! I didn’t want to have to come up with code to detect the operating system the user is on, and deal with it that way; rather, I wanted to find out from the image itself.
Turns out there is a concept of EXIF that stores extra data related to the image (ex. the location where it was taken).  And Apple likes to put in a value in the orientation that messes things up.
I tried everything to find the solution for “iPhone rotates image when uploaded” – but couldn’t find a client-side (JavaScript) or server-side (ex. PHP) solution.  I figured that a client-side solution would be easier to implement, so I began my search.
I tried to find a JavaScript library to help; I came across these two, but couldn’t get it to work:
https://github.com/exif-js/exif-js (specifically, with this one, I ran into the error of  “Uncaught TypeError: Cannot read property ‘getData’ of undefined”).
So I ended up finding a separate function that could get me the orientation:
And rotating the picture from there (only if needed) – and then uploading the contents of the FORM with JavaScript’s “FormData”.

Read the article

Foundation Reveal not working

I couldn’t get the code on the demo site to work.
Note, you need to have:

<script>
$(document).foundation();
</script>

On the page; you can’t just include the script tags.

It looks like “foundation.min.js” includes the reveal plugin (as opposed to NOT including it, and you add it in separately).

But the real trick was changing the “data” attribute tags to match below.

<!DOCTYPE HTML>
<html>
<head>
<title>index</title>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js”></script>

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css”>

</head>

<body>

<a href=”#” data-open=”myModal”>Click Me For A Modal</a>

<div id=”myModal” class=”reveal” data-reveal >
<h2 id=”modalTitle”>Awesome. I have it.</h2>
<p class=”lead”>Your couch. It is mine.</p>
<p>I’m a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class=”close-button” data-close>&#215;</a>
</div>

<script>
$(document).foundation();
</script>

</body>
</html>

Read the article

javascript not reading value from bootstrap modal

I had a Bootstrap modal that was being used to change the value in a database.  When the user clicked “Save Changes” though, it wasn’t saving – the new values were “undefined”.

The solution: in the JavaScript function, I was getting the values AFTER the modal had closed.  First, get the values… THEN do what you have to do (and let the modal close).  My values were IN the modal, which had been removed from the screen (thus, undefined).

Read the article

Users don’t do what you expect

I have an HTML form with a jQuery plugin for a date picker.  If the user doesn’t know what the date should be, they should leave the field blank.  The data is stored in a “date” format and will default to 1/1/1900 (this is in SQL Server).  If that date is stored, I know to replace it with nothing (“”) instead.

If the user put in “N/A” (text) instead of leaving it blank, then the database will give an error in that it can’t convert text (“N/A”) to a date.

The solution: have server side AND client side to assure that the input is in a “date” format (or blank).

Read the article

Changing values in Chrome Inspector Doesn’t Work

I was trying to break my own JavaScript / Ajax code (for security purposes). I was calling a JavaScript function, and passing in an ID.  In the Chrome Inspector, I was manually changing the ID to something else (that should have failed my validation check).  But when I clicked on the button/link (to run the function), it was running TWICE: once for the new value (as intended) and once for the original value!  I confirmed this by printing out (via console.log) the ID that was being passed in.

 

HTML:

 

  <button id=”button_<%=ID%>” onClick=”editRecord(<%=ID%>)”>Edit</button>

 

 

The solution was to change the onClick attribute for the button/link.  I ran this separately in the Console:

 

                function changeOnClickID(buttonNum, value){

                                $(“#button_” + buttonNum).attr(“onclick”, “editRecord(” + NewValue + “)”);

                }

Read the article

javascript set focus to textbox

I had a textbox that I wanted to set the focus to, but adding .focus() was not working.

The problem was because it was in a (Bootstrap) modal, I had to set the focus once it was shown:

                $(‘#modalSearch’).on(‘shown.bs.modal’, function () {

                                $(‘#txtSearch’).focus();

                });

 

Read the article

jquery reference label based on for

I have a form that I wanted to apply a JavaScript validation.

The form Labels are hidden (using Bootstrap’s “sr-only” class). I wanted to use HTML5 data attributes to detect if a field was blank, then add a class.

HTML:

<div class=”input-group input-group-lg form-group”>
<label for=”email” class=”sr-only”>Email</label>
<input type=”text” name=”email” id=”email”
class=”form-control input-lg” placeholder=”Email” data-required=”true” />
</div>

JavaScript/jQuery:

function ValidateLogin() {

$(‘#error_general’).hide();

var OkToProceed = true;

var requiredFields = $(‘[data-required = true]’);
requiredFields.each(function(){

if ( $(this).val() == “”) {
OkToProceed = false;

$(“label[for='” + $(this).attr(‘id’) + “‘]”)
.removeClass(‘sr-only’)
.addClass(“alert_required”);
}
});

if (OkToProceed == true) {
return true;
} else{
$(‘#error_general’).show();
return false;
}

}

… and just put that in a function such that the onSubmit() of the form returns that function.

 

 

Read the article

QuiBids is a scam

Note: I’ve been meaning to write this for awhile, and finally have gotten around to it.  The code used and even topic might be outdated.

There is a concept of a “reverse auction”.  You buy “credits” and then bid on items.  You can get anything; from gift cards to physical objects.  Items start at a really low price; for example, buying a $25 gift card for $1.  There’s a counter on the item, going downward.  As soon as it hits “0”, the auction is over.  Every time someone places a bid (which uses a credit), the price is increased by a small amount (ex one cent, ten cents, one dollar) and the timer resets.  The last person to bid on the item “wins” it for that amount.  So the trick is, do you think you can be the highest bidder (and last to make the bid) on an amount that’s really low.

One such site is QuiBids, which I believe is (was?) a scam.

A friend turned me on to this, as he won some items.  I tried it out, and I won items, too.  But I think it’s programmed so that you win the first few times, and then you won’t win at all (or, at least, can’t win the expensive items).

Being a data guy, I made spreadsheets of various statistics – the time of day, which day of the week, the item being sold, and how much it sold for.  Then I found the average of this, so I knew when to bid.

I figured I could cheat the system.  And when I couldn’t cheat the system, I figured it was rigged.

In my browser, I went to the Console (development tools), where I could run my own Javascript.

Each auction has a unique ID. There’s a certain Javascript function that’s called (passing in this ID), that allows you to “bid” on the item.  So what I did was: when the counter reached one second, I waited almost one second (like, 998 milliseconds – to account for computer error), and then I placed my bid.  I later had to add extra logic in there to make sure that I wasn’t the current “high bidder” or else the script wouldn’t work.

The script is below; just change the ID.  Again per the disclaimer at the beginning – this code “used” to work.  If it doesn’t currently work, or if QuiBids changed to be (what I feel is) legitimate, then perhaps you can modify this code to scam the scammers.

Read the article

javascript getElementById on table doesn’t work

I was doing

             var table = document.getElementById(“#my_table_name”);

 

but the pound sign is only for jQuery – in straight javascript, just do:

             var table = document.getElementById(“my_table_name”);

Read the article

javascript get value of textbox when looping through table cell

I’m looping through a table – in javascript – and the values look like:

row.cells[3].innerHTML

 

But I have a textbox that I need to get the value of it.  Instead I do:

 

var table = document.getElementById(“steve”);

 

                var rowLength = table.rows.length;

 

                // start at 1 to skip header row

                for(var i=1; i<rowLength; i+=1){

 

                                var row = table.rows[i];

 

                                // Loop through each row

 

                                var cellLength = row.cells.length;

 

                                // Set default to 0

                                // use parseFloat (not parseInt) incase the numbers are really small (otherwise it’ll round to 0)

                               

                                //blah = parseFloat(row.cells[3].innerHTML) || 0;

                                blah = row.cells[3].firstChild;

                                my_val = $(blah).val() || 0;

 

                                console.log( my_val );

 

                }

Read the article