HTML link naar onderdeel van Javascript

maandag 21 februari 2011 15:39

Acties:

0 Henk 'm!

Definitely Maybe

Topicstarter

Ik heb een stuk javascript waarmee je ala de iPhone/Android door pagina's heen schuift. Dit functioneert naar behoren. Echter, nu wil ik boven het codeblock (de content-box is Javascript) html thumbnails die linken naar een div id die onderdeel is van javascript. Dus bijvoorbeeld een html thumbnail die naar div id c1 linkt. Bij het aanmaken van een rechtstreekse link zoals je dat normaal zou doen: <a href="index.html#c1"> linkt hij enkel naar het gehele javascript blok, maar niet naar het juiste deel van de pagina. Iemand enig idee hoe ik dit op een niet al te omslachtige manier kan bereiken. Andere goede ideeën zijn uiteraard ook welkom.

HTML:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>Flippen met Nagtegaal</title>
        
        <link rel="stylesheet" href="css/iphone.css" type="text/css" media="screen">
        <script type="text/javascript">document.getElementsByTagName('html')[0].className = 'hasJS';</script>
    </head>

    <body>
        <p id="ins">Sleep met je muis de afbeelding naar links of rechts.</p>
        <div id="wrapper">
            <div id="fake">
                <div id="c1" class="content-box">
                    <div class="inner">
                        <h1>Paneel 1</h1>
                        <img src="image1.jpg" ondragstart="return false"/>
                    </div>
                </div>
                <div id="c2" class="content-box">
                    <div class="inner">
                        <h1>Paneel 2</h1>
                        <img src="image2.jpg" ondragstart="return false"/>

                    </div>
                </div>
                <div id="c3" class="content-box">
                    <div class="inner">
                        <h1>Paneel 3</h1>
                        <img src="image3.jpg" ondragstart="return false"/>                  
                    </div>
                </div>
                <div id="c4" class="content-box">
                    <div class="inner">
                        <h1>Paneel 4</h1>
                        <img src="image4.jpg" ondragstart="return false"/>
                    </div>
                </div>
            </div><!-- div id="fake" -->
        </div><!-- div id="wrapper" -->
        
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript">google.load("jquery", "1.4.2");</script>
        <script src="js/easing.js" type="text/javascript"></script>
        <script src="js/iphone.js" type="text/javascript"></script>
    </body>
</html>

[ Voor 0% gewijzigd door MueR op 21-02-2011 16:41 ]

maandag 21 februari 2011 16:38

Acties:

0 Henk 'm!

rhodium

linkt hij enkel naar het gehele javascript blok

Welk js blok? De div <div id="c1" class="content-box">?

Het is allemaal behoorlijk onduidelijk en je lapcode maakt het er niet makkelijker op. Vooral omdat daar niks van thumbnails(etc) code te vinden is. Lijkt me ook handig als je eerst de basis leert... zou mij niks verbazen dat je het daarna zelf kan oplossen.

[ Voor 11% gewijzigd door rhodium op 21-02-2011 16:42 ]

maandag 21 februari 2011 16:40

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

HTML hoort in Webdesign, Markup & Clientside Scripting.

Ik mis eigenlijk wat er nou niet lukt. Je post wel een hoop code maar uiteindelijk is het niet meer dan "dit is mn code, het doet niet wat ik wil, wie doet het voor me", oftwel een Kan iemand even .. ?

Dus:
- Wat wil je bereiken
- Wat lukt er niet
- Wat heb je al geprobeerd
- Waar loop je vast

Anyone who gets in between me and my morning coffee should be insecure.

maandag 21 februari 2011 16:58

Acties:

0 Henk 'm!

mcDavid

Ik neem aan dat er een vorm van documentatie beschikbaar is bij die plugins die je gebruikt? Daar staat vast wel wat in over de scrollposition.

dinsdag 22 februari 2011 01:03

Acties:

0 Henk 'm!

ormagon

Definitely Maybe

Topicstarter

Ik zal hierbij even te trachten de boel wat duidelijker toe te lichten. Ik kan hier wel alle js code posten, maar dat is allemaal correct, dat is het probleem niet.

- Wat wil je bereiken?
Ik zou graag in de index.html (gepost in de startpost) een link maken, waar maakt niet uit, en wat er in die link staat maakt ook niet uit, die linkt naar één van de classes (c1 t/m c4). Deze classes zijn echter onderdeel van de js. De js zorgt voor een soort van slideshow. Een simpele directe link naar één van de classes werkt niet, omdat dit niet naar een specifiek onderdeel kan linken van de javascript code.

Hier ook even een link naar wat er nu staat om duidelijker te maken wat de bedoeling is. Ik zou dus graag in de index.html, rechtstreeks willen linken naar 1 van de panelen. http://midden-aarde.nl/index.html

dinsdag 22 februari 2011 01:06

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Html

Je kan hier redelijk eenvoudig hashes voor gebruiken, net zoals #35573604 achter de URL van deze pagina zetten je bij je post hierboven uit laat komen. In javascript kun je die hash uitlezen en op basis daarvan je javascript-slideshow op een ander punt laten beginnen.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

Onderwerpen