ilch Forum » Allgemein » HTML, PHP, SQL,... » einklapbare boxen

Geschlossen
  1. Do. 18.11.2010 11:30 Uhr #1
    User Pic
    timbletak Mitglied
    Registriert seit
    16.11.2010
    Beiträge
    131
    Beitragswertungen
    0 Beitragspunkte
    hi,
    wollte mal fragen ob es möglich ist das man mit hilfe einen php codes
    einzelne boxen so so umprogramieren kann das sie sich durch einen klick darauf aufklappen oder wie einklappen können

    betroffene Homepage: externer Link
    0 Mitglieder finden den Beitrag gut.
  2. Do. 18.11.2010 12:11 Uhr #2
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    mit PHP nicht, jedoch mit JavaScript.

    Beispiel: 
    <script language="javascript" type="text/javascript">
    function hide(element) {
        if (dodument.getElementByID(element).style.display = 'block') {
            document.getElementByID(element).style.display = 'none';
        } else {
            document.getElementByID(element).style.display = 'block';
        }
    }
</script>

<a href="javascript=hide('div1')">Klick mich</a>
<div id="div1">Dieser Text wir beim anklicken des Links eingeklappt und ausgeklappt.</div>


    Diese Funktion blendet den Container aus, wenn er eingeblendet ist bzw. blendet ihn ein, wenn er ausgeblendet ist.
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  3. Do. 18.11.2010 12:16 Uhr #3
    User Pic
    timbletak Mitglied
    Registriert seit
    16.11.2010
    Beiträge
    131
    Beitragswertungen
    0 Beitragspunkte
    ja und wo muss das hin?
    0 Mitglieder finden den Beitrag gut.
  4. Do. 18.11.2010 12:20 Uhr #4
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    ZitatZitat geschrieben von timbletak

    ja und wo muss das hin?


    das script (nach W3) in den head und das div und den link an die Stelle wo Du es anwenden willst.
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  5. Do. 18.11.2010 12:23 Uhr #5
    User Pic
    timbletak Mitglied
    Registriert seit
    16.11.2010
    Beiträge
    131
    Beitragswertungen
    0 Beitragspunkte
    na ich möchte ja nicht das alle einzuklappen gehen
    sondern erstmal nur eine oder zwei
    0 Mitglieder finden den Beitrag gut.
  6. Do. 18.11.2010 12:25 Uhr #6
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    ZitatZitat geschrieben von timbletak

    na ich möchte ja nicht das alle einzuklappen gehen
    sondern erstmal nur eine oder zwei


    Das Attribut "id" im DIV sowie als Übergabewert im Funktionsaufruf im Link, definiert, welches DIV du zu- / aufklappst. Das kannst du dir selber aussuchen. Alles was in dem betroffenen DIV liegt, geht zu, alles andere bleibt.
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  7. Do. 18.11.2010 12:27 Uhr #7
    User Pic
    timbletak Mitglied
    Registriert seit
    16.11.2010
    Beiträge
    131
    Beitragswertungen
    0 Beitragspunkte
    und wie fide ich heraus in welchem div die box liegt
    0 Mitglieder finden den Beitrag gut.
  8. Do. 18.11.2010 12:28 Uhr #8
    User Pic
    timbletak Mitglied
    Registriert seit
    16.11.2010
    Beiträge
    131
    Beitragswertungen
    0 Beitragspunkte
    und wo genau muß ich das einfügen in index.htm oder was?
    0 Mitglieder finden den Beitrag gut.
  9. Do. 18.11.2010 12:28 Uhr #9
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    ZitatZitat geschrieben von timbletak

    und wie fide ich heraus in welchem div die box liegt


    Sie kann auch in einer Tabelle liegen. Poste mal deine index.htm aus deinem Designordner, dann pass ich dir die an..
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  10. Do. 18.11.2010 12:30 Uhr #10
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    Anbei:

    de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id

    durchlesen! :p


    Zuletzt modifiziert von Awaina am 18.11.2010 - 12:31:02
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  11. Do. 18.11.2010 12:30 Uhr #11
    User Pic
    timbletak Mitglied
    Registriert seit
    16.11.2010
    Beiträge
    131
    Beitragswertungen
    0 Beitragspunkte
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
	<title>{TITLE}</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="designer" content="Juergen Koller - http://www.lernvid.com" />
	<meta name="licence" content="Copywright LernVid.com - Creative Commons Sharalike 3.0" />
	<link rel="stylesheet" type="text/css" href="include/designs/freak_lernvid.com/style.css"/>
        <link rel="SHORTCUT ICON" href="http://www.fka-show.de/favicon.ico" type="image/x-icon"> 
</head>

<body> 
<div id="wrapper">
	<div id="header">
		<div id="sitename">{SITENAME}</div> 	
	</div>
	<div id="top"><p>{HMENU}</p></div>
	<div id="main_content">
		<div id="sidebar_left">
		{_list_menunr1@
			<div id="left_menu">
				<div class="menu_heading">%1</div>
				<div id="left_menu_inner">%2</div>
				<div class="menu_bottom"></div>
			</div>
		}
		</div>
		<div id="content">{EXPLODE}</div> 
		<div id="sidebar_right">
		{_list_menunr2@
			<div id="right_menu">
				<div class="menu_heading">%1</div>
				<div id="right_menu_inner">%2</div>
				<div class="menu_bottom"></div>
			</div>
		}
		</div>
		<div class="clr"></div>  
	</div>
   <!-- Der Backlink zum Autor darf nicht entfernt werden! // It's not allowed to remove the Backlink to the Autor //-->	  
	<div id="footer">Designvorlage by <a href="http://www.lernvid.com" target="_blank">LernVid.com</a> | Script Copyright by <a href="http://www.ilch.de/" target="blank">ilch.de</a>|Grafik und überarbeitung by<a href="http://www.fka-show.de/" target="blank">F.K.</a></div>
</div>
          <!-- vertikaler menupunkt -->
          {_list_vmenupoint@
          <ul><li><a target="%1" class="box" href="%2">%3</a></li></ul>
          }

</body>
</html>
    0 Mitglieder finden den Beitrag gut.
  12. Do. 18.11.2010 13:26 Uhr #12
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    Okay, da du die dynamische Funktion des Templates von Ilch nutzt, ist es etwas mehr Aufwand. Um die einzelnen Boxen anzupassen, musst du die Box-Datei selber bearbeiten.
    Welche Box möchtest du bearbeiten? Und poste bitte noch mal die gleichnamige PHP-Datei.

    mfg
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  13. Do. 18.11.2010 13:34 Uhr #13
    User Pic
    timbletak Mitglied
    Registriert seit
    16.11.2010
    Beiträge
    131
    Beitragswertungen
    0 Beitragspunkte
    also ich würde das gern mit
    2. menü auf meiner Page machen
    0 Mitglieder finden den Beitrag gut.
  14. Do. 18.11.2010 13:42 Uhr #14
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    Du kannst das Menü auf deiner Seite mit dem Link 

    <a href="javascript=hide('sidebar_right')">Ausblenden</a>


    ausblenden, wenn du mein oben geschrieben Script-Text vonn "<script..." bis "...</script>" in den Head der index.htm einsetzt.

    mfg


    Zuletzt modifiziert von Awaina am 18.11.2010 - 13:43:25
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  15. Do. 18.11.2010 13:51 Uhr #15
    User Pic
    timbletak Mitglied
    Registriert seit
    16.11.2010
    Beiträge
    131
    Beitragswertungen
    0 Beitragspunkte
    das funktioniert nicht

    fals das so richtig eigefügt wurde 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
	<title>{TITLE}</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="designer" content="Juergen Koller - http://www.lernvid.com" />
	<meta name="licence" content="Copywright LernVid.com - Creative Commons Sharalike 3.0" />
	<link rel="stylesheet" type="text/css" href="include/designs/freak_lernvid.com/style.css"/>
        <link rel="SHORTCUT ICON" href="http://www.fka-show.de/favicon.ico" type="image/x-icon"> 

<script language="javascript" type="text/javascript">

    function hide(element) {

        if (dodument.getElementByID(element).style.display = 'block') {

            document.getElementByID(element).style.display = 'none';

        } else {

            document.getElementByID(element).style.display = 'block';

        }

    }

</script> 
   
      <a href="javascript=hide('sidebar_right')">Ausblenden</a>

</head>

<body> 
<div id="wrapper">
	<div id="header">
		<div id="sitename">{SITENAME}</div> 	
	</div>
	<div id="top"><p>{HMENU}</p></div>
	<div id="main_content">
		<div id="sidebar_left">
		{_list_menunr1@
			<div id="left_menu">
				<div class="menu_heading">%1</div>
				<div id="left_menu_inner">%2</div>
				<div class="menu_bottom"></div>
			</div>
		}
		</div>
		<div id="content">{EXPLODE}</div> 
		<div id="sidebar_right">
		{_list_menunr2@
			<div id="right_menu">
				<div class="menu_heading">%1</div>
				<div id="right_menu_inner">%2</div>
				<div class="menu_bottom"></div>
			</div>
		}
		</div>
		<div class="clr"></div>  
	</div>
   <!-- Der Backlink zum Autor darf nicht entfernt werden! // It's not allowed to remove the Backlink to the Autor //-->	  
	<div id="footer">Designvorlage by <a href="http://www.lernvid.com" target="_blank">LernVid.com</a> | Script Copyright by <a href="http://www.ilch.de/" target="blank">ilch.de</a>|Grafik und überarbeitung by<a href="http://www.fka-show.de/" target="blank">F.K.</a></div>
</div>
          <!-- vertikaler menupunkt -->
          {_list_vmenupoint@
          <ul><li><a target="%1" class="box" href="%2">%3</a></li></ul>
          }

</body>
</html>
    0 Mitglieder finden den Beitrag gut.
  16. Do. 18.11.2010 14:34 Uhr #16
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    Den Link must du natürlich im <body> platzieren. Und dann von da aus betätigen.
    Ansonsten die function hab ich nur grad eben so geschrieben, hatte sie noch nicht überprüft..
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  17. Do. 18.11.2010 14:37 Uhr #17
    User Pic
    timbletak Mitglied
    Registriert seit
    16.11.2010
    Beiträge
    131
    Beitragswertungen
    0 Beitragspunkte
    könntest du das richtig einfüge das wär doch viel unkomplizierter
    0 Mitglieder finden den Beitrag gut.
  18. Do. 18.11.2010 14:40 Uhr #18
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
    <title>{TITLE}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="designer" content="Juergen Koller - http://www.lernvid.com" />
    <meta name="licence" content="Copywright LernVid.com - Creative Commons Sharalike 3.0" />
    <link rel="stylesheet" type="text/css" href="include/designs/freak_lernvid.com/style.css"/>
        <link rel="SHORTCUT ICON" href="http://www.fka-show.de/favicon.ico" type="image/x-icon"> 
 
<script language="javascript" type="text/javascript">
 
    function hide(element) {
 
        if (dodument.getElementByID(element).style.display = 'block') {
 
            document.getElementByID(element).style.display = 'none';
 
        } else {
 
            document.getElementByID(element).style.display = 'block';
 
        }
 
    }
 
</script>  
</head>
 
<body> 
<div id="wrapper">
    <div id="header">
        <div id="sitename">{SITENAME}</div>     
    </div>
    <div id="top"><p>{HMENU}</p></div>
    <div id="main_content">
        <div id="sidebar_left">
        {_list_menunr1@
            <div id="left_menu">
                <div class="menu_heading">%1</div>
                <div id="left_menu_inner">%2</div>
                <div class="menu_bottom"></div>
            </div>
        }
        </div>
        <div id="content">{EXPLODE}<br /> <a href="javascript=hide('sidebar_right')">Ausblenden</a>
</div> 
        <div id="sidebar_right">
        {_list_menunr2@
            <div id="right_menu">
                <div class="menu_heading">%1</div>
                <div id="right_menu_inner">%2</div>
                <div class="menu_bottom"></div>
            </div>
        }
        </div>
        <div class="clr"></div>  
    </div>
   <!-- Der Backlink zum Autor darf nicht entfernt werden! // It's not allowed to remove the Backlink to the Autor //-->      
    <div id="footer">Designvorlage by <a href="http://www.lernvid.com" target="_blank">LernVid.com</a> | Script Copyright by <a href="http://www.ilch.de/" target="blank">ilch.de</a>|Grafik und überarbeitung by<a href="http://www.fka-show.de/" target="blank">F.K.</a></div>
</div>
          <!-- vertikaler menupunkt -->
          {_list_vmenupoint@
          <ul><li><a target="%1" class="box" href="%2">%3</a></li></ul>
          }
 
</body>
</html>
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  19. Do. 18.11.2010 14:46 Uhr #19
    User Pic
    timbletak Mitglied
    Registriert seit
    16.11.2010
    Beiträge
    131
    Beitragswertungen
    0 Beitragspunkte
    muss ich da noch irgentwas ergänzen
    0 Mitglieder finden den Beitrag gut.
  20. Do. 18.11.2010 14:59 Uhr #20
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    ZitatZitat geschrieben von timbletak

    muss ich da noch irgentwas ergänzen


    Nein. Du solltest nun unterhalb des Content-Bereiches dein Link finden zum einklappen. Diesen kannst du überall auf deiner Seite platzieren, ganz wie Du willst.
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  21. Do. 18.11.2010 15:00 Uhr #21
    User Pic
    timbletak Mitglied
    Registriert seit
    16.11.2010
    Beiträge
    131
    Beitragswertungen
    0 Beitragspunkte
    wo genau?
    0 Mitglieder finden den Beitrag gut.
  22. Do. 18.11.2010 15:09 Uhr #22
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    ZitatZitat geschrieben von Awaina

    überall auf deiner Seite platzieren, ganz wie Du willst.


    ^^
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  23. Do. 18.11.2010 15:11 Uhr #23
    User Pic
    timbletak Mitglied
    Registriert seit
    16.11.2010
    Beiträge
    131
    Beitragswertungen
    0 Beitragspunkte
    nein wo der link stehe soll
    0 Mitglieder finden den Beitrag gut.
  24. Do. 18.11.2010 15:51 Uhr #24
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    Du kannst ihn einsetzten wo du willst. Dafür gibt es keine vorgabe. Einfach an einen ort, an den du Ihn verwenden kannst. ^^
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  25. Do. 18.11.2010 15:53 Uhr #25
    User Pic
    timbletak Mitglied
    Registriert seit
    16.11.2010
    Beiträge
    131
    Beitragswertungen
    0 Beitragspunkte
    ja aber wo ist der link
    und wie bekomme ich ihn dan ins menü
    0 Mitglieder finden den Beitrag gut.
  26. Do. 18.11.2010 16:02 Uhr #26
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    Also der Link um den es sich handelt ist der: 

    <a href="javascript=hide('sidebar_right')">Ausblenden</a>


    Mit diesem bewirkst du ein zu-/ bzw. aufklappen deines rechten Menüs.

    Diesen Link setzt du irgendwo hin, wo Du ihn verwenden kannst, um das Menü per Knopfdruck ein, bzw. ausblenden zu lassen.
    Quasi wie eine Türklinke und die Tür wäre in dieser Metapher deine rechte Menüleiste.

    Alles klar soweit? zwinker
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  27. Do. 18.11.2010 16:08 Uhr #27
    User Pic
    timbletak Mitglied
    Registriert seit
    16.11.2010
    Beiträge
    131
    Beitragswertungen
    0 Beitragspunkte
    klappt nicht
    0 Mitglieder finden den Beitrag gut.
  28. Do. 18.11.2010 18:25 Uhr #28
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    Sry, der Anzeiger geht über ein Doppelpunkt. Ersetze mal den Link mit diesem: 

    <a href="javascript:hide('sidebar_right')">Ausblenden</a>
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  29. Do. 18.11.2010 18:29 Uhr #29
    User Pic
    timbletak Mitglied
    Registriert seit
    16.11.2010
    Beiträge
    131
    Beitragswertungen
    0 Beitragspunkte
    nein geht nicht
    0 Mitglieder finden den Beitrag gut.
  30. Do. 18.11.2010 19:04 Uhr #30
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    Es gab da ein kleinen Tippfehler im Script. Hier ohne Tippfehler: 

    <script language="javascript" type="text/javascript"> 
    function hide(element) { 
        if (document.getElementByID(element).style.display = 'block') { 
            document.getElementByID(element).style.display = 'none'; 
        } else { 
            document.getElementByID(element).style.display = 'block'; 
        } 
    } 
</script>



    Zuletzt modifiziert von Awaina am 18.11.2010 - 20:22:42
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten