Eli kyseessä on jQueryllä toteutettu kuvakruselli jossa on kiinteät paikat jokaiselle kuvalle ja aina joku kuvao n aivan etummaisena kaikista ja se pitäisi nyt saada auki linkillä joka on muuala kuin siinä itse kuvassa.
Alla oleva koodi tulostaa aina etummaisen kuvan linkin sivulle reaaliajassa.
<p id="title-text"></p>
Ja jos tuon saisi jotenkin vielä linkkiin niin olisin almost finaalissa, mutta en ole itse ainakaan onnistunut luomaan tuosta linkkiä.
Haen siis tämän tyylistä:
<a href="<p id="title-text"></p>">Linkki</a>
Mutta eihän tuo tietenkään voi edes toimia noin ja tuolle ratkaisu mikäli joku taitava tietää niin kirjoitteleppa! :)
Tekisin sen jotakuinkin näin:
<p id="..." href="osoite"></p>
Ja sitten siihen linkkiin laitetaan hrefiksi aina etummaisen p:n hrefin arvo.
<a href="osoite">Linkki</a>
Koodini ei (oletettavasti) mene läpi validaattorista, mutta kun p:n href-attribuutin sisällön on tarkoitus olla vain "muistissa", ei se mielestäni haittaa. :)
Joo ei tämä julkisesti nettiin päädykkään niin ei tarvi olla ihan jetsulleen kaikki, kuhan saan tällä yhdellä selaimella toimimaan ni on jees.
Tuo sun vinkkis antaa vaan osoitteen joka ohjaa /osoite sivulle joten ei toimi :/
Tää on vähän kiperä tehtävä saada toimimaan kun kokelti on jo yhdistää php ja html koodi mutta ei auta ainakaa tähän mennessä kokeilluilla koodin pätkillä. Höh mutta kiitos ainakin yrityksestä auttaa.
Osoite pitää aina päivittää erikseen, kun vekotin pyörähtää.
Eli, kun edessä on auton kuva, karusellin alla olevasta linkistä pääsee auto.php-sivulle, ja kun edessä on tietokoneen kuva, samasta linkistä pääsee tietokone.php-sivulle, jne.?
Edit. Vai haluatko laajentaa kuvan isommaksi linkkiä napsauttamalla?
Joo kyllä juuri näin :) ja <p id="title-text"></p> tämä koodin pätkä näyttää sen osoitteen aina kun pyöräyttää karusellia juuri oikeana eli puoliks tehty homma. :)
Lisäys: Teen sulle demon tosta tonne nettiin ni näät millanen se on ni linkkaan kun on valmis.
Lisäys: Eli tästä näet miten se toimii tällä hetkellä, karuselli pyörii joko klikkaamalla oikeaa ja vasenta nuolta tai numpadin oikea ja vasen näppäin. Huomaa kun linkki teksti vaihtuu ylhäällä aina kun pyöräyttää.
Ahaa, nyt tajusin. Eli haluat p#title-text:in sisältämän tekstin linkin hreffiin.
Itse asiassa, linkin hrefiä tarvitaan vain, kun linkkiä napsautetaan, eli se voidaan hakea vasta silloin tuosta p#title-textistä. Halutessasi voit muokata tuon toiminaan jo hiiren päälleviennillä.
$(document).on("click", "#linkki", function () {
$(this).attr("href", $("#title-text").text());
});Elikkäs mihin tungen tuon #linkki idn?
makkke_ kirjoitti:
Elikkäs mihin tungen tuon #linkki idn?
Se on sen linkin (input vaatii säätämistä) id, jonka hrefistä tehdään automaattisesti päivittyvä. (Todennäköisesti sen keskimmäsen nuolen, josta ei tapahdu mitään.) Eli näin:
<div id="ylos">
<!-- CSS: #linkki ja #linkki:hover hoitavat kuvan vaihtumisen kätevästi. -->
<a id="linkki"></a>
</div>Niin, ja tuolla <p href="..."></p>-jutulla et tee yhtään mitään ja jQuerystä on olemassa uudempikin versio kuin 1.4 (on-funktio löytyy vasta 1.7:sta). :)
Uusimman jQueryn saa kätevästi näin:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Selvästikin sivulle pitää lisätä myös tuo alussa mainittu p-tagi, koska juuri sen sisällöstä tässä yritetään hakea osoitetta. Lisäksi jukkah:n antama JS-koodi on nyt aivan väärässä paikassa.
Kannattaa myös korjata HTML-koodissa olevat virheet.
Metabolix kirjoitti:
Selvästikin sivulle pitää lisätä myös tuo alussa mainittu p-tagi, koska juuri sen sisällöstä tässä yritetään hakea osoitetta. Lisäksi jukkah:n antama JS-koodi on nyt aivan väärässä paikassa.
JavaScript-koodi meni vahingossa p:n päälle? Se oli siinä nimittäin vielä kolmelta.
Moi makkke_!
<a href="javascript:location.href=$('#title-text').text();">linkki</a>neau33 kirjoitti:
<a href="javascript:siirry();">linkki</a>
Eipä laiteta niitä funkkareita merkkaukseen, vaan käytetään tapahtumien sidontaa
jukkah kirjoitti:
$(document).on...
... muttei sidota mielelllään roottinodeen. Mitä kauemmas tapahtuman alkulähteestä sidotaan, sitä kauemmin joudutaan DOM-puussa hyppimään.
Sidotaan suoraan oikeaan elementtiin
$('#linkki').on('click', function(e) {
e.preventDefault();
location.href = $('#title-text').text();
});Anonyymin funktion sisältöä on hankala sanoa varmuudella, kun et ole kertonut tarkemmin, mikä jQUery-karuselli siellä on taustalla ja miten se ne kuvat lataa näytille.
tsuriga kirjoitti:
Mitä kauemmas tapahtuman alkulähteestä sidotaan, sitä kauemmin joudutaan DOM-puussa hyppimään.
Mitenkähän en ole tuota tajunnut aiemmin. :D
tsuriga kirjoitti:
...mikä jQuery-karuselli siellä on taustalla ja miten se ne kuvat lataa näytille.
Ylempänä oli pieni huomaamaton linkki demoon, ja CloudCarousel siellä pyörii taustalla. Veikkaan, että siitä nuolilinkistä pitäisi tapahtua sama asia, kuin itse kuvaa napsauttamalla (tällä hetkellä), eli location.href toimii ihan hyvin.
Hienosti tullut vastauksia, kiitos siitä :) Ongelma on yhä olemassa, eli ratkaisua ei ole löytynyt, tällä hetkellä sivulla on "käytössä" jukkah:n ehdotus muttei näytä toimivan, ei edes css tyylistä suostu hakea tuota ala "ylös nuoli" kuvaa :/
Moi taas makkke_!
iske jutskat tähän tyyliin...
<div id="ylos">
<input id="up-but" onmouseover="this.src='images/ylospush.png'"
onmouseout="this.src='images/ylos.png'" type="image" src="images/ylos.png"
onclick="location.href=$('#title-text').text();">
</div>
<div id="piilo" style="position: absolute; left: -100%">
<p id="title-text"></p>
</div>ja poista nämä tyylitiedostostasi...
#linkki {
WIDTH: 300px; BACKGROUND: url(http://makke.t15.org/info/images/ylos.png); HEIGHT: 300px
}
#linkki:hover {
BACKGROUND-IMAGE: url(http://makke.t15.org/info/images/ylospush.png)
}niin alkaa rokkaamaan!
Wautsi se toimii, mahtavaa! pitäisi vielä laittaa tuo ylösnuolen toiminta toimimaan numpad näppäimellä 5 :) mutta mikäli aikaa riittää ja halua niin voit myös kertoa miten se tehdään samaan syssyyn :) näppäimen keycodehan on 101 :)
Kokeilin soveltaa viimeksi antamaasi koodia seuraavasti:
if(code==101){
$("#up-but").mouseup();
}mutta yllätys ei toimi kun en osaa javascriptiä oikeastaan.
Moi taas makkke_!
iske se tyylisivusi näyttämään tältä ja poista html koodin 'piilo' divistä se style asetus
body {
BACKGROUND-COLOR: #ffffff; font-color: #ffffff
}
p {
WIDTH: 50%; FONT-FAMILY: arial, verdana, sans-serif; COLOR: #000000; MARGIN-LEFT: auto; FONT-SIZE: 20px; MARGIN-RIGHT: auto
}
#vasen {
position: absolute; left: 20%
}
#ylos {
position: absolute; left: 40%
}
#alas {
position: absolute; left:40%
}
#oikea {
position: absolute; left: 60%
}
#piilo{
position: absolute; left: -100%
}ja iske ne linkkien takana olevat sivut tyyliin...
<html>
<head>
<link rel="stylesheet" href="../../tyyli.css" type="text/css" />
<script language="javascript">
document.onkeyup = function(e){
var code;
if(window.event){
code = event.keyCode;
}else
{
code = e.which;
}
if(code==98){
location.href="../../";
}
}
</script>
</head>
<body>
<center>
<h1>AUTOT</h1>
</center>
<p>
Autot
<br>
<img src="../../images/1.png">
</p>
<div id="alas">
<input onmouseover="this.src='../../images/alaspush.png'"
onmouseout="this.src='../../images/alas.png'" type="image"
src="../../images/alas.png"
onclick="javascript:location.href=../../'">
</div>
</body>
</html>Nääh ne voi olla tollasenaan kun tää ei tuu kumminkaan nettiin tää lopullinen juttu, tuo on vaa tollane versio joka havainnollisti millanen tää karuselli on :) se voi olla tollasenaan mut se numpad 5 näppäimestä toimiva ylöspäin osottava nuoli olis tarpeen kyllä :)
Moi taas!
Moi taas makkke_!
keyup funkkari näyttäs tältä:
$(document).keyup(function(e) {
var code = e.keyCode?e.keyCode:e.which;
if(code==102){
$("#left-but").mouseup();
}
if(code==100){
$("#right-but").mouseup();
}
if(code==101){
location.href=$('#title-text').text();
}
});Entäpä jos haluaa keycode 98:lla eli numpad 2 poistua sivulta jolle meni? sitten toi karuselli pyöris kokonaan näppäimistöllä eikä tarvitse hiireen koskea. :))
Moi!
tsekaa toi mun toiseksiviimeisin viesti uudelleen...
täältä voit impata palvelimella toimivan version
Ja mikäli sinua vielä kiinnostaa se juttu, jota taannoin vinguit sähköpostitse elikä klikkaaminen tietyllä kohtaa selainikkunassa niin voit impata täältä paketin, jolla jutska onnistuu IE:ssä
neau33: Silmään pistää heti HTML-koodin sekaan attribuutteina tungetut tyylit ja koodit. :) Pieni muokkaus niihin, kiitos.
Viel ois niinkin pieni juttu tekemättä eli
if(code==98){
location.href="http://makke.t15.org/info/";
}Tämä koodi toimimaan niin ettei se mene tohon tiettyyn sivuun vaan
window.close()
sulkisi sivun
jukkah kirjoitti:
neau33: Silmään pistää heti HTML-koodin sekaan attribuutteina tungetut tyylit ja koodit. :) Pieni muokkaus niihin, kiitos.
mutta ei...tällä jollain neropatilla ei pistänyt ollenkaan silmään tämä...
neau33 kirjoitti:
Moi taas makkke_!
iske se tyylisivusi näyttämään tältä ja poista html koodin 'piilo' divistä se style asetus...
makkke_@ mitäs maksaisit viritemästä, joka sulkis koko koneen siitä linkistä?
Näin suljetaan nykyinen ikkuna. http://groups.google.com/a/googleproductforums.
if (code == 98) {
window.open('', '_self', '');
window.close();
}Tarkoituksenani on siis avata karusellin linkit uudessa sivussa ja sitten kun halutaan taas takaisin karuselliin niin poistutaan sulkemalla koko sivu ja näin ollen karusellissa on aina etummaisena se sivu mihin viimeksi jäätiinkään jos ihmettelitte tarkoitustani.
neau33 kirjoitti:
jukkah kirjoitti:
neau33: Silmään pistää heti HTML-koodin sekaan attribuutteina tungetut tyylit ja koodit. :) Pieni muokkaus niihin, kiitos.
mutta ei...tällä jollain neropatilla ei pistänyt ollenkaan silmään tämä...
neau33 kirjoitti:
Moi taas makkke_!
iske se tyylisivusi näyttämään tältä ja poista html koodin 'piilo' divistä se style asetus...
Tarkoitin sitä "imppaa tätä koodia"-linkin takaa löytyvää koodiasi, joka on enimmäkseen kopio makkke_n toimimattomasta koodista => makkke_ diffaa sen ja tekee pari muutosta, eikä opi mitään. :( Jos olisit kirjoittanut sen koodin uudelleen, siinä olisi ollut tutkittavaa useammaksi minuutiksi.
makkke_ kirjoitti:
...jos ihmettelitte tarkoitustani.
Tein koodiini pienen lisäyksen selvyyden vuoksi, eli tuo yläpuolella oleva avaa-ja-sulje-ikkuna-koodi tulee niille alasivuille, kun halutaan päästä takaisin. (Eli se sulkee nykyisen ikkunan/tabin jolloin jäljelle jää aloitussivu.)
JavaScriptillä on vähän hankala sulkea nykyistä ikkunaa, kuten huomaat. Tarvitaan vähän selaimenharhautuskoodia. :)
Joo, noh tuo toimii tällä hetkellä ihan ok. Ainoa mikä ei toimi on karusellin linkkien avaaminen uuteen ikkunaan. Mitenköhän tämän
if(code==101){
location.href=$('#title-text').text();
}avaisi kokonaan uuteen ikkunaan? Kokeilin esimerkiksi tälläistä
if(code==101){
window.open=$('#title-text').text();
}mutta ei toiminut :(
Kokeilepa näin:
if (code == 101) {
window.open($('#title-text').text());
}Eli window.open on funktio, jota kutsumalla avautuu uusi ikkuna.
Ai se olikin noin :) NYT mulla on VIHDOIN kaikki mitä tarvitsin, joten kiitän ja kumarran kaikille jotka auttoi mua tässä, iso kiitos :)
Moi!
jukkah kirjoitti:
...joka on enimmäkseen kopio makkke_n toimimattomasta koodista...
no epäilempä, ettei tämä makkke_ olisi saanut aikaan juurikaan mitään tähän aiheeseen liittyvää ilman oheista demoa...
neau33 kirjoitti:
no epäilempä, ettei tämä makkke_ olisi saanut aikaan jurikaan mitään tähän aiheeseen liittyvää ilman oheista demoa...
Aha, olitte jo tuttuja valmiiksi. Hyvin toimittu neau33! :)
Heippa taas!
Aiheeseen liittyvä päivitetty demo, joka toimii tässä ketjussa mainittujen näppäinten osalta myös Opera -selaimessa löytyy täältä
Aihe on jo aika vanha, joten et voi enää vastata siihen.