Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2009
    Posts
    40
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Ajax Image Upload without Refreshing Page using Jquery.

    http://www.9lessons.info/2011/08/aja...efreshing.html
    I read this lesson in website & want to apply it on my web site. after I downloader the code & test it. it works fine and show the image without refresh. but when I want to apply it on my website the image doesnot show before submit please help me to solve the issue.
    PHP Code:
    <?php session_start(); ?>
    <?php 
    if (is_null($_SESSION['username']))
    {
    header('Location:index.html');
    }
    else
    {
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[]>
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
    <head>
        
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New Page</title>
        <meta name="description" content="Description" />
        <meta name="keywords" content="Keywords" />


        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
        <!--[if IE 6]><link rel="stylesheet" href="style.ie6.css" type="text/css" media="screen" /><![endif]-->
        <!--[if IE 7]><link rel="stylesheet" href="style.ie7.css" type="text/css" media="screen" /><![endif]-->
            <link type="text/css" href="jquery-ui-1.7/themes/base/ui.all.css" rel="stylesheet" />
        <script type="text/javascript" src="jquery-ui-1.7/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="jquery-ui-1.7/ui/ui.core.js"></script>
        <script type="text/javascript" src="jquery-ui-1.7/ui/ui.datepicker.js"></script>




        <script type="text/javascript">
        $(function() {
            $("#datepicker").datepicker();
     });
        </script>

    <style type="text/css">

    #hintbox{ /*CSS for pop up hint box */
    position:absolute;
    top: 0;
    background-color: lightyellow;
    width: 150px; /*Default width of hint.*/ 
    padding: 3px;
    border:1px solid black;
    font:normal 11px Verdana;
    line-height:18px;
    z-index:100;
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    visibility: hidden;
    }

    .hintanchor{ /*CSS for link that shows hint onmouseover*/
    font-weight: bold;
    color: navy;
    margin: 3px 8px;
    }

    </style>

    <script type="text/javascript">

    /***********************************************
    * Show Hint script- © Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
            
    var horizontal_offset="9px" //horizontal offset of hint box from anchor link

    /////No further editting needed

    var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
    var ie=document.all
    var ns6=document.getElementById&&!document.all

    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }

    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }

    function clearbrowseredge(obj, whichedge){
    var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
    if (whichedge=="rightedge"){
    var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
    }
    else{
    var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
    }
    return edgeoffset
    }

    function showhint(menucontents, obj, e, tipwidth){
    if ((ie||ns6) && document.getElementById("hintbox")){
    dropmenuobj=document.getElementById("hintbox")
    dropmenuobj.innerHTML=menucontents
    dropmenuobj.style.left=dropmenuobj.style.top=-500
    if (tipwidth!=""){
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=tipwidth
    }
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
    dropmenuobj.style.visibility="visible"
    obj.onmouseout=hidetip
    }
    }

    function hidetip(e){
    dropmenuobj.style.visibility="hidden"
    dropmenuobj.style.left="-500px"
    }

    function createhintbox(){
    var divblock=document.createElement("div")
    divblock.setAttribute("id", "hintbox")
    document.body.appendChild(divblock)
    }

    if (window.addEventListener)
    window.addEventListener("load", createhintbox, false)
    else if (window.attachEvent)
    window.attachEvent("onload", createhintbox)
    else if (document.getElementById)
    window.onload=createhintbox

    </script>



    </head>

    <script type="text/javascript" src="scripts/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.form.js"></script>

    <script type="text/javascript" >
     $(document).ready(function() { 
            
                $('#photoimg').live('change', function()            { 
                           $("#preview").html('');
                    $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
                $("#imageform").ajaxForm({
                            target: '#preview'
            }).submit();
            
                });
            }); 
    </script>

    <style>

    body
    {
    font-family:arial;
    }
    .preview
    {
    width:200px;
    border:solid 1px #dedede;
    padding:10px;
    }
    #preview
    {
    color:#cc0000;
    font-size:12px
    }

    </style>


    <body>

    <script language="JavaScript">
    <!--

    /***********************************************
    * Required field(s) validation v1.10- By NavSurf
    * Visit Nav Surf at http://navsurf.com
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    function formCheck(formobj){
        // Enter name of mandatory fields
        var fieldRequired = Array("title", "content","date");
        // Enter field description to appear in the dialog box
        var fieldDescription = Array("Title", "Content","Date");
        // dialog message
        var alertMsg = "Please complete the following fields:\n";
        
        var l_Msg = alertMsg.length;
        
        for (var i = 0; i < fieldRequired.length; i++){
            var obj = formobj.elements[fieldRequired[i]];
            if (obj){
                switch(obj.type){
                case "select-one":
                    if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
                        alertMsg += " - " + fieldDescription[i] + "\n";
                    }
                    break;
                case "select-multiple":
                    if (obj.selectedIndex == -1){
                        alertMsg += " - " + fieldDescription[i] + "\n";
                    }
                    break;
                case "text":
                case "textarea":
                    if (obj.value == "" || obj.value == null){
                        alertMsg += " - " + fieldDescription[i] + "\n";
                    }
                    break;
                default:
                }
                if (obj.type == undefined){
                    var blnchecked = false;
                    for (var j = 0; j < obj.length; j++){
                        if (obj[j].checked){
                            blnchecked = true;
                        }
                    }
                    if (!blnchecked){
                        alertMsg += " - " + fieldDescription[i] + "\n";
                    }
                }
            }
        }

        if (alertMsg.length == l_Msg){
            return true;
        }else{
            alert(alertMsg);
            return false;
        }
    }
    // -->
    </script>




    <div id="art-main">
        <div class="cleared reset-box"></div>
        <div class="art-sheet">
            <div class="art-sheet-tl"></div>
            <div class="art-sheet-tr"></div>
            <div class="art-sheet-bl"></div>
            <div class="art-sheet-br"></div>
            <div class="art-sheet-tc"></div>
            <div class="art-sheet-bc"></div>
            <div class="art-sheet-cl"></div>
            <div class="art-sheet-cr"></div>
            <div class="art-sheet-cc"></div>
            <div class="art-sheet-body">
                <div class="art-header">
                    <div class="art-header-clip">
                        <div class="art-header-png"></div>
                        <div class="art-header-jpeg"></div>
                    </div>
                    <div class="art-headerobject"></div>
                    <div class="art-logo">
                                     <h1 class="art-logo-name"></h1>
                                                     <h2 class="art-logo-text"></h2>
                                    </div>
                </div>
                <div class="cleared reset-box"></div>
    <div class="art-nav">
        <div class="art-nav-l"></div>
        <div class="art-nav-r"></div>
    <div class="art-nav-outer">
        <ul class="art-hmenu">
                 <li>
                <a href="news_en.php"><span class="l"></span><span class="r"></span><span class="t">Home</span></a>
            </li>
                     <li>
                <a href="news_add.php" class="active"><span class="l"></span><span class="r"></span><span class="t">Add News</span></a>
            </li>
                    
                    
                    <li>
                <a href="../../Arabic/admin/news_ar.php"><span class="l"></span><span class="r"></span><span class="t">عربي</span></a>
            </li>    
        </ul>
       
    </div>
    </div>
    <div class="cleared reset-box"></div>
    <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-content">
    <div class="art-post">
        <div class="art-post-body">
    <div class="art-post-inner art-article">
                                    <h2 class="art-postheader">
    <center>
    <img src=images/sparkcity.gif></center>
              Add News                      </h2>
                    <div class="cleared"></div>
                                    <div class="art-postcontent">
    <?php

    echo "<font color=black>";
    echo 
    "welcome" ." " $_SESSION['username'];
    echo 
    "</font>";
    echo 
    "&nbsp;<a href=logout.php>logout</a><p>";
    ?>

    <center>
    <table border="0" dir="ltr">
      <form method="post" action="insert.php" name="form1"  onsubmit="return formCheck(this);" enctype="multipart/form-data">

      <tr>
    <td>Title :</td>
        <td>
          <input type="text" name="title" id="title"  size="43" />
        </td>
    <td>
    <a href="#" class="hintanchor" onMouseover="showhint('Please Enter title.cannot exceed from 350 characters', this, event, '150px')">[?]</a>
    </td>
      </tr>
    <tr>
    <td> Upload your image </td>
    <td>
    <input type="file" name="photoimg" id="photoimg" />
    <div id='preview'>
    </div>
    </td>
    </tr>
      <tr>
    <td>Content :</td>
        <td><textarea name="content" id="content" cols="40" rows="4" ></textarea></td>
        <td>
    <a href="#" class="hintanchor" onMouseover="showhint('Please Enter content. cannot exceed from 1500 characters', this, event, '150px')">[?]</a>
    </td>
        
      </tr>
      

      <tr>
    <td>Date:</td>
        <td><div class="demo" >
        <input type="text" name="date" size="43" id="datepicker"/>
        </div>
        </td>
         <td>
    <a href="#" class="hintanchor" onMouseover="showhint('Please choose date from calender.', this, event, '150px')">[?]</a>
    </td>
      </tr>
    <tr>
      <td colspan="2">
    <center>
          <input  type="submit"  name="button1"  value="Save" /> 
         </center>
          </td>
          </tr>
    </form>              
    </table>
    </center>



                    </div>
                    <div class="cleared"></div>
                    </div>

            <div class="cleared"></div>




        </div>
    </div>

                          <div class="cleared"></div>
                        </div>
                    </div>
                </div>
                <div class="cleared"></div>
                <div class="art-footer">
                    <div class="art-footer-t"></div>
                    <div class="art-footer-l"></div>
                    <div class="art-footer-b"></div>
                    <div class="art-footer-r"></div>
                    <div class="art-footer-body">
                        <a href="#" class="art-rss-tag-icon" title="RSS"></a>
                            <a href="http://www.facebook.com/sparkcitysd" class="art-facebook-tag-icon" target="_blank" title="Facebook Page"></a>
                            <a href="http://www.youtube.com/sparkcitysd" class="art-youtube-tag-icon" target="_blank" title="Youtube Page"></a>
                                <div class="art-footer-text">
                                 
    <p><a href="news_en.php">Home</a>   | <a href="news_add.php">Add News</a> </p>
    <p>All Rights Reserved © 2012</p>

                                                                </div>
                        <div class="cleared"></div>
                    </div>
                </div>
                <div class="cleared"></div>
            </div>
        </div>
        <div class="cleared"></div>
       
        <div class="cleared"></div>
    </div>

    </body>
    </html>
    <?php
    }
    ?>
    I suggest the problem from div & style please help me to solve this problem

  • #2
    New Coder
    Join Date
    Apr 2012
    Location
    United Kingdom
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hassanab View Post
    http://www.9lessons.info/2011/08/aja...efreshing.html
    I read this lesson in website & want to apply it on my web site. after I downloader the code & test it. it works fine and show the image without refresh. but when I want to apply it on my website the image doesnot show before submit please help me to solve the issue.
    PHP Code:
    <?php session_start(); ?>
    <?php 
    if (is_null($_SESSION['username']))
    {
    header('Location:index.html');
    }
    else
    {
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[]>
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
    <head>
        
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New Page</title>
        <meta name="description" content="Description" />
        <meta name="keywords" content="Keywords" />


        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
        <!--[if IE 6]><link rel="stylesheet" href="style.ie6.css" type="text/css" media="screen" /><![endif]-->
        <!--[if IE 7]><link rel="stylesheet" href="style.ie7.css" type="text/css" media="screen" /><![endif]-->
            <link type="text/css" href="jquery-ui-1.7/themes/base/ui.all.css" rel="stylesheet" />
        <script type="text/javascript" src="jquery-ui-1.7/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="jquery-ui-1.7/ui/ui.core.js"></script>
        <script type="text/javascript" src="jquery-ui-1.7/ui/ui.datepicker.js"></script>




        <script type="text/javascript">
        $(function() {
            $("#datepicker").datepicker();
     });
        </script>

    <style type="text/css">

    #hintbox{ /*CSS for pop up hint box */
    position:absolute;
    top: 0;
    background-color: lightyellow;
    width: 150px; /*Default width of hint.*/ 
    padding: 3px;
    border:1px solid black;
    font:normal 11px Verdana;
    line-height:18px;
    z-index:100;
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    visibility: hidden;
    }

    .hintanchor{ /*CSS for link that shows hint onmouseover*/
    font-weight: bold;
    color: navy;
    margin: 3px 8px;
    }

    </style>

    <script type="text/javascript">

    /***********************************************
    * Show Hint script- © Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
            
    var horizontal_offset="9px" //horizontal offset of hint box from anchor link

    /////No further editting needed

    var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
    var ie=document.all
    var ns6=document.getElementById&&!document.all

    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }

    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }

    function clearbrowseredge(obj, whichedge){
    var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
    if (whichedge=="rightedge"){
    var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
    }
    else{
    var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
    }
    return edgeoffset
    }

    function showhint(menucontents, obj, e, tipwidth){
    if ((ie||ns6) && document.getElementById("hintbox")){
    dropmenuobj=document.getElementById("hintbox")
    dropmenuobj.innerHTML=menucontents
    dropmenuobj.style.left=dropmenuobj.style.top=-500
    if (tipwidth!=""){
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=tipwidth
    }
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
    dropmenuobj.style.visibility="visible"
    obj.onmouseout=hidetip
    }
    }

    function hidetip(e){
    dropmenuobj.style.visibility="hidden"
    dropmenuobj.style.left="-500px"
    }

    function createhintbox(){
    var divblock=document.createElement("div")
    divblock.setAttribute("id", "hintbox")
    document.body.appendChild(divblock)
    }

    if (window.addEventListener)
    window.addEventListener("load", createhintbox, false)
    else if (window.attachEvent)
    window.attachEvent("onload", createhintbox)
    else if (document.getElementById)
    window.onload=createhintbox

    </script>



    </head>

    <script type="text/javascript" src="scripts/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.form.js"></script>

    <script type="text/javascript" >
     $(document).ready(function() { 
            
                $('#photoimg').live('change', function()            { 
                           $("#preview").html('');
                    $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
                $("#imageform").ajaxForm({
                            target: '#preview'
            }).submit();
            
                });
            }); 
    </script>

    <style>

    body
    {
    font-family:arial;
    }
    .preview
    {
    width:200px;
    border:solid 1px #dedede;
    padding:10px;
    }
    #preview
    {
    color:#cc0000;
    font-size:12px
    }

    </style>


    <body>

    <script language="JavaScript">
    <!--

    /***********************************************
    * Required field(s) validation v1.10- By NavSurf
    * Visit Nav Surf at http://navsurf.com
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    function formCheck(formobj){
        // Enter name of mandatory fields
        var fieldRequired = Array("title", "content","date");
        // Enter field description to appear in the dialog box
        var fieldDescription = Array("Title", "Content","Date");
        // dialog message
        var alertMsg = "Please complete the following fields:\n";
        
        var l_Msg = alertMsg.length;
        
        for (var i = 0; i < fieldRequired.length; i++){
            var obj = formobj.elements[fieldRequired[i]];
            if (obj){
                switch(obj.type){
                case "select-one":
                    if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
                        alertMsg += " - " + fieldDescription[i] + "\n";
                    }
                    break;
                case "select-multiple":
                    if (obj.selectedIndex == -1){
                        alertMsg += " - " + fieldDescription[i] + "\n";
                    }
                    break;
                case "text":
                case "textarea":
                    if (obj.value == "" || obj.value == null){
                        alertMsg += " - " + fieldDescription[i] + "\n";
                    }
                    break;
                default:
                }
                if (obj.type == undefined){
                    var blnchecked = false;
                    for (var j = 0; j < obj.length; j++){
                        if (obj[j].checked){
                            blnchecked = true;
                        }
                    }
                    if (!blnchecked){
                        alertMsg += " - " + fieldDescription[i] + "\n";
                    }
                }
            }
        }

        if (alertMsg.length == l_Msg){
            return true;
        }else{
            alert(alertMsg);
            return false;
        }
    }
    // -->
    </script>




    <div id="art-main">
        <div class="cleared reset-box"></div>
        <div class="art-sheet">
            <div class="art-sheet-tl"></div>
            <div class="art-sheet-tr"></div>
            <div class="art-sheet-bl"></div>
            <div class="art-sheet-br"></div>
            <div class="art-sheet-tc"></div>
            <div class="art-sheet-bc"></div>
            <div class="art-sheet-cl"></div>
            <div class="art-sheet-cr"></div>
            <div class="art-sheet-cc"></div>
            <div class="art-sheet-body">
                <div class="art-header">
                    <div class="art-header-clip">
                        <div class="art-header-png"></div>
                        <div class="art-header-jpeg"></div>
                    </div>
                    <div class="art-headerobject"></div>
                    <div class="art-logo">
                                     <h1 class="art-logo-name"></h1>
                                                     <h2 class="art-logo-text"></h2>
                                    </div>
                </div>
                <div class="cleared reset-box"></div>
    <div class="art-nav">
        <div class="art-nav-l"></div>
        <div class="art-nav-r"></div>
    <div class="art-nav-outer">
        <ul class="art-hmenu">
                 <li>
                <a href="news_en.php"><span class="l"></span><span class="r"></span><span class="t">Home</span></a>
            </li>
                     <li>
                <a href="news_add.php" class="active"><span class="l"></span><span class="r"></span><span class="t">Add News</span></a>
            </li>
                    
                    
                    <li>
                <a href="../../Arabic/admin/news_ar.php"><span class="l"></span><span class="r"></span><span class="t">عربي</span></a>
            </li>    
        </ul>
       
    </div>
    </div>
    <div class="cleared reset-box"></div>
    <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-content">
    <div class="art-post">
        <div class="art-post-body">
    <div class="art-post-inner art-article">
                                    <h2 class="art-postheader">
    <center>
    <img src=images/sparkcity.gif></center>
              Add News                      </h2>
                    <div class="cleared"></div>
                                    <div class="art-postcontent">
    <?php

    echo "<font color=black>";
    echo 
    "welcome" ." " $_SESSION['username'];
    echo 
    "</font>";
    echo 
    "&nbsp;<a href=logout.php>logout</a><p>";
    ?>

    <center>
    <table border="0" dir="ltr">
      <form method="post" action="insert.php" name="form1"  onsubmit="return formCheck(this);" enctype="multipart/form-data">

      <tr>
    <td>Title :</td>
        <td>
          <input type="text" name="title" id="title"  size="43" />
        </td>
    <td>
    <a href="#" class="hintanchor" onMouseover="showhint('Please Enter title.cannot exceed from 350 characters', this, event, '150px')">[?]</a>
    </td>
      </tr>
    <tr>
    <td> Upload your image </td>
    <td>
    <input type="file" name="photoimg" id="photoimg" />
    <div id='preview'>
    </div>
    </td>
    </tr>
      <tr>
    <td>Content :</td>
        <td><textarea name="content" id="content" cols="40" rows="4" ></textarea></td>
        <td>
    <a href="#" class="hintanchor" onMouseover="showhint('Please Enter content. cannot exceed from 1500 characters', this, event, '150px')">[?]</a>
    </td>
        
      </tr>
      

      <tr>
    <td>Date:</td>
        <td><div class="demo" >
        <input type="text" name="date" size="43" id="datepicker"/>
        </div>
        </td>
         <td>
    <a href="#" class="hintanchor" onMouseover="showhint('Please choose date from calender.', this, event, '150px')">[?]</a>
    </td>
      </tr>
    <tr>
      <td colspan="2">
    <center>
          <input  type="submit"  name="button1"  value="Save" /> 
         </center>
          </td>
          </tr>
    </form>              
    </table>
    </center>



                    </div>
                    <div class="cleared"></div>
                    </div>

            <div class="cleared"></div>




        </div>
    </div>

                          <div class="cleared"></div>
                        </div>
                    </div>
                </div>
                <div class="cleared"></div>
                <div class="art-footer">
                    <div class="art-footer-t"></div>
                    <div class="art-footer-l"></div>
                    <div class="art-footer-b"></div>
                    <div class="art-footer-r"></div>
                    <div class="art-footer-body">
                        <a href="#" class="art-rss-tag-icon" title="RSS"></a>
                            <a href="http://www.facebook.com/sparkcitysd" class="art-facebook-tag-icon" target="_blank" title="Facebook Page"></a>
                            <a href="http://www.youtube.com/sparkcitysd" class="art-youtube-tag-icon" target="_blank" title="Youtube Page"></a>
                                <div class="art-footer-text">
                                 
    <p><a href="news_en.php">Home</a>   | <a href="news_add.php">Add News</a> </p>
    <p>All Rights Reserved © 2012</p>

                                                                </div>
                        <div class="cleared"></div>
                    </div>
                </div>
                <div class="cleared"></div>
            </div>
        </div>
        <div class="cleared"></div>
       
        <div class="cleared"></div>
    </div>

    </body>
    </html>
    <?php
    }
    ?>
    I suggest the problem from div & style please help me to solve this problem
    The simplest way to do an upload like this is to use an iframe. You load up the uploading script into the iframe and handle the request there. You should then be able to use jquery from inside the iframe to inform the parent window the upload is completed.

    It's too complicated to explain in a forum thread really, but if you Google it you may be able to solve the issue.
    Providing quality professional Mobile Applications, Web Applications and Website Development Services.


  •  

    Posting Permissions

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