Showing posts with label developer html. Show all posts
Showing posts with label developer html. Show all posts

Thursday, October 27, 2011

Netbean chinese character problem

Probably happen in my pc (Window XP Home)
Create a new .php file, then when I paste the chinese character it show all right

Problem rises when the display (like export into PDF)
This is because the character encoding for the netbeans (NetBeans IDE 6.9.1) is not UTF-8

So simply fix this problem by changing the file type. As for me, I'm using notepad2 to change to file type into UTF-8. Below is the example


http://localhost/search/

Monday, October 24, 2011

Get element style in string

You have an element. You want to get the style applied into it. Where the format is string

eg: <a id="hupla1" style="width: 300px;">HELLO</a>

So you want to get "width: 300px;"

I refer from here http://objjob.phrogz.net/css/object/243 maybe you can find better solution and any alternative.

But my solution is document.getElementById('hupla1').style.cssText

Wednesday, July 13, 2011

javascript slider for div simple

This is to make a javascript slider


The main concept was taken from here and modify it alot http://www.sitepoint.com/forums/javascript-15/slide-div-horizontally-449624.html

Below will be the code, if you want to see the demo, refer to this page http://legendarytesting.zymichost.com/codemo/sliderfinal.html

Note to remember
  • I have test and work well on these browser (except for different browser slide with different speed)
    • Google Chrome (v10.0.648.205)
    • Firefox (v5.0)
    • Opera (v11.11)
    • Safari (v5.0.5)
    • Internet Explorer (v8.0.6001)
  • Using these script, it will store value on element (not store inside the javascript which I think much better method). You may change these code for your own needs
  • Note the padding must be inside the 3rd div, else it will run out of alignment (depend on your browser)
  • The 2nd div (with 999px width) must be put and always put additional width (browser compability purpose also)
  • Variable "Column width" is important, you need to add the padding value also (300px actual + 10px padding = 310px)

