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 10 of 10
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    problems displaying an image and a link side by side

    Hey,

    if you have a look here, www.enviromark.ca/Collab/study.html, and click on any of the links, you'll see that when a link is clicked, the green ball displaces the link down one line instead of displaying beside it (and in the case of "advantages and risks", causes the link to wrap.

    maybe i'm just out of it but i cant seem to fix this.

    one link example is:
    Code:
    <img src="images/green_google_ball.gif" class="hid"><a class="mainLinks" href="#Link2" onclick="ball(this.previousSibling); return toggle('Link2', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">General Information</a>
    and the page code is here.

    i know its a simple thing to fix ... maybe i need some food.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>The Concordia Collaboration Lab</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script language="JavaScript" type="text/javascript" src="js/borderFade.js"></script>
    <script type="text/javascript"> 
      var arrPrevDiv = [null, null];
    
      function toggle(id, linkGroup) {
    
    	if (arrPrevDiv[linkGroup] != null) {
    		arrPrevDiv[linkGroup].style.display = "none"; 
    	}         
    
    	var s = document.getElementById(id);
    				
    	if (id != 'intro') {
    		document.getElementById("intro").style.display = "none"	
    		}
    		
    	s.style.display = (s.style.display=="") ? "block" : (s.style.display=="none") ? "block" : "none"; 
    	arrPrevDiv[linkGroup] = s; 
    	// window.location.href='#'+ id;
    	window.status=''
    
    /* if (linkGroup==0 && arrPrevDiv[1] && arrPrevDiv[1].id=="stopShow") { 
     		alert("Please stop the slideshow before continuing.");
    	 	return false; 
    	} 
    	
    	window.onload = function(){
    	arrPrevDiv[1] = document.getElementById("startShow");
    	}
    */
    	}  
    
    </script>
    
    <script type="text/javascript">
    	function ball(s){
    		while(s.nodeType!=1){
    		s=s.previousSibling;
    		}
    	
    	var balls=document.getElementById('links').getElementsByTagName('img');
    	if (balls != 'noGreen') {
    		var i=0, b
    		while(b=balls[i++]){
    		b.className=b==s?'vis':'hid';
    		}
    	}
    }
    </script>
    
    
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }
    html, body {
    height: 100%;
    text-align: center;
    font-family: "verdana", trebuchet ms, arial, sans-serif;
    font-size: 11px;
    background-color: white;
    }
    #pageContainer {
    min-height: 100%;
    }
    * html #pageContainer {
    height: 100%;
    }
    A:link, A:visited, A:active {
    text-decoration: none; 
    color: #0000a0;
    font-size: 8pt
    }
    #welcome {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    font-size: 14pt;
    }
    #links {
    float: left;
    display: inline;
    width: 200px;
    margin-top: 75px;
    position: relative;
    text-align: right;
    border-right: 1px #ccc solid;
    line-height: 0.7cm;
    padding-bottom: 10px
    }
    .mainLinks {
    position: relative;
    text-decoration: none;
    margin-left: 25px;
    margin-right: 25px;
    }
    #mainDisplay {
    position: relative;
    margin-right: 100px;
    margin-left: 175px;
    }
    #mainDisplay p {
    margin-bottom: 15px;
    text-indent: 1cm
    }
    #mainDisplay ul {
    list-style: url(images/check_ul.gif) none outside;
    padding-left: 50px;
    margin:5px 0px 2px 0px;
    }
    #mainLogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 315px;
    width: 417px;
    padding: 20px;
    }
    #Link2, #Link3, #Link4, #Link5, #Link6, #Link7, #Link8, #Link9  {
    display: none;
    margin-top: 175px;
    margin-left: 60px;
    text-align: left;
    font-size: 10pt;
    }
    #intro {
    margin-left: 205px;
    margin-top: -25px;
    }
    #mainLogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 315px;
    width: 417px;
    padding: 20px;
    }
    .vis{
    visibility:visible;
    }
    .hid{
    visibility:hidden;
    display: inline;
    position: absolute;
    z-index: -2
    }
    .emailLinks a{
    font-size: 10pt
    }
    </style>
    
    
    </head>
    
    <body onload="zxcInit('mainLinks','#FFFFFF','#000000',15)">
    <div id="pageContainer">
    	<div id="welcome">Welcome to the Concordia Collaboration Lab</div>
    	<div id="links">
    		<img src="images/green_google_ball.gif" class="vis"><a href="#intro" onclick="ball(this.previousSibling); return toggle('intro', 0);"><img src="images/no_green_google_ball.gif" id="noGreen" border="0"></a>
    		<br><br>
    		<img src="images/green_google_ball.gif" class="hid"><a class="mainLinks" href="#Link2" onclick="ball(this.previousSibling); return toggle('Link2', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">General Information</a>
    		<br>
    		<img src="images/green_google_ball.gif" class="hid"><a class="mainLinks" href="#Link3" onclick="ball(this.previousSibling); return toggle('Link3', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">The Investigator</a>
    		<br>
    		<img src="images/green_google_ball.gif" class="hid"><a class="mainLinks" href="#Link4" onclick="ball(this.previousSibling); return toggle('Link4', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">What to Expect</a>
    		<br>
    		<img src="images/green_google_ball.gif" class="hid"><a class="mainLinks" href="#Link5" onclick="ball(this.previousSibling); return toggle('Link5', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Eligibility</a>
    		<br>
    		<img src="images/green_google_ball.gif" class="hid"><a class="mainLinks" href="#Link6" onclick="ball(this.previousSibling); return toggle('Link6', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Advantages and Risks</a>
    		<br>
    		<img src="images/green_google_ball.gif" class="hid"><a class="mainLinks" href="#Link7" onclick="ball(this.previousSibling); return toggle('Link7', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Confidentiality</a>
    		<br>
    		<img src="images/green_google_ball.gif" class="hid"><a class="mainLinks" href="#Link8" onclick="ball(this.previousSibling); return toggle('Link8', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Reimbursement</a>
    		<br>
    		<img src="images/green_google_ball.gif" class="hid"><a class="mainLinks" href="#Link9" onclick="ball(this.previousSibling); return toggle('Link9', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Learn More</a>
    	</div>
    	<div id="mainDisplay">
    		<div id="intro">
    			<div id="mainLogo"><img src="images/happy.gif"></div>
    		</div>
    		<div id="Link2">
    			<p>We are studying what makes young children eager to learn through imitation. It is well understood that imitation is important for young children, both for learning skills and for learning right and wrong. We are also interested in parent-child relationships and in children’s responsiveness more generally.</p>
    			<p>This work will deepen our understanding of children’s eagerness to learn through imitation. It could also potentially inform our understanding of teaching and learning processes, and of child social responsiveness more generally.</p>
    			<p>This study is funded by a grant from the Social Science and Humanities Research Council under the title “Social Determinants of Children's Imitation”</p>
    		</div>
    		<div id="Link3">
    			<img src="images/David_Forman.jpg">
    			<p>This study is directed by Dr. David R. Forman, an Associate Professor in the department of Psychology at Concordia University and a member of the Center for Research on Human Development. Dr. Forman received his PhD in psychology at the University of Iowa where he studied collaboration in young children and the mother-child relationship.</p>
    			<p>Dr. Forman works with a team of psychology students who study early-childhood development and have a great deal of experience working with young children.</p>
    			<p></p>
    			<div id="labPeople">
    				<div id="saraMP"></div>
    				Sarah Vannier – Research Manager
    				<br>
    				<img src="images/S_Vannier.jpg">
    				Marie-Pierre Gosselin– Masters Student
    				<br>
    				<img src="images/MP_Gosselin.jpg">
    				<p></p>
    				Liane Kandler – Research Assistant
    				<img src="images/L_Kandler.jpg">
    				<br>
    			</div>
    		</div>
    		<div id="Link4">
    			<p>If you decide to participate in our study you will be asked to come with your child to our lab at Concordia University’s Loyola campus for two visits about 1 to 2 weeks apart. Each visit will last approximately 90 minutes.</p>
    			<p>During each visit you will complete several activities with your child. All activities will be filmed. The activities are designed to observe eagerness to learn from parents, the development of child responsiveness to parents’ requests, and routine parent-child interactions. The activities are things parents often do with their children and include:</p>
    		<ul>
    			<li>Showing your child a sequence of actions to imitate</li>
    			<li>Building something together with wooden blocks</li>
    			<li>Showing your child toys which are “off-limits” and enforcing this rule throughout your visit</li>
    			<li>Asking your child to help cleanup after playing with toys</li>
    			<li>Having a snack together</li>
    			<li>Reading a story together</li>
    			<li>Completing a questionnaire about your child’s personality while your child must keep him/herself occupied</li>
    			<li>Completing a questionnaire that asks bout your well-being</li>
    		</ul>		
    		</div>
    		<div id="Link5">
    			You are eligible for our study if:
    			<p></p>
    			<ul>
    				<li>Your child is between 24 and 30 months old</li>
    				<li>You speak to your child primarily in English or in French</li>
    				<li>You are the child’s primary caregiver (you are the parent who spends the most time with your child)</li>
    				<li>Your child has never been diagnosed with a cognitive disability</li>
    			</ul>
    			<p></p>
    			If you are not eligible for this study, but are interested in our research, please feel free to contact us as you may be eligible for future studies.
    		</div>
    		<div id="Link6">
    			<p>With the exception of these small thank you gifts, participation in the study will provide no direct benefit to you or to your child. You should be aware that the researcher's work is designed to answer some very basic questions about early social development. Therefore what researchers are doing should not be perceived as therapy, nor will it benefit you and your child directly. Rather, the greater benefit will be to children at large. When the study is complete the researchers plan to send you a brief summary of their findings.</p>
    			<p>There are no substantial risks associated with this study. Occasionally children find some of the activities frustrating, but not any more than other activities a 2-year old would face in day to day life.</p>
    			<p>You may withdraw from participation at any time, without prejudice to your current or future relations with Concordia University. In addition, we encourage you to end any activity immediately if you think your child may be too tired or too frustrated to continue. </p>
    			<p>
    				<i class="emailLinks">If at any time you have questions about your rights as a research participant, please contact Adela Reid, Research Ethics and Compliance Officer, Concordia University, at (514) 848-7481 or by email at
    					 <script language="JavaScript" type="text/JavaScript"> 
    					<!-- 
    					var name = "areid"; 
    					var domain = "alcor.concordia.ca"; 
    					document.write('<a href="mailto:' + name + '@' + domain + '" onmouseover="window.status=\'Click here to send an e-mail to '+ name + '@' + domain+'\';return true" onmouseout="window.status=\'\'">'); 
    					document.write(name + '@' + domain + '</a>'); 
    					// --> 
    					</script>
    				</i>
    			</p>
    		</div>
    		<div id="Link7">
    			<p>All sessions will be videotaped.  The tapes will be used for research and/or educational purposes, and you and your child will be identified by first name and age only. All documents containing information identifying your child or yourself will remain in a locked file in the office of the coordinators (Consent forms, etc).  The tapes will be retained for seven years from the completion of the study or from publication of the results, whichever occurs later. Your name and your child's name will be withheld from all published reports of this work.</p>
    				<p>
    				<i class="emailLinks">If at any time you have questions about your rights as a research participant, please contact Adela Reid, Research Ethics and Compliance Officer, Concordia University, at (514) 848-7481 or by email at
    					<script language="JavaScript" type="text/JavaScript"> 
    					<!-- 
    					var name = "areid"; 
    					var domain = "alcor.concordia.ca"; 
    					document.write('<a href="mailto:' + name + '@' + domain + '" onmouseover="window.status=\'Click here to send an e-mail to '+ name + '@' + domain+'\';return true" onmouseout="window.status=\'\'">'); 
    					document.write(name + '@' + domain + '</a>'); 
    					// --> 
    					</script>
    				</i>
    			</p>
    		</div>
    		<div id="Link8">
    			<p>As a token of our thanks, after each visit, your child will receive a small gift, and you will receive 20 dollars. Cost of transportation can also be reimbursed.</p>
    		</div>
    		<div id="Link9">
    			<p>If this sounds interesting to you or you would like to learn more please feel free to call Sarah or Marie-Pierre (514) 848-2424, ext. 5286 or e-mail us at 
    				<i class="emailLinks">
    					<script language="JavaScript" type="text/JavaScript"> 
    					<!-- 
    					var name = "collab"; 
    					var domain = "concordia.ca"; 
    					document.write('<a href="mailto:' + name + '@' + domain + '" onmouseover="window.status=\'Click here to send an e-mail to '+ name + '@' + domain+'\';return true" onmouseout="window.status=\'\'">'); 
    					document.write(name + '@' + domain + '</a>'); 
    					// --> 
    					</script>
    				</i>
    			</p>
    		</div>
    	</div>
    </div>
    </body>
    </html>
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Regular Coder
    Join Date
    Sep 2006
    Location
    Vermont, USA
    Posts
    154
    Thanks
    0
    Thanked 6 Times in 6 Posts
    <img align="left".....
    Active PHP/MySQL application developer available for immediate work.
    syosoft.com mavieo.com - Remote Web Site Administration Suite - Reseller Ready

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    LOL

    dammit

    follow-up question:
    why wont this work?

    Code:
    <script type="text/javascript">
    	function ball(s){
    		while(s.nodeType!=1){
    		s=s.previousSibling;
    		}
    	
    	var balls=document.getElementById('links').getElementsByTagName('img');
    		var i=0, b
    		while(b=balls[i++]){
    		b.className=b==s?'vis':'hid';
    		b.style.align = 'left';	}
    }
    </script>
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Because its not CSS. You should be floating the image and the image should come before the link. Come on we've discussed this before.
    Code:
    <script type="text/javascript">
    	function ball(s){
    		while(s.nodeType!=1){
    		s=s.previousSibling;
    		}
    	
    	var balls=document.getElementById('links').getElementsByTagName('img');
    		var i=0, b
    		while(b=balls[i++]){
    		b.className=b==s?'vis':'hid';
    		b.style.float = 'left';	}
    }
    </script>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts


    Actually you're right, the floating issue we have discussed... as for the image being before the link... it is before the link

    Code:
    	<img src="images/green_google_ball.gif" class="hid"><a class="mainLinks" href="#Link2" onclick="ball(this.previousSibling); return toggle('Link2', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">General Information</a>		<br>
    		<img src="images/green_google_ball.gif" class="hid"><a class="mainLinks" href="#Link3" onclick="ball(this.previousSibling); return toggle('Link3', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">The Investigator</a>
    ...
    unless i'm missing something. it works, but it still forces the link it is beside down to the next line :\

    also the script above annoy me because it hides ALL images within the div 'links'. do you know if i can just have it work with the images that either have class="vis" or class="hid"?

    You can see what i mean here: www.enviromark.ca/Collab/study.html
    Last edited by canadianjameson; 09-30-2006 at 08:48 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    var balls=document.getElementById('links').getElementsByTagName('img');
    for(var i = 0; i < balls.length; i++)
    {
    if(balls[i].className == 'hid')
    {
    balls[i].style.display = 'none';
    }
    else if(balls[i].className == 'vis')
    {
    balls[i].style.float = 'left';
    }
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    hehe, i litterally hit refresh, saw nothing and then went to check my e-mail and i had a responce. lol

    I must have implimented it wrong
    this is what i did:
    Code:
    <script type="text/javascript">
    function ball(s)
    {
    	while(s.nodeType!=1) {
    	s=s.previousSibling;
    	}
    	
    	var balls=document.getElementById('links').getElementsByTagName('img');
    	for(var i = 0; i < balls.length; i++) {
    		if(balls[i].className == 'hid')
    			{
    			balls[i].style.display = 'none';
    			}
    			else if(balls[i].className == 'vis')
    			{
    			balls[i].style.float = 'left';
    			}
    		}
    }
    </script>
    and there is no effect at all: www.enviromark.ca/Collab/tests/T3.htm

    Was i supposed to get rid of these in the css?
    Code:
    .vis{
    visibility:visible;
    }
    .hid{
    visibility:hidden;
    display: inline;
    position: absolute;
    z-index: -2
    }
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    function ball(s)
    {
    	var balls=document.getElementById('links').getElementsByTagName('img');
    	for(var i = 0; i < balls.length; i++)
    	{
    		balls[i].className = 'hid';
    	}
    	s.className = 'vis';
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Hey, i got it working as follows:
    Code:
    <script type="text/javascript">
    function ball(s){ 
            while(s.nodeType!=1){ 
                s=s.previousSibling; 
            } 
            var balls=document.getElementById('links').getElementsByTagName('img'); 
            var i=0, b 
            while(b=balls[i++]){ 
                if(b.id!='noGreen'){ 
                    b.className=b==s?'vis':'hid'; 
                    b.style.float = 'left'; 
    		b.style.display = 'inline';
    		b.style.position = 'absolute';
                }
            } 
        }  
    
    </script>
    
    ...
    
    	<div id="links">
    		<img src="images/green_google_ball.gif" class="vis" id="normalBall"><a href="#intro" onclick="ball(this.previousSibling); return toggle('intro', 0);"><img src="images/no_green_google_ball.gif" id="noGreen" border="0"></a>
    		<br><br>
    		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link2" onclick="ball(this.previousSibling); return toggle('Link2', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">General Information</a>
    		<br>
    		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link3" onclick="ball(this.previousSibling); return toggle('Link3', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">The Investigator</a>
    		<br>
    		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link4" onclick="ball(this.previousSibling); return toggle('Link4', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">What to Expect</a>
    		<br>
    		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link5" onclick="ball(this.previousSibling); return toggle('Link5', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Eligibility</a>
    		<br>
    		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link6" onclick="ball(this.previousSibling); return toggle('Link6', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Advantages and Risks</a>
    		<br>
    		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link7" onclick="ball(this.previousSibling); return toggle('Link7', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Confidentiality</a>
    		<br>
    		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link8" onclick="ball(this.previousSibling); return toggle('Link8', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Reimbursement</a>
    		<br>
    		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link9" onclick="ball(this.previousSibling); return toggle('Link9', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Learn More</a>
    	</div>
    But i'm getting a very weird onmouseover 'hop' effect in I.E (the green ball moves once you've clicked 2 or more links, and you onmouseover the link that has the ball), and the green ball is positionned higher than it should be in FF. any ideas why?

    my hypohthesis for the 'hop' effect in IE is due to the overline script i have running for the links... but how do i prevent it?

    you can see it here: www.enviromark.ca/Collab/study.html
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    i know its a small thing... i just wonder what could be causing it
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

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