Dropdown Textbox - CSS en HTML - Softwareontwikkeling

maandag 25 juni 2012 20:16

Acties:

0 Henk 'm!

www.Entjes.eu

Topicstarter

Hallo Medetweakers..

Ik ben bezig met een website waar een textbox als dropdown geïmplementeerd moet worden.
Dus een DIV waarin tekst zichtbaar wordt als je erop klikt. Ik heb nu een goedkoop Javascriptje van internet waarbij je alle tekst in de header moet verwerken in dat scriptje. Andere informatie kom ik op internet niet tegen omdat je alleen maar dropdown menu's tegenkomt.

Dus kort en krachtig:
Een DIV vullen met tekst door bovenin het DIVje op de header te klikken. Hierdoor moet meer tekst eronder gezet worden doormiddel van PHP include. Door nogmaals op de header te klikken moet de tekst veer verdwijnen. Ook moet de DIV groter worden, namelijk net zo groot als de tekst inclusief margin is.

Ik heb prima ervaring met HTML en CSS.. maar niet met PHP en Javascript. Omdat ik dit verder ook niet meer zal gaan gebruiken, is het voor mij tijdverspilling om dit door en door te gaan leren. Hier is de code die ik nu gebruik. Maar PHP include werkt niet in dit javascript (weet precies waarom). Ik vraag ook niet of een ander het maar even voor mij wil bouwen.. maar hulp is wel gewaardeerd

code:

    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Tweakers</title>
        <link rel="stylesheet" type="text/css" href="extension/style.css" />

            <script type="text/javascript">
                function tekstinbeeld()
                {
                document.getElementById("tekstinbeeld").innerHTML=("Deze tekst moet in beeld komen");
                }
            </script>

    </head>

<body>

<div id="mainframe">    
        <div class="uitschuifbox">
                 <p id="tekstinbeeld">
                 <a href="javascript:aanleiding()"> Header waarop geklikt wordt</a>
                 </p>
        </div>
        <div class="outlinebox2">
    <p id="tekstinbeeld">
                Hier moet die tekst komen.
            </p>
        </div>
</div>

Canon 7D MII, 550D, Tokina 11-16mm F2.8, Sigma 17-70mm F2.8/4, Sigma 30MM F1.4, Canon 50mm 1.8 STM, Sigma 70-200 F2.8, En de bende eromheen

maandag 25 juni 2012 21:21

Acties:

0 Henk 'm!

_Erikje_

Tweaker in Spanje

ZO ? http://jsfiddle.net/TvTLs/

maandag 25 juni 2012 21:26

Acties:

0 Henk 'm!

Verwijderd

Waar je hier mee bezig bent heeft niks te maken met php include.
Je zou jquery kunnen gebruiken. (http://www.w3schools.com/jquery/jquery_intro.asp)
Met het jQuery Effect toggle() Kun je een div laten zien en laten verdwijnen.
(http://www.w3schools.com/jquery/eff_toggle.asp)

maandag 25 juni 2012 21:30

Acties:

0 Henk 'm!

R4gnax

Zoals hierboven genoemd; jQuery kan dit vrij simpel voor je regelen. Ik heb even iets snels in elkaar gehackt voor je met wat uitleg.

HTML:

1 2	<h2 class="expandable" data-expandable-url="content.php">Header</h2> <div></div>

JavaScript:

$( document ).on( ".expandable", "click", function( event ) {
  var handle = $( this ),
    panel = el.next(),
    url = handle.data( "expandableUrl" );

  // When the header has been clicked, then:
  panel
    .stop( true )   // 1) halt all animations on the panel, and
    .slideToggle(); // 2) slide the panel open.
   
  // If the header element defines a URL for content to download into the panel ...
  if ( !!url ) {
    // ... then make sure that only once ...
    handle.data( "expandableUrl", false );    
  
    // ... the HTML for the content will be downloaded, and...
    $
      .ajax({ url: url, dataType : "html" })
      .done( function( html ) {
        // ... when finished downloading, then:
        panel
          .stop( true ) // 1) halt all animations on the panel,
          .hide()       // 2) make sure the panel is hidden,
          .html( html ) // 3) inject the downloaded HTML into the panel, and
          .slideDown()  // 4) slide the panel open.
      });

    
  }
});

donderdag 28 juni 2012 22:20

Acties:

0 Henk 'm!

markvt

Peppi Cola

Dit wellicht bruikbaar?
http://jqueryui.com/demos/autocomplete/#combobox

van-tilburg.info -=- meka (sega emulator) - Proud MEDION fanclub member - KOPPIG VOLHOUDEN !

donderdag 28 juni 2012 22:29

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Html

Waarom die slappe verwijzingen naar jQuery weer voor iets dat je ook met CSS (al dan niet in combinatie met transitions) kan doen? Het enige stukje javascript dat je nodig hebt is het toekennen en weghalen van een class na een click op dat element...om daar nou een compleet framework voor te gaan includen is ronduit stupide.

hjalte79: W3Schools is zo'n beetje de slechtste site waar je spul van kan leren op het hele internet. Zie http://w3fools.com

[ Voor 16% gewijzigd door NMe op 28-06-2012 22:29 ]

'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.

vrijdag 29 juni 2012 12:46

Acties:

0 Henk 'm!

R4gnax

NMe schreef op donderdag 28 juni 2012 @ 22:29:
Waarom die slappe verwijzingen naar jQuery weer voor iets dat je ook met CSS (al dan niet in combinatie met transitions) kan doen? Het enige stukje javascript dat je nodig hebt is het toekennen en weghalen van een class na een click op dat element...om daar nou een compleet framework voor te gaan includen is ronduit stupide.

Dat kun je dus niet met CSS transitions doen. De lengte van de tekst is variabel; dus het aantal regels tekst is variabel, dus de hoogte is variabel, dus height: auto. En laat de waarde 'auto' nou net niet door CSS transitions geaccepteerd worden.

Hierbij moet je JavaScript gebruiken, tenminste om de hoogte van het te verschijnen tekstblok te berekenen. Met alles wat daaromheen nog bij kijken komt, kun je dan maar beter een abstractie zoals jQuery gebruiken. Zeker wanneer je een leek bent op het gebied van JavaScript.

vrijdag 29 juni 2012 13:11

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Html

Dat hangt er maar net vanaf hoe je het wil animeren. Je kan ook gewoon scalen van grootte 0 naar grootte 1 vanuit origin 0,0. En dat doe je met een paar regels CSS.

[ Voor 14% gewijzigd door NMe op 29-06-2012 13:16 ]

'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.

Dropdown Textbox - CSS en HTML

Onderwerpen