<html> 
    <head> 
        <title>Simple Slider</title> 

        <script type="text/javascript" language="javascript"> 
            //<![CDATA[ 

            function snapColumn( snapToCol) 
            { 
                slidingDiv  = document.getElementById("d1");
                divWidth    = document.getElementById("columnwidth").innerHTML; 
                currentCol  = document.getElementById("currentcolumn").innerHTML; 

                slidingDiv.style.left = -1 * (snapToCol-1) * divWidth; 
                document.getElementById("currentcolumn").innerHTML = snapToCol; 

                document.getElementById("poswatch").innerHTML = slidingDiv.style.left; 
            } 

            function slideLeft( stopPos) 
            { 
                slidingDiv = document.getElementById("d1"); 
                document.getElementById("functiondebug").innerHTML = parseInt(document.getElementById("functiondebug").innerHTML) + 1; 
                 
                if( parseInt(slidingDiv.style.left) > stopPos){ 
                    slidingDiv.style.left = parseInt(slidingDiv.style.left) - 2 + "px"; 
                    document.getElementById("poswatch").innerHTML = slidingDiv.style.left;                     

                    setTimeout(function(){slideLeft(stopPos)}, 2); 
                } 
                else{ 
                    document.getElementById("slidestatus").innerHTML = 0; 
                } 
            } 

            function nextColumn() 
            { 
                if( document.getElementById("slidestatus").innerHTML == 1){ 
                    return false;
                } 

                document.getElementById("slidestatus").innerHTML = 1; 
                slidingDiv  = document.getElementById("d1");
                divWidth    = document.getElementById("columnwidth").innerHTML; 
                currentCol  = document.getElementById("currentcolumn").innerHTML; 
                currentCol  = parseInt(currentCol) + 1; 
                stopPos     = -1 * (currentCol-1) * divWidth; 

                if( currentCol > parseInt(document.getElementById("columntotal").innerHTML)){ 
                    document.getElementById("slidestatus").innerHTML = 0; 
                    return false;
                } 

                //alert(stopPos); 
                //slidingDiv.style.left = stopPos; //Snap to the position immidietely
                slideLeft( stopPos); 
                document.getElementById("currentcolumn").innerHTML = currentCol; 
            } 

            function slideRight( stopPos) 
            { 
                slidingDiv = document.getElementById("d1"); 
                document.getElementById("functiondebug").innerHTML = parseInt(document.getElementById("functiondebug").innerHTML) + 1; 
                 
                if( parseInt(slidingDiv.style.left) < stopPos){ 
                    slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px"; 
                    document.getElementById("poswatch").innerHTML = slidingDiv.style.left;                     

                    setTimeout(function(){slideRight(stopPos)}, 2); 
                } 
                else{ 
                    document.getElementById("slidestatus").innerHTML = 0; 
                } 
            } 

            function previousColumn() 
            { 
                if( document.getElementById("slidestatus").innerHTML == 1){ 
                    return false;
                } 

                document.getElementById("slidestatus").innerHTML = 1; 
                slidingDiv  = document.getElementById("d1");
                divWidth    = document.getElementById("columnwidth").innerHTML; 
                currentCol  = document.getElementById("currentcolumn").innerHTML; 
                currentCol  = parseInt(currentCol) - 1; 
                stopPos     = -1 * (currentCol-1) * divWidth; 

                if( currentCol < 1){ 
                    document.getElementById("slidestatus").innerHTML = 0; 
                    return false;
                } 

                //alert(stopPos); 
                //slidingDiv.style.left = stopPos; //Snap to the position immidietely
                slideRight( stopPos); 
                document.getElementById("currentcolumn").innerHTML = currentCol; 
                return true;
            } 
            //]]> 
        </script> 
    </head> 
    <body> 

        <label>Variable</label> 
        <table border="1"> 
            <tr> 
                <td>DIV current style.left</td> 
                <td><div id="poswatch">0</div></td> 
            </tr> 
            <tr> 
                <td>Check function executed</td> 
                <td><div id="functiondebug">0</div></td> 
            </tr> 
            <tr> 
                <td>Current column</td> 
                <td><div id="currentcolumn">1</div></td> 
            </tr> 
            <tr> 
                <td>Max no of column</td> 
                <td><div id="columntotal">3</div></td> 
            </tr> 
            <tr> 
                <td>Column width</td> 
                <td><div id="columnwidth">310</div></td> 
            </tr> 
            <tr> 
                <td>Slide Status</td> 
                <td><div id="slidestatus">0</div></td> 
            </tr> 
        </table> 
        <div style="height: 50px;"></div> 

        <label>Use this to slide</label><br/>
        <b onclick="previousColumn()">< BACK</b> | <b onclick="nextColumn()">NEXT ></b> 
        <div style="height: 50px;"></div> 

        <label>Use this to snap to specific column</label><br/>
        <a onclick="snapColumn(1)">[1]</a> | <a onclick="snapColumn(2)">[2]</a> | <a onclick="snapColumn(3)">[3]</a> 
        <div style="height: 50px;"></div> 

        <!-- 1st div --> 
        <div style="width: 310px; overflow: hidden; border: 1px dashed black;"> 

            <!-- 2nd div --> 
            <div id="d1" style="width: 999px; position: relative; left: 0px;"> 

                <!-- 3rd div (a) --> 
                <div style="width: 310px; height: 100px; background-color: plum; float: left;" align="right"> 
                    <div style="padding: 5px;"> 
                        <b>SPARTA !!!!!!!!!!!!!!!!!!!!!</b> 
                    </div> 
                </div> 

                <!-- 3rd div (b) --> 
                <div style="width: 310px; height: 100px; background-color: bisque; float: left;" align="right"> 
                    <div style="padding: 5px;"> 
                        <b>IS !!!!!!!!!!!!!!!!!!!!!</b> 
                    </div> 
                </div> 

                <!-- 3rd div (c) --> 
                <div style="width: 310px; height: 100px; background-color: powderblue; float: left;" align="right"> 
                    <div style="padding: 5px;"> 
                        <b>THIS !!!!!!!!!!!!!!!!!!!!!</b> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </body> 
</html>

If you wandering how I convert these code into HTML syntax, refer it here http://puzzleware.net/CodeHTMLer/default.aspx

Thursday, March 24, 2011

Disable history back if pressing backspace

If you press backspace on the website page (but not on textbox) it will go to its previous page
This is to disable them

Taken from here, then I modified
http://www.sitepoint.com/forums/javascript-15/disable-back-javascript-168890.html

These is javascript coding
//DISABLE "GO BACK TO PREVIOUS HISTORY" IF PRESSING "BACKSPACE"
if (typeof window.event != 'undefined')
    document.onkeydown = function()
    {
        if( event.keyCode == 8){
            theEvent = event.srcElement.tagName.toUpperCase();
            if( theEvent == 'HTML'){
                return false;
            }
            else if( theEvent == 'INPUT'){
                theType = event.srcElement.getAttribute('type').toUpperCase();
                //alert(theType);
                switch(theType){
                    case 'TEXT':
                        return true;
                        break;

                   default:
                        return false;
                }
                return false;
            }
            else{
                switch( theEvent){
                    case 'TEXTAREA':
                        return true;
                        break;

                    default:
                        //alert('Backspace pressed on ' + theEvent + ', return false');
                        return false;
                }

                return false;
            }
        }
    }
