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
    Regular Coder
    Join Date
    Jan 2008
    Posts
    130
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how the hell they did this ?

    hi
    i need to build somekind of book editor when i was browsing the web
    i found only one place that doing it here :
    http://www.tikatok.com/starters/createYourOwnBook#

    i don need to do it fancy as they did it but something like this ..
    how the hell they did this ?

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Mostly, this is how they did this:
    Code:
    <script type="text/javascript">
    var imageBase = '/images/';
    var loadData = eval(({"width":8.5,"height":11,"pages":[{"type":1,"pos":1,"moveable":false,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"place_image","left":0,"top":0,"width":1,"height":1,"lock":0,"content":"Click here to add the cover image"},{"type":"text_title","content":"Create Your Own Book","color":"rgb(0,0,0)","fontSize":0.037878787878788,"fontStyle":"normal","fontWeight":"normal","textAlign":"right","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.090909090909091,"lock":0},{"type":"text_author","content":"by You","color":"rgb(0,0,0)","fontSize":0.02020202020202,"fontStyle":"normal","fontWeight":"normal","textAlign":"right","left":0.11764705882353,"top":0.75,"width":0.76470588235294,"height":0.1,"lock":0}],"hint":"This is the front cover of your book. You can edit the title or click on the background to add an image.","lock":0},{"type":1,"pos":2,"moveable":false,"editable":false,"bg":"rgb(255,255,255)","elements":[],"hint":"This is the back side of the cover. It's always a white page.","lock":2},{"type":1,"pos":3,"moveable":false,"editable":false,"bg":"rgb(255,255,255)","elements":[{"left":0.11764705882353,"top":0.22727272727273,"width":0.76470588235294,"height":0.68181818181818,"type":"locked_text","content":"Create Your Own Book<br\/><br\/><div style=\"font-size:53%\">Your Name<\/div>","color":"rgb(0,0,0)","fontSize":0.056818181818182,"fontStyle":"normal","fontWeight":"bold","textAlign":"right","asIs":true}],"hint":"This is the title page and cannot be removed. Click the page to change the book title.","lock":0,"isTitle":true},{"type":1,"pos":4,"moveable":false,"editable":false,"bg":"rgb(255,255,255)","elements":[{"left":0.11764705882353,"top":0.63636363636364,"width":0.64705882352941,"height":0.22727272727273,"type":"locked_text","content":"Text and graphics created by author Copyright &copy; 2010 you. All rights reserved.\n\nLayout design, book template and other graphic elements Copyright &copy; Tikatok LLC. All rights reserved.","color":"rgb(0,0,0)","fontSize":0.015151515151515,"fontStyle":"normal","fontWeight":"normal","textAlign":"left"}],"hint":"This is the copyright page. Don't put anything here. The page is automatically added by Tikatok.","lock":2,"isCopyright":true},{"type":3,"pos":1,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"text","content":"This book is dedicated to my friends and family","color":"rgb(0,0,0)","fontSize":0.04040404040404,"fontStyle":"normal","fontWeight":"normal","textAlign":"center","left":0.25,"top":0.25,"width":0.5,"height":0.4,"lock":0}],"hint":"The dedication page is where you can add a message to someone important to you, or someone you couldn't have written the book without.","lock":0},{"type":3,"pos":2,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"text","content":"","color":"rgb(0,0,0)","fontSize":0.03030303030303,"fontStyle":"normal","fontWeight":"normal","textAlign":"left","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.5,"lock":0}],"hint":"Use the beginning of the story to introduce the characters and setting. Who is the story about? Where and when does the story take place?","lock":0},{"type":3,"pos":3,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"place_image","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.5,"lock":0,"content":"Click here to add an image"}],"hint":"The first image should pull the reader into the world of the story. You could draw the setting, the main character, or both.","lock":0},{"type":3,"pos":4,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"text","content":"","color":"rgb(0,0,0)","fontSize":0.03030303030303,"fontStyle":"normal","fontWeight":"normal","textAlign":"left","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.5,"lock":0}],"hint":"Now you really get the story started by introducing a problem: a task that the main character must finish, or a thing he or she wants but can't have, or maybe a villain who the hero must stop.","lock":0},{"type":3,"pos":5,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"place_image","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.5,"lock":0,"content":"Click here to add an image"}],"hint":"With this image, try to show how difficult the main character's task is. Make it look almost impossible!","lock":0},{"type":3,"pos":6,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"text","content":"","color":"rgb(0,0,0)","fontSize":0.03030303030303,"fontStyle":"normal","fontWeight":"normal","textAlign":"left","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.5,"lock":0}],"hint":"Now we are in the middle of the story. Is the character any closer to the goal? What new things are blocking the way, and how will the hero overcome them? Maybe another character can offer help?","lock":0},{"type":3,"pos":7,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"place_image","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.5,"lock":0,"content":"Click here to add an image"}],"hint":"Are there any new characters or new places in your story? You can draw them here. If not, draw whatever you think is most important.","lock":0},{"type":3,"pos":8,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"text","content":"","color":"rgb(0,0,0)","fontSize":0.03030303030303,"fontStyle":"normal","fontWeight":"normal","textAlign":"left","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.5,"lock":0}],"hint":"We're getting close to the end of the story! Will your character win? How will he or she do it? It's all up to you!","lock":0},{"type":3,"pos":9,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"place_image","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.5,"lock":0,"content":"Click here to add an image"}],"hint":"Draw what happens next.","lock":0},{"type":9999,"pos":11,"moveable":false,"editable":false,"bg":"rgb(255,255,255)","elements":[{"left":0.1,"top":0.3,"width":0.8,"height":0.4,"type":"locked_text","content":"The back cover is reserved for your “About the Author” information. Parents and adults will be given the chance to add an author bio and photo when the book is purchased.","fontSize":0.04,"color":"rgb(98, 98, 108)","fontWeight":"normal","fontStyle":"normal","textAlign":"center"}],"hint":"","lock":0}],"book":"create-your-own-book","title":"Create Your Own Book","starter":58,"description":"Create a book using the hints provided at the bottom of the page.","sizeId":1,"ssid":-1,"tags":"","others":"","perm_lock":false,"perm_visibility":6,"perm_comment":6,"perm_print":6,"age_group":0}));
    var saveURL = '/book/saveRemote';
    var uploadURL = 'http://www.tikatok.com/cgi-bin/upload.pl';
    var uploadErrorURL = 'http://www.tikatok.com/studio/getUploadError/sid/';
    var uploaderURL = '/flash/uploader.swf';
    var tokenURL = 'http://www.tikatok.com/studio/getUploadToken';
    var remoteLoginURL = 'http://www.tikatok.com/user/loginRemote';
    var sparkGalleryId = false;
    var libUpdateURL = '/studio/libraryRemote';
    var previewURL = '/book/printPreview';
    var returnURL = '/create';
    var friendsURL = '/friends/friendsRemote';
    var searchURL = 'http://www.tikatok.com/studio/searchCommunityRemote';
    var publishURL = '/buy/book';
    var shareURL = '/book/alertParent';
    
    </script>
    <script type="text/javascript" src="/js/swfobject.js"></script>
    <script type="text/javascript" src="/js/prototype.js"></script>
    <script type="text/javascript" src="/js/error.js"></script>
    <script type="text/javascript" src="/js/scriptaculous.js"></script>
    <script type="text/javascript" src="/js/pageedit2.js"></script>
    Then they have some CGI file(s) handle the results from this editor. Copy these files and the base page's HTML and you can get a local copy running in no time (for the front end, that is).
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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