ugrás a tartalomhoz

Szöveg megjelenítése

superhero · 2012. Jan. 6. (P), 20.22
Sziasztok!
Olyat szeretnék, hogy van egy adott szöveg (mondjuk 100 karakter) de ebből csak 50 karakter jelenjen meg, majd a csonkított szövegre kattintva megjelenjen a teljes szöveg, mégegyszer rákattintva pedig megint pl. 50 karakter legyen. Nem tudom, hogy ezt Javascriptben kell-e vagy van rá valami más megoldás is. Teljesen tanácstalan vagyok, hogy min induljak el!
‹ Angular, Ember, js templétezés "éppen ír" hogyan célszerű ›
 ■
1

Addig is, míg valaki

H.Z. v2 · 2012. Jan. 6. (P), 20.53
Addig is, míg valaki hozzáértő reagál: talán kissé elvadult ötlet, de én még szerver oldalon felosztanám két részre. Kiraknám az első 50 karaktert egy önálló szakaszba, mondjuk span tagek közé téve. Ha hosszabb, mint 50, akkor mögé tennék két span-t, önálló id-kel. Az elsőbe három pontot, a másodikban a szöveg maradékát. E két utóbbira egy-egy onclick eseményt, amely a két span-hez rendelt style-t felcseréli. Az elsőnek alapértelmezetten megjelenítendő, a második alapértelmezetten rejtett.
2

Köszi, csak elfelejtettem azt

superhero · 2012. Jan. 6. (P), 21.10
Köszi, csak elfelejtettem azt is hozzátenni, hogy rss-n keresztül jön a szöveg és nincs módom "belepiszkálni" a szövegbe.
3

A poén az egészben, hogy

H.Z. v2 · 2012. Jan. 6. (P), 21.18
A poén az egészben, hogy egyébként sem tudom összehozni, amit megálmodtam... :-)
(bár nem teljesen értem, hogy miért nem megy... beállítani tudom, lekérdezni nem)
4

:D

superhero · 2012. Jan. 6. (P), 21.20
:D
5

RSS

Pepita · 2012. Jan. 6. (P), 22.01
Nemrég írtam egy-egy RSS olvasó és író eszközt, az olvasóban alapból benne van a "rövidíteni tudás" (szépen szóvégnél vág, ...-al), és csak azokat a html elemeket hagyja a cuccban, amiket megengedsz neki. Így pl. a képeket v. linkeket is ki tudod venni belőle. Tehát legfeljebb te nem tudsz belepiszkálni, de nagyon is lehet.
Írd meg konkrétan mihez kell, hol használod fel, stb., lehet segítek. Gondoltam, ha az itteni honlapgazdák is benne vannak (és érdeklődés is van), megírom egy cikkben a cuccost, de nemigazán tudom, ennek mi a menete, de most utánaérdeklődök. Ha lesz cikk - és neked nem sürgős - akkor azt biztosan fel fogod tudni használni.

Szerk.:
Ja és a kérdésedre: én két div-be tenném a rövid ill. a teljes tartalmat (szerver oldalról), a teljes persze elsőre hidden, és js-ből a div-en onclick-ekre cserélném, hogy melyik hidden, melyik visible.
6

A váltást hogy csinálod

H.Z. v2 · 2012. Jan. 6. (P), 22.08
A váltást hogy csinálod JS-ből? Dereng, hogy már belefutottam korábban is: nem tudom lekérdezni a CSS attribútumokat valamiért.
Span-be van téve a szöveg, az ID-hez van felvéve a display:none; ill. a display:inline; de a getElementById(...).style alatt ennek semmi nyoma (FF 3.6 - már firebug alatt is turkáltam, de ott sem találom)
7

Google Feedburneren

superhero · 2012. Jan. 6. (P), 22.12
Google Feedburneren (BuzzBoost) keresztül jön a feed, és ezért nem tudok vele mit kezdeni. BuzzBoostban belehet állítani, hogy posztonként hány szó jelenlen meg, viszont mást nem.
9

