Pixelpost Forum - Simplicious image nav rollover not validating..

Pixelpost Forum (http://www.pixelpost.org/forum/index.php)

- Template design and Front-End Code (http://www.pixelpost.org/forum/forumdisplay.php?f=20)

- - Simplicious image nav rollover not validating.. (http://www.pixelpost.org/forum/showthread.php?t=7897)

Finner

02-12-2008 08:00 PM

Simplicious image nav rollover not validating..

I've used the nice image navigation method from Simplicious in my site redesign - where each half of the image has an overlay rollover for prev/next - but, as with the Similicious demo site (http://www.sotolicious.com/keepers), this isn't validating.
Does anyone know how this can be fixed, or some way of doing the same thing but with a different script that will validate?

Any help is appreciated, thanks :)
http://oculus.farfromreal.com

xact	02-12-2008 08:47 PM

1. Download image wraparound addon, install it.

2. Delete this after <body> line

Code:

<script type="text/javascript">

        function browsing(){

                var existprev = "<IMAGE_PREVIOUS_ID>";

                var existnext = "<IMAGE_NEXT_ID>";

                if (existprev != "<IMAGE_ID>"){

                        document.write('<a href="#" id="menu_browse_prev" title="click for previous" onclick="document.location=\'index.php?showimage=<IMAGE_PREVIOUS_ID>\';"></a>');

                }

                if (existnext != "<IMAGE_ID>"){

                        document.write('<a href="#" id="menu_browse_next" title="click for next" onclick="document.location=\'index.php?showimage=<IMAGE_NEXT_ID>\';"></a>');

                }

        }

</script>

3. Replace this:

Code:

<script type="text/javascript">

        browsing();

        </script>

with this:

Code:



<a href='http://www.blur.ro/index.php?showimage=<IMAGE_NEXT_ID_WRAPAROUND>' id="menu_browse_prev"></a>

<a href='http://www.blur.ro/index.php?showimage=<IMAGE_PREVIOUS_ID_WRAPAROUND>' id="menu_browse_next"></a>

Good luck!

Dkozikowski

02-12-2008 08:58 PM

Xact, I don't think that is what Finner is looking for.

Finner, what you want to do so your site validates is wrap the JS code in  like so:

Code:

<script type="text/javascript">

<!--

        function browsing(){

                var existprev = "<IMAGE_PREVIOUS_ID>";

                var existnext = "<IMAGE_NEXT_ID>";

                if (existprev != "<IMAGE_ID>"){

                        document.write('<a href="#" id="menu_browse_prev" title="click for previous" onclick="document.location=\'index.php?showimage=<IMAGE_PREVIOUS_ID>\';"></a>');

                }

                if (existnext != "<IMAGE_ID>"){

                        document.write('<a href="#" id="menu_browse_next" title="click for next" onclick="document.location=\'index.php?showimage=<IMAGE_NEXT_ID>\';"></a>');

                }

        }

// -->

</script>

Finner

02-12-2008 11:01 PM

oh! wonderful - thank you dwilkinsjr! that's just what it needed. I'm curious as to why that makes such a difference..but glad it does.

Dkozikowski

02-12-2008 11:39 PM

The W3C validator does not validate JS code so all you did was hide the JS code from the validator by wrapping it in the comment tags.

This will also hide the JS from any browser that does not support it (hence, the W3C validator).

Finner

02-13-2008 07:58 PM

Ah yes, fair enough - I'll keep that in mind for next time (I should have known that anyway being a web developer... ;)).

xact - had a look at the image wraparound.. is a nice feature and seems to be a bit of a cleaner implementation too. thanks :D

All times are GMT. The time now is 11:45 PM.