ugrás a tartalomhoz

CSS vagy Javascript hiba

kalikim · 2011. Nov. 17. (Cs), 16.27
Sziasztok!

Ne haragudjatok, hogy új témát nyitottam, de sajnos sehol nem találtam megoldást a problémámra.
Egy honlapot szerkesztek, melynek a fejlécébe be szeretnék szúrni egy galériát. Ezt a kis bannert már össze is raktam egy üres lapon, ami ebben a formában működik is, viszont mikor beillesztem a weboldalba, akkor már valamiért nem indul el. Szerintetek hol rontottam el? A választ előre is köszönöm.

Üdvözlettel:
Tamás
 
1

jQuery

Poetro · 2011. Nov. 17. (Cs), 16.38
Azért, mert az oldal betölt egy másik jQuery-t az oldal alján, ami felülírja azt, amit te az oldal tetején betöltöttél. Ezzel felülírja a jQuery kiegészítődet is. Az oldal alján beszúrt jQuery az 1.5.1 míg te az oldal tetején beszúrsz egy 1.6.2-est, amit az előbbi felülír az össze kiegészítővel együtt. Pakold a jQuery kiegészítődet és a saját kódodat is az oldal aljára.
2

Nagyon szépen köszönöm a

kalikim · 2011. Nov. 18. (P), 12.18
Nagyon szépen köszönöm a gyors választ kedves Poetro!
Az az igazság, hogy megcsináltam a módosítást, ahogy írtad, bár nem tudom, hogy pontosan így gondoltad-e? Most már működik a banner, viszont a menü behalt. Nincs valami megoldás arra, hogy a scripteket a </head> elé tegyem be, ahogy eddig is csináltam és persze működjenek is.
3

Felülírtad

Poetro · 2011. Nov. 18. (P), 13.10
Most az oldalon levő eredeti jQuery-t írtad felül. Direkt szívatod magad? Mert most annak a pluginjei nincsenek meg. Egyébként miért akarod a script-eket a head-be rakni? Teljesen jó helyen vannak az oldal végén.
4

Azt hiszem feladom...

