Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > BOOK: CSS Instant Results
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: CSS Instant Results
This is the forum to discuss the Wrox book CSS Instant Results by Richard York; ISBN: 9780471751267
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: CSS Instant Results section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old August 17th, 2012, 01:59 PM
Registered User
Points: 14, Level: 1
Points: 14, Level: 1 Points: 14, Level: 1 Points: 14, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2012
Location: Kountze, Texas
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to asambrown
Default CSS Instant Results Chapter five

I have tried several times to get the coding in chapter 5 to work, it won't. I tried to open the source code in the css instant result code I downloaded and it two will not work. My HTML code, CSS code, and the Java code is as follows:

HTML

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' xml:lang='en'>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>:target Slideshow</title>
        <link rel='stylesheet' type='text/css' href='styles/slideshow.css' />
	</head
	<body>
		<DIV ID='slide-new-features' class='slide'>
			<h1>New Features in Microsoft Internet Exployer 7</h1>
			<p>
				The latest version of Microsoft's flagship Internet Exployer
				7 browser contains many key enhancements that promise
				to make a web developer's job easer.
			</p>
		</div>
		<div id='slide-bug-fixes' class='slide'>
			<h1>IE7 Bug Fixes</h1>
			<p>
				Internet Exployer 7 has fixes for several, infamous bugs that 
				plagued Internet Exployer 6, and made the IE platform a thorn in 
				the sides of developers everywhere.
			</p>
			<p>
				Some of the most well-known rendering bugs have been fixed.
			</p>
			<ul>
				<li>
					Layering of the
					<span class='code'>&lt;select&gt;</span> element
				</li>
				<li>Peek-a-boo</li>
				<li>Guillotine</li>
				<li>Duplicate character</li>
				<li>Border chaos</li>
				<li>No Scroll</li>
				<li>Three-pixel text jog</li>
				<li>Magic creeping text</li>
				<li>Bottom margin bug on hover</li>
				<li>Losing the ability to highlight text under the top border</li>
			</ul>
		</div>
		<div id='slide-bug-fixes-2' class='slide'>
			<h1>More IE7 Bug Fixes</h1>
			<p>Also fixed in IE7</p>
			<ul>
				<li>IE/Win line height bug</li>
                <li>Double-margin float bug</li>
                <li>Quirky percentages</li>
                <li>Duplicate indent</li>
                <li>Moving viewport scrollbar outside HTML borders</li>
                <li>1px border style</li>
                <li>Disappearing list background</li>
                <li>Auto width</li>
			</ul>
		</div>
		<div id='slide-css-support' class='slide'>
			<h1>New CSS Support in IE7</h1>
			<p>
				In addition to CSS bug fixes, Microsoft has added some support
                for other CSS features.
			</p>
			<ul>
				<li>Fixed positioning</li>
				<li>
					Fixed backgrounds on all elements, not just the
					<span class='code'>&lt;body&gt;</span> element
				</li>
				<li>CSS 2 selectors
					<ul>
						<li>Direct Child</li>
						<li>Adjacent Sibling</li>
						<li>Attribute</li>
					</ul>
				</li>
				<li>CSS 2 pseudo-classes
					<ul>
						<li class='code'>:first-child</li>
						<li>
							<span class='code'>:hover</span> on all elements,
							not just the <span class='code'>&lt;a&gt;</span> 
							element
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<div id='slide-markup' class='slide'>
			<h1>Markup Improvements</h1>
			<p>
				Some markup improvements have also been made in IE7.
			</p>
			<ul>
				<li>
					Including an <span class='code'>&lt;?xml</span> prolog
					in IE7 no longer triggers quirks mode in XHTML
					documents.
				</li>
				<li>
					IE7 includes native support for the 
					<span class='code'>&lt;abbr&gt;</span> element.
				</li>
				<li>
					IE7 boasts improved support for 
					<span class='code'>&lt;object&gt;</span> element fallback.
				</li>
			</ul>
		</div>
		<div id='slide-ie7-release' class='slide'>
			<h1>IE7 Release Date</h1>
			<p>
				Microsoft has not commited to a definitive release date
                for IE7 at the time of this writing.  As of now, only a public
                beta of IE7 has been announced, and is expected for the first
                quarter of 2006.
			</p>
		</div>
		<div id='slide-navigation'>
			<ul>
				<li><a href='#slide-new-features'>New Features in IE7</a></li>
                <li><a href='#slide-bug-fixes'>IE7 Bug Fixes</a></li>
                <li><a href='#slide-bug-fixes-2'>More IE7 Bug Fixes</a></li>
                <li><a href='#slide-css-support'>New CSS Support in IE7</a></li>
                <li><a href='#slide-markup'>IE7 Markup Improvements</a></li>
                <li><a href='#slide-ie7-release'>IE7 Release Date</a></li>
			</ul>
		</div>
	</body>