Gondolom, ezt nekem akartad válaszolni,

Pepita · 2012. Jan. 6. (P), 22.54
csak melléklattyoltál.
Ezt a Feedburnert én még nem ismerem, nem lehet az érkező cuccot pl. lementeni XML-be? Mert onnantól ugyanúgy feldolgozható lenne. Egyébiránt a reader-em - ha allow_url_open = On - url-ből is megnyit RSS2.0, Atom és RTF formátumú feed-et.
8

visibility

Pepita · 2012. Jan. 6. (P), 22.45
visibility: hidden; és visibility: visible;
És div, nem span (tehát egész blokk).
Azért (is) írtam: rövidített és teljes tartalom. Pl.:

<div id="1" 
onClick="Document.getElementById('1').style.visibility='hidden'; 
Document.getElementById('2').style.visibility='visible'; ">
xy rövid tartalom...
</div>

<div id="2" 
onClick="Document.getElementById('2').style.visibility='hidden'; 
Document.getElementById('1').style.visibility='visible'; ">WZ teljes - hosszabb - tartalom.
</div>
10

Document? onClick? ezek

Poetro · 2012. Jan. 6. (P), 23.55
Document? onClick? ezek honnan jönnek? Talán az onClick még működik, ám hivatalosan az onclick az elfogadott, de a Document-et nem tudom honnan vetted.
13

Bocsi

Pepita · 2012. Jan. 7. (Szo), 01.12
Bocsi, fejből elírtam, nem figyeltem eléggé.
Ritkán bűvölök js-t, de olyankor kipróbálom (és sűrűn belefutok ilyesmibe). Ezt viszont közvetlenül a commentbe írtam, ami hiba volt... A colorer-en kívül jó lenne ide vmi sintax-check. (Vicc volt)

Szerk.:
Írhatnál ide egy jó js-t, az enyém amúgy is elég fatengelyes megoldás, te guru vagy ebben...
14

JS megoldás

Poetro · 2012. Jan. 7. (Szo), 02.20
A kedvedért, itt egy teljesen JS megoldás, bár csak szimpla szöveg esetére.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio felis, accumsan eget aliquet vitae, faucibus et turpis. Sed in enim libero. Aliquam pretium sapien nec odio consequat at convallis neque bibendum. Maecenas tortor nibh, porta nec gravida eu, eleifend nec magna. Phasellus sollicitudin elit at quam sollicitudin vitae ultrices erat condimentum. Curabitur vitae mauris vel magna commodo elementum eu non nisl. Aliquam rhoncus dui quis nibh iaculis eget eleifend metus convallis. Nullam sed mauris fermentum tellus posuere varius sit amet quis odio. Integer congue, massa eget ullamcorper venenatis, libero sem laoreet ipsum, eu adipiscing augue tellus sagittis nisl. Nam.</div>
  <script type="text/javascript">
    var item = document.getElementById('item'),
        text = item.firstChild.nodeValue,
        punctations = /[.!?\u00a1\u203c\u2026\u00bf\u203d]\s|\u3002/,
        result, more, teaser, teaserNode, children, i, length,
        displayed = false;
        teaserLength = 50;
    if (text.length > teaserLength) {
      // Megkeressük a mondat végét.
      result = punctations.exec(text.slice(teaserLength));
      if (result) {
        teaser = text.slice(0, teaserLength + result.index + result[0].length);

        // Eltávolítjuk a gyerekeket
        children = item.childNodes;
        for (i = 0, length = children.length; i < length; i += 1) {
          item.removeChild(children[i]);
        }

        // Lecseréljük a tartalmat
        teaserNode = document.createElement('span')
        teaserNode.appendChild(document.createTextNode(teaser));
        item.appendChild(teaserNode);
        more = document.createElement('span');
        more.style.display = 'none';
        more.appendChild(document.createTextNode(text.slice(teaser.length)));
        item.appendChild(more);

        // Kezzeljük a kattogtatást.
        item.onclick = function () {
          displayed = !displayed;
          more.style.display = displayed ? 'inline' : 'none';
        }
      }
    }
  </script>
