Sziasztok!
Egy olyan problémába ütköztem, hogy a node-jaimat el kell látnom id-vel, mert javascriptet szeretnék rendelni hozzájuk, viszont nem nagyon találom, hogy hova kéne beraknom a divem.
Most a modules/node/node.tpl.php-ban nézelődtem és ki is próbáltam egy-két lehetséges variációt, de sajnos nem jártam sikerrel. Mellékelek egy képet, hogy pontosan mire is gondolok.
Előre is köszönöm a segítségeteket!
Melyik modulhoz, modulokhoz kapcsolódik a téma?:
Drupal verzió:
Fórum:
| Csatolmány | Méret |
|---|---|
 Untitled-2.png | 13.02 KB |
A node-ok
el vannak látva id-vel. Például a node/1-nek id="node-1"
Egyébként jó nevű fájlal próbálkoztál, csak a használt téma könyvtárában keresd meg a node.tpl.php-t.
Üdv!
Dudás József
Több információt
A lényeget már írták előttem, a node-ot nem kell ellátni id-val, van neki.
Egy normális theme ki is írja ezt a template-ben.
Gondolom tudod, hogy JavaScript-kódot nem csak azonosítóhoz rendelhetsz. Nem tudom, egész pontosan mihez kell neked, ezt nem írtad le.
De ha valami általános jellegű scriptet szeretnél írni, akkor egyszerűbb és ésszerűbb lenne az osztály szerint azonosítani. Ez theme-től is függ, hogy alapból mit pakol a node-okat megjelenítő template-be - ami tudtommal mindegyik theme-nél megvan: "node".
A Zen theme egész hosszú listát pakol be az osztályokból, amik nagyon leegyszerűsítik az azonosítást, egy példa a /node elérési útról, az egyik node wrapper div-jének osztályai:
class="node node-type-story node-promoted node-by-viewer node-teaser build-mode-teaser clearfix"Ezek alapján könnyű általános JavaScript-kódot is írni a node-okra.
Írj több infót, mire is kell neked az azonosítás, milyen JavaScript-kódot szeretnél írni, és akkor aszerint segítünk.
Amiért kell nekem
Az igazi ok, amiért nekem kell:
A referencia miatt elhelyeztem egy kis gombot az oldalon. Amikor ezt megnyomja valaki terveim szerint az oldal átmegy egy kicsit fekéetésbe (rgba(0,0,0, 0.5)). Igazándiból mindenhova megcsináltam már csak a node-k vannak hátra és oda kevés a z-index opció. Nos eddig a js parancsom így áll:
document.getElementById('magam_harom').style.background='rgba(0, 0, 0, 0.5)';
Igazándiból ez miatt kellene nekem az Id vagy akkor nem?
Példa?
Valami ilyesmit képzeltél el?
http://jsbin.com/ugudan/2/edit#html,live
Persze azzal a különbséggel, hogy ha jól értelek, ezek szerint valami félig átlátszó fekete vászonszerűséget szeretnél az oldal elé "húzni".
De szólj, ha nem egészen ilyenre gondoltál.
Aha, ilyenre gondoltam
Igen ilyenre gondolotam, még a bevillanó kis div is stimmel, mert így szeretném én is megoldani. Csak a Drupal 6, 1.3-ig támogatja a jqueryt, 7-esre meg nem szeretnék váltani. Így, hogy a kis legördülő menü none-ra van állítva nem tudom melyiket használja, de mindenképp kipróbálom.
Működik jQuery v1.3.2-vel is
Én készítettem a linkelt példát, szóval kérdezz róla nyugodtan. Ha belenézel az include-olt jQuery-fájlba, láthatod, hogy az
jQuery v1.7.1van ott.De készítettem neked egy ugyanígy működő példát a
jQuery 1.3.2-vel is, ami működik Drupal 6-tal (jQuery Update-tel):http://jsbin.com/ugudan/4/edit#html,live
Még egy ici-pici segítség kéne
Nagyon tuti a jqueryd és nekem szuper lesz, csak még egy kis segítség kellene a beüzemeléséhez. Feldobtam a JQuery modult és updateltem is, így 1.3 fut rendesen. Nos a kódodat bemásoltam a page.tpl.php-mba, de sajnos nem csinál semmit, pedig még az id-kat is meghagytam, így néz most ki: (Mi lehet a gondja?)
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language ?>" xml:lang="<?php print $language->language ?>">
<head>
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<?php print $scripts ?>
<!--[if lt IE 7]>
<style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/fix-ie.css";</style>
<![endif]-->
<script type="text/javascript">
<?php /* Needed to avoid Flash of Unstyle Content in IE */ ?>
</script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
.page_blurred_bg{
width:100%;
height:100%;
position:absolute;
left:0px;
top:0px;
/*
background:rgba(255,20,255,0.5);
*/
z-index:111;
}
.hidden {
display:none;
}
#login_form_wrapper {
background-color:pink;
border:5px outset green;
margin:0px auto;
padding:10px;
text-align:center;
position:absolute;
top:50%;
left:25%;
z-index:999;
}
</style>
<script src="http://webcodingeasy.com/my_classes/js/blur_effect/blur_effect.jquery.js...
</head>
<?php
$pixture_width = theme_get_setting('pixture_width');
$pixture_width = pixture_validate_page_width($pixture_width);
?>
<body>
<div id="login_form_wrapper" class="hidden">
<form action="" id="loginForm">
<div>
<div>
<label for="username">Username: <input type="text" name="user" id="username" /></label></div>
<div>
<label for="password">Password: <input type="password" name="password" id="password" /></label>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</div>
</form>
</div>
<div id="blurred_bg"></div>
<a href="#"id="myButton" class="mesys">me-sys</a>
<div id="hellohello">
<div id="wrapper" style="width: <?php print $pixture_width; ?>;">
...
Uhh
Hát nem gondoltam volna, hogy ezt egy az egyben alkalmazni fogod... ez csak egy szemléltetés akart lenni, hogy miket lehet alkotni, és nagyjából hogyan, de azért azt nem mondtam, hogy így is oldd meg! :D
Egyébként lemaradt az egésznek a lényege, ami miatt működik, a JavaScript-kód - azt hittem, használtál már JSBint, itt egyszerűen csak be kell pipálni a JavaScript melletti checkboxot, és akkor látszik a JS-kód is:
http://jsbin.com/ugudan/4/edit#javascript,html,live
Ettől függetlenül nagyon gondold végig, mielőtt ezt alkalmazod, sőt, inkább előbb azt, hogy nem lenne-e tökéletesen megfelelő számodra a Colorbox modul, amivel nagyon jó dolgokat lehet művelni, pl. ennek segítségével lazán megoldható, hogy elsötétüljön a háttér, az előtérben pedig a Colorbox "vásznán" megjeleníts valami tetszőleges tartalmat.
Előbb kész, karbantartott megoldást igyekezz választani!
==
Egyébként ha kódot másolsz be ide, használd legalább a code taget (lásd syntax highlighting)... :)
Igazándiból...
Igazándiból első körben csak be copy-ztam az egészet, mert így tuti, hogy működnie kellene és csak ezek után hasznosítanám egy-egy részét. Azért vágtam be a forrást, mert a queryt nem akarja hasznosítani az oldalam, persze nem a full forrást gondoltam használni :)
Felőlem nyugodtan
Felőlem nyugodtan használhatod :), nehogy félreérts, nem arra céloztam, hogy ne használd, mert irgumburgum. :) Egyébként remélem most már látod a JavaScript-kódot is, ami az egésznek a lényege.
Részemről akár az egész kódot bemásolhatod, de felhívtam a figyelmed, hogy létezik jobb megoldás is, és hogy adnod kellene előbb egy esélyt pl. a Colorboxnak, mert valószínűleg könnyebben megoldható a segítségével, amit szeretnél. Ha nem megy, segítünk.
Igen látom
Igen meg van:) adok mindenképp esélyt, mert nekem képeket és linket is kell homályosítani vagy alap ötletem szerint egy feketés vászont elé húzni. Queryben pedig (még) nem vagyok otthon, de ahogy elnézem érdemes lesz leülni ezt is tanulgatni.
Mármint jQuery...
"Queryben pedig (még) nem vagyok otthon"
Gondolom a jQuery-re gondolsz (j az elején). :)
A hivatalos honlapja nagyon jól dokumentált, és szerencsére tele van példákkal:
http://jquery.com/
Később aztán a jQuery UI mellett sem lehet csak úgy elmenni, itt is jó sok demó van:
http://jqueryui.com/
Remek
Köszönöm a segítséget. Remekül működik az elképzelésem colorboxal :)