www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript Help

  1. #1
    Join Date
    Feb 2012
    Posts
    1

    Javascript Help

    I'm a graphic designer applying for a web developer position. Basically the company gave me an assignment to create a widget using HTML, CSS and javascript. They've provided the assets (png images). The widget will be hosted in their website. Here's the screen capture of the finished widget:
    http://www.larryalmonte.com/test.jpg

    I can put the widget together but struggling to create the back-end.

    Here's the instruction:
    Clicking the vote button records a vote on the servers without unloading the page. Create the HTML, CSS, and JavaScript for the widget as illustrated in the attached screen shots. Your solution must work in IE 7+, Chrome (latest stable), and Firefox 3+. Bonus points will be awarded for your solution degrading nicely on older browsers.

    You will be asked to explain any places where your solution does not match the spec. Upon completion, please send me your solution and I will set up a time for us to review it in detail.

    Thanks so much for the help.

  2. #2
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    Use AJAX to push the link through to the page they requested.
    PHP Code:
    <script type="text/javascript">
    function 
    sendVote(selection){
        var 
    ajaxRequest;    
        try{
            
    ajaxRequest = new XMLHttpRequest();
        } catch (
    e){
            try{
                
    ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (
    e) {
                try{
                    
    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (
    e){
                    
    alert("Your browser does not support AJAX!");
                    return 
    false;
                }
            }
        }
        var 
    url "URL OF PAGE HERE";
        var 
    qstring document.getElementById("question").value;
        
    ajaxRequest.open("POST"urltrue);
        
    ajaxRequest.setRequestHeader("Content-type""application/x-www-form-urlencoded");
        
    ajaxRequest.setRequestHeader("Content-length"selection.length);
        
    ajaxRequest.setRequestHeader("Connection""close");
        
        
    ajaxRequest.onreadystatechange = function(){
            if(
    ajaxRequest.readyState == 4){
                
    document.getElementById("imgdiv").innerHTML "Thanks for voting!";
            }
        }
        
    ajaxRequest.send(qstring); 
    }
    </script> 
    Now just make the left something like:
    <a href="#" onclick="sendVote('left');"></a>
    and the right
    <a href="#" onclick="sendVote('left');"></a>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles