Category: Portfolio

Multiple Javascript .replace(), Regular Expression – String Replace Instances – In One Call, On Multiple Lines

[code]

for(var i=0; i<Open_Client_Files_Tabs_Cookie_Arr_G.length; i++){

 

My_Add_New_Open_Client_Files_Tab_Prototype = Add_New_Open_File_Tab_Prototype_G.replace(/~FLUCTUATING_COUNT~/g, i).
replace(/~FLUCTUATING_LAST_NAME~/g, Open_Client_Files_Tabs_Cookie_Arr_G[i].split(“~”)[0]).
replace(/~FLUCTUATING_FIRST_NAME~/g, Open_Client_Files_Tabs_Cookie_Arr_G[i].split(“~”)[1]);

 

}

[/code]
[SHORTCODE_Insert_Google_Adsence_Here]

onmouseout  onmouseover event handlers Problem causes child elements event handlers to fire / trigger /actuate – Use mouseenter mouseleave on the parent element instead. It will prevent the child elements from firing as well.

 
[SHORTCODE_Insert_Google_Adsence_Here]
Recently – I found myself in the need of a DIV within a DIV – where they both needed mouse events to be triggered independently, as the user mouses over the parent and then child DIV. The mousing of the child div – caused the parent “onmouseout” to actuate unnecessarily.

The solution is to NOT use “onmouseout” or “onmouseover”.
As “onmouseout”  or “onmouseover” are subject to “Event bubbling” as it is known.  “event on element2 takes precedence. This is called event bubbling”. http://www.quirksmode.org/js/events_order.html

 

The Problem:

The mousing of the child div that uses onmouseover – causes the parent “onmouseout” to trigger.

 

The Solution:

Along with JQUERY – Use the “mouseenter” and “mouseleave” on the parent div instead – the child elements will not effect the “onmouseleave”

Use Example:
Continue reading “onmouseout onmouseover element parent event handlers problem – child events cause parent to trigger”

I was adding PHP image upload and delete functions to an application the other day – when I came upon a few problems. The iPhone 4S images that were taken in Portrait mode, and then uploaded, did not display with the appropriate portrait orientation (The orientation of the camera relative to the scene, when the image was captured.). They were saved on the iPhone, still in the Landscape mode – although they were taken as Portrait. For whatever reason, the iPhone 4S saves both Portrait and Landscape images with the same Landscape (Width greater than Height) display orientation.

The Problem:

I can’t use the standard methods to detect which image is actually portrait or landscape – as both Landscape and Portrait are saved as width=”3264″ height=”2448″.

The Portrait images uploaded were displaying as Landscape. So, I need to detect these, and then rotate them to the proper orientation. But, using a typical method of  if(width > height) == ‘landscape’ type of detection and assignment, would not work, because all of the images are saved with the Width greater than the Height on the iPhone 4S. How can I then detect if the image is Portrait and only saved as Landscape so that I can appropriately rotate that one to Portrate?

The Solution:

Read the EXIF Header Data within the image. Some cameras have an orientation / position sensor, using, possibly, a gyroscope. The position or horizontal or vertical orientation (Portrait or Landscape) of the image taken, is written to the EXIF header of the image data.

$source_image = '../images/path_to_Image_on_your_server.jpg';

$exif = exif_read_data($source_image);
print_r($exif);

if(isset($exif['Orientation'])&& $exif['Orientation'] == '6'){
	 echo "The image is rotated";// So do something with the image
}

 

[SHORTCODE_Insert_Google_Adsence_Here]
The “orientation” value is relative to the camera position at the time the image was taken. In this case – the Top Left corner of the camera was at position 6. This is how iPhone orients its camera when you hold it upright. If you turn your iPhone so that the screen is facing you and the home button is to the Right – your iPhone is in position 1.

Now that I had a way to detect if the image was Landscape or Portrait – I needed a way to rotate the image to its proper Portrait orientation – so that it would display properly in the webpage.

I decided to use the GD2 Library to rotate the portrait image to its proper orientation.

The Problem:

Out of Memory Errors using the GD2 Library image rotate function.

“Fatal error:Allowed memory size of 67108864 bytes exhausted (tried to allocate 9792 bytes) in /system/libraries/Image_lib.php on line 728”

 // PRODUCES MEMORY ERROR
$config['image_library'] = 'gd2';
$config['source_image'] = $source_image;
$config['rotation_angle'] = '270';// << GD2 rotates counterclockwise  -_-

 

The Solution – 1:

Continue reading “PHP Image Rotation Iphone Portrait EXIF Orientation GD2 and imagemagick Libraries”

 
[SHORTCODE_Insert_Google_Adsence_Here]
I am a big fan of iframes for some things. I know – as many others do – that you can sometimes effectively and efficiently achieve with iframes, what you can with AJAX.  In many cases, it is way less of a headache, particularly when you mention the fact that AJAX is not cross browser friendly : ( and you are left jumping through the usual hoops for the likes of the”all mighty” Microsoft and their “all friendly” Internet Explorer – just to mention ONE nauseating reason. In my opinion – when you are left the choice “to dance or not dance” for Bill Gates – I will chose to take a seat when I can. As we all know we have been providing plenty of entertainment for Bill over the last decade or so – with our slick dance moves.

Setting up an iframe as a catch all reciprocal transmitter/receiver for form data – has proven very successful for me. I had a usage for dynamically generated iframes to process multiple corresponding check type values. One waiting for values from the other before proceeding.

In this case – I am posting form values to multiple dynamically generated iframes, and want the content of each iframe to remain, as I post to another dynamically generated iframe.

As you can see by my example below – even just dynamically creating and adding a new iframe via” innerHTML +=”, causes the previously generated iframes to refresh inside the container that is being updated with innerHTML+=.

The unwanted refresh does not happen when I do not use javascript to create the iframes – if I just write the html ahead of time and post to the already existing iframes, there is not any refresh problem. The previously posted iframes will remain with the posted content.

I do not know how many iframes I will need – so that is why I am using javascript to dynamically generate the iframes.

I am aware that I could use AJAX for this same purpose, but I am not using AJAX for this.

——-

THE PROBLEM

In my example – the iframes are refreshing, regardless of there content, when I am dynamically adding another iframe to a DIV "iFrame_Container" via javascript and innerHTML.

Is there a way to achieve this without the iframes refreshing?

With my example – I am only showing that the iframes are refreshing. I am not posting to them. But the problem shows up the same.

Click the “Add Iframe” button, up to 3 times. note the previous iframe(s) refreshing as the new one is added.

——-

[code]
<script>
var Content_For_Iframe_Array = new Array("http://www.bing.com", "http://www.wordpress.com/", "http://www.webcrawler.com");

var Inc_iFrame_Num = 0;
function add_iframe_with_content(){
if(Inc_iFrame_Num < 3){

var iFrame_String ="<iframe frameborder='5' src='"+Content_For_Iframe_Array[Inc_iFrame_Num]+"' scrolling ='yes' id='iFrame_"+Inc_iFrame_Num+"' style='height:300px; width:800px; margin:5px; padding:0px;'></iframe>";
        document.getElementById('iFrame_Container').innerHTML += iFrame_String;
        Inc_iFrame_Num++;
    }
}
</script>

<div style="cursor:pointer; background-color:#CCC; border:thin #7777 solid; width:85px; margin-top:40px; margin-bottom:14px;" onclick="add_iframe_with_content();">Add Iframe</div>
<div id="iFrame_Container" style="height:300px; width:800px; border:#CCC thin solid;">Div to hold Iframes</div>
[/code]

——-

THE ANSWER

Continue reading “Dynamically generating iframes – Preventing refresh when using innerHTML+=”

I came across a need for the usage of setTimeout() as a delay for a mouse-over event (no need to have everything happen the instant something is moused) – and wanted to pass a parameter along to the function called – after the timer was actuated. The presumed method did not work – so I had to search around a bit. I thought I’d post my findings here as well…

 

[code]

 

<script type=”text/javascript”>

setTimeout(My_Function_To_Call_When_Timer_Is_Triggered, 2000); // Timer set to call function ” after two seconds – typical usage

 

function My_Function_To_Call_When_Timer_Is_Triggered( ){

alert(“timer called”);

}

</script>

 

[/code]

 

How about when you want to pass a parameter to the function? I thought It would be like this:

[code]

 

setTimeout(My_Function_To_Call_When_Timer_Is_Triggered(Pass_A_Parameter ), 2000); // <<< INCORRECT! Presumed method – Timer set to call function ” after two seconds – and pass a parameter to that function

 

setTimeout(My_Function_To_Call_When_Timer_Is_Triggered, 2000, “My Parameter String”); // <<< CORRECT!  Proper Method Timer set to call function ” after two seconds – and pass a parameter to that function

 

[/code]
[SHORTCODE_Insert_Google_Adsence_Here]
Continue reading “Javascript – Passing parameters to a function called with setTimeout”