else
    document.onkeypress = function(e)
    {
        if( e.keyCode == 8){
            theEvent = e.target.nodeName.toUpperCase();
            if( theEvent == 'HTML'){
                return false;
            }
            else if( theEvent == 'INPUT'){
                theType = e.target.getAttribute('type').toUpperCase();
                //alert(theType);
                switch(theType){
                    case 'TEXT':
                        return true;
                        break;

                   default:
                        return false;
                }
                return false;
            }
            else{
                switch( theEvent){
                    case 'TEXTAREA':
                        return true;
                        break;

                    default:
                        //alert('Backspace pressed on ' + theEvent + ', return false');
                        return false;
                }

                return false;
            }
        }
    }

Saturday, March 19, 2011

javascript detect and capture keyboard keycode

These is how to capture what user have type in their keyboard
The captured data is the "keycode" which is an integer

Like 'enter' key, the code is 13

Some data that I have discover and might be usefull to others and myself
These was tested and the same for IE, Firefox, Google Chrome and Safari
a until z keycode 97 until 122
A until Z keycode 65 until 90
0 until 9 keycode 48 until 57


Lets get to the code

function whatKeyCodeHaveIType( theEvent)
{
    charCode = (theEvent.which) ? theEvent.which : theEvent.keyCode

    theTempoElement = document.getElementById('thisiswhatyouhavetpye');
    theTempoElement.innerHTML = theTempoElement.innerHTML + ', ' + charCode;

    //This is to ignore "ENTER" key. Its usefull to prevent a form from autosubmit if you press enter
    return (charCode != 13);
}

//Later in HTML, use these
<input id="whatyouhavetype" style="width: 500px;" onkeypress="return whatKeyCodeHaveIType(event);"/>
<textarea id="thisiswhatyouhavetpye" cols="70" rows="5"></textarea>

Type something here :


javascript detect finish typing keystroke delay autocomplete

Okay, the title might be confusing but here is what these about

You want to execute certain function, right after the user has finish its typing

These is different from normal 'keypress' or 'keyup' or 'keydown' event detection because these will execute a function every key is press. Right now you want to give certain delay so that the function only execute at the right time

These is important if you developing an autocomplete (AJAX) because you dont want to execute the script too much. Typing "HELLO" means you do the SQL statement 5 times
H
HE
HEL
HELL
HELLO


But if you do a proper keystroke delay (detect user finish typing) you will only execute the SQL statement once
HELLO


Cut to the story, hopefully understand what I was trying to explain at the top

Here is the function
var typingTimer;
var doneTypingInterval = 700;

//Detect keystroke and only execute after the user has finish typing
function delayExecute()
{
    clearTimeout(typingTimer);
        typingTimer = setTimeout(
        function(){somethingExecuted('typesomethinghere')},
        doneTypingInterval
    );

    return true;
}

function somethingExecuted( theInputName)
{
    alert( "You have type '" + document.getElementById(theInputName).value + "'");
}

//Later in the HTML code, put these
<input onkeypress="return delayExecute();" id="typesomethinghere">

Type something here : (These input id is 'typesomethinghere')
The script will only execute after you finish typing. By assuming when you have stop typing for 0.7 seconds, means you have finish typing

Type something here :
These is what happen if you dont use the script



Tuesday, February 8, 2011

Javascript numeric input

This is my cheatsheet while playing with the javascript, always forgot about them so I job it down here

Easy to find, one of them is in here
http://javascript.internet.com/forms/validate-numeric-only.html

Round a number into 2 decimal place
var result = Math.round(annualPremium*100)/100



Convert string to Integer
http://www.keyboardface.com/archives/2006/04/04/javascript-string-to-int/
parseInt(10.10) //Return 10



Another alternative for number format
http://www.pageresource.com/jscript/j_a_03.htm
profits.toFixed(2) //returns 2489.82
profits.toPrecision(4) //returns 123.5 (round up)



Check is numeric
http://andrewpeace.com/javascript-is-numeric.html AND http://bytes.com/topic/javascript/answers/526119-convert-double-cdbl-javascript
valueCredit = document.getElementById('thisIsSparrta').value;
if( valueCredit != '' && !isNaN(valueCredit)){
    totalCredit += parseFloat(valueCredit);
}



Adding and removing 'readonly' attribute to element
http://bytes.com/topic/javascript/answers/655784-change-textbox-readonly
document.getElementById('helloworld').setAttribute('readonly', true);
document.getElementById('helloworld').removeAttribute('readonly');


