HTML-elementin paikan vaihtaminen

Kehittäjille › Koodausohjeet › HTML-elementin paikan vaihtaminen

Taustaa

Ohjelmisto luo verkkokaupan sivujen HTML-koodin. HTML-koodi koostuu HTML-elementeistä. Tämä on selvä asia. Lähtökohtaisesti verkkosivujen ulkoasu näyttää juuri siltä, missä järjestyksessä HTML-elementit näytetään. HTML-elementtien ulkonäköön ja sijaintiin voidaan tehdä poikkeuksia joko CSS-tyylimäärittelyillä tai JavaScript-käskyillä.

CSS-tyylimäärittelyjen päivittäminen on verkkosivujen suunnittelijalle arkipäivää. CSS-tyylimäärittelyillä voidaan määrittää HTML-elementin suhteellinen ja/tai absoluuttinen sijainti sivulla sekä koko, väri, tasaus, marginaali ja täyttö. Nämä keinot eivät aina riitä. Kerromme tässä ohjeessa, miten HTML-elementtien paikan vaihtaminen HTML-koodissa tapahtuu.

Tarvittavat ohjelmistot

Tässä työssä tarvitaan

• verkkoselain (esim. Chrome)

Esimerkki 1

Tässä esimerkissä verkkokauppias haluaa siirtää sivun yläosassa näkyvän navigaatiopalkin sivun loppuun. Tätä ei kannata tehdä oikeasti, mutta tehdään se esimerkin vuoksi. Ensin on selvitettävä navigaatiopalkin id-parametrin arvo. Se onnistuu helpoiten klikkaamalla hiiren oikeaa painiketta navigaatiopalkin päällä ja sitten "Inspect element". Tarkka sanamuoto vaihtelee eri selaimissa. Tässä tapauksessa selviää, että id-parametrin arvo on "landscape_bottom".

• Kirjaudu verkkokaupan hallintaliittymään (demo).
• Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
• Klikkaa Lisää uusi -painiketta.
• Valitse tyypiksi "Javascript/HTML5".
• Syötä nimeksi "Landscape bottomin siirto alas" tai mitä tahansa.
• Valitse Sijainti-kohdasta "Verkkokaupassa </body> ennen".
• Lisää Koodi-kohtaan:
  

  <div id="oma_mansikkapaikka"></div>
  <script>
  if (document.getElementById("oma_mansikkapaikka")) {
  	document.getElementById("oma_mansikkapaikka").innerHTML = document.getElementById("landscape_bottom").innerHTML;
  	document.getElementById("landscape_bottom").innerHTML = "";  
  }
  </script>
  

• Klikkaa Tallenna-painiketta.

Lopuksi tämän uuden HTML-elementin ulkoasua voidaan muokata lisäämällä CSS-tyylimäärittely: #oma_mansikkapaikka. Se tehdään myös asetukset / koodit ja ulkoasu -kohdan kautta.

Esimerkki 2

Tässä esimerkissä verkkokauppias haluaa siirtää kategoriasivujen alussa näkyvät esittelytekstit kategoriasivujen loppuun. Ensin on selvitettävä esittelytekstin id-parametrin arvo samalla tavalla kuin esimerkissä 1. Tehtävä osoittautuu kuitenkin mahdottomaksi, koska esittelytekstillä ei ole lainkaan id-parametriä. Siltä löytyy vain class-parametri "tb_category_intro". Tässä tapauksessa on toimittava hieman eri tavalla.

• Kirjaudu verkkokaupan hallintaliittymään (demo).
• Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
• Klikkaa Lisää uusi -painiketta.
• Valitse tyypiksi "Javascript/HTML5".
• Syötä nimeksi "Kateogorian esittelytekstin siirto alas" tai mitä tahansa.
• Valitse Sivu-kohdasta "Kategoriat (tuoteryhmät)".
• Valitse Sijainti-kohdasta "Verkkokaupassa </body> ennen".
• Lisää Koodi-kohtaan:
  

  <div id="oma_mansikkapaikka"></div>
  <script>
  var $elements = document.getElementsByClassName("tb_category_intro");
  for (var $i = 0; $i < $elements.length; $i++) {
  	if (document.getElementById("oma_mansikkapaikka")) {
  		document.getElementById("oma_mansikkapaikka").innerHTML = $elements[$i].innerHTML;
  		$elements[$i].innerHTML = "";  
  	}                                        
  }
  </script>
  

• Klikkaa Tallenna-painiketta.

Esittelytekstin marginaaleja voidaan muokata "Ulkoasupohja: Kategoriat" -kortissa olevia CSS-tyylimäärittelyjä muokkaamalla.

Vastuunrajoitus

Näillä ohjeilla ja koodiesimerkeillä ei ole minkäänlaista toimivuustakuuta. Emme vastaa välittömistä, välillisistä, satunnaisista tai epäsuorista vahingoista, menetyksistä, korvauksista, tai kolmannen osapuolen esittämistä vaatimuksista, jotka johtuvat näiden ohjeiden tai koodiesimerkkien noudattamisesta.