How the hell would I go about doing this in PHP??

boombanguk

Hi,

I've just recently relaunched my website, www.flashculture.com . It uses Flash->PHP-Mysql. And all is fine, apart from if possible I would like to convert it over to its all pretty much php->mySql. I want to start with the

http://www.flashculture.com/business.htm

page. But I havn't a clue where to start. It has to look exactly the same but just in php. The problems are is that its all tabbed as well.

So where would I start?

thanks for any advice.
boombanguk.

mpb001

You can create a tab panel in javascript switching the section container div's css display status.

Give General,Articles,Interviews etc panels an id then use document.getElementById(containerId).style.display = block or none...

How flash you want to make it is up to you. You'll also need to do a navigation panel at the top switching the css background colors/image.

As the divs are hidden only by css they should be indexable by search engines, which your current site probably isn't unless you are cloaking.

Example follows

<html>

<head>
<style>
    .MonkeyCages
    {
       width:300px;
       height:300px;
    }
</style>

</head>
<body>

    <script>

        var tabbedPane = new TabbedPane();

        function TabbedPane()
        {
            var panes    = new Array( 1 , 2 , 3);

            //public accessor to ShowPane
            this.ShowPane = ShowPane;

            function ShowPane( paneId )
            {
                HideAllPanes();
                pane = GetPaneDomObject( paneId ).style.display = "block";  
            } 


            function HideAllPanes()
            {
                 for( i = 0 ; i < panes.length; i++ )
                 {
                    var pane = GetPaneDomObject( panes[i] ).style.display = "none";  
                 }   
            }       


            function GetPaneDomObject( paneNumber )
            {
                try
                {
                    return document.getElementById("Cage"+ paneNumber); 
                }
                catch( e )
                {
                    alert( "Cage"+ paneNumber + " - does not exist" );  
                }
            }        
        }

    </script>
    <div>
        <a href="#" onclick="tabbedPane.ShowPane(1)" >Pane 1</a>
        <a href="#" onclick="tabbedPane.ShowPane(2)" >Pane 2</a>
        <a href="#" onclick="tabbedPane.ShowPane(3)" >Pane 3</a>
    </div>

    <div>
        <div  id="Cage1" class="MonkeyCages">
            Monkey Group 1
        </div>


        <div style="display:none;background-color:#e6e6e6" class="MonkeyCages" id="Cage2">
            Monkey Group 2
        </div>  


        <div  style="display:none;background-color:#444444;color:white" class="MonkeyCages" id="Cage3">
            Monkey Group 3
        </div>  

    </div>

</body>
</html>

boombanguk

ok, and then the links that come in from the mysql database to the various interviews etc, would they be indexable by the google spiders? Because the whole point of converting it to html is that the content will be indexable via google.

mpb001

Well the links are plain html in the divs so they will be linkable.. Tell you the truth not really sure with the display:none. I do use it but the stuff is so heavily linked already can't really count it.

http://www.maxdesign.com.au/2006/09/15/index-me-baby/

Someone here claims it doesn't cause problems if the display:none is in the external css. I don't think anyone is really sure.

You could also add a method to the javascript so it hides it that way after each container loads. It will then visible as a big list for people who have javascript disabled and google will definately index it as it does not parse javascript.

<html>

<head>
<style>
    .MonkeyCages
    {
       width:300px;
       height:300px;
    }
</style>

</head>
<body>

    <script>
        //amended verssion that hides the div after it has been created
        var tabbedPane = new TabbedPane();

        function TabbedPane()
        {
            var panes    = new Array( 1 , 2 , 3);

            //public accessor to ShowPane
            this.ShowPane = ShowPane;

            function ShowPane( paneId )
            {
                HideAllPanes();
                pane = GetPaneDomObject( paneId ).style.display = "block";  
            } 


            function HideAllPanes()
            {
                 for( i = 0 ; i < panes.length; i++ )
                 {
                    var pane = HidePanel(panes[i]); 
                 }   
            }       

            this.HidePanel = HidePanel;
            function HidePanel( paneId )
            {
                GetPaneDomObject(paneId).style.display = "none";
            }  


            function GetPaneDomObject( paneNumber )
            {
                try
                {
                    return document.getElementById("Cage"+ paneNumber); 
                }
                catch( e )
                {
                    alert( "Cage"+ paneNumber + " - does not exist" );  
                }
            }      
        }

    </script>
    <div>
        <a href="#" onclick="tabbedPane.ShowPane(1);return false" >Pane 1</a>
        <a href="#" onclick="tabbedPane.ShowPane(2);return false" >Pane 2</a>
        <a href="#" onclick="tabbedPane.ShowPane(3);return false" >Pane 3</a>
    </div>

    <div>
        <div  id="Cage1" class="MonkeyCages">
            Monkey Group 1
        </div>


        <div style="background-color:#e6e6e6" class="MonkeyCages" id="Cage2" >
            Monkey Group 2
        </div>  

        <script language="javascript">
            tabbedPane.HidePanel(2);
        </script>


        <div  style="background-color:#444444;color:white" class="MonkeyCages" id="Cage3">
            Monkeys Group 3
        </div>  

         <script language="javascript">
            tabbedPane.HidePanel(3);
        </script>

    </div>

</body>
</html>