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

    Unhappy Why wont anyone answer-Mootools Noobslide

    HELP PLEASE!! Really need to get this working tonight!! I am applying for a design job and must be able to show my portfolio electronically!!
    **If there is a reason no one is answering, please tell me**
    I dont think it is that far off, but clearly something is stopping the rollover effectst for all projects EXCEPT "annual report" which is what i want the others to be like. Please, please, please help me!!

    Visit link: http://twentyfourdesigns.com/portfolio2.asp to see example of what i have and what isnt working. PLEASE HELP!!
    (Visit link: http://twentyfourdesigns.com/portfolio.asp to see how the code worked BEFORE separating out into jumps/anchors

    (only works in ff and safari at the moment...i'll worry about ie later as i only need it to work on a mac at the moment)

    **page code**
    Code:
    < <head>
    	<title>Welcome to Twenty-Four Designs</title>
        <link rel="favicon" HREF="http://twentyfourdesigns.com/favicon.ico" />
    	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    	<script src="js/mootools.js" type="text/javascript"></script>
    	<script src="js/noobslide.js" type="text/javascript"></script>
    	<script src="js/portfolio.js" type="text/javascript"></script>
        
    </head>
    
    <body>
    
    <div id="wrap">
    
    <div id="header"><img src="Images/24designsLogo.png" alt="Twenty-four Designs Logo" width="264" height="92" class="photo" /><a href="mailto:deb@twentyfourdesigns.com"><img src="Images/DebSmithContact.png" width="279" height="92" class="photo2" alt="Deborah Smith's Portfolio" /></a></div>
    
    <div id="slide-mask">
    <div id="slide-images">
    	<img src="Images/PortfolioImages/MiddlefieldFront.png" alt="" />
    	<img src="Images/PortfolioImages/MiddlefieldSpread1.png" alt="" />
    	<img src="Images/PortfolioImages/MiddlefieldSpread2.png" alt="" />
    	<img src="Images/PortfolioImages/MiddlefieldSpread3.png" alt="" />
    	<img src="Images/PortfolioImages/MiddlefieldSpread4.png" alt="" />
    	<img src="Images/PortfolioImages/MiddlefieldSpread5.png" alt="" />
    	<img src="Images/PortfolioImages/MiddlefieldBack.png" alt="" />
        
    	<img src="Images/PortfolioImages/VerizonDroidWrap.png" alt="" />
        <img src="Images/PortfolioImages/VerizonCavsInvite.png" alt="" />
        <img src="Images/PortfolioImages/VerizonSMBGuide.png" alt="" />
        
        <img src="Images/PortfolioImages/DCPressKitFront.png" alt="" />
    	<img src="Images/PortfolioImages/DCPressKitInside1.png" alt="" />
    	<img src="Images/PortfolioImages/DCPressKitInside2.png" alt="" />
    	<img src="Images/PortfolioImages/DCPressKitBack.png" alt="" />
        
        <img src="Images/PortfolioImages/PerfcoPC1.png" alt="" />
    	<img src="Images/PortfolioImages/PerfcoPC2Cover.png" alt="" />
    	<img src="Images/PortfolioImages/PerfcoPC2inside.png" alt="" />
    	<img src="Images/PortfolioImages/PerfcoBillInsert.png" alt="" />
        
        <img src="Images/PortfolioImages/CenturyCatalogFront.png" alt="" />
    	<img src="Images/PortfolioImages/CenturyCatalogSpread1.png" alt="" />
    	<img src="Images/PortfolioImages/CenturyCatalogSpread2.png" alt="" />
    	<img src="Images/PortfolioImages/CenturyCatalogSpread3.png" alt="" />
        
    	<img src="Images/PortfolioImages/UCCConcept1Cover.png" alt="" />
    	<img src="Images/PortfolioImages/UCCConcept1Spread1.png" alt="" />
    	<img src="Images/PortfolioImages/UCCConcept1Spread2.png" alt="" />
    	<img src="Images/PortfolioImages/UCCConcept2Cover.png" alt="" />
    	<img src="Images/PortfolioImages/UCCConcept2Spread1.png" alt="" />
    	<img src="Images/PortfolioImages/UCCConcept2Spread2.png" alt="" />
    	<img src="Images/PortfolioImages/UCCConcept2Spread3.png" alt="" /></div>
    </div></div>
    
    <div id="slider">    
                <ul class="navigation">
    
                    <li><a href="#AnnualReport">Annual Report&nbsp;&nbsp;&nbsp;:</a></li>
                    <li><a href="#Verizon">Verizon Wireless&nbsp;&nbsp;&nbsp;:</a></li>
                    <li><a href="#PressKit">Press Kit&nbsp;&nbsp;&nbsp;:</a></li>
                    <li><a href="#Perfco">Perfco&nbsp;&nbsp;&nbsp;:</a></li>
                    <li><a href="#Century">Century Windows&nbsp;&nbsp;&nbsp;:</a></li>
                    <li><a href="#UCC">United Church of Christ</a></li>
                </ul>
    
    <div class="scroll">
    				<div class="panel" id="AnnualReport"><p class="text"><strong>Middlefield Banc. 2008 Annual Report</strong> : Printed Four Color Process on Coated Paper</p>
    <div id="slide-thumbs">               
    	<img src="Images/PortfolioImages/MiddlefieldFront.png" alt="" />
    	<img src="Images/PortfolioImages/MiddlefieldSpread1.png" alt="" />
    	<img src="Images/PortfolioImages/MiddlefieldSpread2.png" alt="" />
    	<img src="Images/PortfolioImages/MiddlefieldSpread3.png" alt="" />
    	<img src="Images/PortfolioImages/MiddlefieldSpread4.png" alt="" />
    	<img src="Images/PortfolioImages/MiddlefieldSpread5.png" alt="" />
    	<img src="Images/PortfolioImages/MiddlefieldBack.png" alt="" /></div></div>
        
                    <div class="panel" id="Verizon"><p class="text"><strong>Verizon Wireless</strong> : Slide One - Motorola Droid Box Sleeve : Slide Two - Cleveland Cavaliers' VIP Invite : Slide Three - Small Business Guide (Internal Website)</p>
    <div id="slide-thumbs">               
    	<img src="Images/PortfolioImages/VerizonDroidWrap.png" alt="" />
    	<img src="Images/PortfolioImages/VerizonCavsInvite.png" alt="" />
    	<img src="Images/PortfolioImages/VerizonSMBGuide.png" alt="" /></div></div>
        
        <div class="panel" id="PressKit"><p class="text"><strong>Rock. Ride. Remember. Press Kit</strong>  : Printed Four Color Process on Coated Paper : All Over Dull with Spot Varnish : Custom Die Cut </p>
    <div id="slide-thumbs">               
    	<img src="Images/PortfolioImages/DCPressKitFront.png" alt="" />
    	<img src="Images/PortfolioImages/DCPressKitInside1.png" alt="" />
    	<img src="Images/PortfolioImages/DCPressKitInside2.png" alt="" />
    	<img src="Images/PortfolioImages/DCPressKitBack.png" alt="" /></div></div>
        
        <div class="panel" id="Perfco"><p class="text"><strong>Perfco Bill Insert and Postcards</strong>  : Printed Digital on Coated Paper : Variable Printed with Target Company's Name</p>
    <div id="slide-thumbs">               
    	<img src="Images/PortfolioImages/PerfcoPC1.png" alt="" />
    	<img src="Images/PortfolioImages/PerfcoPC2Cover.png" alt="" />
    	<img src="Images/PortfolioImages/PerfcoPC2inside.png" alt="" />
    	<img src="Images/PortfolioImages/PerfcoBillInsert.png" alt="" /></div></div>
        
        <div class="panel" id="Century"><p class="text"><strong>Century Windows' Catalog Pages</strong>  : Printed Four Color Process on Coated Paper</p>
    <div id="slide-thumbs">               
    	<img src="Images/PortfolioImages/CenturyCatalogFront.png" alt="" />
    	<img src="Images/PortfolioImages/CenturyCatalogSpread1.png" alt="" />
    	<img src="Images/PortfolioImages/CenturyCatalogSpread2.png" alt="" />
    	<img src="Images/PortfolioImages/CenturyCatalogSpread3.png" alt="" /></div></div>
        
        <div class="panel" id="UCC"><p class="text"><strong>United Church of Christ Coffee Table Book Concepts</strong>  : Concept 1 - Vellum Wrap on Cover with Spot UV : Concept 2 - Spot UV on Cover</p>
    <div id="slide-thumbs">               
    	<img src="Images/PortfolioImages/UCCConcept1Cover.png" alt="" />
    	<img src="Images/PortfolioImages/UCCConcept1Spread1.png" alt="" />
    	<img src="Images/PortfolioImages/UCCConcept1Spread2.png" alt="" />
    	<img src="Images/PortfolioImages/UCCConcept2Cover.png" alt="" />
    	<img src="Images/PortfolioImages/UCCConcept2Spread1.png" alt="" />
    	<img src="Images/PortfolioImages/UCCConcept2Spread2.png" alt="" />
    	<img src="Images/PortfolioImages/UCCConcept2Spread3.png" alt="" /></div></div>
    
    </div>
    </div>
    </body>
    **css**
    Code:
    * {
       
    	margin-left: auto ;
    	margin-right: auto ;;
       padding: 0;
       outline: none;
       /*outline: 0;*/
    
    	
    }
    
    p.text{
    	font-family: Tahoma, Geneva, sans-serif;
    	font-size: 11px;
    	line-height: 16px;
    	color: #000
    }
    
    p.text2{
    	font-family: Tahoma, Geneva, sans-serif;
    	font-size: 12px;
    	line-height: 16px;
    	font-weight: bolder;
    	color: #3c2639;
    }
    
    /* ********************************** */
    
    #slide-mask {
    	position:relative;
    	left:0;
    	margin:0;
    	padding:0;
    	width:920px;
    	height:650px;
    	overflow:hidden;
    	margin-left:auto;
    	margin-right:auto;
    }
    #slide-images {
    	position:relative;
    	left:0;
    	width:9000px;
    	height:650px;
    	margin-left:auto;
    	margin-right:auto;
    }
    #slide-images img {
    	width:920px;
    	height:650px;
    }
    
    #slide-thumbs {
    	background-color:none;
    	width:880px;
    	height:75px;
    	left:0;
    	margin-left:auto;
    	margin-right:auto;
    }
    #slide-thumbs img {
    	width:106px;
    	height:75px;
    	cursor:pointer;
    }
    
    /* ********************************** */
    
    #slider {
    	position:relative;
    	left:0;
        width: 900px;
        overflow:hidden;
    	margin-left:auto;
    	margin-right:auto;
    }
    
    .scroll {
    	position:relative;
    	height: 105px;
    	width: 900px;
    	overflow-y: hidden;
    	background: none;
    	margin-left:auto;
    	margin-right:auto;
    	
    }
    
    #scrollContainer div.panel {
    	height: 105px;
    	width: 900px;
    	overflow:hidden;
    	margin-left:auto;
    	margin-right:auto;
    }
    
    ul.navigation {
        list-style: none;
        margin: 0;
        padding: 0;
        padding-bottom: 9px;
    }
    
    ul.navigation li {
        display: inline;
        margin-right: 10px;
    }
    
    ul.navigation a {
        text-decoration:none;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 11px;
    	border: none;
    	color: #3c2639;
    	font-weight: bolder;
    	text-transform:uppercase;
    }
    
    ul.navigation a:hover {
        text-decoration:none;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 11px;
    	border: none;
    	color: #5a447a;
    	font-weight: bolder;
    	text-transform:uppercase;
    }
    
    ul.navigation a.selected {
        text-decoration:none;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 11px;
    	border: none;
    	color: #3c2639;
    	font-weight: bolder;
    	text-transform:uppercase;
    }
    
    ul.navigation a:focus {
        text-decoration:none;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 11px;
    	border: none;
    	color: #3c2639;
    	font-weight: bolder;
    	text-transform:uppercase;
    }
    
    /* ********************************** */
    
    body {
    	width: auto;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    	background-image: url(Images/bckgrnd.jpg);
    	background-repeat: repeat-x;
    	background-position: center top;
    }
    
    #wrap {
    	float: none;
    	width: 1000px;
    	height: auto;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    }
    
    #header {
    	width: 1000px;
    	height: 100px;
    	margin-left: auto ;
    	margin-right: auto ;
    	padding-top: 7px;
    }
    
    .photo {
    	float: left;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    }
    
    .photo2 {
    	float: right;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    }
    
    .photo3 {
    	margin-left: auto ;
    	margin-right: auto ;	
    }
    
    a:link {
    	text-decoration:none;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 11px;
    	border: none;
    	color: #3c2639;
    	font-weight: bolder;
    	text-transform:uppercase;
    }
    a:visited {
        text-decoration:none;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 11px;
    	border: none;
    	color: #3c2639;
    	font-weight: bolder;
    	text-transform:uppercase;
    }
    a:active {
    	text-decoration:none;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 11px;
    	border: none;
    	color: #3c2639;
    	font-weight: bolder;
    	text-transform:uppercase;
    }
    a:hover {
    	text-decoration:none;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 11px;
    	border: none;
    	color: #5a447a;
    	font-weight: bolder;
    	text-transform:uppercase;}
    **portfolio.js **
    Code:
    // JavaScript Document
    window.addEvent("domready", function ()
      {
    	var effect = {property:'left',duration:700, transition:Fx.Transitions.Linear, wait:false};
    	var nS = new noobSlide({
    		box: $('slide-images'),
    		items: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
    		size:925,
    		handles: $$('#slide-thumbs img'),			handle_event: 'mouseenter',
    
    		fxOptions: effect,
    	  	onWalk: function(currentItem,currentHandle){
    		  $each($$(this.handles), function(handle,index){
    				handle.get('tween', {property: 'opacity', duration: 'short'}).start(1);
    		});
    	      currentHandle.get('tween', {property: 'opacity', duration: 'short'}).start(0.5);
    	 	},
    	});
    	
      });
    I also use the mootools.js and noobslide.js...
    Last edited by 24Designs; 12-07-2009 at 04:46 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,170
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    Use your error console to check out the reported error. (Line 19).

    You need to escape the apostophe in
    alt="Deborah Smith's Portfolio"
    to read
    alt="Deborah Smith\'s Portfolio"

    **If there is a reason no one is answering, please tell me**
    Well, people are not just sitting around here 24 hours of the day (especially on a Sunday) hoping that someone will come along with a question.

    Quizmaster: Charles who is said to be the father of modern electronic computing?
    Contestant: Darwin.
    Last edited by Philip M; 12-07-2009 at 07:56 AM.

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by 24Designs View Post
    **If there is a reason no one is answering, please tell me**
    I also use the mootools.js and noobslide.js...
    This might be one of the reasons for nobody answered. If your code would have been written in plain native javascript, you would have more chances to receive an answer. But when in comes about javascript libraries/frameworks, the professional programmers avoid them or, at least, avoid analyze their intricate custom methods syntax.

    It is impossible to guess what is hidden inside mootools.js and noobslide.js files. Using several different javascript libraries/frameworks on the same document, at the same time, bring often all kind of conflicts.

    On the other hand you should check first if those libraries came in conflict before posting the question.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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