</body>
</html>
Kipróbálható.
15

Király

Pepita · 2012. Jan. 7. (Szo), 03.03
Hát igen, bőven volna hova fejlődjek js-ben. A 08-09. sort (itt) én nem is értem, hogy ki-kicsoda. Vmi regexp? Ill. hogy mondatvéget a teaserLength előtt v. után keres(el)?
Én (php-ban) hasonlót úgy csináltam, hogy előbb elvágtam a szöveget a kívánt hosszra (itt most a tag-eket hagyjuk), majd a végéről visszafelé haladva egy space-t kerestem -> ott vágtam megint és hozzáadtam a "..."-ot. Kinek hogy tetszik.

Off:
Apropó js-fejlődés. Tudnál esetleg ajánlani jó js (letölthető) könyvet/manualt? Mint pl. a php manual, de pdf is jó lenne. (Azt már nem is említem, hogy magyarnak hatszor jobban örülnék, de angol is jó.) A lényeg, hogy elejéről jó sokáig érjen, (DOM, OOP is), és legálisan (ingyenesen) legyen letölthető. Nem online.
16

A

Poetro · 2012. Jan. 7. (Szo), 03.41
A /[.!?\u00a1\u203c\u2026\u00bf\u203d]\s|\u3002/ egy reguláris kifejezés. Ugyan valószínűleg nem tartalmaz több mondat végi írásjelet, de a nagy részét igen (.!?¡‼…¿‽。). A slice kb. megegyezik a substr-rel, azaz a teaserLength utáni részben keresem az írásjeleket (lehetne fordítva is, és nem is kellene sokat módosítani a kifejezésen).

Könyvből, ami jó, és letölthető az az Eloquent JavaScript: A Modern Introduction to Programming. Mondjuk ez nem foglalkozik túlságosan részletesen a DOM-mal, de minden mással igen.
Referencia könyvről csak párról tudok, JavaScript Bible, illetve a JavaScript: The Definitive Guide, bár utóbbi fizetős, előbbi pedig egy nagyon régi kiadás (de van belőle újabb, természetesen fizetős).

Most nézem, hogy több mint 20 JS-sel foglalkozó villanykönyvem van... és ebbe nem számoltam még bele a majd két évfolyamnyi JSMag számokat.
17

Köszönöm!

Pepita · 2012. Jan. 7. (Szo), 06.15
Hasznosak lesznek számomra.
18

Nagyon jó, köszi, erre volt

superhero · 2012. Jan. 8. (V), 20.19
Nagyon jó, köszi, erre volt szükségem! :)
Viszont most nézem, hogy a div-en belül egy listát generál a FeedBurner (ul > li), és ezen belül kéne valahogy a szöveget manipulálni.
19

DOM

Poetro · 2012. Jan. 9. (H), 00.04
DOM manipuláló függvényekkel megoldod, hogy a megfelelő li elemeket kapd meg, és azokon hajtod végre a fentit. Természetesen ez csak statikus szöveg esetén működik. Ha az li elemek HTML-t tartalmaznak, akkor már jó pár léptékkel bonyolultabb a probléma, és annak megoldása.
20

<div

superhero · 2012. Jan. 9. (H), 18.58
<div class="feedburnerFeedBlock" id="myfeeduri1234">
     <p class="feedTitle">Feed Title Goes Here</p>

     <ul>
       <li><span class="headline"><a href="#">First item headline
       here</a></span>

       <p class="date">Jan 22, 2005</p>
       <div>Aliquam delenit enim nostrud autem velit eum aliquip 
       lobortis consectetuer eum volutpat vero autem et. Tincidunt consequat 
       illum quis suscipit dolor nonummy in dolore.</div>
       <p class="enclosure"><a href="#">Download podcast</a></p></li>

            .
            .
            .
     </ul>

     <div id="creditfooter"><a href="http://www.feedburner.com" target="_blank">
     <img src="http://www.google.com/help/hc/images/feedburner/buzzboost-pwrd.gif" 