kalikim · 2011. Nov. 18. (P), 13.37
Azt hiszem feladom... :(
Bárhova is pakolgatom a scripteket, vagy a banner nem működik, vagy pedig a menü. Visszaraktam az eredeti scriptet,
<script type='text/javascript' src='http://www.minimit.com/wp-content/plugins/wp-minify/min/?f=wp-content/themes/minimit/scripts/browserdetection.js,wp-content/themes/minimit/scripts/jquery-1.4.4.min.js,wp-content/themes/minimit/scripts/jquery-ui-1.8.6.custom.min.js,wp-content/themes/minimit/scripts/script.js&amp;m=1319638979'></script>
de ezzel is ugyanaz a helyzet. Nem tudom, hogy mit kellene másképp rendeznem, ahhoz, hogy minden rendben menjen. Mi a véleményed?
Egyébként azért gondoltam, hogy mindegyiket egy helyre rakom (head-be), mert ahogy nézegetek egy-két honlapot, mindenhol azt láttam, hogy fent vannak, de ha azt mondod, hogy lent is jó, akkor végül is mindegy.
5

Miért?

Poetro · 2011. Nov. 18. (P), 14.14
Miért szúrsz be két egyáltalán még egy jQuery-t, ha az oldalon már úgyis használsz egyet? Teljesen felesleges. A kódod valószínűleg az 1.4.4-es jQuery-vel is fog futni.

Az, hogy egyes honlapokon a head-ben vannak a script elemek nem jelenti azt, hogy az a helyes megközelítés. A Google és Yahoo! ajánlása szerint is érdemesebb a script elemeket a body elem végére helyezni, a miértek elolvasását rád bízom.
12

SIKERÜLT! :D Nagyon köszönöm

kalikim · 2011. Nov. 18. (P), 15.08
SIKERÜLT! :D
Nagyon köszönöm a segítséget! Ne haragudj, ha kissé értetlennek tűntem, csak számomra ez a javascript egy "sötét ló".
Ha nem nagy kérés, átnéznéd a honlapot, hogy minden rendjén van-e, mármint kód szinten. Előre is köszönöm.
6

Ha a fejlécben töltöd be a

Hidvégi Gábor · 2011. Nov. 18. (P), 14.21
Ha a fejlécben töltöd be a scriptjeidet, akkor a html feldolgozása közben elérhetőek scriptből a DOM elemek, így azokon már el tudod végezni a szükséges manipulációkat. Ezzel a módszerrel elkerülhetőek a tartalom lecseréléséből adódó villogások.

Pl.:
<div id="menüke"><select></select></div>
<script type="text/javascript">
var menüke = document.getElementById('menüke');
menüke.replaceChild(latvanyosabb_menu(), menüke.childNodes[0]);
</script>

Külső scripteket viszont valóban érdemes a html végén betölteni, hogy ne akasszák meg az oldal kirajzolását.
7

Nem

Poetro · 2011. Nov. 18. (P), 14.22
Ha a fejlécben töltöd be a scriptjeidet, akkor a html feldolgozása közben elérhetőek scriptből a DOM elemek

Ez nem igaz. A head-ben beszúrt script a head-ben fog lefutni, és akkor a DOM elemek még nincsenek betöltve, ezért nem lehet őket manipulálni sem. Akkor tudod őket manipulálni, amikor már bekerültek a DOM-ba, azaz a HTML feldolgozó már eljutott addig az elemig, amit célozni akarsz.

A fenti kód semmilyen kitételt nem szab arra, miért kellene a script elemnek a fejlécben lennie, teljesen jó, ha az mondjuk közvetlen a select után szerepel.
<div id="menüke">
  <noscript>
    <select></select>
  </noscript>
  <script src="latvanyosmenu.js"></script>
</div>
8

html feldolgozása közbenEz

Hidvégi Gábor · 2011. Nov. 18. (P), 14.31
html feldolgozása közben
Ez valószínűleg elkerülte a figyelmed. Abban igazad van, hogy ehhez nem szükséges a fejlécben tartani a feldolgozó script fájl betöltését, lehet a "helyszínen is", ez egyéni ízlés kérdése.
9

Nem értem

Poetro · 2011. Nov. 18. (P), 14.35
Nem értem, hogy ez hogy jön ide. A head elemben már a feldolgozás közben vagyunk, mégsem érjük el csak azokat az elemeket, amik már korábban szerepeltek a dokumentumban (jelen esetben a head-ben). A később megjelenő elemekhez csak a később megjelenő script elemekben férünk hozzá, illetve ha valamilyen elemre eseménykezelőt tettünk, akkor azon események kiváltása után az addig feldolgozott elemekhez.

Az, hogy a script elemedet a head-be raktad nem szolgál annyi előnnyel, mint hátránnyal. Ugyanis megakadályozza az oldal feldolgozását, ameddig a script elem nincs betöltve (ez elkerülhető az async és defer attribútumok használatával, de akkor más problémák jönnek elő). Vagyis a felhasználó addig egy betű hasznos információt nem lát a tartalomban ameddig a head-rész nincs feldolgozva, ami rosszabb felhasználói élménnyel jár. Mert a felhasználó a tartalomért látogatott az oldalra, és elsődlegesen azt szeretné látni. Pár tizedmásodperc is számít azügyben, hogy a felhasználó mikor látja meg a tartalmat.
10

Ha nem voltam érthető, akkor

Hidvégi Gábor · 2011. Nov. 18. (P), 14.41
Ha nem voltam érthető, akkor elnézést kérek. A teljes kódot látva világos lesz, mire gondoltam (a sallangot kihagyom):
<html>
  <head>
    <script src="sajat_fuggvenyeim.js"></script>
  </head>
  <body>
    [hosszú-hosszú tartalom]
    <div id="listbox">
      <select></select>
    </div>
    <script>
      sajat_listbox_cserelo_fuggvenyem('listbox');
    </script>
    [hosszú-hosszú tartalom]
    <div id="listbox2">
      <select></select>
    </div>
    <script>
      sajat_listbox_cserelo_fuggvenyem('listbox2');
    </script>
    [hosszú-hosszú tartalom]
  </body>
11

A második bekezdésben

Hidvégi Gábor · 2011. Nov. 18. (P), 14.46
A második bekezdésben tökéletesen igazad van, de szerintem kicsit még finomítani kéne rajta: feladattól függ, hogy mit mikor töltsünk be, ha valamire nincs szükség az elején, akkor tegyük a végére. Emellett ne feledjük, hogy a legtöbb esetben csak az oldal legelső betöltését lassítják a scriptek, utána már minden gyorsítótárból jön.
13

Megint akadt egy kis problémám...

kalikim · 2011. Nov. 24. (Cs), 11.40
Kérlek ne haragudjatok, hogy újra felhozom ezt a topicot.
Már említettem, hogy a honlap tetején van egy három képből álló galéria, ami végül is bannerként funkcionál. Ez a galéria több .js-t használ, amiben a galéria méretét is meg kell adni. Viszont van egy .css is, amelyben ugyancsak meg kell adnom a méretét. Tehát, azt szeretném beállítani, hogy a galéria maximális szélessége 960px legyen és a max. magassága pedig 140px. Mivel azt szeretném, hogy körül vegye egy 10px-es keret, ezért így állítottam be a css-t:

#banner {
	width:940px;
  	height:120px;
  	margin:auto;
  	position:relative;
	border:10px #1149c9 solid;
	border-radius:20px;
}
A .js-t pedig így:
(function($){
	$.fn.bjqs = function(options) {
		
	var settings = {};	
		
	var defaults = {
		width: 960,
		height: 140,
		animation: 'fade',
		animationDuration: 450,
		automatic: true,
		rotationSpeed: 6000,
		hoverPause: true,
		showControls: false,
		centerControls: true,
		nextText: 'Tovább',
		prevText: 'Vissza',
		showMarkers: false,
		centerMarkers: true,
		keyboardNav: true,
		useCaptions: true
	}
.
.
.
$(document).ready(function() {
        
        $('#banner').bjqs({
          'animation' : 'slide',
          'width' : 960,
          'height' : 140,
        });
Ebben az esetben a galéria mérete 980x160-as lesz. Az az igazság, hogy próbálkoztam már mindenfélével, de valamiért sosem sikerült jól beállítanom. Szerintetek mi lehet a hiba? Előre is köszönöm a segítséget!
14

Hol a probléma?

Poetro · 2011. Nov. 24. (Cs), 12.17
960px-es méret + 2-szer 10px-es border a 980px. Hasonlóan 140px-es méret + 2-szer 10px-es border az 160px. Nem értem hol lehet a hiba.
15

Magam sem tudom

kalikim · 2011. Nov. 24. (Cs), 12.50
Az az igazság, hogy nem nagyon értem ezt a css-js variációt. Akkor valószínűleg rosszul gondolkodom. Én valahogy úgy értelmezem, hogy van a javascript, ahol be van állítva a frame maximális mérete (960x140), viszont ezen belül pedig a css-ben kell beállítani a frame méretét 940x120-ra, mivel van még a 2x10 px-es keret. Viszont ha ezt így csinálom, akkor miért lesz belőle 980x160? A css-ben beállított érték miért módosítja a js-ben lévő méreteket?
Nem tudom, hogy elég érthető voltam-e, de remélem azért sikerült követni.
16

Ha a JS által generált

Blintux · 2011. Nov. 24. (Cs), 13.07
Ha a JS által generált objektum a #banner DIV-edben van, akkor az nemes egyszerűséggel szétnyomja azt.
A JS egy 960px széles objektumot (iframe, div, canvas - nem derült ki mi az) jelenit meg. A #banner DIV-ed viszont csak 940px széles, így hát szétnyomja azt 960-ra, plusz a margóid miatt 980 lessz.
17

Azt hiszem most már értem.

kalikim · 2011. Nov. 24. (Cs), 13.28
Tehát, ha a 960x140-es méretnél szeretnék maradni, akkor a js-ben kell megadnom a kerettel csökkentett méretet. De javíts ki, ha rosszul gondolom.
Viszont lenne még egy kérdésem. Miért van az, hogy beállítottam a border-radius-t 20px-re és csak a keret külső sarkait kerekíti csak le, míg egy másik frame-nél ugyanez a beállítás lekerekíti a belsőket is. Mi lehet a gond?
18

Nem gond, ez a "termeszetes"

Leonuh · 2011. Nov. 24. (Cs), 20.49
Nem gond, ez a "termeszetes" viselkedes. 3 lehetoseged van:

1.: maskepp epited fel az oldal ezen reszet
2.: a megfelelo kontenereket hozza kerekited
3.: overflow hidden a kulson kontenerre... de ez megint mas eredmenyt fog hozni... legyen meglepetes :)

Ha nem ertettem felre a kerdest akkor a valaszom helyes :)

Egyebkent ha nem vagy elegedett a valasszal... inspector csodakra kepes :)
19

Sikerült!

kalikim · 2011. Nov. 29. (K), 13.06
Nagyon szépen köszönöm a választ, az overflow:hidden paranccsal sikerült.
Viszont lenne még egy kérdésem. Van egy szövegem, amibe egy képest szeretnék úgy berakni, hogy a szöveg legfelső sorának teteje és a képem teteje egy magasságba kerüljön. Jelenleg így néz ki. Mit kellene beállítanom ahhoz, hogy stimmeljen?
A segítséget előre is köszönöm.
20

Margó

Poetro · 2011. Nov. 29. (K), 16.42
Jelenleg a p elemnek 1em a felső margója. Ezt kellene 0-ra módosítani, vagy a képnek is adni egy 1em felső margót.
21

Módosítva

kalikim · 2011. Nov. 30. (Sze), 14.38
Köszönöm szépen a segítséget!