</html>
The CSS Code is:

Code:
}
div.slide {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 15px;
	border: 50px solid #369;
	margin: 50px;
	padding: 50px;
}
div.slide:target {
	display: block;
}
div#slide-navigation {
	position: absolute;
	bottom: 0;
	right: 0;
	opacity: 0.0;
	width: 200px;
	background: white;
	border: 1px solide black;
	padding: 10px;
	margin: 10px;
}
div#slide-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
div#slide-navigation li {
	margin-top: 5px;
}
div#slide-navigation a {
	text-decoration: none;
	color: black;
}
div#slide-avigation:hover {
	opacity: 1;
}
the java code which is provided by the auther is:

Code:
var $currentSlide = '';

function slideEvents()
{
    var $li = document.getElementById('slide-navigation-inner').childNodes;

    for (var $i in $li)
    {
        if ($li[$i].childNodes &&
            $li[$i].childNodes[0] &&
            $li[$i].childNodes[0].nodeName == 'A'
        ) {
            $li[$i].childNodes[0].onclick = getSlide;
        }
    }

    getSlide();

    var $navigation = document.getElementById('slide-navigation');

    if (navigator.appName == 'Microsoft Internet Explorer')
    {
        $navigation.onmouseover = function()
        {
            this.style.filter =
                'progid:DXImageTransform.Microsoft.Alpha(opacity=100);';
        };

        $navigation.onmouseout = function()
        {
            this.style.filter =
                'progid:DXImageTransform.Microsoft.Alpha(opacity=0);';
        };
    }
}

function getSlide()
{
    if (this.href)
    {
        var $anchor = this.href.substring(
            this.href.indexOf('#') + 1, this.href.length
        );

        if (document.getElementById($currentSlide))
        {
            document.getElementById($currentSlide).style.display = 'none';
        }

        $currentSlide = $anchor;

        if ($anchor.length && document.getElementById($anchor))
        {
            document.getElementById($anchor).style.display = 'block';
        }
    }
}

window.onload = slideEvents;
If anyone could help with this problem I would be very thankful

Sammy
Reply With Quote
  #2 (permalink)  
Old August 17th, 2012, 03:49 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 5 Times in 5 Posts
Default

You have a number of typos in your code, maybe there are typos in my original code, I don't know. I haven't even seen that code in a good few years. At least five years.

Proofread it thoroughly and fix the errors and it will work, some things I saw, some CSS was misspelled.

I don't know what you're going to get out of it typing and retyping it, I guess if that helps you understand it more, then more power to you. I think typing it once is sufficient, personally, then after you've typed it once, experiment with it until you understand how it works.

Here is a corrected version.

I didn't test it in IE, I don't know if the JavaScript works. It probably works, it doesn't look like it wouldn't.

Take care.