Change the element background
http://www.codeproject.com/KB/scripting/focusBGColor.aspx
document.getElementById('helloworld').style.backgroundColor = '#EBEBE4';


Select all the text in textbox
http://javascript-array.com/scripts/onclick_select_all_text_in_field/
document.getElementById(id).focus();
document.getElementById(id).select();

p/s: Remember not to use 'onclick' function because just in case the user dont want to select all (they made typo mistake and want to remove only 1 character)


Check the element has what attribute
There is a source, but I forget whare I take it from
document.getElementById.hasAttribute('acinput')

p/s: The attribute can be anything actually, typically is 'readonly' for textbox

Sunday, January 30, 2011

Prevent mail from spam or junk by encryption from crawler

If you write a blog and put your email on it. There is a chance for you to get Spam/Junk mail
This can be cause of many reason but I'm focus on crawler method

How this spam works?
Basically this is the procedure
1. They find your email
2. They write email to you

Spam usually include 1000 email or more and of course it is done by using a bot (a system) and not just people manually type in

To find your email
They using web-crawler, spam-crawler or anything-crawler. These crawler will browse slowly through the internet (from blog to blog, website to website until forever). If your blog put an hyperlink of your friend blog (blogroll they called) these crawler will go into it

Thus in, programming these crawler detect 2 things

1st detection
Detect "http://" text. If they found and word, URL or string match. They will retrieve the link and put in on the "Next going to be crawl list"

2nd detection
Since they want to spam to your mail, they simply find any string or word with "@" symbol. Thus your email will be captured in these process

Write email to you (spam)
These is a process of producing mass email and of course they use the list they got from the first step and use a bot (system) to mass mail it


Prevention

There is 2 type of prevention
1. Email filter (thats why you have spam/junk mail categories)
2. Prevent your email from being on the spammer list

1st prevention - Filter your mailbox
This is already common and build in feature for almost all email system like gmail and others. So no need discussing much

2nd prevention - Prevent from listed
This is what I want to discussed about
Usually people will make their email not in easy format or encryption.

Using different email format like (let say your email is ajskdhqjeakjbdia@gmail.com)

Email: ajskdhqjeakjbdia (@gmail)

Email: ajskdhqjeakjbdia at gmail dot com

Or they use encryption like these

ajskdhqjeakjbdia@gmail.com
(It looks normal but it is actually encrpted)

So these encryption can be easily google. But I'm suggesting you the simplest one which taken from these website http://www.web-designz.com/tools/email_encoder.shtml
Note: The simplest method might also means it is easily detectable by the crawler

If you are a programmer and wandering how did the website do the answer is they are using convertToUnicode(...) function

If you view the page source. It wont show and "@" or your email at all because it is encrypted and of course the crawler is a system, they read the page source and not reading like you did (using web browser)

-End-

GIMP save for web image optimize reduce size

If you are using Windows and want to upload huge picture size into the internet (or blog) optimize it first using Adobe Photoshop 'save image as web' feature. It can reduce image size and make your image to load faster!

