Question

我有类似facebook墙的情况。在我的情况下，用户代替post输入URL。

最初它看起来像这样： Initial view

我有文本框代替文本区域。

现在，当用户获取光标时，它将变为：

After cursur taken into text area

问题在于，当用户将光标放入文本框时，我如何展开文本框并在facebook中显示分享按钮。

当用户将内容增加到textarea时，包含按钮的下侧div会自动向下移动。

在我输入网址的情况下，我会在文本框下方显示网址预览。预览大小各不相同那么我怎么能创建类似的案例展示它下面的按钮会自动向下移动。

我的初步观点：

Initial view

当用户将光标输入文本框时，它将变为：

enter image description here

我手动将按钮放在一定距离。我希望他们按照预览尺寸自动重新定位。

当用户输入url时，它看起来像这样：

after url entered

我想像facebook那样在文本框下方显示按钮。当根据预览尺寸输入网址时，按钮应向下移动。

我知道如何实现这一目标？

按钮是css按钮，放入div。在PHP中工作。

源代码：

http://codetidy.com/6983/

<html>
   <head>
    <html xmlns:fb="http://ogp.me/ns/fb#">

    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
     <link href="content/rateit.css" rel="stylesheet" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <link href="content/bigstars.css" rel="stylesheet" type="text/css">
         <style>
//css for button

         label {
        color: #B90000; /* makes the text-black */
}
         label2 {
        color: #3b5999; /* makes the text-black */
}

      </style>

  <link rel="stylesheet" class="cssStatics" type="text/css" href="css/stylesheet.css" />
        <link rel="stylesheet" class="cssButtons" type="text/css" href="css/linkPreview.css" />
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript" src="js/linkPreview.js" ></script>
        <script>
            $(document).ready(function() {
                $('.linkPreview').linkPreview();
                // setting max number of images $('.linkPreview').linkPreview({imageQuantity: "put here the number"});
                // e.g. $('.linkPreview').linkPreview({imageQuantity: 15});
            });
        </script>

   </head>
   <body style="height: 560px">

       <div>
         <img alt="" src= "3.png" style="top: 15px; right: 689px; position: absolute; height: 91px; width: 417px"/>
      </div>
      <div >

      <div style="top: 20; left:20"> <img id="i1" src="">      </img>
       </div>


     <div class="rateit bigstars" id="rateit99"  style="z-index: 1; display:none; left: 45px; top: 45px;" data-rateit-starwidth="32" data-rateit-starheight="32">

         <label color="red" style="z-index: 1;  left: 600px; top: 180px;" onclick="alert($('#rateit99').rateit('value'))">
           <b>
             Rate Me 
           </b>
         </label>
       </div>

         <form action="data.php" method="POST" onsubmit="showUser(this, event)">
       <!--     <div style="z-index: 1; left: 420px; top: 40px; position: absolute; margin-top: 0px">           
               <label><b>Enter URL:</b></label><br/>
            </div> -->

        <div style="  width: 15%;    margin: auto;    margin-top: -10px;    text-decoration: none;    text-shadow: 0 1px 0 #fff;    padding: 10px 20px;    text-align: justify; ">
            <div class="linkPreview" style="z-index: 2;">
                <div id="previewLoading"></div>
                <div style="float: left;">
                    <div style="left: 420px; top: 40px; position: absolute; margin-top: 0px">

                    <input type="text" id="text" name="sent" contenteditable="true"  style=" text-align: left; height: 30px; width:512px; " placeholder="Enter URL ..."/></input>

                    <div id="postPreview" style="display:none"></div>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <div style="left: 420px; top: 70px; position: absolute; margin-top: 0px">
                <div id="preview">
                    <div id="previewImages">
                        <div id="previewImage"><img src="img/loader.gif" style="margin-left: 43%; margin-top: 39%;" ></img>
                        </div>
                        <input type="hidden" id="photoNumber" value="0" />
                    </div>
                    <div id="previewContent">
                        <div id="closePreview" title="Remove" ></div>
                        <div id="previewTitle"></div>
                        <div id="previewUrl"></div>
                        <div id="previewDescription"></div>
                        <div id="hiddenDescription"></div>
                        <div id="previewButtons" >
                            <div id="previewPreviousImg" class="buttonLeftDeactive" ></div><div id="previewNextImg" class="buttonRightDeactive"  ></div>
                            <div class="photoNumbers" ></div>
                            <div class="chooseThumbnail">
                                Choose a thumbnail
                            </div>
                        </div>
                        <input type="checkbox" id="noThumb" class="noThumbCb" />
                        <div class="nT"  >
                            <span id="noThumbDiv" >No thumbnail</span>
                        </div>
                    </div>
                    <div style="clear: both"></div>
                </div>
                </div>
                <div style="clear: both"></div>

                <div class="previewPostedList"></div>
            </div>
        </div>

       <div  style="z-index: 1; left: 420px; top: 280px; position: absolute; margin-top: 0px" onclick="myFunction(document.getElementById('text').value)" >

    <button onclick="show2(); myfunc();" id="b1" >
      Get Sentiment 
    </button>

  </div>
  <div id="d1" height="40" width="60" name="sent2"  style=" border:1px solid black; z-index: 1; left: 950px; top:80px; position: absolute; margin-top: 0px" placeholder="Preview title" >
         </div>
         <div id="d2" height="40"  style="border:1px solid black; z-index: 1; left: 950px; top:100px; position: absolute; margin-top: 0px; min-width:60; overflow:auto" placeholder="Preview Url">
         </div>
         <div id="d3" height="80"  border="1" style="border:1px solid black; z-index: 1; left: 950px; top:140px; position: absolute; margin-top: 0px" placeholder="Preview Desciption">
         </div>
         </form>      

       <div style="z-index: 1; left: 720px; top:280px; position: absolute; margin-top: 0px">
   <button onclick="makeAjaxCall(); return false;" value="View Graph" >
    View Graph   
  </button>
</div>

</div>
<h4>
  <div id="txtHint" align="justify" style="z-index: 1; display:none; color:#C7F0FF; left: 35px; top: 260px; padding: 20px; position: absolute; border:1px; margin-top: 0px; width:300px;height:350px;overflow:auto; -webkit-border-radius: 12px; -moz-border-radius: 7px; border-radius:7px; background: -webkit-gradient(linear, left top, left bottom,color-stop(100%, #F70247), color-stop(150%, white), color-stop(100%, #D7E9F5)); background: -moz-linear-gradient(top, #F70247 0%, #F70247 10%, #F70247 130%); ">

  </div>

</h4>

<script src="content/jquery.rateit.js" type="text/javascript"></script>
</body>
</html>

像facebook墙一样创建可扩展的div

0 个答案: