Advertise Here

Author Topic: [CODE] Draggable Calculator! [Qub1]  (Read 2431 times)

0 Members and 1 Guest are viewing this topic.

Offline Qub1

  • SMF For Free Full Member
  • *
  • Posts: 149
    • View Profile
    • QUB1

  • Total Badges: 16
    Badges: (View All)
    Topic Starter Combination Level 3 Level 2 Level 1
[CODE] Draggable Calculator! [Qub1]
« on: March 30, 2008, 02:19:01 pm »
Forum Url: http://qub1test.smfforfree4.com
Ok, all this code does is place a Draggable calculator at your site...
Oh, and heres a note for Simply Sibyl:
I've found a solution! With your draggable smileys, you needed to upload 2 js files, but i found a solution so you don't have to do so! Just see the code...
Ok, so this is how it looks:

Previeuw (The calculator is at the bottom, and it's draggable)

Now, paste this in your headers:
Code: [Select]
<script language="JavaScript1.2">
     var ie=document.all
     var ns6=document.getElementById&&!document.all

     var dragapproved=false
     var z,x,y

     function move(e)
     {
          if (dragapproved)
          {
               z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
               z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
               return false
          }
     }

     function drags(e)
     {
          if (!ie&&!ns6)
               return
          var firedobj=ns6? e.target : event.srcElement
          var topelement=ns6? "HTML" : "BODY"

          while (firedobj.tagName!=topelement&&firedobj.className!="drag")
          {
               firedobj=ns6? firedobj.parentNode : firedobj.parentElement
          }

          if (firedobj.className=="drag")
          {
               dragapproved=true
               z=firedobj
               temp1=parseInt(z.style.left+0)
               temp2=parseInt(z.style.top+0)
               x=ns6? e.clientX: event.clientX
               y=ns6? e.clientY: event.clientY
               document.onmousemove=move
               return false
          }
     }

     document.onmousedown=drags
     document.onmouseup=new Function("dragapproved=false")
   </script>


<style type='text/css'>.drag{position:relative;cursor:crosshair}</style>

And this in your Footers:
Code: [Select]
<div id="calc" class="drag">
  <form name="calculator">
   <table border="3" cellpadding="0" bordercolor="black" bgcolor="#CCFFCC" cellspacing="1" width="150">
    <tr>
     <td>
      <input type="text" size="20" length="19" value="" name="ans" style="background:black;color:lime;">
     </td>
    </tr>
   </table>

   <table border="3" cellpadding="2" bordercolor="black" cellspacing="2" width="150" bgcolor="#CCFFCC">
    <tr>
     <td align="center">
      <input type="button" value="  7  " name="seven" onMouseDown="document.calculator.ans.value+='7'">
     </td>
     <td align="center">
      <input type="button" value="  8  " name="eight" onClick="document.calculator.ans.value+='8'">
     </td>
     <td align="center">
      <input type="button" value="  9  " name="nine" onClick="document.calculator.ans.value+='9'">
     </td>
     <td align="center">
      <input type="button" value="  /  " name="divide" onClick="document.calculator.ans.value+='/'">
     </td>
    </tr>
    <tr>
     <td align="center">
      <input type="button" value="  4  " name="four" onClick="document.calculator.ans.value+='4'">
     </td>
     <td align="center">
      <input type="button" value="  5  " name="five" onClick="document.calculator.ans.value+='5'">
     </td>
     <td align="center">
      <input type="button" value="  6  " name="six" onClick="document.calculator.ans.value+='6'">
     </td>
     <td align="center">
      <input type="button" value="  *  " name="multiply" onClick="document.calculator.ans.value+='*'">
     </td>
    </tr>
    <tr>
     <td align="center">
      <input type="button" value="  1  " name="one" onClick="document.calculator.ans.value+='1'">
     </td>
     <td align="center">
      <input type="button" value="  2  " name="two" onClick="document.calculator.ans.value+='2'">
     </td>
     <td align="center">
      <input type="button" value="  3  " name="three" onClick="document.calculator.ans.value+='3'">
     </td>
     <td align="center">
      <input type="button" value="  -  " name="subtract" onClick="document.calculator.ans.value+='-'">
     </td>
    </tr>
    <tr>
     <td align="center">
      <input type="button" value="  C  " name="clear" onClick="document.calculator.ans.value=''">
     </td>
     <td align="center">
      <input type="button" value="  0  " name="zero" onClick="document.calculator.ans.value+='0'">
     </td>
     <td align="center">
      <input type="button" value="  =  " name="equal" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
     </td>
     <td align="center">
      <input type="button" value="  +  " name="add" onClick="document.calculator.ans.value+='+'">
     </td>
    </tr>
   </table>
  </form>
  </div>

Ok, that was it (not editable, it's a wonder! lol :P)!
- Qub1

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [CODE] Draggable Calculator! [Qub1]
« Reply #1 on: March 30, 2008, 03:57:45 pm »

Oh, and heres a note for Simply Sibyl:
I've found a solution! With your draggable smileys, you needed to upload 2 js files, but i found a solution so you don't have to do so! Just see the code...

Yep , already knew that.  I just wanted to post the links and not the entire code as many people have tons of code in their header/footers already so I figured I'ld try to make it short/sweet  ;)      Figured when I had time this week Ild look into a place to host both of them, and if that doesnt work out Ill just post the entire code(s) and they can do it that way.

Offline Coffeenole

  • SMF For Free Sponsors
  • *
  • Posts: 50
    • View Profile
    • Coffeenole.com

  • Total Badges: 13
    Badges: (View All)
    Topic Starter Combination Level 3 Level 2 Level 1
Re: [CODE] Draggable Calculator! [Qub1]
« Reply #2 on: March 30, 2008, 04:31:18 pm »
The calculator code is very good and can be helpful; the only problem that I had with it is that I was not able to left-click and scroll down on my forum (using the right side bar), I would have to use the scroll wheel on my mouse to navigate up/down. This would be difficult if you have an older mouse without a scroll wheel.

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [CODE] Draggable Calculator! [Qub1]
« Reply #3 on: March 30, 2008, 04:35:01 pm »
Same issue for me using IE7.0.   
Scroll bar wont' work at all..  have to use my middle mouse wheel to scroll the forum.     

Offline Qub1

  • SMF For Free Full Member
  • *
  • Posts: 149
    • View Profile
    • QUB1

  • Total Badges: 16
    Badges: (View All)
    Topic Starter Combination Level 3 Level 2 Level 1
Re: [CODE] Draggable Calculator! [Qub1]
« Reply #4 on: March 31, 2008, 12:42:36 am »
Oops, i'll try to fix it!

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [CODE] Draggable Calculator! [Qub1]
« Reply #5 on: March 31, 2008, 12:44:03 am »
Oops, i'll try to fix it!

thanks Qub.. side note..  full code will not work with the draggable smilieys... very odd, it should

Offline Qub1

  • SMF For Free Full Member
  • *
  • Posts: 149
    • View Profile
    • QUB1

  • Total Badges: 16
    Badges: (View All)
    Topic Starter Combination Level 3 Level 2 Level 1
Re: [CODE] Draggable Calculator! [Qub1]
« Reply #6 on: March 31, 2008, 05:07:57 am »
yeah? Oh, yeah i tryed it and it didn't work! ? Strange...

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [CODE] Draggable Calculator! [Qub1]
« Reply #7 on: March 31, 2008, 10:02:42 am »
yeah? Oh, yeah i tryed it and it didn't work! ? Strange...

Yep really.   I found the new links at dev.jquery and downloaded them again.   Tried doing the code itself to no avail.   Ive removed the draggable smileys from the index until I can find another way to do this.   It stopped working on my own forum sometime yesterday and I got a bandwidth filled message with my links.  Ive not posted them anyplace so methinks people have been grabbing them from my source code so now it wont work for me to post it as a demo  (oh well)

 

Related Topics

  Subject / Started by Replies Last post
8 Replies
3782 Views
Last post March 20, 2009, 04:49:21 pm
by - Lawrence -
0 Replies
1339 Views
Last post June 16, 2008, 12:58:18 am
by Supernovadelta
0 Replies
1045 Views
Last post August 07, 2009, 01:56:14 am
by DzinestaR
0 Replies
1215 Views
Last post August 23, 2009, 12:24:57 am
by MMFWCL
0 Replies
2523 Views
Last post January 31, 2010, 09:03:01 am
by hackerscorner