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?

[IMG]http://littleimg.com/files/18875_zjppk/How%20to%20do%20this%20in%20JS.jpg[/IMG] - 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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html  lang="en-AU-JCU"> 
 <head>
  <title>Blackboard Learn</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta id="request-method" name="request-method" content="GET">
  <meta name="author" content="Blackboard">
  <meta name="copyright" content="&copy; 1997-2010 Blackboard Inc. All Rights Reserved. U.S. Patent No. 6,988,138. Additional Patents Pending.">
  <meta name="keywords" content="Blackboard">

  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="-1">
  <link rel="SHORTCUT ICON" type="image/x-icon" href="/ui/bb-icon2.ico">
      <script type="text/javascript" src="/javascript/i18n.js?v=9.0.505.15"></script>
        
      
      
      
      
      
         <script type="text/javascript" src="/javascript/prototype.js?v=9.0.505.15"></script>
    <script type="text/javascript" src="/javascript/fastinit.js?v=9.0.505.15"></script>
    <script type="text/javascript" src="/javascript/ngui/page.js?v=9.0.505.15"></script>

    <script type="text/javascript" src="/javascript/date.js?v=9.0.505.15"></script>
    <script type="text/javascript" src="/webapps/gradebook/js/gradebookgrid.js?v=9.0.505.15"></script>
    <script type="text/javascript" src="/webapps/gradebook/js/gradebookgridmodel.js?v=9.0.505.15"></script>
           <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>
      <script type="text/javascript">
  var isFramesetResizable = false;
  function toggleFramesetResize()
  {
    if ( isFramesetResizable )
    {
      var f = $('bbFrameset');
      var x = f.getAttribute('rows');
      f.setAttribute('border','0');
      f.setAttribute('frameSpacing','0');
      f.setAttribute('frameBorder','0');
      f.down('frame',0).setAttribute('frameBorder','0');
      f.down('frame',0).setAttribute('frameSpacing',0);
      f.down('frame',0).setAttribute('border',0);
      f.down('frame',1).setAttribute('frameBorder','0');
      f.down('frame',1).setAttribute('frameSpacing',0);
      f.down('frame',1).setAttribute('border',0);
      f.setAttribute('rows','100,*');
      f.setAttribute('rows',x);
      isFramesetResizable = false;
    }
    else
    {
      var f = $('bbFrameset');
      var x = f.getAttribute('rows');
      f.setAttribute('border','3');
      f.setAttribute('frameSpacing','3');
      f.setAttribute('frameBorder','1');
      f.setAttribute('borderColor','#FFFFFF');
      f.down('frame',0).setAttribute('frameBorder','1');
      f.down('frame',0).setAttribute('frameSpacing',3);
      f.down('frame',0).setAttribute('border',3);
      f.down('frame',1).setAttribute('frameBorder','1');
      f.down('frame',1).setAttribute('frameSpacing',3);
      f.down('frame',1).setAttribute('border',3);
      f.setAttribute('rows','100,*');
      f.setAttribute('rows',x);      
      isFramesetResizable = true;    
    }
    return isFramesetResizable;
  }  
 </script>
		
          <script type="text/javascript">
   FastInit.addOnLoad( function()
   {
            try {DWREngine.beginBatch();} catch(ignore) {} 
                if (typeof(initEditors) == 'function') { initEditors(); }; 
              try {DWREngine.endBatch();} catch(ignore) {}
             });
   </script>

    </head>
 
   <frameset  rows="89,*" id="bbFrameset" frameborder="0" framespacing="0" border="0">
 <frame src="/webapps/portal/execute/topframe?tab_tab_group_id=_163_1&frameSize=LARGE" name="nav" scrolling="auto" title="Header" />
 <frame src="/webapps/blackboard/execute/launcher?type=Course&id=_11548_1&url=" name="content" scrolling="auto" title="Content" target="_self" />
<noframes>
			<body>
			<H1>Frameset Overview</h1>
			<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>
			<h2>Header</h2>
			<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>
			<h2>Content</h2>
			<P>The <A href='/webapps/blackboard/execute/launcher?type=Course&id=_11548_1&url='>Content</A> always contains one of the following pages:</P>
			<b>Tab area</b>
			<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>
			<b>Web page:</b>
			<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>
			<h2>Help</h2>
			<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>
			</noframes>
		 </frameset>


</html>

Recommended Answers

All 2 Replies

Thanks will have a look into the jQuery Framework and go from there

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.