ugrás a tartalomhoz

JavaScript által generált HTML-nek stílus CSS-sel

Anonymous · 2005. Júl. 25. (H), 10.36
Üdv!

Van egy javascriptes kódrészletem, ami egy javascript menünek megadja a stílusát. A kódrészlet a következő:

YOffset=150;
XOffset=0;
staticYOffset=30;
slideSpeed=20
waitTime=100;
menuBGColor="black";
menuIsStatic="yes";
menuWidth=150;
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20;
barText="SIDE MENU";
Ezt szertném én úgy megcsinálni, hogy az aktuális stílust, pl. a 'hdrBGColor' a .hdrBGColor értékkel lehessen stíluslapba (CSS-be) beálítani. Ezt hogyan lehet megoldani, ha lehetséges-e? Talán valahogy a 'this.className'-el.

Köszönöm mindenkinek az infót.
 
1

Nincs válasz?

Anonymous · 2005. Júl. 25. (H), 13.47
Nincs válasz?
2

Szvsz türelem...

kgyt · 2005. Júl. 25. (H), 13.59
Munkaidő van, szvsz várj egy kicsit, hogy legyen idő rád is... :-)
Délután, estefelé több eséllyel kapsz gyors választ.

--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu
3

nem kellene mindent JS-ből csinálni

Hojtsy Gábor · 2005. Júl. 25. (H), 15.49
Nos, a hdrFontSize és hasonlók gondolom egy konkrét elem HTML (CSS?) tulajdonságaira képződnek le a menü generáló kódban. Azt kellene csinálni, hogy ahelyett, hogy itt ezzel paraméterezed fel, class neveket adsz a HTML elemeknek, amikre a menu, link, hdr, bar, stb. nevek utalnak, és annak adsz CSS-ből stílust. Semmiféle JS trükkre nincs szükség.
4

Ezen az oldalon elérhető

Anonymous · 2005. Júl. 26. (K), 11.42
Ezen az oldalon elérhető a teljes kód:
http://www.dynamicdrive.com/dynamicindex1/davidmenu.htm
Nézd meg, és aztán adj választ.

Egyébként az a ki kódrészlet nem egy html-nek adja meg a formázásátt, hanem egy másik js-nek, tehát js használatra szükség van.
5

Ahogy én tudom...

DevNULL · 2005. Júl. 26. (K), 12.00
Hát ahogy én tudom csak és kizárólag HTML tud megjeleníteni. Értem ezalatt, hogy a Js(, PHP, stb...) csak arra valók, hogy ezt a kimenetet dinamikussan állítsák elő.
Mert ha valamit ki akarsz rakni a képernyőre, akkor valami ilyesmit kell írogatni:
Js: document.write("<b><i><u>Valami szöveg formázva</u></i></b>");
PHP: echo "<b><i><u>Valami szöveg formázva</u></i></b>";

Szerintem ez a menü is valamilyen TAG-ek között van és ha így van (márpedig szerintem így kell lennie) akkor az a TAG css-el formázható, akár külső fájlból is.
Ha nem így van, akkor valaki okosabb javítson ki.

Tisztelettel: Pécsek Gábor
6

Megnéztem a 2 fájl-t

DevNULL · 2005. Júl. 26. (K), 12.12
Na azért miután írtam megnéztem a két fájlt is.
Az egyik ssmItems.js --> ebbe írod be a menüpontokat és a formázást és ez adja át az adatokat a másik fájl-nak ssm.js.
Az ssm.js-ben pedig már vannak TAG-ek amiket az átadott változók formáznak.
Csak úgy tudod css fájl-ból megoldani a formázást, hogyha az ssm.js fájlból kitörlöd az össze átadott változót, ami a ssmItems.js-ből megy át.
Amúgy igazam volt, a kimenetet HTML csinálja. Ez egy sor részlet az ssmItems.js-ből:
document.write('<TD BGCOLOR="'+linkBGColor+'"
ha ehelyett ezt írod --> document.write('<TD class="tablazatformazas_a">');
akkor már css fájlból csinálhatod a formázás
persze ahhoz, hogy működjön amit írtam, kell lennie egy css fájlnak benne egy:
TD.tablaformazas_a {}
elemmel és a css fájl-t be kell linkelni mielőtt lefut a Js.
De ahogy végignéztem a menüt létrehozó Js fájl-t elbogarászhatsz vele egy darabig amíg kicseréled a dolgokat. :)))))))
Mindenesetre ha nekiálsz, sok szerencsét

Tisztelettel: Pécsek Gábor
9

Ez a bejegyzés nagyon

Anonymous · 2005. Júl. 26. (K), 13.56
Ez a bejegyzés nagyon tanulságos volt nekem, majd ha jöbban ráérek (este, holnap), akkor kipróbálom a javaslatodat.
7

Nos, szvsz

kgyt · 2005. Júl. 26. (K), 12.27
Szerintem a menü ilyen előállítása mögött a rossz szemléletmód bújik meg, nem érdemes így elkészített menüt használni. Szívesen segítek egy normális menü elkészítésében.

--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu
8

Mit értessz normális

Anonymous · 2005. Júl. 26. (K), 13.50
Mit értessz normális menü alatt? Gondolom ilyen menüt CSS-be nem lehet írni, vagy igen? Ha lehet, akkor szívesen venném a segítségedet.
10

CSS-ben nem lehet menüt csinálni

DevNULL · 2005. Júl. 26. (K), 14.35
A CSS a kimentek formázására való és nem lehet benne menüt csinálni

Az ilyen menükkel (amit letöltöttél) szerintem az a baj, hogy vagy úgy használod ahogy van vagy ha megprobálsz rajta alakítani, akkor eljutsz odáig, hogy annyit kell rajta javítani, hogy érdemesebb sajátot csinálni.
Bár ez csak az én vélményem
11

1. Én maradok ennél az

Anonymous · 2005. Júl. 26. (K), 14.57
1. Én maradok ennél az átalakított menünél.
2. Mi a baja mindenkinek a JS-sel?
14

buta alkalmazás

Hojtsy Gábor · 2005. Júl. 26. (K), 18.27
A JS buta alkalmazásával (borzalmas HTML kód generálás például) van bajunk, nem a JS-sel.
15

Javascript

kgyt · 2005. Júl. 26. (K), 23.40
Nézd meg az oldalt egy lynx segítségével!

--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu
16

Google nyomosabb indok

Jano · 2005. Júl. 27. (Sze), 01.37
Az ilyen elérhetetlenségi problémáknál szerintem a Google-ra hivatkozni általában nagyobb eredményt ér el.

A kérdezőnek: A Google ugyanis nem értelmezi a JavaScriptet és nem tudja követni a JavaScript nélkül nem legenerálodó linkeket!
17

Igaz...

kgyt · 2005. Júl. 27. (Sze), 12.14
Igaz. Kiegészítem azzal, hogy a Google kb. annyit lát, mint a lynx...

--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu
12

Nézz példákat

Jano · 2005. Júl. 26. (K), 14.58
De lehet!
CSS-sel formázott menük és egy kis segítség az IE-nek, hogy megértse a :hover-t ami a dinamikus menük titka: CSS hover emuláció IE-nek.
13

stylesheet JS-ből

Hodicska Gergely · 2005. Júl. 26. (K), 18.17
Szia!


Ha ragaszkodsz a megoldásodhoz, ez elég az elinduláshoz:
alertStr = '';
for( i in document.styleSheets[0].rules[0] ) {
     alertStr += (''+i+'->'+document.styleSheets[0].rules[1]+"\\n");
     if ( i == 'style' ) {
        k = 1;
        for( j in document.styleSheets[0].rules[1] ) {
            alertStr += ( ' - ' + j + '->' +
document.styleSheets[0].rules[1][j] + "\\t\\t\\t" );
            if ( k % 3 == 0 ) alertStr += "\\n";
            k++;
        }
     }
}
alert( alertStr );
Plusz:
o StyleSheet
o Style
o Rrule


Felhő
18

Mindenkinek köszönök

Anonymous · 2005. Júl. 27. (Sze), 12.57
Mindenkinek köszönök mindent, különösen DevNULL-nak, hasznos információt adott, és igaza volt, tényleg el lehet ezzel szöszölni.
19

Elakadtam!

Anonymous · 2005. Júl. 28. (Cs), 10.16
Ezt nem tudom áttírni:
onmouseout="bgColor=\''+linkBGColor+'\'"

Én így próbáltam:
onmouseout="this.className='linkBGColor'"

Mi a megfejtés?
-----------------------------------------------------------------------------
A másik problémám:
Align
VAlign

Ezeket hogyan állítsam be?
20

nem teljesen jó

Hojtsy Gábor · 2005. Júl. 28. (Cs), 10.30
A className a class tulajdonság értékét állítja át. Tehát ha a linkBGColor névre állítod a classt, akkor kellene lennie egy .linkBgColor stílusnak a css-ben, azaz