Story
Im using ubuntu and they dont give adobe photoshop crack for free :(
But I need adobe photoshop 'Save image as web' feature.
Ubuntu only provide me 'GIMP' but I found the same feature as a plug-in

Straight to the source. I copy from here http://www.techzilo.com/install-save-for-web-gimp-plugin-ubuntu/

What is 'Save image for web' ?
Save image for web is a technology to compress the image size so it can load faster in the internet

Weakness
Reduce the image quality. But this wont affect much (unless you have super vision)

Advantages
Image load faster

Conclusion
The advantages overcome the weakness make this a good thing to share!

Others
I was kinda lazy to write the thing back cause the source it self is already 100% fool proof

Saturday, January 29, 2011

Write blog post using TinyMCE

Google blog text editor has improved!.They have "Edit HTML" or "Compose" tab (like below)



Tuesday, January 25, 2011

HTML UTF encoding entities


I was doing some project require math symbol. The key was not exist in keyboard
The website that I use as reference is
http://www.fileformat.info/info/unicode/char/b1/index.htm
The link is a plus minus symbol (±). You can search fur further symbol at the top left

Or also here
http://www.danshort.com/HTMLentities/index.php?w=hertz

Wednesday, January 12, 2011

jQuery navigation menu

Im not sure does anybody know about this. Think it will be easier to find in google
Below is the link for website that show example on jQuery navigation menu

36 Eye-Catching Jquery Navigation Menus
http://www.1stwebdesigner.com/resources/36-eye-catching-jquery-navigation-menus/

By the way, the website it self http://www.1stwebdesigner.com is totally awesome for me

Sunday, January 2, 2011

Smarty array

Case: Want to make a loop but need to check "the value is an array" or "the value has a value". I'm using smarty code template (.tpl file). Keep having this problem so I job this down to myself

Reference
http://www.smarty.net/forums/viewtopic.php?t=9891

Rewrite it back
use count() -> http://uk.php.net/manual/function.count.php
or isset() -> http://uk.php.net/manual/en/function.isset.php
or empty() -> http://uk.php.net/manual/en/function.empty.php

Maybe later want to write how to create a loop from the array data... but quite lazy rite now

Monday, October 11, 2010

Detect keyboard button press

This javascript function is to detect KEYCODE of the keyboard you press.
Note that pressing 'P' will not return 'P' but they will send signal in integer called KEYCODE

This is engineering guys who did it, so we IT guys just follow. Dont questioned

To detect and return what is the KEYCODE for each button. Refer this link
http://help.dottoro.com/ljlkwans.php

Or I give you guys the code, ha

Javascript code
function callSearchPressEnter(event)
{
var keyCode = event.which;
if (keyCode == undefined)
{
keyCode = event.keyCode;
}
alert ("The Unicode key code is: " + keyCode);
}


For the HTML
bla bla bla onkeydown="callSearchPressEnter(event)"

Thursday, September 30, 2010

PHP ' become &#039;

in PHP What happen when I output the string into text file is
The character ' become &#039;

Copy this &amp;#039; to create this &#039;

&#039; is a html character special code that represent ' symbol
Means it will display correctly as ' if you see it in web browser

Simply solving the problem by html_entity_decode( "&#039;", ENT_QUOTES)

Note that html_entity_decode( "&#039;") will not work
I found this solution in some page (didnt remember the site URL, sorry >.<)

So what is this html_entity_decode(...) function?
It is use to convert special html character into the normal character
Detail was in http://php.net/manual/en/function.html-entity-decode.php

The inverse of it was htmlentities(...)
Detail was in http://www.php.net/manual/en/function.htmlentities.php

Tuesday, September 28, 2010

Software Architecting Success Factors and Pitfalls

My boss give to my email so sharing it with myself

Software Architecting Success Factors and Pitfalls

The top critical success factors for the architecting effort that we have identified are:

The architecting effort must:

* address a strategic business objective of your key sponsor
* have a good lead architect with well-defined role and style
* have a lead architect and architecture team who are able to "sell" (lead); conversely, the organization must be willing to "buy into" (follow)
* contribute immediate value to developers (utilizers of the architecture)

The architecture is more likely to be successful if:

* there are architecture advocates at all levels of the organization
* architecture is woven into the culture
* there is customer involvement/pressure/demand

Critical Success Factors

* Interpersonal and team communication and ownership
* Leadership
* Vision
* Teamwork
* Availability of talent/resources
* Must have strong management sponsorship
* Market/business understanding
* Good match between technology and business strategy
* Customer focus
* Clear specifications including dependencies
* Simple architecture
* Deployed in phases/incrementally
* Architecture is understandable by all
* Solve at least the current problem
* Validation of requirements during each step of the process
* Project management

The architect must have the following skills:

* good domain knowledge
* good communicator/listener
* good persuader
* good project management skills

The architect must

* have a clear and compelling vision
* champion the cause
* provide constructive feedback

Pitfalls

* Poor leadership
* Thinking at too low a level
* Poor communication inside/outside the architecture team
* Not enough "selling"
* Lack of resources/talent
* Poorly designed roles and responsibilities
* Bad design/idea
* Lack of extensibility
* Doesn't solve the project team's problems
* Lack of control/authority
* Requirements unclear, not well-defined, not signed off, changing
* Architecture team loses touch with the product team's problems
* Product team believes "we can solve it better ourselves"
* Development management not penalized for "stalling"
* Politics

Tuesday, August 31, 2010

Javascript change dropdown or select option value which is index

I google for "javascript change select value" and turn out not really help full
The keyword for select is more like dropdown
while the value is index
So it must be "javascriptchange dropdown index"

The purpsoe of this post is a javascript is to change the selection inside the dropdown into something you want.



Just like the dropdown above. The default value is seet to the first option which is "Hello"
When I click a certain script with value "World", the script will change the dropdown into to "World". This is what I want. Below is the code


function changeDropDown( dropdownidname, dropdownvalue)
{
var testingga = window.opener.document.EditView.elements[dropdownidname];
//In most case it will be document.getElementById(dropdownidname); I think

for (var i=0; i < testingga.length; i++)
{
if (testingga[i].value == dropdownvalue)
{
testingga[i].selected = true;
}
}
}