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

    Thumbs up Multiple fadeTo on multiple DIV

    Hi,

    I'm currently updating my website, until now everything is going on my own, i'm dealing with tutorials etc... playing with js' hover, fadeTo, colorbox, i let you watch the result:

    http://michaelparis.fr/testa/testa2.html

    mouseover the first movie, the second one, on the right for the first movie the "fr>eng" create a little fadeTo the english version of the text... and when you click the picture a wonderful colorbox appear.

    Now you can see for the second movie (which is the same of the first one yes but let's call him the second movie), the english & french version of the text are both visible. That's because the script isn't written yet.


    Now when you look closer at the code I'm using:

    for the overall fadeTo of one movie:

    Code:
    $('#div01').fadeTo(200, 0.4) ->using opacity & filter:alpha(opacity=) 
    in the css of the div didn't work great with IE so i'm starting with a fade to
    dark and everything is ok then.
    
    	$('#div01').hover(function() {
    		$('#div01').fadeTo(200, 1.0);
            },function() {
            $('#div01').fadeTo(200, 0.4);
            });

    If you look at the french to english fadeTo inside the div, the script is even longer:
    for just one movie:

    Code:
    jQuery(document).ready(function($) {
    	$('#divin01').fadeTo(0, 1)		
    	$('#divLANG01').fadeTo(200, 0.4)	
    	$('#divin01ENG').fadeTo(0, 0)							
    	$('#divLANG01').hover(function() {
    		$('#divin01').fadeTo(200, 0);
    		$('#divin01ENG').fadeTo(200, 1);
    		$('#divLANG01').fadeTo(200, 1);	
            },function() {
    		$('#divin01').fadeTo(200, 1);
    		$('#divin01ENG').fadeTo(200, 0);
    		$('#divLANG01').fadeTo(200, 0.4);
            });								
    });


    I've then realized that div ID can be used only once, so I've started to create one div, one script per movie.
    Which becomes really ugly.

    I've read it's better to use .class, I totally agree but fadeTo on class doesn't work with IE...

    Î'm sure there is a way to make this script prettier but I don't know js enought.

    I can go on with div01, div02, div03, and divin01, divLANG01, divin01ENG, divin02 etc... but there will be a lot of movie and it's gonna become really heavy, and ugly.

    Thank you for your help!
    Last edited by Mprodz; 10-10-2011 at 04:25 PM.

  • #2
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well i tried to figure this out by myself:
    Here is the new version for the fade of everydiv:

    Code:
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    	var i=0;
    	var nb=2;
    for (i=0;i<=nb;i++) {
    	$('#div0'+i).fadeTo(200, 0.4)	
    	$('#div0'+i).hover(function() {
    		$('#div0'+i).fadeTo(200, 1.0);
            },function() {
            $('#div0'+i).fadeTo(200, 0.4);
            });
    };
    The first step works fine: http://michaelparis.fr/testa/testa2.html (the first fadeOut to 0.4 of opacity)
    but the hover doesn't seems to work.
    Any idea why?
    Thanks!
    Last edited by Mprodz; 10-10-2011 at 04:22 PM.

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Mprodz:

    I'm not sure if this is what you are trying to do. Maybe.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Fading Selected Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">	
    
    	function contentFader(group,item,limit,IE){
    
    		this.group = group;
    		this.item = item;
    		this.item.selected = false;
    		this.item.active = false;
    		this.item.nInterval = "";
    		this.item.nOpacity = 100;	
    		this.item.opacityLimit = limit;			
    		this.IE = IE;
    
    		this.item.onmouseover = function(){
    		
    			this.selected = true;												
    		}	
    
    		this.item.onmouseout = function(){
    
    			this.selected = true;	 						
    		}		
    	}
    
    	contentFader.prototype = {
    
    		clearErrors : function(){
    			
    			 for (i=0; i<this.group.length; i++)
    				{
    				 this.IE ? this.group[i].style.filter = "alpha(opacity = "+this.group[0].opacityLimit+")" 
    					 : this.group[i].style.opacity = (this.group[0].opacityLimit / 100);
    				}		
    			
    		},
    	
    		animateDone : function(nInterval){
    
    			clearInterval(nInterval);
    			this.item.selected = false;
    			this.item.active = false;	
    			this.clearErrors();					
    		},
    
    		animateFade : function(brush){
    
    			if (this.item.active){return;}
    			clearInterval(this.item.nInterval);			
    			var fadeSection = this.item;
    			var inherit = this;									
    			if (brush == "out")
    				{					 			
    				 inherit.item.nOpacity = inherit.IE ? Number(inherit.item.style.filter.replace(/.+\=(.+)\)$/, "$1"))
    			    				            : inherit.item.style.opacity * 100;								
    				 inherit.item.nInterval = setInterval(function()
    					{		
    					 inherit.item.active = true;
    				 	 inherit.item.nOpacity > inherit.item.opacityLimit ? inherit.item.nOpacity = inherit.item.nOpacity - 5 
    								   			   : inherit.animateDone(inherit.item.nInterval);
    				 	 inherit.IE ? fadeSection.style.filter = "alpha(opacity = "+inherit.item.nOpacity+")"
    				                    : fadeSection.style.opacity = (inherit.item.nOpacity / 100); 
    					}, 5);	
    				}			
    			if (brush == "in")
    				{
    				 inherit.item.nOpacity = inherit.IE ? Number(inherit.item.style.filter.replace(/.+\=(.+)\)$/, "$1"))
    			    				            : inherit.item.style.opacity * 100;
    		 	 	 inherit.item.nInterval = setInterval(function()
    					{
    					 inherit.item.active = true;
    			 	 	 inherit.item.nOpacity < 100 ? inherit.item.nOpacity = inherit.item.nOpacity + 5 
    							   	      : inherit.animateDone(inherit.item.nInterval);
    			 	 	 inherit.IE ? fadeSection.style.filter = "alpha(opacity = "+inherit.item.nOpacity+")"
    			    		            : fadeSection.style.opacity = (inherit.item.nOpacity / 100); 
    					}, 5);						
    				}		
    		}
    	}
    
    	function initContentRotator(){
    
    		// choose the maximum opacity; 
    		var maxOpacity = 35;
    		
    		var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;
    		var nFadeItem = [];
    		var sectionContainer = [];
    		var nDiv = document.getElementsByTagName('div');
    		for (i=0; i<nDiv.length; i++)
    			{
    			 if (nDiv[i].className == "info_section_container")
    				{
    				 sectionContainer[sectionContainer.length] = nDiv[i];	
    				 IE ? nDiv[i].style.filter = "alpha(opacity = "+maxOpacity+")" 
    				    : nDiv[i].style.opacity = (maxOpacity / 100);				 		
    				}			
    			}		
    		for (i=0; i<sectionContainer.length; i++)
    			{			
     			 nFadeItem[i] = new contentFader(sectionContainer,sectionContainer[i],maxOpacity,IE);			  					
    			}	
    		for (i=0; i<sectionContainer.length; i++)
    			{
    			 IE ? sectionContainer[i].attachEvent('onmouseover',function()
    				{ 
    				 for (n=0; n<nFadeItem.length; n++)
    					{	
    					 if (nFadeItem[n].item.selected)
    						{
    						 nFadeItem[n].animateFade('in');
    						}					 							
    					}
    				}, false) 
    			    : sectionContainer[i].addEventListener('mouseover',function()
    			       {
    			        for (n=0; n<nFadeItem.length; n++)
    			  		{
    					 if (nFadeItem[n].item.selected)
    						{
    						 nFadeItem[n].animateFade('in');
    						}								 					 
    					}
    			 	}, false);
    			IE ? sectionContainer[i].attachEvent('onmouseout',function()
    				{ 
    				 for (n=0; n<nFadeItem.length; n++)
    					{	
    					 if (nFadeItem[n].item.selected)
    						{
    						 nFadeItem[n].animateFade('out');
    						}					 							
    					}
    				}, false) 
    			    : sectionContainer[i].addEventListener('mouseout',function()
    			       {
    			        for (n=0; n<nFadeItem.length; n++)
    			  		{
    					 if (nFadeItem[n].item.selected)
    						{
    						 nFadeItem[n].animateFade('out');
    						}								 					 
    					}
    			 	}, false);
    			}				
    	}		
    	
    	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', initContentRotator, false) : addEventListener('load', initContentRotator, false);	
    
    </script>
    
    <style type="text/css">
    
    	 body {background-color: #fafad2; margin-top: 60px;}
    	
    	.featured_content_container {position: relative; width: 750px; height: auto; 
    			   	     background-color: #fafad2; margin-top: 0px; margin-bottom: 0px;
    				     margin-left: auto; margin-right: auto; cursor: pointer;
    				     border: 1px solid black;}
    
    	.featured_content_container ul {list-style: none; margin: 0px; padding: 0px;}
    
    	.info_section_container {height: 160px; background-color: #fafad2; margin-left: 5px;}  	
    
    	.info_section_container img {display: block; float: left; width: 173px; height: 130px;
    			 	     margin-top: 15px; margin-left: 5px;}
    
    	.info_section_container p {display: block; float: left; width: 73%; font-family: veranda;
    			           font-size: 12pt; text-align: justify; text-indent: 15px; 
    			           margin-top: 12px; margin-left: 5px; margin-right: 5px; color: #191970;}
    </style>
    </head>
    	<body>	
    		<div class="featured_content_container">		
    			<ul>				
    				<li>
    					<div class="info_section_container">
    						<img src="./images/Cleve1.jpg">		
    						<p>
    		 					I'm going to rent my self a house in the shade of the freeway. 
    							I'm going to pack my lunch in the morning and go to work each day.
    		 					And when the evening rolls around, I'll go on home and lay my body down.
    		 					And when the morning light comes streaming in, I'll get up and do it again. 
    		 					Ah men.  Say it again. Ah men. 
    		 					I want to know what became of the changes we waited for love to bring.
    		 					Were they only the fitful dreams of some greater awakening. I've been aware of the time going by. 
    		 					They say in the end it's the wink of an eye.			 					
    						</p>							
    	   				</div>
    				</li>
    				<li>
    					<div class="info_section_container">													
    						<p>
    		 					She was a friend to me when I needed one. 
    		 					Wasn't for her I don't know what I would have done.
    		 					She gave me back something that was missing in me.  
    		 					She could have turned out to be almost anyone.  Almost anyone.  	
    		 					With the possible exception, of who I wanted her to be.
    		 					Running in to the midnight, with her clothes whipping in the wind. 
    		 					Reaching in to the heart of the darkness for the tenderness within. 
    		 					Standing in to the light of the city and then back in the shadows again. 		 					
    						</p>	
    						<img src="./images/Cleve2.jpg">						
    	   				</div>
    				</li>			
    				<li>
    					<div class="info_section_container">
    						<img src="./images/Cleve3.jpg">		
    						<p>
    		 					Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem 
    							gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus.
    							Suspendisse at augue urna, nec tristique libero. Nulla libero elit, tempor vel aliquet id,
    							tincidunt id ante. Etiam egestas orci in velit tristique ut ullamcorper urna egestas.
    							Duis eget risus sem, eu aliquet arcu. Sed ac mauris et arcu interdum malesuada sed
    							eu augue. Suspendisse quis nisi massa. Donec in egestas enim. Ut tristique luctus eros,
    							non pretium ligula feugiat ac.
    						</p>							
    	   				</div>
    				</li>
    				<li>
    					<div class="info_section_container">													
    						<p>
    		 					Etiam non luctus sem. Integer nibh leo, interdum a condimentum quis, consectetur in leo. 
    							In aliquet facilisis tellus, quis dapibus erat posuere sed. Cras egestas massa ut quam
    							placerat pellentesque. Sed in magna quis lorem congue ultricies. Fusce feugiat felis neque.
    							Proin eros tortor, feugiat sit amet laoreet iaculis, gravida non quam. Curabitur lacus 
    							libero, convallis a placerat id, feugiat vitae leo. 
    						</p>	
    						<img src="./images/Cleve4.jpg">						
    	   				</div>
    				</li>
    				<li>
    					<div class="info_section_container">
    						<img src="./images/Cleve5.jpg">		
    						<p>
    		 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    							Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum.
    							Morbi et metus ut diam molestie ullamcorper. Suspendisse rutrum semper semper.
    							Donec volutpat neque in lorem tempus scelerisque. Curabitur dignissim rhoncus 
    							quam ac suscipit. Donec viverra quam lobortis neque porta a sagittis urna tristique.
    						</p>							
    	   				</div>
    				</li>		
    			</ul>
    		</div>	
    	</body>
    </html>
    Last edited by Sciliano; 10-11-2011 at 02:23 PM.

  • #4
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, thank you for the answer and really sorry for the late. Pc crashes, password loss & s***.
    Whatever I finally did what i wanted, the code you gave was near what i wanted to do but not that short so I just did it the 'ugly' way.
    I let you check it out and watch the source code if you are interessed:
    http://www.michaelparis.fr/films/realisation.html

    Thanks again!


  •  

    Tags for this Thread

    Posting Permissions

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