Javascript Slide up en down by click doesn't work

Hi

Im working on an HTML5 Valid and Javascripted page of my website. For that im using Motionpack.

This is my webpage: http://html5.alphenweer.nl/ (dutch)

I want if someone clicks on radar, there appears a little radar underneath. But then, if someone clicks on that little radar, underneath all maps there comes a bigger radar.

So this is the code i build:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html>

<html>

    <head>

        <title>AlphenWeer.nl [HTML5] - AlphenWeerOnline - AlphenWeer.nl</title>

        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">

        <script type="text/javascript" src="motionpack.js"></script> 

        <script type="text/javascript">

        function replaceit(v) {

    if(v = "1"){

        slidedown('extra');

        document.getElementById('extrabutton').style.display='inline';

        document.getElementById('extra').innerHtml='<img src="http://html5.alphenweer.nl/html5getimages.php?type=1&image=1"/>';

    }

    else if(v = "2"){

        slidedown('extra');

        document.getElementById('extrabutton').style.display='inline';

        document.getElementById('extra').innerHtml='<img src="http://www.knmi.nl/actueel/images/tempgmt.png"/>';

    }

    else if(v = "3"){

        slidedown('extra');

        document.getElementById('extrabutton').style.display='inline';

        document.getElementById('extra').innerHtml='<img src="http://www.knmi.nl/actueel/images/tempgmt.png"/>';

    }

    else if(v = "4"){

        slidedown('extra');

        document.getElementById('extrabutton').style.display='inline';

        document.getElementById('extra').innerHtml='<img src="http://www.knmi.nl/actueel/images/tempgmt.png"/>';

    }

    else

    {

        document.getElementById('extrabutton').style.display='inline';

        document.getElementById('extra').innerHtml='<p>Fout tijdens selecteren JAVASCRIPT</p>';

    }

}

        function repup(j) {

        slideup(j);

        document.getElementById('extrabutton').style.display='none';

}
 
</script>

        <style type="text/css">

            body {

                font-family: Arial,Helvetica,sans-serif;

                color: black;

                text-align:center; 

                background-color:#99D9EA;

            }
 
            #container {

                background-color:white;

                border:1px solid black;

                width:800px;

                margin: 0 auto;

            }
 
            #center {

                text-align: center;

                margin: 0 auto;

                border:0;

            }
 
            img {

                border:0;

            }

        </style>

    </head>

    <body>

            <div id="container">

                <h1>AlphenWeerOnline [HTML5]<br></h1>

                <table id="center">

                    <tr>

                        <td>

                            <a href="javascript:;" onclick="toggleSlide('radar');" >Radar</a>

                        </td>

                        <td>

                            <a href="javascript:;" onclick="toggleSlide('temperatuur')">Temperatuur</a>

                        </td>

                        <td>

                            <a href="javascript:;" onclick="toggleSlide('satteliet')">Satteliet</a>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <div id="radar" style="display:none; height:300px;">

                                <p>

                                    Radar nederland

                                </p>

                                    <a href="javascript:;" onclick="replaceit('1');"><img src="http://html5.alphenweer.nl/html5getimages.php?type=1&amp;image=1" alt="Radar nederland"/></a>

                            </div>

                        </td>

                        <td>

                            <div id="temperatuur" style="display:none; height: 300px;">

                                <p>

                                    Temperatuur nederland

                                </p>

                                    <img src="http://www.knmi.nl/actueel/images/tempgmt.png" style="width:256px; height:256px;"/>

                            </div>

                        </td>

                        <td>

                            <div id="satteliet" style="display:none; height:300px;">

                                <p>

                                    Satteliet

                                </p>

                                    <img src="http://html5.alphenweer.nl/html5getimages.php?type=1&amp;image=2" style="width:256; height:256px;"/>

                            </div>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <a href="javascript:;" onclick="toggleSlide('alphen-af')">Alphen Afgelopen 2 uur</a>

                        </td>

                        <td>

                            <a href="javascript:;" onclick="toggleSlide('alphen-k2')">Alphen Komende 2 uur</a>

                        </td>

                        <td>

                            <a href="javascript:;" onclick="toggleSlide('wind')">Wind</a>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <div id="alphen-af" style="display:none; height:300px;">

                                <p>

                                    Alphen afgelopen 2 uur

                                </p>

                                    <script type="text/javascript" src="af.js"></script>

                            </div>

                        </td>

                        <td>

                            <div id="alphen-k2" style="display:none; height:300px;">

                                <p>

                                    Komende 2 uur

                                </p>

                                    <script type="text/javascript" src="k2.js"></script>

                            </div>

                        </td>

                        <td>

                            <div id="wind" style="display:none; height:300px;">

                                <p>

                                    Wind

                                </p>

                                    <img src="http://www.knmi.nl/actueel/images/windbftgmt.png" style="width:256px; height:256px;"/>

                            </div>

                        </td>

                    </tr>

                </table>

                <div id="extrabutton" style="display:none;">Close</div>

                <div id="extra" style="display:none;">

            </div>

    </body>

</html>

But this doesn't work. Can y'all help me? Thanks.

Nov 10 '10 #1

Subscribe Post Reply

1409

Similar topics

my script doesn't work.... sigh!

by: Luca | last post by:

About one month ago I have inserted in my web site a clickcounter who controls the access to almost every link, but this script who changed the path in every link so the search engines couldn't...

Javascript

javascript:pick doesn't work with the ' character

by: Gary Mayor | last post by:

Hi, If I have the ' character within the javascript:pick command it doesn't work. Is there some sort of way of escaping these characters like in server side languages. function pick(symbol) {...

Javascript

Need Help with JavaScript code Please

by: TrvlOrm | last post by:

HI There, I have been struggling with JavaScript code for days now, and this is my last resort! Please help... I am trying to create a JavaScript slide show with links for Next Slide,...

Javascript

Need your help, I am new with javascript, what do I wrong? javascript form validation suddenly doesn´t work

by: francisco lopez | last post by:

Yesterday I had a problem with a javascript to validate my form, but you helped my out yesterday and it works now perfectly!!! so thank you!!! the problem I have now is the following: I put...

Javascript

JavaScript slide show: Click the picture and go to next picture?

by: marslee | last post by:

I know how to use buttons to go to the next and previous picture in slide show, but i want to change it so when the user clicks the picture instead of button, the script shows the next phicture. ...

Javascript

html after javascript function - why it doesn't work?

by: Leszek | last post by:

I' got a problem with a web site i wrote a javascript: function zmiana(ile){ while(document.getElementById('accomp').childNodes.length>3){ ostatni=document.getElementById('accomp').lastChild;...

Javascript

File > Open works, double-click doesn't work?

by: Alex Chun | last post by:

I have an Access database -- a .mdb file -- on a server on our network. When the file is in use -- i.e. there is an associated .ldb file -- I cannot open the database by double-clicking its icon;...

Microsoft Access / VBA

NotifyIcon.DoubleClick/.Click doesn't work in Console App

by: celestialgal86 | last post by:

Hi everyone... I'm a starter at .Net programming, and I need some help. I was asked to develop a console app that will auto-hide the console window and show a system tray icon. And by...

.NET Framework

ASP.NET Drop Down Listbox doesn't work in Opera Browser

by: daonho | last post by:

I've been trying to figure out this problem for so long but no luck. The problem is that I have a ASP.NET Drop Down Listbox with a few item in there, and whenever I select an item from the listbox, I...

.NET Framework

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++