SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 56
  1. #26
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    slideshow.js

    I believe I have the page set up correctly now as there are no errors when I validate the page.

    But the slideshow is no where to be found.

    I think that's because I can't figure out HOW and WHERE to place the paths/

    my directory is
    mydesign (root) off of the c drive
    css
    fonts
    grahps
    images
    scripts

    You said . . . "directory -- the path in which all the images is located. I try NOT to use root (/) or uptree links (../) in my site designs -- usually that indicates something wrong with the directory structure of the site being built/displayed."

    Can you provide a directory example using my folders?

    I'm not sure at all how, and where to syntax the path and directory as shown in blue.

    If I have a different set of pictures for each page in my site, how and where do I differentiate which slideshow to call?

    What is "leave the script EXTERNAL" - external to what? I have the slidshow.js in my scripts folder.

    An array I'm familiar with as I used dynamic arrays in Paradox and in Access database programs.

    I like this stuff but I have -no underlying knowledge of javascript. Reading this stuff is like Russian to me!

    As always - a big thanks.

    Rick

    var
    slideshowTimer=6000,
    slideshows=[];

    function slideshowLoad( slideshow,
    src="/css/images/"
    directory,slideList) {
    var target=document.getElementById(slideshow);
    target.slideCount=slideList.length;
    target.slideList=[];
    for (t in slideList) {
    target.slideList[t]=document.createElement('img');
    target.slideList[t].src=directory+slideList[t];
    }
    target.slideFrame=document.createElement('img');
    target.slideFrame.src=target.slideList[0].src;
    target.appendChild(target.slideFrame);
    target.slideCurrent=0;
    slideshows.push(target);
    }

    function slideRotate() {
    for (t in slideshows) { with (slideshows[t]) {
    slideFrame.src=slideList[slideCurrent].src;
    if (++slideCurrent>=slideCount) slideCurrent=0;
    }}
    setTimeout(slideRotate,slideshowTimer);
    }

    if (window.addEventListener) {
    window.addEventListener('load',slideRotate,false);
    } else if (window.attachEvent) {
    window.attachEvent('onload',slideRotate);
    }

  2. #27
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You've worded your post somewhat confusingly. Could you provide a link hwere this is taking place? I can't tell from your list of directories whether they all escalade into one folder to another, or after the root, those folders appear. I assume the latter option. That being said, could you try and just using ../ to manually go back from the current folder? The SRC in your javascript code is going to that URL FROM the Javascript folder. So to get to the CSS folder, I'd just do ../css etc etc until you have the image yeou want.

    Leaving the script external means not having it in the HTML page in a <script type="text/javascript">code here</script> and referencing the script via the script tag (though the script being placed in a separate .js file elsewhere on the server).

    You can select a certain slideshow by giving each slideshow an ID, and using document.getElementById() to select a certain slideshow, and upon that slideshow, you'd do whatever, call a function for example.

    I'd say this belongs more in the Javascript forum so I'll ask for a move .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #28
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Uhm... are you testing locally off the hard drive, or off a real server? You mentioned C:

    rooting it with / will point it at C:/css/images instead of the directory you actually have the page in. This is why as a rule I don't declare root. Would probably work fine once uploaded... but really, just lose the leading / if the html files are in your site root as opposed to your DRIVE root.

    function slideshowLoad( slideshow,
    src="/css/images/"
    directory,slideList)

    and src doesn't go there, what they devil are you even trying to do there?!?

    Again, I'd have to see a copy live, but I suspect you're really not getting how scripts work... or paths... What I had in the external file (STOP trying to put it in the markup) should have remained COMPLETELY unmodified, there is no reason for you to be changing that!

    http://www.cutcodedown.com/for_other...2/slideshow.js

    Copy that, call it externally, LEAVE IT ALONE...

    The only place you should be changing it would be in the HTML when it's called.
    Code:
    <script
    	type="text/javascript"
    	src="slideshow.js"
    ></script>
    <script type="text/javascript"><!--
    	/*
    		slideshowLoad takes the following parameters:
    			target container DIV id,
    			path in which slideshow images are stored,
    			an array of filenames in said path
    	*/
    	slideshowLoad('slideshow','css/images',[
    		'cdmpicketfence.jpg',
    		'cdmbelowstreetlevel.jpg',
    		'cdmbigcorona.jpg',
    		'cdmdowncoast.jpg',
    		'cdmrickssold.jpg',
    		'cdmswimmingcove.jpg',
    		'cdmcottage.jpg',
    		'cdmcustom.jpg',
    		'cdmpalmcottage.jpg',
    		'cdmocnviewcottage.jpg',
    		'cdmcornerestate.jpg',
    		'cdmpelicanrock.jpg',
    		'cdmcustomestate1.jpg',
    		'cdmmainbeach.jpg',
    		'cdmflowerstreet.jpg',
    		'cdmperchedoncliff.jpg',
    		'cdmcustomcorner.jpg',
    		'cdmpoppyave.jpg',
    		'cdmtreelinest.jpg',
    		'cdmreoestate.jpg',
    		'cdmmodern.jpg',
    		'cdmtreetrunk.jpg'
    	]);
    --></script>
    you don't say "src=", you don't put it in the script that actually does the work which you don't need to change and has no business being inlined in the markup... and assuming your directory structure makes ANY sense, you don't put a leading slash on the path as that would root during testing to the drive root; unless of course your html file is actually at C:\ -- and that's usually a bad idea.

  4. #29
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry . . . I just don't get it.

  5. #30
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    slideshow

    I believe this is a good slideshow design - I really do.

    I'm still learning html and css and now I have to understand java script. At times this is exasperating to the point of total confusion for me.

    Here is where I am with it.

    CSS code:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    @font-face {
    	font-family:'tangerine';
    	src:url('fonts/Tangerine_Regular-webfont.eot'); 
    	src:url('fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
    			url('fonts/Tangerine_Regular-webfont.woff') format('woff'), 
    			url('fonts/Tangerine_Regular-webfont.ttf') format('truetype'), 
    			url('fonts/Tangerine_Regular-webfont.svg#svgTangerineRegular') format('svg');
    	font-weight:normal; 
    	font-style:normal;
    	font-variant:normal;
    }
    
    /* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    
    }
    
    img,fieldset {
    	border:none;
    }
    
    hr {
    	display:none;
    }
    
    body {
    	font:normal 85%/150% verdana,geneva,helvetica,sans-serif;
    	color:#4DF;
    	background-image: url(images/blueleftfade.png);
    	margin-right:2em;
    }
    
    #pageWrapper {
    	min-width:752px;
    	max-width:96em;
    }
    
    #sideBar {
    	float:left;
    	width:300px;
    	padding-top:2em;
    	padding-right:1em;  /* I added this right padding */
    
    }
    
    h1		{
    	padding-left:28px;
    	font: 48px/52px tangerine,arial,helvetica,sans-serif;
    	color:#4DF;
    	text-shadow:0 0 8px #ADF;
    }
    
    h1 span {
    	display:block;
    	padding-left:48px;
    }
    
    h1 span span {
    	margin-top:-6px;
    }
    
    #mainMenu {
    	list-style:none;
    	margin:1em;
    	position:fixed;
    	line-height:60%; /* I added line height */
    }
    
    #mainMenu li {
    	padding-bottom:0.16em;
    }
    
    #mainMenu a {
    	display:block;
    	padding:0.5em 1em;
    	text-decoration:none;
    	color:#4DF; /*#8DF;*/
    	/* background:#012  320px 0 repeat-y; */
    	-moz-border-radius:0.5em;
    	-webkit-border-radius:0.5em;
    	border-radius:0.5em;
    }
    
    #mainMenu a:active,
    #mainMenu a:focus,
    #mainMenu a:hover {
    	color:#FFF;
    	background-color:#048;
    	background-position:0 0;
    	background-image:url(images/menubkrnd2.png); /* I added this */
    }
    
    #content {
    	overflow:hidden; /* prevent indent after floated #sidebar */
    	zoom:1; 		 /* trip haslayout, prevent indent legacy IE */
    	padding-top:2em;
    	margin-right:1em;
    }
    
    #content a.email {
    	color:#ADF;
    	text-decoration:none;
    }
    
    #content a.email span {
    	font:normal 200%/120% tangerine,arial,helvetica,sans-serif;
    	text-shadow:0 0 8px #ADF;
    }
    
    #content a.email:active,
    #content a.email:focus,
    #content a.email:hover {
    	color:#FFF;
    }
    
    #content h2 {
    	padding:0.3em 0 0.2em;
    	text-align:center;
    	font:normal 300%/120% tangerine,arial,helvetica,sans-serif;
    	color:#ADF;
    	text-shadow:0 0 8px #ADF;
    }
    
    #content p {
    	padding-bottom:1em;
    }
    
    #content .plate {
    	display:block;
    	width:100%;
    	margin-bottom:2em;
    }
    
    #footer {
    	clear:both;
    	margin:1em 1em 1em 314px; 
    	font:normal 90%/150% arial,helvetica,sans-serif;
    	color:#FFF;
    	/* border:solid #FFF;
    	border-width:2px 0; */
    	margin-right:3em; /* I added this */
    }
    
    #footer p {
    	padding:0.5em 0;
    }
    
    #slideshow {
    	width:450px;
    	float:right;
    	margin:0 0 0.5em 1em;
    }
    
    @media (max-width:900px) {
    	#slideshow {
    		float:none;
    		display:block;
    		margin:0 auto 0.5em;
    	}
    }
    
    #slideshow img {
    	width:450px;
    	height:270px;
    	
    }
    html code: (for testing)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Content-Language" content="en"/>
    <meta name="description" content="orange county real estate analysis, statistical analysis, median sales price, average sale price, historical real estate values, short sales, foreclosure, real estate content, determining market value, seller information, buyer information" />
    <link 
    	type="text/css"
        rel="stylesheet"
        href="css/screen.css"
        media="screen,projection,tv"/>
    <title>
    Orange County Real Estate - Properties With Style, Inc. Home Page
    </title>
    	<script
    		type="text/javascript"
    		src="slideshow.js"
    	></script>
    </head><body>	
    
    	<div id="pageWrapper">
    
    	<div id="sideBar">
    
      		<ul id="mainMenu">
        			<li><a href="http://www.propertieswithstyle.com" title="HOME PAGE">OUR HOME PAGE</a></li>
        			<li><a href="http://www.propertieswithstyle.com/mktvalue.html">Start Here Insight On Market Value</a></li>
                    <li><a href="http://www.propertieswithstyle.com/">Beach &amp; South County Overviews</a></li>
                    <li><a href="http://www.propertieswithstyle.com/socomap.html">Find South County &amp; Beach Homes</a></li>
        			<li><a href="http://www.propertieswithstyle.com/orangecountymap.html">Find All Orange County Homes</a></li>
    				<li><a href="http://www.propertieswithstyle.com/">Thirteen Year Median Values</a></li>
    				<li><a href="http://www.propertieswithstyle.com/seller.html">Seller Information</a></li>
    				<li><a href="http://www.propertieswithstyle.com/buyer.html">Buyer Information</a></li>
    				<li><a href="http://www.propertieswithstyle.com/">Short Sale Information</a></li>
    				<li><a href="http://www.propertieswithstyle.com/">Foreclosure (REO) Information</a></li>
    				<li><a href="http://www.propertieswithstyle.com/pwsinternetmarketing.html">Our Internet Marketing</a></li>
    				<li><a href="http://www.propertieswithstyle.com/">Loan Calculation</a></li>
    				<li><a href="http://www.propertieswithstyle.com/caschools.html">School Information</a></li>
    				<li><a href="http://www.propertieswithstyle.com/">Rental Information</a></li>
    				<li><a href="http://www.propertieswithstyle.com/">REALTORS&reg; And You</a></li>
        	</ul>
    	</div><!--eND of Sidebar-->
        
        <hr />
    		
        <div id="content">
        
        <div id="slideshow"></div>
    		
            <h1>
            Properties With Style, Inc.
           		<span>Our primary focus is South Orange County and Beach Cities.</span>
            </h1>
    <br />
     
       		<p>
        We know that style is a term that applies to our clients as well as the properties we represent. Whether it's a multi-million dollar estate or an eclectic condominium, matching properties with style to our clients' personal style makes a distinctive difference.
    		</p>
            <p>
       We believe our clients are <em>&quot;Properties With Style.&quot;</em>
    		</p>
            <p>
    Welcome to Properties With Style Internet site. We are upgrading our site to include new and exciting local real estate information presented in a remarkably uncommon way, never seen before, except of course in our previous Internet site. Detailed data which exhibits real estate markets in a clear and precise method producing an almost instantaneous recognition of local markets, very local. A macro and micro visualization.
    		</p>
            <p>
    Don't want to wait? If you have a real estate question or need, please feel free to email us. We will provide you with the information that will guide you in making your paramount real estate decisions.
    		</p>
          	<p>
    
    		If you have questions please feel free to contact us directly at:
            <a href="mailto:propertieswithstyle@gmail.com" class="email">
            	<span>Properties With Style.</span></a>
           	</p>
    
    		<img src="css/images/rickfade.jpg" width="140" height="200" alt="Ricks Picture"
             />
    		       
            <p>
            <em>Rick Schreiber President ~ Properties With Style, Inc.</em>
            </p>
    
            <p>
            Member in Good Standing with the Following Organizations.
            </p>
    
    	 	<img src="css/images/ocarlogo.png" width="250px" height="80px" alt="Orange County Association Of REALTORS" 
            />
    	
        	<p>
        Orange County Association of REALTORS&reg;
        	</p>
    		<br  />
    
    	 <img src="css/images/carlogo.png" width="100" height="90" alt="California Association of REALTORS Logo" 
         />
        <p>California Association of REALTORS&reg;
        </p>
    
    	<br  />
        
        <img src="css/images/realtorlogo.png" alt="NAR Realtor Logo" width="100" height="90" 
        />    
        <p>
    	National Association of REALTORS&reg;
        </p>
    	<br />
    
    	<img src="css/images/sfrlogo.gif" width="100" height="90" alt="SFR Logo" 
        />
    
    	<p></p>
        
        <p>Only those who have passed the National Association of REALTORS&reg; education requirements for their Short Sale and Foreclosure Resource course are	allowed to display this logo. Properties With Style, Inc. is a member in good standing of the National Association of REALTORS&reg; and is proud to have earned this achievement.
        </p>
        
        <h2>
        Huntington Beach Macro Chart
        </h2>
        <img src="css/graphs/hbmacro.gif"  alt="huntington beach macro chart"
        class="plate" />
        </div><!--content-->	
        
      	<div id="footer">
        <p>
        Properties With Style Inc., a Real Estate Corporation&copy;. The information being provided by CARETS (CLAW, CRISNet MLS, DAMLS, CRMLS, i-Tech MLS, and/or VCRDS) is for the visitor's personal, non-commercial use and may not be used for any purpose other than to identify prospective properties visitor may be interested in purchasing.
    	</p>
        <p>
    Any information relating to a property referenced on this web site comes from the Internet Data Exchange (IDX) program of CARETS. This web site may reference real estate listing(s) held by a brokerage firm other than the broker and/or agent who owns this web site.
    	</p>
        <p>
    The accuracy of all information, regardless of source, including but not limited to square footages and lot sizes, is deemed reliable but not guaranteed and should be personally verified through personal inspection by and/or with the appropriate professionals. The data contained herein is copyrighted by CARETS, CLAW, CRISNet MLS, DAMLS, CRMLS, i-Tech MLS and/or VCRDS and is protected by all applicable copyright laws. Any dissemination of this information is in violation of copyright laws and is strictly prohibited.
    	</p>
        <p>
    CARETS, California Real Estate Technology Services, is a consolidated MLS property listing data feed comprised of CLAW (Combined LA/Westside MLS), CRISNet MLS (Southland Regional AOR), DAMLS (Desert Area MLS),CRMLS (California Regional MLS), i-Tech MLS (Glendale AOR/Pasadena Foothills AOR) and VCRDS (Ventura County Regional Data Share).
    Information of sellers and others have not been verified. Data maintained by the Associations or their MLS may not reflect all activity in the market. DRE License: 01408382.
    	</p>
      	 </div><!--eND Footer-->
          </div><!--pageWrapper-->
    		<!-----------------------------slideshow starts here------------------------------>
    <script type="text/javascript">
    	/*
    		slideshowLoad takes the following parameters:
    			target container DIV id,
    			path in which slideshow images are stored,
    			an array of filenames in said path-->
    	*/    
    
    		slideshowLoad('slideshow','slideshow/',[
    			'hpcdmview.png',
    			'hpbalisIferry.png',
    			'hphhhome.png',
    			'hpcdcfairway.png',
    			'hpcdmmodern.png',
    			'hpdph.png',
    			'hpmainsthb.png',
    			'hpnpthbrdocks.png',
    			'hpdph1.png',
    			'hphbpier.png',
    			'hpestate.png',
    			'hpcdmlookout.png',
    	]);
    </script>	
    
    <!-----------------------eND of slide show----------------------------------->
        </body>
     </html>
    javascript code:
    Code:
    /*
    	Simple slide show
    	Jason M. Knight
    	March 4, 2012
    */
    
    var
    	slideshowTimer=3000,
    	slideshows=[];
    
    function slideshowLoad(targetID,directory,slideList) {
    	var target=document.getElementById(targetId);
    	target.slideCount=slideList.length;
    	target.slideList=[];
    	for (t in slideList) {
    		target.slideList[t]=document.createElement('img');
    		target.slideList[t].src=directory+slideList[t];
    	}
    	target.slideFrame=document.createElement('img');
    	target.slideFrame.src=target.slideList[0].src;
    	target.appendChild(target.slideFrame);
    	target.slideCurrent=0;
    	slideshows.push(target);
    }
    
    function slideRotate() {
    	for (t in slideshows) { with (slideshows[t]) {
    		slideFrame.src=slideList[slideCurrent].src;
    		if (++slideCurrent>=slideCount) slideCurrent=0;
    	}}
    	setTimeout(slideRotate,slideshowTimer);
    }
    
    if (window.addEventListener) {
    	window.addEventListener('load',slideRotate,false);
    } else if (window.attachEvent) {
    	window.attachEvent('onload',slideRotate);
    }
    Problem - I don't know the syntax for correct scripting of the path and where to place it.

    I will have another slide show named slideshowcdm.

    So I'll have <div id="slideshowcdm"></div> in my html - correct?

    There will be 16 separate slide shows each on a separate page. All of them will use the same JavaScript? I notice the word "slideshow" six times at the top of the slideshowLoad script? Does this script have to be duplicated for each separate slideshow? I think not - hopefully.

    Appreciate your help as always.

    Rick


    If I can just get one slideshow to work then I can better understand it and then make new ones for different slide shows on separate pages.

  6. #31
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    You should be able to use the same code for every page -- you can even do multiple slideshows on a page. You just make a empty DIV where you want it on the page:

    <div id="nextSlideShow"></div>

    then make a call to the 'build' routine to add it to the list of slideshows.
    Code:
    slideshowLoad('nextSlideshow','images/',[
    	'newImage1.png',
    	'newImage2.png',
    	'newImage3.png'
    ]);

    You could have multiple slideshows back-to-back-to-back

    <div id="firstSlideShow"></div>
    <div id="secondSlideShow"></div>
    <div id="thirdSlideShow"></div>

    and then load their images:

    Code:
    slideshowLoad('firstSlideshow','images/',[
    	'newImage1.png',
    	'newImage2.png',
    	'newImage3.png'
    ]);
    slideshowLoad('secondSlideshow','images/',[
    	'newImage4.png',
    	'newImage5.png',
    	'newImage6.png'
    ]);
    slideshowLoad('thirdSlideshow','images/',[
    	'newImage7.png',
    	'newImage8.png',
    	'newImage9.png'
    ]);
    The script is designed to plug in all the markup automatically when you call slideShowLoad. You just make a empty div with an ID on it, call the script to load the images into it from the directory....

    Also, putting the comments after the tag being closed can land them between floats; this can in turn result in browser rendering errors in both IE and FF -- there are two rare errors that comments -- YES, I said COMMENTS -- can trigger; double-render which basically makes text show up twice overlapping itself on the page, and disappearing content, which, well... the name says it all.

    IT's why all my comments are

    <!-- #footer --></div>

    The error doesn't crop up very often, but when it does you'll end up ripping your hair out or trying to hack around it -- so I dodge the problem entirely by moving the comment before the close -- that way it can never end up between sibling elements.

    Also, </div> is the end of something, do you really need to say end? Not all that useful. If you are opening it with a meaningful name <div id="footer"> doesn't need a comment.... seeing what's being closed (an element with the ID of footer) is handy, but </div> already says end, so why say it again?

    When it comes to clear code practices I always point people at this article on IBM's Linux developer site. It's mostly about programming C, but a lot of the concepts extend to every aspect of programming; and can be readily applied to HTML, CSS and Javascript.

    http://www.ibm.com/developerworks/li.../l-clear-code/

    It's a good read. I'm particularly fond of his "Oh? We're done? Thanks for letting me know." comment.

  7. #32
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I read Jeff Volgel's page.

    It was interesting.

    I never did get his explanation regarding the bold right [. It was vague to me.

    I noticed you used them often in your descriptions of multiple slide shows which was rather clear and understandable to me.

    They appear to be an opening and closing method in the html document.

    I can never remember reading about them in any articles or html/css books.

    Can you clarify?

    My slide show is not showing up on my page.

    I still believe it has to do with . . . I don't know the syntax for defining the path, and where to place it in all of this code.

    Thanks . . . rick

  8. #33
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    I never did get his explanation regarding the bold right [. It was vague to me.
    They're not a HTML element, but a javascript one. The bracket tokens indicate the start and end of an array.

    for example:

    var myArray=['firstImage.png','secondImage.png','thirdImage.png'];

    Makes a list javascript can manipulate. In my examples I split it into multiple lines just because I find it easier to read and edit that way, but it could just as easily be:

    slideshowLoad('firstSlideshow','images/',['newImage1.png','newImage2.png','newImage3.png']);

    ... as a single line. The brackets when calling a function just passes that entire list of image names as a single variable.

  9. #34
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Arrays . . . perfect.

    What about this . . .

    "My slide show does not show on my page.

    I still believe it has to do with . . . I don't know the syntax for defining the path, and where to place it in all of this code."

    What could be causing this?

    thanks . . . Rick

  10. #35
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wait a minute . . .

    You said . . . "They're not a HTML element, but a javascript one. The bracket tokens indicate the start and end of an array."

    Does that mean that ALL of the picture arrays go in the javascript???

    I think I see it now.

    On each html page where a slideshow is used I declare a <div>slidshowname</div>

    That <div> calls slideshowLoad and runs the slide show.

    Is this correct?

    Rick

  11. #36
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    <div id="slideShowName"> but yeah.

    The path part is simple -- it's the path to the file in relation to where the HTML file is located.

    Code:
    <div id="firstSlideShow"></div>
    <script type="text/javascript">
    slideshowLoad('firstSlideshow','images/',[
    	'newImage1.png',
    	'newImage2.png',
    	'newImage3.png'
    ]);
    </script>
    Would be kind-of the same (not really) as going:
    Code:
    <div id="firstSlideShow">
    	<img src="images/newImage1.png" />
    	<img src="images/newImage1.png" />
    	<img src="images/newImage1.png" />
    </div>
    That's an oversimplification and it ain't quite right, but is the best way I can think to explain what the script is doing and how the path variable works into it.

    Oh, and that script won't work in IE7/lower... that's a my bad, I switch languages so often I from time to time forget that "for/in" is for modern browsers only.

    Code:
    /*
    	Simple slide show
    	Jason M. Knight
    	9 April 2012
    */
    
    var
    	slideshowTimer=3000,
    	slideshows=[];
    
    function slideshowLoad(targetId,directory,slideList) {
    	var target=document.getElementById(targetId);
    	target.slideCount=slideList.length;
    	target.slideList=[];
    	for (t=0; t<slideList.length; t++) {
    		target.slideList[t]=document.createElement('img');
    		target.slideList[t].src=directory+slideList[t];
    	}
    	target.slideFrame=document.createElement('img');
    	target.slideFrame.src=target.slideList[0].src;
    	target.appendChild(target.slideFrame);
    	target.slideCurrent=0;
    	slideshows.push(target);
    }
    
    function slideRotate() {
    	for (t=0; t<slideshows.length; t++) {
    		with (slideshows[t]) {
    			slideFrame.src=slideList[slideCurrent].src;
    			if (++slideCurrent>=slideCount) slideCurrent=0;
    		}
    	}
    	setTimeout(slideRotate,slideshowTimer);
    }
    
    if (window.addEventListener) {
    	window.addEventListener('load',slideRotate,false);
    } else if (window.attachEvent) {
    	window.attachEvent('onload',slideRotate);
    }
    Fixes it for legacy IE. (buddy of mine just pointed that out). My bad.

  12. #37
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is "Legacy IE" by the way?

  13. #38
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    What is "Legacy IE" by the way?
    I think he means IE7 or lower with that, as opposed to taking about modern web browsers which seems to automatically exclude all version of IE.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #39
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    What is "Legacy IE" by the way?
    legacy - anything handed down from the past, as from an ancestor or predecessor
    IE - Internet Explorer

    predecessors of IE -- aka older versions. In this case as paul said, I mean IE7/earlier. Old/outdated ancestor versions.

  15. #40
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok - legacy - old - like me!

    View at : http://www.propertieswithstyle.com/indextest.html

    If you look at this page you will see that the slideshow is in the correct position. (OK Oakley, I must be close now. . .)

    However - I don't know how or where to set the paths for the images and the slideshow.js ? ? ?



    root .html files
    css
    fonts
    graphs
    images
    scripts

    Man, would I love to solve this problem . . .

    Thanks much . . . . Rick

  16. #41
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Paths . . .

    You know I've asked this question about four times with no answer.

    All other questions were satisfied.

    However - I don't know how or where to set the paths for the images and the slideshow.js ? ? ?


    root .html files
    css
    fonts
    graphs
    images
    scripts

    Man, would I love to solve this problem . . .

  17. #42
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Sad part is, I've answered it six times.

    Like say... here: http://www.sitepoint.com/forums/show...=1#post5099248

    if your images are in images, you point it at images/ when you call slideShowLoad -- it's the second parameter to the function! The path should be relative to wherever the HTML file is.

  18. #43
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    F I N A L L Y

    I put it together and no validation errors on the page.

    This will be used as my template with minor changes.

    I can't thank all of you enough for putting up with me. You KNOW who you are!

    My frustration level was ridiculously high I couldn't explain in words what I was having problems with. God I hate that!

    I actually make money with programs that I've written in MS Access using sql and vba.

    But nothing I've ever come across compares with the difficulty of understanding the myriads of applications of html and css.

    In my pinion both of these languages forbear any forgiveness.

    Well I'm still on a learning curve for sure but at least my pages won't crash - will they?

    Maybe I can work on my site for a week and not have to return for more stupid questions.

    Pray tell . . .

    Can't thank you enough.

    Rick

  19. #44
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    RATS - didn't make a week at all!

    Every time the slideshow starts over the first image does not show, just a frame where the image should display.

    Then the rest of the images display fine until the script starts to play a second time. Again the first image does not show and each time thereafter.

    I notice there is no pre-loading of the first image in the javaScript.

    Should there be ?

    .js

    Code:
    <script type="text/javascript">
    		slideshowLoad('slideshow','css/images/',[
    			'hpnpthbrdocks.png',  This image does not show when the slideshow starts over again.
    			'hpfairoaks.png',
    			'hpdph.png',
    			'hpcdmview.png',
    			'hphhhome.png',
    			'hpcdcfairway.png',
    			'hpcdmmodern.png',
    			'hpdph.png',
    			'hpmainsthb.png',
    			'hpdph1.png',
    			'hphbpier.png',
    			'hpestate.png',
    			'hpcdmlookout.png',
    	]);
    	</script>
    Thanks . . . Rick

  20. #45
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Every time the slideshow starts over the first image does not show, just a frame where the image should display.

    Then the rest of the images display fine until the script starts to play a second time. Again the first image does not show and each time thereafter.

    I notice there is no pre-loading of the first image in the javaScript.

    Should there be ?

    .js

    Code:
    <script type="text/javascript">
    		slideshowLoad('slideshow','css/images/',[
    			'hpnpthbrdocks.png',  This image does not show when the slideshow starts over again.
    			'hpfairoaks.png',
    			'hpdph.png',
    			'hpcdmview.png',
    			'hphhhome.png',
    			'hpcdcfairway.png',
    			'hpcdmmodern.png',
    			'hpdph.png',
    			'hpmainsthb.png',
    			'hpdph1.png',
    			'hphbpier.png',
    			'hpestate.png',
    			'hpcdmlookout.png',
    	]);
    	</script>
    Thanks . . . Rick
    Uh . . . this script is under the content div, footer div and pagewrapper div - just above body and html at the end of the page.

  21. #46
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok it's NOT skipping the first image in the slide show after it cycles through the last slide, rather, as the slide show starts again a blank picture frame displays for the allotted time length and then the first image in the list appears and the slide show continues.

    I kind of understand this section of the js.

    Code:
    var
    	slideshowTimer=5000,               length the slide is visible
    	slideshows=[];                         this one I'm not to sure on except that the open/close [] are where the images for the slide list are in the html
    
    function slideshowLoad(targetId,directory,slideList) {            this is pretty self explanatory load the slide show using the targetID etc.
    	var target=document.getElementById(targetId);          not sure on this however
    	target.slideCount=slideList.length;                             determines the number of images in the slidelist
    	target.slideList=[];                                                  then the brackets again where the images reside in the html

    Here is where I get confused.

    What is t ? slidelist length? Does this count the number of images in the slidelist between the []?

    Code:
    for (t=0; t<slideList.length; t++) {
    		target.slideList[t]=document.createElement('img');
    		target.slideList[t].src=directory+slideList[t];
    I suspect my problem is in here somewhere but I don't understand enough to figure out why the empty frame displays at the start of a reoccurring slideshow, then the first images appears.

    I'll keep fiddling with it.

    Thanks . . . Rick

  22. #47
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    The loader is fine, the problem is most certainly not there... it's likely in the rotator.

    Trying to figure out why on earth I wrote this with an if statement.
    replace:

    if (++slideCurrent>=slideCount) slideCurrent=0;

    with

    slideCurrent=(slideCurrent+1)%slideCount;

    If it's not rotating them properly, that's the cause -- either that or there's something wrong with your filenames...

  23. #48
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    The loader is fine, the problem is most certainly not there... it's likely in the rotator.

    Trying to figure out why on earth I wrote this with an if statement.
    replace:

    if (++slideCurrent>=slideCount) slideCurrent=0;

    with

    slideCurrent=(slideCurrent+1)%slideCount;

    If it's not rotating them properly, that's the cause -- either that or there's something wrong with your filenames...
    No change with that suggestion. Hmmmmmm . . . .

    All of the images display the first time the slide show runs so I'm assuming that there is not problem with the images.

    It's when the slide show recycles again that the first image does not display - just the image placement frame.

    It's 12:00am I must not have a life.

    Thanks . . .

  24. #49
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    No change with that suggestion. Hmmmmmm . . . .

    All of the images display the first time the slide show runs so I'm assuming that there is not problem with the images.

    It's when the slide show recycles again that the first image does not display - just the image placement frame.

    It's 12:00am I must not have a life.

    Thanks . . .
    Yikes - I've tried drilling into this java script and while I do understand more than a few days ago, I'm still floundering.

    As I stated before . . ."All of the images display the first time the slide show runs so I'm assuming that there is not problem with the images.

    It's when the slide show recycles again that the first image does not display - just the image placement frame."


    After that all of the images display in the proper order.

    Thanks . . . Rick

  25. #50
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Do you have a copy uploaded where it's behaving as you describe?


Bookmarks

Posting Permissions

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