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)
Full Version: JavaScript
- feltéve, hogy tényleg az egész oldalon ki akarod cserélni (értsd akár az oldal fejlécében is)
Köszönöm, működik!
bocsi a spam-ért, közben megoldódott...
viszont akkor már egy kérdés:
a fenti kódot, hogy opera alatt is működjön, hogy kéne megváltoztatni?
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;
}
{
$("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?
sziasztok, újabb jquery-s kérdés.
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!
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>
$( "." + $.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!
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:
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
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() { /* ... */ });
});
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
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
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 --- */
$(".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 --- */
Ü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.
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:
É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
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;
}
}
}
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
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
Előre és még1x köszönöm
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
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
Ü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
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
QUOTE(Csordás Mihály @ 2010. Oct 17., 21:54) 
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;
}
});
});
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.
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
Ú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
QUOTE(D4nY @ 2011. May 17., 15:15)
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
Ú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!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.