Oh and it's JavaScript not Java, these are two entirely different languages.

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' xml:lang='en'>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <title>:target Slideshow</title>
       <style type='text/css'>
        div.slide {
        	display: none;
        	position: absolute;
        	top: 0;
        	bottom: 0;
        	left: 0;
        	right: 0;
        	font-size: 15px;
        	border: 50px solid #369;
        	margin: 50px;
        	padding: 50px;
        }
        div.slide:target {
        	display: block;
        }
        div#slide-navigation {
        	position: absolute;
        	bottom: 0;
        	right: 0;
        	width: 200px;
        	background: white;
        	border: 1px solid black;
        	padding: 10px;
        	margin: 10px;
        }
        div#slide-navigation ul {
        	margin: 0;
        	padding: 0;
        	list-style: none;
        }
        div#slide-navigation li {
        	margin-top: 5px;
        }
        div#slide-navigation a {
        	text-decoration: none;
        	color: black;
        }
        div#slide-navigation a:hover {
        	opacity: 1;
        }
       </style>
       <script type='text/javascript'>
        var $currentSlide = '';
        
        function slideEvents()
        {
           var $li = document.getElementById('slide-navigation-inner').childNodes;
        
           for (var $i in $li)
           {
               if ($li[$i].childNodes &&
                   $li[$i].childNodes[0] &&
                   $li[$i].childNodes[0].nodeName == 'A'
               ) {
                   $li[$i].childNodes[0].onclick = getSlide;
               }
           }
        
           getSlide();
        
           var $navigation = document.getElementById('slide-navigation');
        
           if (navigator.appName == 'Microsoft Internet Explorer')
           {
               $navigation.onmouseover = function()
               {
                   this.style.filter =
                       'progid:DXImageTransform.Microsoft.Alpha(opacity=100);';
               };
        
               $navigation.onmouseout = function()
               {
                   this.style.filter =
                       'progid:DXImageTransform.Microsoft.Alpha(opacity=0);';
               };
           }
        }
        
        function getSlide()
        {
           if (this.href)
           {
               var $anchor = this.href.substring(
                   this.href.indexOf('#') + 1, this.href.length
               );
        
               if (document.getElementById($currentSlide))
               {
                   document.getElementById($currentSlide).style.display = 'none';
               }
        
               $currentSlide = $anchor;
        
               if ($anchor.length && document.getElementById($anchor))
               {
                   document.getElementById($anchor).style.display = 'block';
               }
           }
        }
        
        window.onload = slideEvents;
       </script>
	</head
	<body>
		<div id='slide-new-features' class='slide'>
			<h1>New Features in Microsoft Internet Explorer 7</h1>
			<p>
				The latest version of Microsoft's flagship Internet Explorer
				7 browser contains many key enhancements that promise
				to make a web developer's job easer.
			</p>
		</div>
		<div id='slide-bug-fixes' class='slide'>
			<h1>IE7 Bug Fixes</h1>
			<p>
				Internet Explorer 7 has fixes for several, infamous bugs that 
				plagued Internet Explorer 6, and made the IE platform a thorn in 
				the sides of developers everywhere.
			</p>
			<p>
				Some of the most well-known rendering bugs have been fixed.
			</p>
			<ul>
				<li>
					Layering of the
					<span class='code'>&lt;select&gt;</span> element
				</li>
				<li>Peek-a-boo</li>
				<li>Guillotine</li>
				<li>Duplicate character</li>
				<li>Border chaos</li>
				<li>No Scroll</li>
				<li>Three-pixel text jog</li>
				<li>Magic creeping text</li>
				<li>Bottom margin bug on hover</li>
				<li>Losing the ability to highlight text under the top border</li>
			</ul>
		</div>
		<div id='slide-bug-fixes-2' class='slide'>
			<h1>More IE7 Bug Fixes</h1>
			<p>Also fixed in IE7</p>
			<ul>
				<li>IE/Win line height bug</li>
               <li>Double-margin float bug</li>
               <li>Quirky percentages</li>
               <li>Duplicate indent</li>
               <li>Moving viewport scrollbar outside HTML borders</li>
               <li>1px border style</li>
               <li>Disappearing list background</li>
               <li>Auto width</li>
			</ul>
		</div>
		<div id='slide-css-support' class='slide'>
			<h1>New CSS Support in IE7</h1>
			<p>
				In addition to CSS bug fixes, Microsoft has added some support
               for other CSS features.
			</p>
			<ul>
				<li>Fixed positioning</li>
				<li>
					Fixed backgrounds on all elements, not just the
					<span class='code'>&lt;body&gt;</span> element
				</li>
				<li>CSS 2 selectors
					<ul>
						<li>Direct Child</li>
						<li>Adjacent Sibling</li>
						<li>Attribute</li>
					</ul>
				</li>
				<li>CSS 2 pseudo-classes
					<ul>
						<li class='code'>:first-child</li>
						<li>
							<span class='code'>:hover</span> on all elements,
							not just the <span class='code'>&lt;a&gt;</span> 
							element
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<div id='slide-markup' class='slide'>
			<h1>Markup Improvements</h1>
			<p>
				Some markup improvements have also been made in IE7.
			</p>
			<ul>
				<li>
					Including an <span class='code'>&lt;?xml</span> prolog
					in IE7 no longer triggers quirks mode in XHTML
					documents.
				</li>
				<li>
					IE7 includes native support for the 
					<span class='code'>&lt;abbr&gt;</span> element.
				</li>
				<li>
					IE7 boasts improved support for 
					<span class='code'>&lt;object&gt;</span> element fallback.
				</li>
			</ul>
		</div>
		<div id='slide-ie7-release' class='slide'>
			<h1>IE7 Release Date</h1>
			<p>
			   Microsoft has not committed to a definitive release date
               for IE7 at the time of this writing.  As of now, only a public
               beta of IE7 has been announced, and is expected for the first
               quarter of 2006.
			</p>
		</div>
		<div id='slide-navigation'>
			<ul>
               <li><a href='#slide-new-features'>New Features in IE7</a></li>
               <li><a href='#slide-bug-fixes'>IE7 Bug Fixes</a></li>
               <li><a href='#slide-bug-fixes-2'>More IE7 Bug Fixes</a></li>
               <li><a href='#slide-css-support'>New CSS Support in IE7</a></li>
               <li><a href='#slide-markup'>IE7 Markup Improvements</a></li>
               <li><a href='#slide-ie7-release'>IE7 Release Date</a></li>
			</ul>
		</div>
	</body>
