www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 22 of 22

Thread: Dynamic Link?

  1. #16
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    i tested this code locally and it worked for me. try this one. i removed some parts of the script and now you do not need to have any text in the subarrays.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>CAMERON FRY ARCHITECTS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css"> 
    <!-- 
    body  {
    	font: 100&#37; Verdana, Arial, Helvetica, sans-serif;
    	background: #000000;
    	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    	padding: 0;
    	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    	color: #000000;
    }
    .twoColFixLt #container { 
    	width: 900px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    	background: #000000;
    	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    	border: 1px solid #000000;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    }
    .twoColFixLt #sidebar1 {
    	float: left; /* since this element is floated, a width must be given */
    	width: 135px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    	background: #000000; /* the background color will be displayed for the length of the content in the column, but no further */
    	padding: 0px 0px 0px 0px;
    }
    .twoColFixLt #mainContent { 
    	margin: 0 0 0 155px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    	padding: 0 0px 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    	background: #000000; /* the background color will be displayed for the length of the content in the column, but no further */
    
    } 
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    	float: right;
    	margin-left: 8px;
    	background: #000000; /* the background color will be displayed for the length of the content in the column, but no further */
    }
    .fltlft { /* this class can be used to float an element left in your page */
    	float: left;
    	margin-right: 8px;
    	background: #000000; /* the background color will be displayed for the length of the content in the column, but no further */
    }
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    	background: #000000; /* the background color will be displayed for the length of the content in the column, but no further */
    
    }
    
    .style1 {
    	color: #FFFFFF;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: x-small;
    }
    
    .style2 {
    	color: #FFFFFF;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: small;
    }
    
    a:link {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    a:visited {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    a:hover {
    	text-decoration: underline;
    	color: #FFFFFF;
    }
    a:active {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    --> 
    </style><!--[if IE 5]>
    <style type="text/css"> 
    /* place css box model fixes for IE 5* in this conditional comment */
    .twoColFixLt #sidebar1 { width: 230px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColFixLt #sidebar1 { padding-top: 30px; }
    .twoColFixLt #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    var timeout='',
    img_dir='images', /* images dir */
    delay=5000, /* auto mode delay 5 sec */
    info=[
    /* ['CATEGORY',IMAGES QUANTITY] */
    ['heidelberg',4]
    ];
    
    function showCategoryImg(category,num){
    var targ=$('#category_pic'),
    picSrc=img_dir+'/'+category+(num+1)+'.jpg',
    arrIndex=0;
    for(var i in info){if(info[i][0]==category){arrIndex=i;break;}}
    targ.append('<div id="temp" style="display:none;"><img src="'+picSrc+'" alt="img" /></div>');
    $('#temp img').load(function(){
    targ.html('<img style="opacity:.1" src="'+picSrc+'" alt="img" />');
    targ.find('img').fadeTo('normal',1);
    num++;
    if(num==info[arrIndex][1]){num=0;}
    timeout=setTimeout('showCategoryImg("'+category+'",'+num+')',delay);
    });
    }
    
    $(document).ready(function(){
    $('#menu a').click(function(){if(timeout!=''){clearTimeout(timeout);timeout='';};showCategoryImg(this.id,0);});
    });
    </script>
    </head>
    
    <body class="twoColFixLt">
    
    
    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"  bgcolor="#000000">
      <tr>
        <td height="100%" bgcolor="#000000"><div align="center">
          <div align="center">
    	 	
    		<div id="container">
      <div id="sidebar1">
          <span class="style1">
    	<img src="logo.jpg">
        <P>
        <br>
    <div id="menu">
    <a href="#null" id="heidelberg">heidelberg house</a>
        
        
        <br>moonee ponds house
        <br>geelong east house
        <br>king island house
        <br>carrum house
        <br>glen iris house
        <br>northcote house
        <br>point lonsdale house
        <br>travancore house
        <br>princes hill house
        
        
        
        <!-- end #sidebar1 -->
        </div>
      </span></div>
      <div id="mainContent">
    
    	<div id="category_pic"><img src="images/heidelberg1.jpg" /></div>
            
          </div>
      </tr>
    </table>
    
    
    
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  2. #17
    Join Date
    Jan 2006
    Posts
    71
    That works perfectly! Thank you!

    One final question, if I want the front/start page to automatically start showing front1.jpg front2.jpg front3.jpg, what would I put in the 'div id="category_pic"' ?
    I tried 'div id="front"' but this did not work

  3. #18
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    first you have to add this category in the array

    Code:
    info=[
    /* ['CATEGORY',IMAGES QUANTITY] */
    ['heidelberg',4],
    ['front',3] /* 3 or how many i don't know */
    ];
    and then alter the ending part of the code:

    Code:
    $(document).ready(function(){
    $('#menu a').click(function(){if(timeout!=''){clearTimeout(timeout);timeout='';};showCategoryImg(this.id,0);});
    
    showCategoryImg('front',0);
    
    });
    </script>
    </head>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  4. #19
    Join Date
    Jan 2006
    Posts
    71
    I put the code in, but it didnt work for me.

    With the following:
    showCategoryImg('front',0);
    I wasn't sure if it should be 0 or the number of images I had, so I tried both, and still no luck.

    This is with your latest code:
    http://fryarchitects.com.au/test/indexc.html

    This is the previous one with just an image as the front page:
    http://fryarchitects.com.au/test/indexb.html

    Any idea what I did wrong?

  5. #20
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    it seems you missed a comma between the array's elements

    Code:
    ['front',4],
    ['heidelberg',4]
    showCategoryImg('front',0);

    the second argument means 'which in the set', not 'how many pictures are associated to the category'. arrays start counting their elements from 0, not from 1. so if you have 4 elements in your array, the first one will be array_name[0] and the last one will be array_name[3], though your array's length will be 4.

    my english is not good, sorry if the explanations are not clear ((
    Last edited by Padonak; 06-05-2012 at 06:58 AM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  6. #21
    Join Date
    Jan 2006
    Posts
    71
    It all works perfectly. Thankyou

  7. #22
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    good to hear you always welcome )
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles