Tein tällaisen yksinkertaisen jutun, jolla saa help-iconista pikkukuvan tulostettua tuohon namehelp-lootaan.
var box;
$('#cssbox').hover(function(){
box = '<img src="image/name.png" alt="box-name"/>';
$('#namehelp div') .before(box);
});Nyt vaan tuo kuva pakkaa jäämään siihen vaikka hiiren vetää pois tuon ikonin päältä. Mikä olisi konsti tuon tyhjennykseen?
Kiitos jo etukäteen.
Mod. korjasi oikeat kooditagit!
Jqueryn mouseleave-funktiota käyttäen taitaa toimia. Lisättävälle kuvalle voisi laittaa jonkun id:n, jotta kuvan voi helposti poistaa.
box = '<img src="..." id="kuva"/>';
Tuo lisätään siihen namehelppiin, ja sitten näin:
$('#cssbox').mouseleave(function(){
$('#kuva').remove();
});Kiitos Ripe nopeasta vastauksesta.
Jostakin syystä tähän tuli uusi ongelma, kun siirsin tuon namehelp-divin paikan sivun yläosaan, jossa on enemmän vapaata tilaa.
Tämä näytti kuvan aina kahtena. Kun lisäsin yhden remove-rivin, näytti yhtenä mutta ei postanut sitä yhtä kuvaa. Kun lisäsin toisen rivin tällä tavalla, tyhjensi molemmat:
$('#cssbox').mouseleave(function(){
$('#himg').remove();
$('#himg').remove();
});Mistä moinen voisi johtua? Minulla ei ole tuossa mitään silmukkaa, help-nappi näkyy lähdekoodissa yhtenaä, samoin helpname -div.
Mod. korjasi oikeat kooditagit!
Validissa html:ssä ei voi olla kahta elementtiä samalla id:llä. Teetkö sen kuvan lisäyksen jotenkin kahdesti? Kun kutsutaan tuota remove-metodia, sen pitäisi kyllä poistaa kaikki elementit sillä id:llä. Kumma ongelma, johon en kyllä oikein osaa sanoa mitään.
Kun ei enempää koodia näy niin oletin tässä että #namehelp:issä oleva div on omistettu vain tälle kuvalle?
Jos, niin kävisikö tähän tyyliin..
$('#cssbox').mouseenter(function(){
$('#namehelp div').html('<img src="image/name.png" alt="box-name"/>');
}).mouseleave(function() {
$('#namehelp div').empty();
});t0ll0 kirjoitti:
Kun ei enempää koodia näy niin oletin tässä että #namehelp:issä oleva div on omistettu vain tälle kuvalle?
Jos, niin kävisikö tähän tyyliin..
Eipä tässä ole kovin kummasia koodeja. Ei vaikuta tuo.
Ainoa mitä epäilen on se että tuo namehelp on absolute - sijoiteltu, koska muuten sitä olis aika hankala tulostaa halutulle kohtaa. Mutta jos tätä vikaa ei saa ratkottua niin toimii sen noinkin, annetaan sille pari kulausta removea :)
pistemies kirjoitti:
Eipä tässä ole kovin kummasia koodeja. Ei vaikuta tuo.
Ainoa mitä epäilen on se että tuo namehelp on absolute - sijoiteltu, koska muuten sitä olis aika hankala tulostaa halutulle kohtaa. Mutta jos tätä vikaa ei saa ratkottua niin toimii sen noinkin, annetaan sille pari kulausta removea :)
Niin, "koodilla" tarkotin tuota tekemääni oletusta ettei divissä ole muuta kuin kuva. Tuo ehdottamani tyyli poistaa kaiken sen divin sisältä joten jos siellä olisi esimerkiksi tekstiä niin alkuperäinen .before ja vaikka id:n mukainen kuvan poisto on silloin parempi tapa kuten ripe laittoikin.
Ei sillä absolutella pitäisi olla merkitystä tässä vaan virhe on jossain muualla. Jos kuva tulee tuplana niin tarkista onko sivulla useampi #cssbox määrite esimerkiksi sisäkkäin. Voithan toki laittaa kuvan poiston removella tai tuolla emptyllä juuri ennen kuvan lisäämistä eli mahdollinen kuva poistetaan ennen kuin uutta lisätään, mutta kuten sanoin niin koodissa on jokin muu virhe ja kaikki kikkailut on vain alkuperäisen ongelman korjaamisen kiertelyä.
edit, selkeämpää tekstiä..
Ei tässä ole mitään samannimisiä eikä samantapaosia id-nimiä.
Javascritiä on muutakin, tällä sivulla on mm. CHKeditor ja jotain pientä tabs/menu -juttuja. Mutta nekin on eri funktionimillä ei pitäisi vaikuttaa...
pistemies kirjoitti:
Ei tässä ole mitään samannimisiä eikä samantapaosia id-nimiä.
Jos kuva näkyy kahtena, ei ole muuta selitystä kuin se, että olet lisännyt sivulle kaksi samanlaista kuvaa. Jos tuo #himg viittaa nyt kyseiseen kuvaan, sivullasi on selvästikin kaksi kuvaa, joilla on sama id.
Ripe kirjoitti:
Kun kutsutaan tuota remove-metodia, sen pitäisi kyllä poistaa kaikki elementit sillä id:llä.
Näin ei ole. Kokeilemalla voi todeta, että $("#id") hakee vain yhden elementin (ainakin Firefoxissa), vaikka niitä olisi useita.
Metabolix kirjoitti:
Jos kuva näkyy kahtena, ei ole muuta selitystä kuin se, että olet lisännyt sivulle kaksi samanlaista kuvaa. Jos tuo #himg viittaa nyt kyseiseen kuvaan, sivullasi on selvästikin kaksi kuvaa, joilla on sama id.
Palstan Suulas Mies tuli näemmä paikalle. Tässä kaikki sivun id:t, mitkä noista ovat samoja:
<div id="container">
<div id="header">
<div id="menu">
<li id="dashboard">
<li id="catalog">
<li id="extension">
<li id="sale">
<li id="system">
<li id="reports">
<li id="help">
<li id="store">
<li id="store">
<div id="content">
<div id="namehelp" style="position:absolute;top:10px;left:550px;z-index:1;"><span></span></div>
<div id="tabs" class="htabs">
<div id="tab-general">
<div id="languages" class="htabs">
<div id="language1">
<img style="margin-left:6px;" id="helpimg" src="image/help.png" alt="help"/>
<img id="tabname" style="margin-left:6px;" src="image/help.png" alt="help"/>
<img id="csstab" style="margin-left:6px;" src="image/help.png" alt="help"/>
<textarea name="????" id="description1"> </textarea>
<div id="tab-design">
<div id="footer">Laitoin vasiten nuo tässä ketjussa olevat mainitut 'ongelma-boksit' tähän esille 'täytenä'.
ps. minä käytän firefoxia, ubuntu kun on alustana.
Tässä vielä js-koodi, minulla on siinä kolme opaskuvaa, kolmea tekstikenttää varten.
<script type="text/javascript"><!--
var box;
$('#helpimg').hover(function(){
box = '<div id="hdiv" style="padding:10px;border:solid 4px #DDDDDD;background:#8C8C8C;clear:both;">';
box += '<img src="image/box_name.png" alt="box-name"/></div>';
$('#namehelp span') .before(box);
});
$('#helpimg').mouseleave(function(){
$('#hdiv').remove();
$('#hdiv').remove();
});
$('#tabname').hover(function(){
box = '<div id="hdivv" style="padding:10px;border:solid 4px #DDDDDD;background:#8C8C8C;">';
box += '<img src="image/tab_name.png" alt="box-name"/></div>';
$('#namehelp span') .before(box);
});
$('#tabname').mouseleave(function(){
$('#hdivv').remove();
$('#hdivv').remove();
});
$('#csstab').hover(function(){
box = '<div id="hdivw" style="padding:10px;border:solid 4px #DDDDDD;background:#8C8C8C;">';
box += '<img src="image/tabs.png" alt="box-name"/></div>';
$('#namehelp span') .before(box);
});
$('#csstab').mouseleave(function(){
$('#hdivw').remove();
$('#hdivw').remove();
});
//--></script>Ps2 : Ihan piti silmiä siristää ja katsoa tuota menu-tiedoston koodia lähempää. Ja tottahan se on. Tuossa menussa on kaksi "store"-id:tä. Lähes uskomaton homma, kun ajattelee kenen/keitten koodia se alun perin on.
Mutta ei se tähän voi vaikuttaa sekään...
Nimittelemällä ja riitelemällä varmaan saatkin entistä paremmin apua.
En väittänyt, että koodissasi olisi kaksi samanlaista elementtiä. Sanoin, että sivullasi on. Siitä on ihan turha väittää vastaan, jos et pysty vakuuttavasti osoittamaan, että esimerkiksi selaimessa on jokin mystinen, muille tuntematon virhe, jonka takia kuvia piirretään kahtena.
Itse asiassa virheesi on hyvin alkeellinen: et ole lukenut jQueryn dokumentaatiota ja käytät hover-kutsua väärin. Dokumentaatiossa kerrotaan, että hover asettaa käsittelijän sekä mouseenter- että mouseleave-tapahtumalle. Jos funktioita annetaan kaksi, ensimmäinen käsittelee mouseenter-tapahtuman ja toinen mouseleave-tapahtuman, muuten sama funktio käsittelee molemmat.
Nykyisellä koodillasi siis lisätään kuva sekä hiiren tullessa että mennessä ja lopuksi vasta poistetaan kuvat. Eli aivan kuten sanoin, ennen kuvien poistoa niitä todellakin on kaksi. Olisit voinut löytää ongelman niin, että olisit tulostanut sivulle tekstiä kummassakin käsittelijässä. Silloin olisit heti nähnyt, että kuva lisätään liian usein.
Yksinkertainen korjaus on asettaa käsittelijät oikein eli vaihtaa hoverin tilalle mouseenter tai käyttää pelkästään hoveria kahdella eri käsittelijällä.
Myös Ripe saisi olla tarkempana, tämä olisi pitänyt huomata jo keskustelun alussa.
Metabolix kirjoitti:
Yksinkertainen korjaus on asettaa käsittelijät oikein eli vaihtaa hoverin tilalle mouseenter tai käyttää pelkästään hoveria kahdella eri käsittelijällä.
Kiitos! Tämä minun ongelma juuri onkin että lukemalla ei tahdo oppia kun ei osaa muuta kuin suomea.
Otampa nuo mainitsemasi toiminnot tähän mukaan niin eiköhän sitten...
Oho! En ajatellut ollenkaan, että hover- ja mouseenter-funktioilla voisi olla eroa. Pitää olla tosiaan tarkempana. Enkä myöskään katsellut dokumentaatioita noille funktioille.
Hyvä että virhe löytyi ja saatiin korjattua.
Eipä itsekkään muistanut hoverin kahta käsittelijää kun tottunut käyttämään mouseenter ja mouseleavea erikseen. Tosin tästäkin huomaa ettet pistemies edes kokeillut/soveltanut antamaani pätkää ;) Jossa muuten näkyy malli jqueryn käsittelijöiden ketjuttamisesta samaan selectoriin. Voi saada selkeämpää koodia aikaan sitä käyttäen vinkkivinkki..
t0ll0 kirjoitti:
Tosin tästäkin huomaa ettet pistemies edes kokeillut/soveltanut antamaani pätkää ;) Jossa muuten näkyy malli jqueryn käsittelijöiden ketjuttamisesta samaan selectoriin. Voi saada selkeämpää koodia aikaan sitä käyttäen vinkkivinkki..
Juu, en testannut sitä ihan sellaisena kuin laitoit (minulla oli .hover) mutta nyt sekin on tehty. Ei toimi tuo empty juttu minun selaimella (ei tyhjennä lainkaan).
Laittelin tässä tuon 'ketjutuksen', kiitos vinkistä.
pistemies kirjoitti:
Ei toimi tuo empty juttu minun selaimella (ei tyhjennä lainkaan).
Pääasia että toimii, mutta ajattelin vielä selventää miksei tuo empty sulla pelaa..
Syy on siinä että käytät .before käsittelijää joka lisää kuvan ennen span-tagia ja tuo empty yrittää tyhjentää siten jo tyhjää elementtiä.
Html-pohja
<div id="namehelp"> <span></span> </div> <img id="csstab" style="margin-left:6px;" src="image/help.png" alt="help"/>
Jquery .before
$('#csstab').mouseenter(function(){
$('#namehelp span').before('<img src="image/name.png" alt="box-name"/>');
}).mouseleave(function() {
$('#namehelp span').empty();
});Yllä olevan jälkeen html näyttäisi tältä
<div id="namehelp"> <img src="image/name.png" alt="box-name"/> <span></span> </div> <img id="csstab" style="margin-left:6px;" src="image/help.png" alt="help"/>
Käyttämällä .beforen sijaan esimerkiksi .html() saadaan kuva menemään span tagin sisään kuten luultavasti tarkoitus olisi.. Jolloin myös empty pelaa kuten pitää eikä kuvassa tarvitse olla id-määritettä tämän aikaan saamiseksi :)
t0ll0 kirjoitti:
Käyttämällä .beforen sijaan esimerkiksi .html() saadaan kuva menemään span tagin sisään kuten luultavasti tarkoitus olisi.. Jolloin myös empty pelaa kuten pitää eikä kuvassa tarvitse olla id-määritettä tämän aikaan saamiseksi :)
Kiitos, korjasin vielä tuon homman tähän.
Ei ole paljonkaan järkeä laittaa span-elementtiin div-elementtiä. Jos on tarkoitus näyttää vain yksi kuva kerralla, selvintä olisi laittaa suoraan tuohon diviin kuva:
$('#csstab').hover(
function() { $("#namehelp").html('<img src="kuva.png" alt="" />'); },
function() { $("#namehelp").empty(); }
);Kuvan alt-attribuuttiin kuuluu laittaa teksti, joka näytetään kuvan sijasta esimerkiksi tekstiselaimella. Jos tällaista tekstiä ei ole, attribuutti on minusta viisainta jättää tyhjäksi. Ainakaan siihen ei kannata laittaa mitään ihmeellisiä lyhenteitä kuten "box-name": antaako hyvän kuvan sivustosta, jos sivulla näkyy (edes poikkeustilanteessa) aivan merkityksettömiä tekstejä?
Metabolix kirjoitti:
Ei ole paljonkaan järkeä laittaa span-elementtiin div-elementtiä.
Eipä tosiaan :)
Muutin tuota, kiitos.
Aihe on jo aika vanha, joten et voi enää vastata siihen.