</html>
Reply With Quote
  #3 (permalink)  
Old August 17th, 2012, 07:05 PM
Registered User
Points: 14, Level: 1
Points: 14, Level: 1 Points: 14, Level: 1 Points: 14, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2012
Location: Kountze, Texas
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to asambrown
Default CSS Instant Results chapter five

I went back and corrected my spelling (spelling not my strong point, but getting better) and it still did not work. However with the code you provided with everything on one page, it works. Has the navigation box bottom right. I tryed to break it down into three pages," .html, .css, and .js " and added the link to the css page still could not get it to work but it did load as a "tree" will do more Sunday. However seeing that I will only need a slideshow on one page I might just go with the one page slide show code.

Sammy
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
ASP.NET 2.0 Instant Results Murthy BOOK: ASP.NET 2.0 Instant Results ISBN: 978-0-471-74951-6 7 June 17th, 2011 06:46 AM
Instant Results Survey Engine KDSTECH BOOK: ASP.NET 2.0 Instant Results ISBN: 978-0-471-74951-6 9 June 12th, 2010 03:46 AM
instant results chapter 7 pauljames BOOK: ASP.NET 2.0 Instant Results ISBN: 978-0-471-74951-6 4 October 28th, 2009 05:18 PM
CSS Instant Results: Project 6 & 10 ericcutty BOOK: CSS Instant Results 1 October 11th, 2007 08:45 AM



All times are GMT -4. The time now is 09:37 AM.


Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.