alt="Headlines by FeedBurner" /></a>
   </div>

</div>
A date class utáni div-ben található a szöveg, amit manipulálni kell, szóval nem csinál már plusz html kódot a FeedBurner. Utána olvasok a DOM manipulációnak, de ha esetleg nem sokba tart kiegészíteni az előző kódodat, akkor azt nagyon megköszönném. :)
21

feladom...minden segítséget

superhero · 2012. Jan. 10. (K), 20.12
feladom...minden segítséget elfogadok :)
22

Keress meg privátban

Poetro · 2012. Jan. 10. (K), 20.27
Amennyiben te nem teszel hozzá a dologhoz, nehéz lesz segíteni. Természetesen lehet velem személyesen is konzulátlni az ügyben, ha nem sikerül előrébb lépni. De neked is tenni kell valamit... Például leírni, hogy miket olvastál el, próbáltál ki, hogyan fogtál hozzá stb.
23

Egyszerűen rákerestem

superhero · 2012. Jan. 12. (Cs), 19.52
Egyszerűen rákerestem googleban, hogy DOM manipulations. :) De mivel nem találtam az én problémámhoz hasonlót sem, ezért feladtam.
24

RTM

Poetro · 2012. Jan. 12. (Cs), 20.44
element.getElementsByTagName, element.getAttribute, element.tagName, element.childNodes, element.parentNode ezekre, és talán még pár ehhez kapcsolódó függvényre lesz szükséged.

További információt találsz a Mozilla Developer Network DOM referencia leírásában.
25

A fenti javascriptet amit

superhero · 2012. Jan. 12. (Cs), 23.59
A fenti javascriptet amit írtál kipróbáltam, de sajnos nem működik akkor, ha több #item van. Csak úgy megy, ha minden #div végére berakom a js kódot.
26

id

Arnold Layne · 2012. Jan. 13. (P), 00.06
id-ből egy html fájlban csak egy lehet. nem véletlenül id.
27

Át kell írni

Poetro · 2012. Jan. 13. (P), 00.39
Igen, a fenti szkriptet át kell ezért írni, hogy ne id-t használjon, hanem mondjuk osztályokat, vagy valami hasonlót. Ehhez a fenti függvények és tulajdonságok (vagy azok egy részének) használatára lesz szükséged.
11

HTML

Poetro · 2012. Jan. 6. (P), 23.59
Amennyiben a szöveged nem sima szöveg, hanem HTML, akkor a feladat sokkal bonyolultabb, mint gondolnád. Mivel az utóbbi 4-6 órámat ezzel töltöttem, ezért tudom, hogy nem egy leányálom. De ha sima szöveg, akkor is könnyebb szerver oldalon feldarabolni két részre, és kirakni két div-et.
12

Való igaz

Pepita · 2012. Jan. 7. (Szo), 00.20
Tényleg meg kéne írjam azt a cikket. Rss-reader-emben - mint fentebb írtam - van rövidítési funkció engedélyezett tag-ekkel, egy külön (kellemes) játék benne az esetleg le- ill. félbe vágott záró tag-ek pótlása...
28

Bővebben.. szöveg

AxxE · 2016. Jún. 14. (K), 20.57
Sziasztok!
Bocs, hogy előhozom ezt a 4 éves témát, de nekem pont jó lenne ez a script (Poetro 14.-es hsz.), csak ki kellene egészítenem azt a végét amit levág a tartalomból egy "Bővebben.." szöveggel.
Ugyan nem értek a JavaScript-hez egyáltalán, de az biztos, hogy egy hozzáértőnek a megoldás teljesen evidens és másodpercek alatt megoldja. Szemben az én eddig ráfordított óráimmal..

Úgy sejtem, hogy a 20. sorban kellene megoldanom, de nem jöttem rá hogyan..

Előre is köszi! :)

UI: Jessszuss.. :
Ennyi ideje regisztrált felhasználó
10 év 15 hét :D első hozzászólásnak nem rossz, pláne hogy be is tudtam lépni. :D