Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

A simple html+jquery scripts

I want to have an html with fully streached background (scroll down if the image is too big). In addition to it I want the following:

  1. When clicking on the background image wie in a form (the form's block is movable, the form is not in a new window).
  2. The form will have 3 text field and a grayed out time stamp field. Below those fields, a submit button. The fields should support right to left languages. .
  3. When clicking on submit, the form will close and a tooltip with the form's fields will be saved on the position of the mouse's pointer.
    1. Hovering over the tooltip from step 3, will present a block with the fields from step 2.
    2. I want to be able to do the above several time. Refrashing the page will make all the tooltips dissappear. .
User Gravatar

Chegov

Posted Oct 20 2013 22:36 UTC

$50


  • Assigned To guyisra
  • Solved
  • jquery
    html
  • 1535 Views

11 Replies


can you explain step 1?

do you want the form to appear on click in the location of the click?

User Gravatar

guyisra

Posted Oct 20 2013 23:03 UTC

So.. there it is..

<!doctype html>

<head>
  <meta charset="utf-8" />
  <title>Where is My Cheese?</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style>

    .back img{
        width: 100%;
        left: 0;
        top: 0;
        position: absolute;
        z-index: -1;

}
        .draggable { 
        width: 200px;
        }
.float_form{
    padding: 15px;
}

form{
    text-align: center;
}
.submit{
        padding: 10px;
    background-color: rgb(81, 207, 64);
    display: inline-block;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    }

    .bubble 
{
position: relative;
width: 130px;
height: 60px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

.bubble .content{
    visibility: hidden;
}

.bubble:hover .content{
    visibility: visible;
}
.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -15px;
left: 50px;
}
  </style>
  <script>

  $(document).ready(function(){



function setTime(){
        var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
$(".time").val(hour + ":" + min +":" + sec);
}


setInterval(setTime, 1000);

    var id = 0;
  var form = '<div class="draggable float_form ui-widget-content"><form class=""><input type="text"  id="field1" dir="auto"><input type="text" id="field2" dir="auto"><input type="text"  id="field3" dir="auto"><input type="text" name="time"  id="field4" class="time" disabled><div class="submit">Submit</div></form></div>';

    $( ".draggable" ).draggable();

    $(document).click(function (e) { 
        var posX = e.pageX,
            posY = e.pageY;
        var f_id = "form" + id;
        id++;
           var $t = $(form);
          $res= $t.attr("id",f_id);
        $("body").append( $res );
        $( ".draggable" ).draggable();
        $("#"+f_id).css("left", posX +"px").css("top", posY +"px");
        $res.css("position", "absolute");

    });

    $(document).on("click", ".draggable", function(e){
        e.stopPropagation();
    })

    $(document).on("click",".submit", function(){

        var $form = $(this).closest(".float_form");
        var id = $form.attr("id").replace("form","bubble");
        var posX = $form.offset().left;
        var posY = $form.offset().top;

        var field1 = $form.find("#field1").val();
        var field2 = $form.find("#field2").val();
        var field3 = $form.find("#field3").val();
        var field4 = $form.find("#field4").val();

        $("body").append("<div class='bubble' id=" + id + "><div class='content'></div> </div>");
        $("#" + id +" .content").text(field1 + ","+field2 + "," + field3 + "@" +field4);
        $("#" + id).css({"position": "absolute", "top": posY - 60 -15 ,"left": posX -65});
        $form.remove();


    });

  });


  </script>
</head>
<body>
 <div class="back">
    <img src='http://img.gawkerassets.com/img/17tt4whmotlj2jpg/original.jpg' />


 </div>

</body>
</html>

that was fun, see it here http://jsfiddle.net/apS5b/embedded/result/

User Gravatar

guyisra

Posted Oct 21 2013 0:38 UTC

Hi

Step 1: i want to be able to move the form that has popped up. Tooltip image & size should be smaller. In adittion to it, i want the information submitted on the form to b saved on a local txt file.

Thanks

User Gravatar

Chegov

Posted Oct 21 2013 1:41 UTC

Hey,

the form is draggable, which browser do you use?

as for styling, change .bubble to this

    .bubble {
position: relative;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

note that saving to a file wasn't in the original question...

User Gravatar

guyisra

Posted Oct 21 2013 1:46 UTC

Ok, Ii will have a different browser to test this in about 6 hours from now. I will open another ticket for saving the data from the submitted form to a delimated txt file

Thanks alot

User Gravatar

Chegov

Posted Oct 21 2013 3:19 UTC

ok I added the file saving mechanism to a button in the top of the page

<!doctype html>

<head>
  <meta charset="utf-8" />
  <title>Where is My Cheese?</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style>

    .back img{
        width: 100%;
        left: 0;
        top: 0;
        position: absolute;
        z-index: -1;

}
        .draggable { 
        width: 200px;
        }
.float_form{
    padding: 15px;
}

form{
    text-align: center;
}
.submit{
        padding: 10px;
    background-color: rgb(81, 207, 64);
    display: inline-block;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    }

    .bubble {
position: relative;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

.bubble .content{
    visibility: hidden;
}

.bubble:hover .content{
    visibility: visible;
}
.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -15px;
left: 50px;
}

.save{
  padding: 5px;
  color: white;
  border: 1px solid;
  display: inline-block;
}
  </style>
  <script>

  $(document).ready(function(){


function saveToFile(){

var csvContent = "data:text/txt;charset=utf-8,";
 var $data = $(".bubble");
$data.each(function(index){

   //this part parses the bubbles to put in the file. change the following line in case bubbles text change
      var fields = $(this).find(".content").text().replace("@",",");
   dataString = fields
   csvContent += dataString+ "n" ;

}); 
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.txt");

link.click(); 
}

function setTime(){
        var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
$(".time").val(hour + ":" + min +":" + sec);
}


setInterval(setTime, 1000);

    var id = 0;
  var form = '<div class="draggable float_form ui-widget-content"><form class=""><input type="text"  id="field1" dir="auto"><input type="text" id="field2" dir="auto"><input type="text"  id="field3" dir="auto"><input type="text" name="time"  id="field4" class="time" disabled><div class="submit">Submit</div></form></div>';

    $( ".draggable" ).draggable();

    $(document).click(function (e) { 
        var posX = e.pageX,
            posY = e.pageY;
        var f_id = "form" + id;
        id++;
           var $t = $(form);
          $res= $t.attr("id",f_id);
        $("body").append( $res );
        $( ".draggable" ).draggable();
        $("#"+f_id).css("left", posX +"px").css("top", posY +"px");
        $res.css("position", "absolute");

    });

    $(document).on("click", ".draggable", function(e){
        e.stopPropagation();
    })

    $(".save").click(function(e){
        e.stopPropagation();
      saveToFile();
    })

    $(document).on("click",".submit", function(){

        var $form = $(this).closest(".float_form");
        var id = $form.attr("id").replace("form","bubble");
        var posX = $form.offset().left;
        var posY = $form.offset().top;

        var field1 = $form.find("#field1").val();
        var field2 = $form.find("#field2").val();
        var field3 = $form.find("#field3").val();
        var field4 = $form.find("#field4").val();

        $("body").append("<div class='bubble' id=" + id + "><div class='content'></div> </div>");
        $("#" + id +" .content").text(field1 + ","+field2 + "," + field3 + "@" +field4);
        $("#" + id).css({"position": "absolute", "top": posY - 60 -15 ,"left": posX -65});
        $form.remove();


    });

  });


  </script>
</head>
<body>
 <div class="back">
    <img src='http://img.gawkerassets.com/img/17tt4whmotlj2jpg/original.jpg' />


 </div>
 <div class="save" >save</div>

</body>
</html>
User Gravatar

guyisra

Posted Oct 21 2013 3:44 UTC

Ok ive tested it in google chrome and everything works great except 1 thing : clicking on a place on the screen and then dragging the form and submitting, the tooltip will not be pinned to the original position

thanks

User Gravatar

Chegov

Posted Oct 21 2013 12:21 UTC

oh you want the original position? I thought you wanted the position on submit..

hold on, I'll fix it for you

User Gravatar

guyisra

Posted Oct 21 2013 12:25 UTC

here you go

<!doctype html>

<head>
  <meta charset="utf-8" />
  <title>Where is My Cheese?</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style>

    .back img{
        width: 100%;
        left: 0;
        top: 0;
        position: absolute;
        z-index: -1;

}
        .draggable { 
        width: 200px;
        }
.float_form{
    padding: 15px;
}

form{
    text-align: center;
}
.submit{
        padding: 10px;
    background-color: rgb(81, 207, 64);
    display: inline-block;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    }

    .bubble {
position: relative;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

.bubble .content{
    visibility: hidden;
}

.bubble:hover .content{
    visibility: visible;
}
.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -15px;
left: 50px;
}

.save{
  padding: 5px;
  color: white;
  border: 1px solid;
  display: inline-block;
}
  </style>
  <script>

  $(document).ready(function(){


function saveToFile(){

var csvContent = "data:text/txt;charset=utf-8,";
 var $data = $(".bubble");
$data.each(function(index){

   //this part parses the bubbles to put in the file. change the following line in case bubbles text change
      var fields = $(this).find(".content").text().replace("@",",");
   dataString = fields
   csvContent += dataString+ "n" ;

}); 
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.txt");

link.click(); 
}

function setTime(){
        var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
$(".time").val(hour + ":" + min +":" + sec);
}


setInterval(setTime, 1000);

    var id = 0;
  var form = '<div class="draggable float_form ui-widget-content"><form class=""><input type="text"  id="field1" dir="auto"><input type="text" id="field2" dir="auto"><input type="text"  id="field3" dir="auto"><input type="text" name="time"  id="field4" class="time" disabled><div class="submit">Submit</div></form></div>';

    $( ".draggable" ).draggable();

    $(document).click(function (e) { 
        var posX = e.pageX,
            posY = e.pageY;
        var f_id = "form" + id;
        id++;
           var $t = $(form);
          $res= $t.attr("id",f_id);
        $("body").append( $res );
        $( ".draggable" ).draggable();
        $("#"+f_id).css("left", posX +"px").css("top", posY +"px");
        $("#"+f_id).data("left",posX ).data("top",posY  );

        $res.css("position", "absolute");

    });

    $(document).on("click", ".draggable", function(e){
        e.stopPropagation();
    })

    $(".save").click(function(e){
        e.stopPropagation();
      saveToFile();
    })

    $(document).on("click",".submit", function(){

        var $form = $(this).closest(".float_form");
        var id = $form.attr("id").replace("form","bubble");
        var posX = $form.data("left");
        var posY = $form.data("top");

        var field1 = $form.find("#field1").val();
        var field2 = $form.find("#field2").val();
        var field3 = $form.find("#field3").val();
        var field4 = $form.find("#field4").val();

        $("body").append("<div class='bubble' id=" + id + "><div class='content'></div> </div>");
        $("#" + id +" .content").text(field1 + ","+field2 + "," + field3 + "@" +field4);
        $("#" + id).css({"position": "absolute", "top": posY ,"left": posX});
      var newPosX = parseInt($("#" + id).css("left")) - 65;
      var newPosY = parseInt($("#" + id).css("top")) - $("#" + id).height()-15;
      $("#" + id).css({"left": newPosX});
       $("#" + id).css({"top": newPosY});
        $form.remove();


    });

  });


  </script>
</head>
<body>
 <div class="back">
    <img src='http://img.gawkerassets.com/img/17tt4whmotlj2jpg/original.jpg' />


 </div>
 <div class="save" >save</div>

</body>
</html>
User Gravatar

guyisra

Posted Oct 21 2013 13:02 UTC

Solution

This didn't solve your task? Get your own custom solution.

Hi,

I havnt been able to change the size of the tooltip to something smaller. In addition to it, when I click on the background image, I want the form that pops up to be bigger - how can I change its size ? I would also like to display a text next to the fields of the form, where should I change it to the desired text ?

thanks

User Gravatar

Chegov

Posted Oct 28 2013 3:56 UTC

Hey

You can do that with css

for the tootip just add

.bubble{
font-size:8px;
}

and for the form size

form{
width: 300px;
height: 300px;
}
User Gravatar

guyisra

Posted Oct 28 2013 4:48 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions