Lenyíló többszörös tartalom js-el

A javascriptről.
Fórum szabályok
Ha elakadtál, és programkódod is van, mindenképpen nyiss neki egy új témát.
Könnyebb úgy segíteni, hogyha elkülönülnek a témakörök és problémák egymástól.
Aurel
Tag
Hozzászólások: 29
Csatlakozott: 2012.06.10. 10:31

Lenyíló többszörös tartalom js-el

Hozzászólás Szerző: Aurel »

Heyho :D

Ráakadtam erre a scriptre ..
jquery.js-t beintegráltam

css - php:

Kód: Egész kijelölése

<head>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
body {
        margin: 0;
}
 
#panel {
        background: #030;
        height: auto
        width: auto
        margin: 0 auto;
        display: none;
}
 
.btn-slide {
	background: #FCF;
        text-align: center;
        width: 150px;
        height: 30px;
        margin: 0 auto;
        display: block;
        color: #fff;
}
</style>

<script type="text/javascript">
$(document).ready(function(){

        $(".btn-slide").click(function(){
                $("#panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
        });
        
         
});
</script>
</head>
<body>
<div id="panel">Teszt  szövegek ID alapján</div>
<p class="slide"><a href="#" class="btn-slide">Profil info</a></p>
Viszont nem tudom id hez társítani, a legutolsó hozzáadott tartalom szerint nyitja meg :/
Valakinek valami ötlete?
Előre is köszi

A.

Avatar
Bonjasky
Adminisztrátor
Hozzászólások: 478
Csatlakozott: 2011.10.30. 23:30

Re: Lenyíló többszörös tartalom js-el

Hozzászólás Szerző: Bonjasky »

Az id-t megadhatod, php kóddal is, akár GET utasítással is, nem tudom mire gondolsz pontosan, de GET-el így tudnád:

Kód: Egész kijelölése

<script type="text/javascript">
$(document).ready(function(){

        $(".btn-slide").click(function(){
                $("#panel<?= $_GET['id']; ?>").slideToggle("slow");
                $(this).toggleClass("active"); return false;
        });
        
         
});
</script>
Vagy akár azt is megcsinálhatod, hogy minden panelt sql-ből lekérdezed, és mindegyikhez a scriptet is hozzárendeled, így mindegyiknek más lesz az id-je és működni fog vele.

Aurel
Tag
Hozzászólások: 29
Csatlakozott: 2012.06.10. 10:31

Re: Lenyíló többszörös tartalom js-el

Hozzászólás Szerző: Aurel »

Heyho :)

Köszi a választ, de így sem adja ki :S Csak a legfelsőt nyitja le ... :/
Hogy tudd mire gondolok, milyet szeretnék, itt egy teszt oldal hozzá:
http://manoworld.hu/lenyilo.php
Bonjasky írta:Az id-t megadhatod, php kóddal is, akár GET utasítással is, nem tudom mire gondolsz pontosan, de GET-el így tudnád:

Kód: Egész kijelölése

<script type="text/javascript">
$(document).ready(function(){

        $(".btn-slide").click(function(){
                $("#panel<?= $_GET['id']; ?>").slideToggle("slow");
                $(this).toggleClass("active"); return false;
        });
        
         
});
</script>
Vagy akár azt is megcsinálhatod, hogy minden panelt sql-ből lekérdezed, és mindegyikhez a scriptet is hozzárendeled, így mindegyiknek más lesz az id-je és működni fog vele.

Avatar
Bonjasky
Adminisztrátor
Hozzászólások: 478
Csatlakozott: 2011.10.30. 23:30

Re: Lenyíló többszörös tartalom js-el

Hozzászólás Szerző: Bonjasky »

Kód: Egész kijelölése

<script type="text/javascript">
    $(document).ready(function(){

            $(".btn-slide").click(function(){
                    $("#panel<?= $sor[''id']; ?>).slideToggle("slow");
                    $(this).toggleClass("active"); return false;
            });
           
             
    });
    </script>
ezt a részt rakd bele a lekérdezésbe!
ha le írod a php kódot megmutatom pontosan, de valahogy így, ahogy fent van.

Aurel
Tag
Hozzászólások: 29
Csatlakozott: 2012.06.10. 10:31

Re: Lenyíló többszörös tartalom js-el

Hozzászólás Szerző: Aurel »

Hali :))
Vagy nagyon vak vagyok vagy passz :D De akkor sem vágom :/
Itt az egész kódrész:

Kód: Egész kijelölése

<?php //character test ÍíúőűáéóüöÚŐŰÁÉÓÜÖ ?><?php
header('Content-Type: text/html; charset=utf-8');
?>
<head>
	<title>~ Cikkek ~</title>
    <script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
body {
        margin: 0;
}
 
#panel {
        background: #FFF;
        height: auto
        width: auto
        margin: 0 auto;
        display: none;
}
 
.btn-slide {
	background: #666;
        text-align: center;
        width: 150px;
        height: 30px;
        margin: 15 20;
        display: block;
        color: #fff;
		-moz-border-radius-topleft: 5px;
 -moz-border-radius-topright: 5px;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-bottomleft: 10px;
 border-radius: 5px 5px 5px 5px;
  	-moz-border-radius: 10px 10px 10px 10px;
  	-webkit-border-radius: 10px 10px 10px 10px;
 -moz-box-shadow: inset 5px 10px 60px #99F, inset 0px 0px 50px #CF3, 0px 0px 5px #900, 5px 15px 30px  #C0C;
}
</style>

       <script type="text/javascript">
    $(document).ready(function(){

            $(".btn-slide").click(function(){
                    $("#panel<?= $_GET['id']; ?>").slideToggle("slow");
                    $(this).toggleClass("active"); return false;
            });
           
             
    });
    </script>


</head>



<?php
require_once 'inc/connect.php';
?>
<?php

				$query="SELECT * FROM new_cikk ORDER BY id DESC";
if (req("q_search") != "") {
    if (req("q_where") == "-1") {
        foreach($f AS $k => $v) {
            $where[] ="$k like '%". mysql_real_escape_string( req("q_search")) ."%'";
        }
    }
    else
    $where[] = req("q_where") . " like '%". mres( req("q_search") ) ."%'";
}

if(isset($where) AND count($where)>0)
$query .=" WHERE " . implode(" OR " , $where) ;



$result=mysql_query($query);
$num = mysql_num_rows ($result);
$row_per_page=30;

$page= isset($_GET["page"])? intval($_GET["page"]) : 1 ;
$actual=($page-1)*$row_per_page;
$query.=" LIMIT $actual,$row_per_page";
$result = mysql_query( $query ) or die(mysql_error());

if ($num > 0 ) {

?>

<?php
	while($a=mysql_fetch_assoc($result))
	{
	
	?>
    
    <br />
    <table width="auto" border="0">
  <tr>
    <td align="left"><dfn><?=$a["id"]?></dfn> | <span class="cikk_cim"><?=$a["cikkcim"]?></span></td>
    <td><?=$a["kategoria"]?></td>
    <td><?=$a["ekkor"]?></td>
    </tr>
    </table>
    <div id="panel">
    <table width="500" height="auto" border="0">
    	<tr>
        	<td><?=$a["tartalom"]?><br /></td>
    	</tr>
        </table>
        </div>
<p class="slide"><a href="#" class="btn-slide<?= $_GET['id']; ?>"><img src="info.png" />Részlet</a></p>
    <br />
    <?php
	
	}



	

}
else
echo "<div id='cikk_lista'>Nincs cikk az adatbázisban</div>";
?><br />		
			
		</div>
	


<br />
<br />
S itt a

Kód: Egész kijelölése

<?=$a["tartalom"]?>
sornak kellene hogy minden cikknél lenyíljon ...

A

Avatar
Bonjasky
Adminisztrátor
Hozzászólások: 478
Csatlakozott: 2011.10.30. 23:30

Re: Lenyíló többszörös tartalom js-el

Hozzászólás Szerző: Bonjasky »

Hát elvileg így működnie kéne:

Kód: Egész kijelölése

<?php //character test ÍíúőűáéóüöÚŐŰÁÉÓÜÖ ?><?php
header('Content-Type: text/html; charset=utf-8');
?>
<head>
   <title>~ Cikkek ~</title>
    <script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
body {
        margin: 0;
}
 
#panel {
        background: #FFF;
        height: auto
        width: auto
        margin: 0 auto;
        display: none;
}
 
.btn-slide {
   background: #666;
        text-align: center;
        width: 150px;
        height: 30px;
        margin: 15 20;
        display: block;
        color: #fff;
      -moz-border-radius-topleft: 5px;
 -moz-border-radius-topright: 5px;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-bottomleft: 10px;
 border-radius: 5px 5px 5px 5px;
     -moz-border-radius: 10px 10px 10px 10px;
     -webkit-border-radius: 10px 10px 10px 10px;
 -moz-box-shadow: inset 5px 10px 60px #99F, inset 0px 0px 50px #CF3, 0px 0px 5px #900, 5px 15px 30px  #C0C;
}
</style>
</head>



<?php
require_once 'inc/connect.php';
?>
<?php

            $query="SELECT * FROM new_cikk ORDER BY id DESC";
if (req("q_search") != "") {
    if (req("q_where") == "-1") {
        foreach($f AS $k => $v) {
            $where[] ="$k like '%". mysql_real_escape_string( req("q_search")) ."%'";
        }
    }
    else
    $where[] = req("q_where") . " like '%". mres( req("q_search") ) ."%'";
}

if(isset($where) AND count($where)>0)
$query .=" WHERE " . implode(" OR " , $where) ;



$result=mysql_query($query);
$num = mysql_num_rows ($result);
$row_per_page=30;

$page= isset($_GET["page"])? intval($_GET["page"]) : 1 ;
$actual=($page-1)*$row_per_page;
$query.=" LIMIT $actual,$row_per_page";
$result = mysql_query( $query ) or die(mysql_error());

if ($num > 0 ) {

?>


<?php
   while($a=mysql_fetch_assoc($result))
   {
   
   ?>
    
    <br />
    <table width="auto" border="0">
  <tr>
    <td align="left"><dfn><?=$a["id"]?></dfn> | <span class="cikk_cim"><?=$a["cikkcim"]?></span></td>
    <td><?=$a["kategoria"]?></td>
    <td><?=$a["ekkor"]?></td>
    </tr>
    </table>
    <div id="panel<?=$a["id"]?>">
    <table width="500" height="auto" border="0">
       <tr>
           <td><?=$a["tartalom"]?><br /></td>
       </tr>
        </table>
        </div>
        <script type="text/javascript">
    $(document).ready(function(){

            $(".btn-slide").click(function(){
                    $("#panel<?=$a["tartalom"]?>").slideToggle("slow");
                    $(this).toggleClass("active"); return false;
            });
           
             
    });
    </script>
<p class="slide"><a href="#" class="btn-slide<?= $_GET['id']; ?>"><img src="info.png" />Részlet</a></p>
    <br />
    <?php
   
   }



   

}
else
echo "<div id='cikk_lista'>Nincs cikk az adatbázisban</div>";
?><br />      
         
      </div>
   


<br />
<br />
Ha nem működik, légyszi nézd meg debug-al :D

Aurel
Tag
Hozzászólások: 29
Csatlakozott: 2012.06.10. 10:31

Re: Lenyíló többszörös tartalom js-el

Hozzászólás Szerző: Aurel »

Heyho :)

Nem írta ki és nem is ír hibát :S
usage : =>/chroot/1.php #75

NULL
NULL
NULL
NULL
string(8) "CONSTANT"

=>/chroot/1.php #77

NULL

Avatar
Bonjasky
Adminisztrátor
Hozzászólások: 478
Csatlakozott: 2011.10.30. 23:30

Re: Lenyíló többszörös tartalom js-el

Hozzászólás Szerző: Bonjasky »

belinkeled?

Aurel
Tag
Hozzászólások: 29
Csatlakozott: 2012.06.10. 10:31

Re: Lenyíló többszörös tartalom js-el

Hozzászólás Szerző: Aurel »

Bonjasky írta:belinkeled?
persze :)

http://manoworld.hu/1.php

Avatar
Bonjasky
Adminisztrátor
Hozzászólások: 478
Csatlakozott: 2011.10.30. 23:30

Re: Lenyíló többszörös tartalom js-el

Hozzászólás Szerző: Bonjasky »

Ha megnézed ez a forrása:

Kód: Egész kijelölése

<script type="text/javascript">
        $(document).ready(function(){

                $(".btn-slide").click(function(){
                        $("#panel<p>
	Az első cikket m&aacute;r nem nyitja le .... :S</p>
").slideToggle("slow");
                        $(this).toggleClass("active"); return false;
                });
               
                 
        });
        </script>
A forrásába ne a tartalamt kérdezd le, a panel után hanem egy id-t!

Kód: Egész kijelölése

    <div id="panel<?=$a["id"]?>">

Aurel
Tag
Hozzászólások: 29
Csatlakozott: 2012.06.10. 10:31

Re: Lenyíló többszörös tartalom js-el

Hozzászólás Szerző: Aurel »

Ahham : Most egyszerre nyitja és csukja mindet :)
Köszönöm h szóltál :D

Azt megtudom oldani hogy pl csak azt nyissa ki amire rákattint hogy infó? Ne mindet

Avatar
Bonjasky
Adminisztrátor
Hozzászólások: 478
Csatlakozott: 2011.10.30. 23:30

Re: Lenyíló többszörös tartalom js-el

Hozzászólás Szerző: Bonjasky »

Kód: Egész kijelölése

  

<script type="text/javascript">
function nyit<?=$a["id"]?>(){
                    $("#panel<?=$a["id"]?>").slideToggle("slow");
                    $(this).toggleClass("active"); return false;
             }
    </script>
A gombok hivatkozása meg ez legyen:

Kód: Egész kijelölése

<a href="#" class="btn-slide" onsubmit="nyit<?=$a["id"]?>()"><img src="info.png" />Részlet</a>
Elvileg+ le kéne még tesztelnem de valahogy így kell, régen én is sokat szenvedtem vele! :D

Aurel
Tag
Hozzászólások: 29
Csatlakozott: 2012.06.10. 10:31

Re: Lenyíló többszörös tartalom js-el

Hozzászólás Szerző: Aurel »

Hali :D

Le teszteltem :D Nyitva van az egész és össze sem csukja :D

Avatar
Bonjasky
Adminisztrátor
Hozzászólások: 478
Csatlakozott: 2011.10.30. 23:30

Re: Lenyíló többszörös tartalom js-el

Hozzászólás Szerző: Bonjasky »

Nézd már meg a forrását...

Válasz küldése