942,526 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Is this possible with javascript?
Ad:
Permalink
Apr 29th, 2010
0

Is this possible with javascript?

Expand Post »
So I have being asked to create something in JavaScript and was told what they want it to be like, since I am beginning JS amongst other web development languages. Anyway have a look at the image and let me know if it is possible to do with JS or should it be done with something else?

- This is attached in case this doesn't load

I had initially thought of doing it with flash, but since it should allow a user to drag and drop a pic in and then add text. So it would look like an article you would see in a newspaper or similar to that of an newspaper article. Below is the source for the image above.

html Syntax (Toggle Plain Text)
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  2.  
  3. <html  lang="en-AU-JCU"> 
  4.  <head>
  5.   <title>Blackboard Learn</title>
  6.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.   <meta id="request-method" name="request-method" content="GET">
  8.   <meta name="author" content="Blackboard">
  9.   <meta name="copyright" content="&copy; 1997-2010 Blackboard Inc. All Rights Reserved. U.S. Patent No. 6,988,138. Additional Patents Pending.">
  10.   <meta name="keywords" content="Blackboard">
  11.  
  12.   <meta http-equiv="Pragma" content="no-cache">
  13.   <meta http-equiv="Expires" content="-1">
  14.   <link rel="SHORTCUT ICON" type="image/x-icon" href="/ui/bb-icon2.ico">
  15.       <script type="text/javascript" src="/javascript/i18n.js?v=9.0.505.15"></script>
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22.          <script type="text/javascript" src="/javascript/prototype.js?v=9.0.505.15"></script>
  23.     <script type="text/javascript" src="/javascript/fastinit.js?v=9.0.505.15"></script>
  24.     <script type="text/javascript" src="/javascript/ngui/page.js?v=9.0.505.15"></script>
  25.  
  26.     <script type="text/javascript" src="/javascript/date.js?v=9.0.505.15"></script>
  27.     <script type="text/javascript" src="/webapps/gradebook/js/gradebookgrid.js?v=9.0.505.15"></script>
  28.     <script type="text/javascript" src="/webapps/gradebook/js/gradebookgridmodel.js?v=9.0.505.15"></script>
  29.            <script type="text/javascript">page.bundle.addKey('hidden.link.close.form','End of form. Click to return to associated item.');page.bundle.addKey('validation.date_past','validation.date_past');page.bundle.addKey('hidden.link.close.menu','End of menu. Click to return to associated item.');page.bundle.addKey('inlineconfirmation.close','Close');page.bundle.addKey('inlineconfirmation.refresh','Refresh');page.bundle.addKey('number_format.decimal_point','.');</script>
  30.       <script type="text/javascript">
  31.   var isFramesetResizable = false;
  32.   function toggleFramesetResize()
  33.   {
  34.     if ( isFramesetResizable )
  35.     {
  36.       var f = $('bbFrameset');
  37.       var x = f.getAttribute('rows');
  38.       f.setAttribute('border','0');
  39.       f.setAttribute('frameSpacing','0');
  40.       f.setAttribute('frameBorder','0');
  41.       f.down('frame',0).setAttribute('frameBorder','0');
  42.       f.down('frame',0).setAttribute('frameSpacing',0);
  43.       f.down('frame',0).setAttribute('border',0);
  44.       f.down('frame',1).setAttribute('frameBorder','0');
  45.       f.down('frame',1).setAttribute('frameSpacing',0);
  46.       f.down('frame',1).setAttribute('border',0);
  47.       f.setAttribute('rows','100,*');
  48.       f.setAttribute('rows',x);
  49.       isFramesetResizable = false;
  50.     }
  51.     else
  52.     {
  53.       var f = $('bbFrameset');
  54.       var x = f.getAttribute('rows');
  55.       f.setAttribute('border','3');
  56.       f.setAttribute('frameSpacing','3');
  57.       f.setAttribute('frameBorder','1');
  58.       f.setAttribute('borderColor','#FFFFFF');
  59.       f.down('frame',0).setAttribute('frameBorder','1');
  60.       f.down('frame',0).setAttribute('frameSpacing',3);
  61.       f.down('frame',0).setAttribute('border',3);
  62.       f.down('frame',1).setAttribute('frameBorder','1');
  63.       f.down('frame',1).setAttribute('frameSpacing',3);
  64.       f.down('frame',1).setAttribute('border',3);
  65.       f.setAttribute('rows','100,*');
  66.       f.setAttribute('rows',x);      
  67.       isFramesetResizable = true;    
  68.     }
  69.     return isFramesetResizable;
  70.   }  
  71.  </script>
  72.  
  73.           <script type="text/javascript">
  74.    FastInit.addOnLoad( function()
  75.    {
  76.             try {DWREngine.beginBatch();} catch(ignore) {} 
  77.                 if (typeof(initEditors) == 'function') { initEditors(); }; 
  78.               try {DWREngine.endBatch();} catch(ignore) {}
  79.              });
  80.    </script>
  81.  
  82.     </head>
  83.  
  84.    <frameset  rows="89,*" id="bbFrameset" frameborder="0" framespacing="0" border="0">
  85.  <frame src="/webapps/portal/execute/topframe?tab_tab_group_id=_163_1&frameSize=LARGE" name="nav" scrolling="auto" title="Header" />
  86.  <frame src="/webapps/blackboard/execute/launcher?type=Course&id=_11548_1&url=" name="content" scrolling="auto" title="Content" target="_self" />
  87. <noframes>
  88. 			<body>
  89. 			<H1>Frameset Overview</h1>
  90. 			<P>The Blackboard Learn environment includes a header frame with images and buttons customised by the institution and tabs that navigate to different areas within Blackboard Learn. Clicking on a tab will open that area in the content frame. Web pages containing specific content, features, functions and tools are accessed from the tab areas.</P>
  91. 			<h2>Header</h2>
  92. 			<P>The <A href='/webapps/portal/execute/topframe?tab_tab_group_id=_163_1&frameSize=LARGE'>Header</A> contains a customisable institution image and navigation buttons that allow the user to access the institution home page, access Blackboard Learn help and log out of Blackboard Learn. It also contains tabs that navigate to different areas within Blackboard Learn.</P>
  93. 			<h2>Content</h2>
  94. 			<P>The <A href='/webapps/blackboard/execute/launcher?type=Course&id=_11548_1&url='>Content</A> always contains one of the following pages:</P>
  95. 			<b>Tab area</b>
  96. 			<P>The area that appears in the content frame when a tab is clicked. Tab areas hold broad information and allow the user to access Web pages containing specific content and features.</P>
  97. 			<b>Web page:</b>
  98. 			<P>A Web page appears in the content frame when accessed through one of the navigational tools described below. Web pages contain specific content or features and originate from tab areas.</P>
  99. 			<h2>Help</h2>
  100. 			<P>Detailed help documentation explaining this frameset may be found at <A href='http://www.blackboard.com/docs/documentation.htm?DocID=190003@X@user.locale@X@'>http://www.blackboard.com/docs/documentation.htm?DocID=190003@X@user.locale@X@</A>.</P>
  101. 			</noframes>
  102. 		 </frameset>
  103.  
  104.  
  105. </html>
Attached Thumbnails
Click image for larger version Name: How to do this in JS.jpg Views: 41 Size: 21.1 KB ID: 14624  
Last edited by Simes; Apr 29th, 2010 at 9:21 am.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
Simes is offline Offline
40 posts
since Mar 2010
Permalink
Apr 29th, 2010
1
Re: Is this possible with javascript?
You could use the jQuery Framework which has libs for drag and drop content as well as text editors. A good place to start would be:
http://jquery.com
http://jqueryui.com/demos/draggable/
http://avidansoft.com/dsrte/
Reputation Points: 27
Solved Threads: 45
Posting Whiz in Training
scrappedcola is offline Offline
219 posts
since Dec 2009
Permalink
Apr 29th, 2010
0
Re: Is this possible with javascript?
Thanks will have a look into the jQuery Framework and go from there
Reputation Points: 10
Solved Threads: 0
Light Poster
Simes is offline Offline
40 posts
since Mar 2010

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Creating a results calculator
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: What is the difference between jquery and ajax?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC