Just nu i M3-nätverket
Gå till innehåll
skvalparne

Använda javascript för att infoga samma text på många ställen?

Rekommendera Poster

Om man vill kunna ha en text placerad på många olika ställen utan att ha tillgång till PHP, ASP eller SSI (.shtml) så funderade jag på om man kunde använda javascript.

Tillgång finns att använda separata Javascript-filer samt skriva in Javascript i <head> och <body> på sidan.

 

Jag är ute efter något script så att man bara behöver skriva in t.ex #info eller liknande för att den förutbestämda texten ska visas.

 

Så här ser ett klassiskt javascript ut. Sedan så läste jag att man inte bör använda document.write . Vad beror det på?

 

Det är alltså samma funktion som nedanstående fast att man ska kunna skriva något kortare istället för <script>.....</script> .

 

Finns det annars något bättre sätt att lösa det hela på?

 

<html>
<head>

<script type="text/javascript">
function info() {
document.write("Information");
}
</script>

</head>

<body>

Här har vi lite:<br />
<script>
javascript: info();
</script>
<br />Som du ser var det lite information!
</body>
</html>

 

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Du kan tillexempel skapa en div-tagg med ett förbestämt id.

<div id="info"></div>

Sen kan du från javascript fylla på denna div.

window.onLoad = function()
{
 document.getElementById("info").innerHTML = "Detta är spännande info";
}

 

Då kommer div-taggen med id info få texten du skrivit.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Är det inte för långa texter och många objekt så hade jag lagt in texterna i en array och dem olika objekten i en annan array och loopat igenom det i funktionen.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jag ska infoga detta i ett befintligt javascript (Dynamic Drive Tab Content Script) så det är bara texten mellan <a>-taggarna i flikrubrikerna jag ska infoga.

 

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Nu provade jag och det blev bara blankt. Provade även att byta ut <div> mot <table> med samma resultat.

 

Jag la javascriptet i en <script type="text/javascript"></script> i head och <div> i bodyn.

 

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Ett grundex du kan kolla igenom så löser du det kanske:

[log]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Language" content="sv" />
<title>Untitled</title>
<script type="text/javascript">
function Init() {
var arrTxt=new Array("1","2");
var arrObj=new Array("a","b");
for(i in arrTxt){
	document.getElementById(arrObj[i]).innerHTML=arrTxt[i];
}
}
</script>
<style type="text/css">
a {
background:yellow;
}
</style>
</head>
<body onload="Init();">
<p><a href="#" id="a"></a></p>
<p><a href="#" id="b"></a></p>
</body>
</html>

[/log]

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Det var nog en body onload som saknades i det förra.

Det här sista funkade direkt.

Nu får jag försöka anpassa det till sidan.

 

Tack så länge!

:thumbsup:

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jo, det är så att jag ska använda detta på en butik hos www.e-butik.se .

 

Det gör att man är begränsad i vad man kommer åt av koden.

 

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Ja du, kommer man inte åt vissa delar av koden blir det genast svårare.

Har faktiskt ingen idé hur du ska lösa det. Orkar inte tänka mer ikväll ;)

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Det är fullt möjligt. Antagligen lägger du till ett onload event. Problemet är att det kan finnas ett annat script som lägger till sitt eget onload, och då kanske du skriver över det skriptet, eller så skriver det skriptet över dig etc etc.

 

Men låt oss låtsas att du kan använda onload. Då petar du in det på följande vis.

<script type="text/javascript">

window.onload = function()
{
var links = document.getElementById("countrytabs").getElementsByTagName("A");
for(var i = 0; i < links.length; i++)
	links[i].innerHTML = "MARTIN " + i;
}

</script>

Denna gång har jag till och med provar skriptet :-D

Det som händer är att vid onload så hämtas samtliga länkar från elementet countrytabs (jag fick exemplet från en sida angående dynamic drive tab, och ändrar texten i dessa.

 

Om det visar sig att man inte kan använda sig av onload, då får man sätta en timer som regelbunded kollar om scriptet kan htitta det element man vill prata med. Tyvärr så har jag inget konkret exempel på detta.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Japp, det funkade med window.onload

Om det nu skulle visa sig inte funka så finns ju även fulhacket att lägga in en extra body emellan scripten.

Har dock inte provat med något av ovanstående än om det ryker någon annan funktion. I sådana fall kommer jag tillbaka.

 

I vilket fall så är det samma kod med <div> så det går ju att ändra i efterhand med vilken script-kod som är bäst...

 

 

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Nu blev det ett nytt problem!

När jag la till <div> inne i <a> så slutade CSS att fungera korrekt.

Det gäller den CSS som bestämmer att en viss bakgrund ska visas när en flik är aktiv samt bakgrunden vid hover

 

Här är koden på sidan:

<html>
<head>

<link rel="stylesheet" type="text/css" href="tabcontent.css" />

<script type="text/javascript" src="tabcontent.js">

/***********************************************
* Tab Content script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<script type="text/javascript">
window.onload = function Init() {
var arrTxt=new Array("Beskrivning", "Specifikationer", "Dokument, länkar...");
var arrObj=new Array("t1t", "t2t", "t3t");
for(i in arrTxt){
	document.getElementById(arrObj[i]).innerHTML=arrTxt[i];
}
}
</script>

</head>
<body>

<ul id="tab">
<li><a href="#" class="t1" rel="c1"><div id="t1t"></div></a></li>
<li><a href="#" class="t2" rel="c2"><div id="t2t"></div></a></li>
<li><a href="#" class="t3" rel="c3"><div id="t3t"></div></a></li>
</ul>

<div id="c1">Tab content 1 here</div>

<div id="c2">Tab content 2 here</div>

<div id="c3">Tab content 3 here</div>

<script type="text/javascript" src="tab.js"></script>

</body>
</html>

 

Här är CSS-filens innehåll:

[log]

#tab

{

width: 400px;

height: 24px;

padding: 0px;

margin: 0px;

font: bold 12px Verdana;

list-style-type: none;

text-align: left;

}

 

#tab li

{

display: inline;

margin: 0;

}

 

#tab li a

{

float: left;

width: 133px;

height: 24px;

background: white url(shade.gif) top left repeat-x;

text-decoration: none;

}

 

#tab li a:visited

{

color: #2d2b2b;

}

 

#tab li a:hover

{

text-decoration: underline;

color: #2d2b2b;

}

 

#tab li a.t1

{ /*selected main tab style */

background-image: url(shadeactive.gif);

border-bottom-color: white;

}

 

#tab li a.t1:hover { /*selected main tab style */

text-decoration: none;

}

 

#c1 {

display:none;

border:1px solid gray;

width:450px;

margin-bottom: 10px;

padding: 10px;

}

 

@media print {

#c1 {

display:block !important;

}

}

 

#c2 {

display:none;

border:1px solid gray;

width:450px;

margin-bottom: 10px;

padding: 10px;

}

 

@media print {

#c2 {

display:block !important;

}

}

 

#c3 {

display:none;

border:1px solid gray;

width:450px;

margin-bottom: 10px;

padding: 10px;

}

 

@media print {

#c3 {

display:block !important;

}

}

 

[/log]

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Ett sätt är ju att göra <div> genomskinlig, men tyvärr blir även texten då genomskinlig. Går det att komma runt så att bara bakgrunden blir genomskinlig men inte texten?

 

http://www.webdesignskolan.com/css-effekter/opacity/opacity_exempel1.htm

 

Är det en bra lösning med tanke på webbläsarkompabilitet.

Och problemet är ju som sagt att i exemplet på Webbdesignskolan så är det dubbla divar och då försvinner ju vitsen.

 

Edit: Det funkar tydligen som det ska i IE men inte i FF, med eller utan opacity. Opacity verkar dessutom vara något som inte fungerar i IE.

 

Då är det frågan vad som gör att FF inte visar det som tänkt när <div> är på plats mellan <a> ?

 

[inlägget ändrat 2008-02-07 10:51:32 av skvalparne]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Nu har jag fipplat lite till och kommit fram att det är följande javascript som inte funkar med Firefox. .M:s javascript fick jag överhuvudtaget inte till att funka, det med countrytabs...

 

Det spelar ingen roll om jag sätter onLoad inom <body> istället. Det funkar oavsett i IE men inte i FF.

 

[log]<script type="text/javascript">

window.onload = function Init() {

var arrTxt=new Array("Beskrivning", "Specifikationer", "Dokument, länkar...");

var arrObj=new Array("t1t", "t2t", "t3t");

for(i in arrTxt){

document.getElementById(arrObj).innerHTML=arrTxt;

}

}

</script>[/log]

 

 

 

[bild bifogad 2008-02-07 13:23:16 av skvalparne]

1028330_thumb.jpg

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Får du något felmedelande i firefox??

 

Det kan hända att du måste trycka Verktyg/Felkonsoll för att se felmedelande i firefox.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Nej, det är tomt i felkonsollen. Rensade cachen och uppdaterade sidan några gånger.

 

Jag bifogade en bild i förra inlägget så kan ni se hur jag menar.

Överst är Firefox som inte vill visa vald tab/flik.

 

Edit: Installerade och provade även i Opera och där funkar det.

Så det är det fördömda Firefox som spökar. *slår med slägga*

[inlägget ändrat 2008-02-07 13:59:15 av skvalparne]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Det verkar som om det är vissa problem med Firefox och Javascript efter att jag sökt lite på nätet.

 

Jag bifogar följande länkar:

 

http://www.dengodekode.dk/artikler/DOM/no_innerhtml.php

http://www.webmasterworld.com/forum119/44.htm

http://www.eksperten.dk/spm/816583?Esession=

 

Tyvärr är jag för dålig på detta för att förstå vad som ska ändras.

Men som jag förstått är detta med "innerhtml" omodernt och inte helt säkert?

 

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Det var på denna länk som det står lite:

Ok, det är den där gamla visan de tog upp. Nå, visst har de en poäng i artikeln, men det håller bara i vissa fall. Det väsentligaste är väl att innerHTML inte följer w3c standard, men i övrigt håller jag inte med.

Visst kan man potentiellt krascha andra javascript genom att skriva över innehåll i element, men det kan man göra med DOM-metoder också, så den tesen håller bara för dålig kodning, dvs. där man skriver över element-innehåll förbehållningslöst.

Att det för extremt stora mängder data är snabbare att använda DOM-metoder är sant, men det handlar om så stora mängder data att det i realiteten inte är ett applikabelt argument. innerHTML är i de flesta praktiska fall snabbare.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Ok, ser du något i nedanstående script som gör att det inte är kompatibelt med Firefox? För det är det inte tyvärr. Funkar som sagt bra i IE och Opera.

 

Jag tror felet ligger i denna: getElementById

Frågan är då hur man ska skriva istället...

 

[log]<script type="text/javascript">

window.onload = function Init() {

var arrTxt=new Array("Beskrivning", "Specifikationer", "Dokument, länkar...");

var arrObj=new Array("t1t", "t2t", "t3t");

for(i in arrTxt){

document.getElementById(arrObj).innerHTML=arrTxt;

}

}

</script>[/log]

 

 

[inlägget ändrat 2008-02-07 23:46:16 av skvalparne]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Ok, ser du något i nedanstående script som gör att det inte är kompatibelt med Firefox

Den koden fungerar utmärkt när jag testkör den. Har du tittat i felkonsollen om FF producerar några felmeddelanden?

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...