JavaScript, mi az? Options

[Anybudi]

CODE

document.documentElement.innerHTML = document.documentElement.innerHTML.replace(/hejesírás/gi, "helyesírás");

- feltéve, hogy tényleg az egész oldalon ki akarod cserélni (értsd akár az oldal fejlécében is)

This post has been edited by Anybudi: 2010. May 15., 18:18

[Bence]

Köszönöm, működik!

[asam9]

bocsi a spam-ért, közben megoldódott...

viszont akkor már egy kérdés:

CODE

function scroll_to_top()
{
    $("html, body").animate({scrollTop: $("#scroll_to_top).offset().top}, 500);
    return false;
}

a fenti kódot, hogy opera alatt is működjön, hogy kéne megváltoztatni?

This post has been edited by asam9: 2010. Aug 24., 15:47

[asam9]

sziasztok, újabb jquery-s kérdés.

CODE

js:

$( "." + $.attr($("[class*='content_image_']").get(0),"class").substring(14) ).hover(
   function(){ // ... },
   function(){ // ... }
);


html:

<p class="content_image content_image_xxx">
   <a class="photo_link_invisible" href="#" rel="external">részletek</a>
   <img width="360" height="240" src="images/content/xxx.jpg" alt="xxx" />
</p>

<p class="content_image content_image_yyy">
   <a class="photo_link_invisible" href="#" rel="external">részletek</a>
   <img width="360" height="240" src="images/content/yyy.jpg" alt="yyy" />
</p>

az lenne a lényege, hogy kiválasztom azt az osztályt, amelyikben szerepel a "content_image_" érték, és substring-gel kinyerem belőle a második class-nevét, amit aztán egy hover funkcióval szeretnék használni.
a fenti js-sel/ .get(0) / most csak a nulladik ilyen elemre, tehát a content_image_xxx-re érvényes, de azt szeretném, hogy attól váljon függővé, hogy melyik ilyen "content_image_" értékű elem fölé állok épp: tehát legyen dinamikus.
néztem az each-et, hogy talán az lenne rá a megoldás, de nem bírtam összehozni.

ha van vkinek ötlete, eőre is köszi!

[BlackY]

Mit akarsz ezzel elérni?

Ha jól értelmezem, akkor azokra az elemekre, amelyiknek van content_image_*** class-a akarsz tenni egy hover eseménykezelőt, igaz? Viszont ha jól látom a class függ a benne levő kép nevétől, így annak inkább id-nek kéne lennie, bár eleve redundáns, mivel látható az xxx/yyy a fájl nevéből.

Szerintem inkább próbáld úgy, hogy a content_image class-t használod a leválogatásra, aztán minden elemre beállítasz egy eseménykezelőt:

CODE

$.each($('.content_image'), function(element) {
   element.hover(function() { /* ... */ }, function() { /* ... */ });
});

Aztán az xxx/yyy részeket már a hover-hez beállított esemény-kezelőkön belül keresed ki. Ott ugye $(this).children("img").get(0).getAttribute('src') -vel eléred a fájlnevet, onnan már egy regexp-el ki tudod szedni az xxx-t/yyy-t (pl.: /([^/]*?)\.(?:.{3,4})$).

BlackY

[asam9]

siker, nagyon köszi!

mostár bemásolom csak hogy sírj így hogy megy az each, már nem is kell a content_image_ sallang, csak már mindenféle kerülőúton próbálkoztam vele és nem láttam át, mit hogy kéne.
annyit csinál a cuccos, hogy van egy kép az oldalon, és ha fölé állsz, akkor ráanimálódik egy opacity-s inner shadow effekt(az most nincs a lenti kódban, csak a fv. hívása) és még arra rájön vertikálisan középre egy fekete hátterű csík, amin megjelenik a "részletek" felirat. és ezek a dolgok js-ből generálódnak, viszont a html-ből szedi ki az infokat hozzá: href-et, rel-t meg az anchor text-et.

már annyit változott amúgy a kód az elejéhez képest, hogy tuti lehetne 100X egyszerűbben, simán csak a html-t formázni meg animálgatni egymás fölé, de már tökéletesen megelégszem ezzel a js által generált katyvasszal, szóval, köszöntem szépen mégegyszer

CODE

/* --- photo link --- */

$(".photo_link_invisible").css({"display":"none"});

function photo_link()
{
    $.each($(".content_image"), function(){
        
        $(this).hover(
            // mouseover
            function()
            {
                var url = $(this).children("a").get(0).getAttribute("href");
                var txt = $(this).children("a").html();
                var rel = $(this).children("a").get(0).getAttribute("rel");
            
                // call inner shadow effect
                inner_shadow_effect();

                $(this).stop().animate({"opacity":"0.7"}, 100);
                
                $(this).append("<span class='content_img_txt'><a class='dyn_link' href='" + url + "' rel='" + rel + "'>" + txt + "</a></span>");
            
                $(".content_img_txt").css({"position":"absolute","display":"block", "text-align":"center","opacity":"1","top":"100px","left":"0px","z-index":"101","width":"360px","height":"40px","line-height":"40px","background":"#112","font-size":"1em"});
                $(".content_img_txt a.dyn_link").css({"display":"block","background":"#112","color":"#ddd","font-variant":"small-caps","letter-spacing":"2px"});
            },
            // mouseout
            function()
            {
                $(this).stop().animate({"opacity":"1"}, 200);
                $(".inner_shadow_effect").remove();
                $(".content_img_txt").remove();
            }
        ); // hover function

    }); // each function end

} // photo link

/* --- photo link end --- */

[Csordás Mihály]

Üdv mindenkinek, egy olyan javascriptet keresnék, vagy segítséget kérnék, hogy hogyan lehet azt megcsinálni js-el hogy pl úgy indul egy oldal hogy különböző effektekből állna össze a normális oldal. pl egy panel úgy nyílna ki hogy kicsúszik, és abból ki nyílik még egy és abba megjelenne a tartalom, szal ilyen scriptet/scripteket/megoldásokat keresek és kíváncsi lennék hogy ti mit tudtok egy hasonló fajta "intro" jellegű dologhoz.

[BlackY]

Mi sem egyszerűbb

A head részbe bedobsz egy javascriptet, aminél figyelsz arra, hogy véletlenül se legyen defer attribja. Ebből a js-ből kiraksz egy másodlagos css-re mutató linket, szintén a head-be bedobva, hogy a kód feldolgozása előtt be is töltse a böngésző, mielőtt nekiállna renderelni. Ebben aztán mindent eltüntetsz egy display: none-al, amit animálni akarsz (jó esetben ez mondjuk legfeljebb egy-két konténer elem eltüntetését jelenti).
Aztán a js még beállít egy eseménykezelőt, lehetőleg onload, vagy ha valami külső - lassú - helyről is linkelsz képet, scriptet, akármit, akkor mondjuk dom ready eseményt, azon belül pedig már - JQuery-vel, Scriptaculous-szal, stb. - összerakhatod az animációdat. Amit te írsz, azt pl. így lehetne megoldani:

CODE

onload() {
   kicsúszik.onfinished() {
      kinyílik.onfinished() {
           tartalomelőtűnik;
      }
   }
}

És egy tipp: ha lehet ne Nagyon kevés olyan esetet tudok elképzelni, ahol ennek gyakorlati előnye is van, valószínűleg a legtöbb felhasználódat csak idegesíteni fogja.

BlackY

[Csordás Mihály]

Egyszerű menüpont váltásnak szánnám eme effektet, saját kis egyszerű oldalamra majd, kb 1 másodperc idő tartalmúnak. 3 egymás után ki nyíló vonal. Sajnos annyira nem vagyok otthon a js-be, tudsz valami kereső szót, esetleg linket adni valami hasonló kis js dologról?

Előre és még1x köszönöm

[BlackY]

A legegyszerűbb, ha JQuery-vel csinálod. A jquery.com oldalon találod, ott van egy tök jó API doksi is. Amire szükséged lesz:

Az effektek előállítására: http://api.jquery.com/category/effects/
Az esemény-kezelés: http://api.jquery.com/category/events/

Ezek alapján nagyrész már össze lehet copy-pastelni is.

BlackY

This post has been edited by BlackY: 2010. Oct 9., 17:00

[Csordás Mihály]

Üdv,
Lenne egy olyan problémám, hogy most csinálok 1 oldalt, aminek annyi a különlegessége hogy képekből áll a háttér és ezt egérrel tudod navigálni. Az oldal jelenlegi állapota itt tekinthető meg: http://www.wtamas.hu/wtamas.hu_v2/index.html a script amit használok hozzá az meg ez: http://www.azoffdesign.com/overscroll

Az oldal működik is, a problémám az lenne hogy ie-be és firefoxba 1 görgetés után megáll az egész és nem lehet görgetni, megnéztem és letöltöttem a demo anyagot és azt se, viszont az oldal ahol van a bemutató rész az megy mindenhol. ebbe kérném a segítségeteket

[-ChM-]

Az oldal működik is, a problémám az lenne hogy ie-be és firefoxba 1 görgetés után megáll az egész és nem lehet görgetni, megnéztem és letöltöttem a demo anyagot és azt se, viszont az oldal ahol van a bemutató rész az megy mindenhol. ebbe kérném a segítségeteket

Az utolsó script tabben lévő kódod:

CODE

$(function(o){
o = $("#container").overscroll({
onDriftEnd: function() {
console.log("done!");
}
});
$("#link").click(function(){
if(!o.data("dragging")) {
   alert("clicked!");
  } else {
   return false;
  }
});
});

IE-ben és ha jól emlékszem alapértelmezésben firefoxban (bár ebben nem vagyok biztos) sincs console objektum. Nekem az IE8 ezt hiányolja, így a kódodban a console.log("done!"); sort kell törölni. Utána menni fog, ha nincs más hiba

Szerk: igazából a teljes onDriftEnd metódus is mehet a kukába, ha másra nem használod.

This post has been edited by -ChM-: 2010. Dec 7., 09:51

[D4nY]

Sziasztok! Olyan megoldásokat keresnék tutorial vagy jquery plugin formájában ami a következőt csinálja:
Úgy mint például a facebookon is a wallon nem jelenik meg az összes poszt csak miután görgetünk lefelé és elérjük az oldal alját elkezd tölteni a tipikus jquerys kis "animációval".. és 1másodpercen belül máris bejön a többi poszt. Én ugyanezt szeretném csak mondjuk a weboldalon lévő tartalom, portfolio képek, blogbejegyzések megjelenítésére. Előre is köszönöm akik valamilyen megoldással tudnak segíteni, hogy ezt kivitelezhessem:)

D4nY

[D4nY]

Sziasztok! Olyan megoldásokat keresnék tutorial vagy jquery plugin formájában ami a következőt csinálja:
Úgy mint például a facebookon is a wallon nem jelenik meg az összes poszt csak miután görgetünk lefelé és elérjük az oldal alját elkezd tölteni a tipikus jquerys kis "animációval".. és 1másodpercen belül máris bejön a többi poszt. Én ugyanezt szeretném csak mondjuk a weboldalon lévő tartalom, portfolio képek, blogbejegyzések megjelenítésére. Előre is köszönöm akik valamilyen megoldással tudnak segíteni, hogy ezt kivitelezhessem:)

D4nY

A kérdés már nem aktuális!