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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to set up an editable space on a website

    Hi everyone.
    I am trying to set up a website and would like it to have an accordion nav bar on the left side with plenty of space in the middle and on the right in which pictures/text can be displayed depending on the selection of the navbar, without changing to another site.

    i am new to all this, and would appreciate some advice on how to go about this.
    <iframe> or javascript solutions?

    I would also like to apologize in advance if this is a repost and the question has been answered somewhere in the forum already, i just dont know what to search for.

    kind regards
    fiddler

  • #2
    New Coder
    Join Date
    Feb 2012
    Location
    Finland
    Posts
    59
    Thanks
    3
    Thanked 9 Times in 9 Posts
    So you want to have buttons on left side that toggles the content on right side without reloading the page?

    Here's great site for this sort of stuff;
    http://www.randomsnippets.com/2011/0...v-with-jquery/

    Hope this helps,

    -Riku

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks.
    looks like a nice option.

    one question though: i am a bit concerned about loading time - if i use a couple of overlapping divs with pictures or whatnot, will they all have to load before the code can be executed? i.e. will it affect the base page loading time or will it load the divs (and therefore the pictures) only when the (toggle) function is clicked?

    rgds
    fiddler

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by Fiddler View Post
    Thanks.
    looks like a nice option.

    one question though: i am a bit concerned about loading time - if i use a couple of overlapping divs with pictures or whatnot, will they all have to load before the code can be executed? i.e. will it affect the base page loading time or will it load the divs (and therefore the pictures) only when the (toggle) function is clicked?

    rgds
    fiddler
    yes. you would probably be better off if you wrote your html first, then folks could help you more. Your most likely going to end up with a javascript solution, so you will want to post over there.

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok. thanks. Could an admin shift the topic please?

    code is below (sorry for untidiness)

    html:
    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>Georg Silber Website</title>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src ="js/function.js" type="text/javascript"></script>
    </head>
    
    <body>
    <div id="all"> 
    	<div id="nav">
    		<div id="wr">
    			<div id="title1"> <p> Fiddlers </p> </div>
    			<div id="title2"> <p>Page </p> </div>
    			<div id="textspace">
    				<div id="spacer"></div>
       				<dl id="acc">
                        <dt> Contact</dt>
                            <dd>  - <br /> 
                                 - </dd>
                        <dt> About </dt>
                            <dd>  	- <br /> <br />
                                    - <br />
                            </dd>
                        <dt> Curriculum Vitae </dt>
                            <dd>  - <br />
                                <dl id="acc">
                                	<dt> Work Experience </dt>
                                    	<dd>  - <br />
                                    		- <br /></dd>
                      				<dt> Publications </dt>
                       					<dd>  - <br />
                        				- <br /></dd>
                        <dt> Education </dt>
                        <dt> Soft Skills  <br /></dt>
                        				<dd>  - <br />
                        				- <br /></dd>
                      	<dt> Interests  <br /></dt>
                        <dd>  - <br />
                      	</dd>
                      	- <br />
                     </dl>
                </dd>
             </dl>
    	</div> <!-- closes textspace -->
    </div> <!-- closes wr -->
    <div id="container">
    <div id="spacer100"></div>
    	<img src="images/line.jpg" class="line" width="2" height="450"/>
    </div>
    </div> <!-- closes nav div -->
    <div id="rest">
    </div>
    
    </div> <!-- closes all -->
    </body>
    </html>
    css
    Code:
    * {
    	margin:0;
    	padding:0;
    	border: none;
    	text-decoration: none;
    	outline: none;
    }
    
    body {
    	font-size:12px;
    	text-align: left;
    	padding: 20px 0;
    	line-hight: 1.8em;
    	font-family: Georgia, "Times New Roman", Times, serif, "Bradley Hand ITC";
    	background-color: #FFF;
    }
    #all {
    	width: 1000px;
    	padding-top: 60px;
    }
    
    
    #wr {
    	width: 190px;
    	text-align: right;
    	margin-top: 0;
    	margin-bottom: 0;
    	line-height: 25px;
    	float: left;
    	margin-right: 15px;
    }
    #all #nav #wr #textspace {
    	line-height: 18px;
    }
    
    container {
    	width: 20px;
    	background-color: #666;
    	float: left;
    }
    #nav {
    	width: 230px;
    	float: left;
    }
    #rest {
    	width: 770px;
    	float: right;
    	height: 550px;
    }
    
    #container #spacer100 {
    	margin-top: 120px;
    }
    
    
    #acc dt, #acc dd {
    	width: 100%;
    	font-size: 12px;
    	color: #999;
    	font-family: Georgia, "Times New Roman", Times, serif, "Bradley Hand ITC";
    	font-weight: 300;
    }
    #title1 {
    	font-family: "Bradley Hand ITC";
    	color: #666;
    	font-size: 26px;
    	font-weight: 500;
    	text-align: right;
    	width: 130px;
    	margin-top: 200px;
    	margin-left: 50px;
    }
    #spacer200 {
    	height: 200px;
    }
    .line {
    	position: relative;
    }
    #title2 {
    	font-family: "Bradley Hand ITC";
    	font-size: 26px;
    	margin-top: -3px;
    	font-weight: 500;
    	color: #333;
    	width: 193px;
    	text-align: right;
    }
    #spacer {
    	clear: left;
    	margin-top: 10px;
    	margin-bottom: 0px;
    }
    
    
    #acc dt {
    	cursor: pointer;
    }
    #acc dt.act {
    	font-size: 12px;
    	font-weight: 300;
    	font-family: Georgia, "Times New Roman", Times, serif, "Bradley Hand ITC";
    	text-decoration: underline;
    
    }
    #acc dd {
    	display: none;
    	padding: 3px, 10px;
    }
    
    	 
    .right {
    	float: right;
    	width: 700px;
    	background-color: #000;
    }
    kind regards
    fiddler/dd


  •  

    Posting Permissions

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