.linkBGColor {
  /* ide jön a stílusa */
}
Ami hát nem tűnik túl praktikusnak, hiszen eléggé korlátozó elnevezés. Talán valami beszédesebb nevet kellene változtatni, és akkor megnyílik előtted az út több tulajdonság átírására is. (Így is megnyílik az út, de te nem fogod érteni később, hogy mégis miért, amikor linkBGColor).
21

Hmm...

kgyt · 2005. Júl. 28. (Cs), 10.31
Csak nem érted...
A class nem erre való.
Egy css fájlban meghatározod előre a classok stílusát, és a classokat rendeled utána az elemekhez...

Mellesleg, hogy válaszoljak is:

this.style.background
this.style.egyéb
--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu
22

Itt van az eredeti sor:

Anonymous · 2005. Júl. 28. (Cs), 11.05
Itt van az eredeti sor:
<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+ssmItems[i][5]+'px" COLSPAN="'+ssmItems[i][3]+'">

Az elején a BGCOLOR="'+linkBGColor+'" áttírtam CLASS="linkBGColor"-ra, ez muixik.
De ezt hogyan írjam átt: onmouseover="bgColor=\''+linkBGColor+'\'" ?
Ezt próbáltam, de ezt nem fogadta el: onmouseout="this.className='linkBGColor'", mi a megfejtés?

Egyébként meg nem vagyok annyira kezdő, hogy ne tudnám, a stíluslapot csatolni kell, és aktuális értéket, pl. linkBGColor a css-be meg kell határozni.
23

kezdő, figyelmetlen vagy fáradt?

Hojtsy Gábor · 2005. Júl. 28. (Cs), 11.25
Nos, az onMouseOver-ben én LinkOverBGColort látok az eredetiben. Ha ezt is linkBGColorra helyettesíted, akkor elveszted az over effektet. Hol veszett el az Over? Olyan classnevet kellene választani, ami eltér a normál classnévtől.

Én különben menuItem és menuItemHover classneveket használnék, ha már így oldanám meg a táblázat cella hover átszínezést, mint fent írtam a linkBGColor mint osztálynév legalábbis félrevezető.
24

Értitek a gondomat?

Anonymous · 2005. Júl. 28. (Cs), 12.08
Ezt akarom css-el formázni: onmouseout="bgColor=\''+linkBGColor+'\'"
Én így írtam: onmouseout="this.className='linkBGColor'"
A css-ben megadtam a linkBGColor {background-color: #000000;}, de nem működik, ha a css-ben írtam rosszul, akkor mit írjak, de szerintem ez: this.className='linkBGColor'
26

Nem baj

kgyt · 2005. Júl. 28. (Cs), 12.35
Szerintem minden olyan információ elhangzott, aminek segítségével meg lehet oldani a problémát.
Nem szégyen, ha nem értesz valamit, az a szégyen, ha a szád nagy, az eszed meg nem nagy...

--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu
25

Juj

kgyt · 2005. Júl. 28. (Cs), 12.31
Kedves profi, íme így oldanám meg, hogy az IE is értse:
CSS

td.juliska {
  behavior: url(hover.htc );
  /* persze conditional comments mögé rejtve */
  background-color: red;
  /* stb. */
}
td.juliska:hover, td.juliskaHover {
  background-color: blue;
  /* stb. */
}
HTC

<attach event="onmouseover" handler="hoverRollOver" />
<attach event="onmouseout" handler="hoverRollOff" />
<script type="text/javascript">
// Jano munkája, kivettem a megjegyzéseket,
// full verzió Jano fent említett weboldalán...

function hoverRollOver() {
  element.origClassName = element.className;
  var tempClassStr = element.className;
  tempClassStr += "Hover";
  tempClassStr = tempClassStr.replace(/\s/g,"Hover ");
  tempClassStr += " hover";
  element.className = element.className + " " + tempClassStr; 
}
function hoverRollOff() {
  element.className = element.origClassName;
}
</script>
HTML

<td class="juliska" ...>
--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu
27

tömbös adatokkal mi legyen?

Anonymous · 2005. Aug. 1. (H), 12.56

<SCRIPT language="JavaScript1.2" type="text/javascript">
var FiltersEnabled = 1

Text[1]=["","Jancsi"

Style[1]=["white","black","red","blue","","","","","","","","","","",200,"",2,2,10,10,51,0.5,75,"simple","gray"]

applyCssFilter()
</SCRIPT>
Rzt a sort végképp nem tudom kitenni CSS-be.
Megoldás?
28

nem a beállítás forma a lényeg

Hojtsy Gábor · 2005. Aug. 1. (H), 12.58
Úgy tűnik nem jött le, amit fent próbáltam javasolni, hogy az adatok célját figyeld meg, és ne egy-az-egyben írd át, hanem gondold meg a célját. Szépen le kellene követni, hogy hova megy az adat, amit itt a tömbben beállít.
29

classname hova?

Anonymous · 2005. Aug. 1. (H), 18.29

Style[1]=["white","black","red","blue","","","","","","","","","","",200,"",2,2,10,10,51,0.5,75,"simple","gray"]
Ha pl a white helyére (a két idézőjel közé) betennék egy class-t (this.className='vmi') elfogadná, vagy ez egy rossz nyom?
30

hova kerül?

Hojtsy Gábor · 2005. Aug. 1. (H), 19.07
Annak nézz már utána, hogy hova kerül a kimenetben mindez, amit itt beállítasz, és akkor hova kerülne az a className beállítás! Az itt látottakból ezt nem lehet megmondani, és én őszintén szólva már kétlem, hogy ide tudnál másolni egy olyan kódrészletet, ami nem tölti ki a képernyőmet és abból ez kiderül (ahhoz előbb meg kellene találnod, és az már a válasz fele legalább, ha nem több).
31

Ez egy másik kód

Anonymous · 2005. Aug. 3. (Sze), 09.13
fadeColor = "#FFFFFF";
stepIn = 50;
stepOut = 100;

autoFade = true;
sloppyClass = true;
macCompat = false;

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

document.onmouseover = domouseover;
document.onmouseout = domouseout;

fadeColor = dehexize(fadeColor.toLowerCase());

var fadeId = new Array();

function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i<7; i++){
for (j=0; j<16; j++){
if (Color.charAt(i) == hexa[j]){
if (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
else
colorArr[Math.floor((i-1)/2)]+=eval(j);
}
}
}
return colorArr;
}

function domouseover() {
if(document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
if (!srcElement.startColor) {
srcElement.startColor = (srcElement.style.color)? srcElement.style.color: srcElement.currentStyle.color;
srcElement.startColor = dehexize(srcElement.startColor.toLowerCase());
}
var link = (macCompat? srcElement.name: srcElement.uniqueID);
if (link) fade(srcElement.startColor,fadeColor,link,stepIn);
else if (macCompat) alert("Error: Mac Compatility mode enabled, but link has no name.");
}
}
}

function domouseout() {
if (document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
var link = (macCompat? srcElement.name: srcElement.uniqueID);
if (link) fade(fadeColor,srcElement.startColor,link,stepIn);
}
}
}

function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}

function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}

function setColor(r, g, b, element) {
var hr = hex(r); var hg = hex(g); var hb = hex(b);
element.style.color = "#"+hr+hg+hb;
}

function fade(s,e,element,step) {
var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];

if (fadeId[0] != null && fade[0] != element && eval(fadeId[0])) {
var orig = eval(fadeId[0]);
setColor(orig.startColor[0],orig.startColor[1],orig.startColor[2],orig);
var i = 1;
while(i < fadeId.length) {
clearTimeout(fadeId[i]);
i++;
}
}

for(var i = 0; i <= step; i++) {
fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
}
fadeId[0] = element;
}

A fadecolor színmeghatározást szeretném kitenni css-be.
32

Segítsetek!

Anonymous · 2005. Aug. 4. (Cs), 09.19
Nekem ez nagyon fontos.

Próbálgattam ezzel akóddal néhány javasolt golgot, de hiába.
33

Fontos?

kgyt · 2005. Aug. 4. (Cs), 10.16
Mennyire fontos?

$€£¥$€£¥$€£¥$€£¥$€£¥

--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu
34

hát

Anonymous · 2005. Aug. 4. (Cs), 10.21
magán célra (eggyenlhőre), okulni
35

Csak ismételni tudam magamat...

kgyt · 2005. Aug. 4. (Cs), 10.25

$ € £ ¥

:-)

--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu
36

nem tudom mit vársz...

Hojtsy Gábor · 2005. Aug. 4. (Cs), 10.47
Gondolod valaki ezt itt ki fogja böngészni helyetted? Tévedsz. Legalább azt a pár sort keresd ki, ami kapcsolódik a kérdéshez...
37

<Nincs cím>

Anonymous · 2005. Aug. 4. (Cs), 11.02
Ezt én nem goldoltam, hogy ti csináljátok meg helyettem, de mintának, kiindulásnak tettem fel.
Tényleg nem gondoltam.