HTML/Javascript/CSS question (I think)

Discussion in 'Programming & Software Development' started by s3kemo, Apr 23, 2012.

  1. s3kemo

    s3kemo Member

    Joined:
    May 13, 2003
    Messages:
    5,889
    Location:
    in a house
    Not much of a web developer/whatever-you-lot-prefer-to-be-called but I can do basic HTML/Javascript/CSS. Basic is the key word.

    I'm wanting to separate a page into different sections (google seems to indicate CSS DIVs? A lot of forum posts on the topic are 4+ years old so not sure if things have changed) and have each DIV contain the contents of a separate URL. i.e. one window with multiple web pages 'embedded'. What's a good way I can achieve this?

    Also, is there a way I can have each area refresh at different intervals (hard-coded in the HTML/JS/CSS is fine)? Some are static content which need refreshing to show the new content. Some are dynamic and would refresh on their own, which is fine.

    This is for personal monkeying around... no one in their right mind would want me for web stuff in a professional context anyway. Any keywords that can help me google to get my answers is more than enough.

    thanks!
     
  2. Rezin

    Rezin Member

    Joined:
    Oct 27, 2002
    Messages:
    9,485
    Frames (frameset and iframe tags) are good enough in that case. ;)
     
  3. s3kemo

    s3kemo Member

    Joined:
    May 13, 2003
    Messages:
    5,889
    Location:
    in a house
    Heh, when I said my knowledge was of 'basic HTML' frames was the first thing I thought of. I googled it and there seems to be a lot of hatred for 'primitive', 'irrelevant' frames so didn't bring it up around in this thread :pirate:
     
  4. Shawry

    Shawry Member

    Joined:
    Jun 12, 2002
    Messages:
    2,915
    Location:
    Oakleigh, Melb
    iframes are used a lot. have a look into them they should be workable with 'basic' css/html knowledge.

    my first thought though was "why?"
    Many coding projects benefit more from a review and rethink, rather than just pushing forward and finding a way.
     
  5. s3kemo

    s3kemo Member

    Joined:
    May 13, 2003
    Messages:
    5,889
    Location:
    in a house
    Great, thanks!

    Although I have 'basic' knowledge I'm happy to push/extend it to accommodate a good solution. It was also to give you guys a gauge of what level of OP you are writing to!
     
  6. mattski0_0

    mattski0_0 Member

    Joined:
    Apr 18, 2007
    Messages:
    103
    I think if it was me I would use css positioned divs and use AJAX to refresh the content.

    There are heaps of tutorials out there about how to use httprequest and it's really not all that tricky at all. Once you understand the concept then the coding for it is a doddle.

    Matt
     
  7. zach

    zach (Banned or Deleted)

    Joined:
    May 1, 2009
    Messages:
    3,614
    Location:
    chermside.bris.qld.au:80
    An MVC javascript framework like Backbone.Js or EmberJs will do what you want, will be cleaner too. j
     
  8. Herro

    Herro Member

    Joined:
    Nov 16, 2002
    Messages:
    748
    Location:
    Brisbane
    Welcome to the world of overclomplication.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>4 Pane Browser</title>
    <style type="text/css">
    body {
    	margin:0px;
    	width:100%;
    	height:100%;
    }
    .p_frame {
    	width: 100%;
    	height: 100%;	
    }
    #p_1 {
    	position: absolute;
    	top:6%;
    	left:6%;
    	width:41%;
    	height:41%;
    	background:#999999;
    	border:1px solid #CCC;
    }
    #p_2 {
    	position: absolute;
    	top:6%;
    	left:53%;
    	width:41%;
    	height:41%;
    	background:#999999;
    	border:1px solid #CCC;
    }
    #p_3 {
    	position: absolute;
    	top:53%;
    	left:6%;
    	width:41%;
    	height:41%;
    	background:#999999;
    	border:1px solid #CCC;
    }
    #p_4 {
    	position: absolute;
    	top:53%;
    	left:53%;
    	width:41%;
    	height:41%;
    	background:#999999;
    	border:1px solid #CCC;
    }
    </style>
    </head>
    <body>
    <div id="p_1"><iframe src="http://www.news.com.au" frameborder="0" allowtransparency="0" class="p_frame" /></iframe></div>
    <div id="p_2"><iframe src="http://www.overclockers.com.au" frameborder="0" allowtransparency="0" class="p_frame" /></iframe></div>
    <div id="p_3"><iframe src="http://www.whirlpool.net.au" frameborder="0" allowtransparency="0" class="p_frame" /></iframe></div>
    <div id="p_4"><iframe src="http://www.jeanswest.com.au" frameborder="0" allowtransparency="0" class="p_frame" /></iframe></div>
    </body>
    </html>
    
     

Share This Page