image scroller werkt wel in FF maar in IE 8 niet

Status
Niet open voor verdere reacties.
M

merlijn16

Gebruiker
Lid geworden
2 mrt 2010
Berichten
132
hallo,
Ik had een script gevonden die automatisch plaatjes scrollend vertoont, echter deze werkt perfect in FF. In IE 8 niet dan blijft de scroller niet doordraaien als laatste plaatje getoont is, dan komt er hapering voor de 1e weer getoont word. Ook is de kleur van de plaatjes afwijkend in IE (alsof er een waas overheen ligt) Weet iemand misschien een oplossing?

Code: 
<marquee onmouseover=this.stop() onmouseout=this.start() scrollAmount=2
direction=up width=200 height=200>

<a href="http://www...."target="_blank">
<img onmouseover="high(this)" style="filter: alpha(opacity=40)" onmouseout="low(this)" img border="0" src="images/banner3.jpg" width="200" height="60"></a><br />
<br />
<a href="http://www...."target="_blank">
<img onmouseover="high(this)" style="filter: alpha(opacity=40)" onmouseout="low(this)" img border="0" src="images/banner2.jpg" width="200" height="60"></a><br />
<br />
<a href="http://www....."target="_blank">
<img onmouseover="high(this)" style="filter: alpha(opacity=40)" onmouseout="low(this)" img border="0" src="images/banner3.jpg" width="200" height="60"></a><br />
<br />
<a href="http://www....."target="_blank">
<img onmouseover="high(this)" style="filter: alpha(opacity=40)" onmouseout="low(this)" img border="0" src="images/banner2.jpg" width="200" height="60"></a><br />
<br />
<a href="http://www....."target="_blank">
<img onmouseover="high(this)" style="filter: alpha(opacity=40)" onmouseout="low(this)" img border="0" src="images/banner3.jpg" width="200" height="60"></a><br />
<br />
<a href="http://www....."target="_blank">
<img onmouseover="high(this)" style="filter: alpha(opacity=40)" onmouseout="low(this)" img border="0" src="images/banner2.jpg" width="200" height="60"></a><br />
</marquee>
 
Hoi merlijn16,
De <marquee> is eigenlijk geen correcte html, hoewel de meeste browsers het wel begrijpen (maar soms verschillend toepassen). De code img border="0" in het midden van de <img> tag is ook geen valid html.
Als ik er een zo veel mogelijk valid html-pagina van bak, doet ie het in de doorstroming precies hetzelfde in Firefox als in Internet Explorer 7:
De waas over IE zit 'm in het opacity-filter, dat IE-only code is (en op deze manier ook verboden).
Waarschijnlijk is de bedoeling van het script, dat de banners iets transparant zijn als ze gewoon bewegen, en dat ze hun volle kleur krijgen als je er met de muis op gaat staan (terwijl dan de beweging stopt).

Maar veel hangt er nog van af hoe de css en het javascript op de pagina er uit zien. Die staan er in jouw code niet bij, dus dan valt er ook niet goed te zeggen wat er zou moeten gebeuren.
Internet Explorer geeft in het voorbeeld ook een error af bij de muis op een banner, omdat het de javascript-functie onmouseover="high(this)" niet kan vinden.

Vandaar de vraag: wat zijn de gebruikte css en javascript-regels?

Met vriendelijke groet,
CSShunter

PS: een nadeel van de <marquee> methode is, dat het laatste stukje van de laatste banner helemaal uit beeld moet zijn verdwenen, voordat onderaan de eerste weer opnieuw verschijnt. Dit zou wel met een ander javascript kunnen: dan komt na het doordraaien banner 1 weer precies aansluitend op de laatste en is er geen gat tussen.
 
Ja; dit bijvoorbeeld
Code: 
filter: alpha(opacity=40)
is IE-specifieke code. Normale browsers gebruiken
Code: 
opacity: 0.4;
Daarnaast gebruiken we de <marquee> tag in 1998; deze nu nog gebruiken is een Slecht Plan.


Je kan beter op zoek gaan naar een nieuw image-scroll iets.

[edit]oh noes, kruispost![/edit]
 
Je kan beter op zoek gaan naar een nieuw image-scroll iets.
Klik om te vergroten...
Yeps, daar was ik net mee bezig toen That Guy aan het kruisposten was. :d
Maar een Google op [javascript vertical image scroller] geeft vele, vele resultaten, en pluk daar maar eens een goede uit... :rolleyes:

Bijvoorbeeld deze met de de veelbelovende titel "Simple, Accessible Image Scroller" ... blijkt te gaan om een Marquee Scroller, met een demo uit 2006 die in elk geval niet in Firefox 3.5 werkt. :(

Waarschijnlijk is het sneller om zelf een script te maken *) dan om het kaf en het koren te husselen...

Met vriendelijke groet,
CSShunter
________________
*) Iets in de geest van dit carrousel, maar dan met een scroll-mechaniekje in plaats van een fade-mechaniekje.
 
bedankt voor jullie reactie. Vond het al zo'n vreemde code. Dit was alles! Er zat geen javascript of enig andere code bij.
Was al aan het zoeken geweest naar ander script, echter niet de juiste zoekwoorden in google gebruikt.
Blijkt dus veel te vinden met de juiste zoekwoorden. Bedankt! :thumb:
 
kwam toevallig een ander bruikbaar script tegen.
http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../style/stylenav.htm

Weet iemand hoe ik deze naar de rechterkant van de pagina zet? (Ik werk met xhtml en css)
Er staat <center> en als ik dit verander in <right> gaat deze naar links. Code is dus niet goed. Sorry ik ben beginner.

En zet ik dit stukje script in de <head> van de pagina?
HTML: 
<script type="text/javascript">

function go_anchor(n){
document.getElementById("div1").scrollTop = document.getElementById(n).offsetTop
}

</script>

en de rest in de <body> ?


edit: ik zie dat die link niet rechtstreeks naar het script gaat. Dit script bedoel ik: Anchor - Direct (staat als 4e)
Wil graag een vakje aan de rechterkant op de pagina met scrolbalk erin.
 
Laatst bewerkt:
deze code staat erbij:
Code: 
<script type="text/javascript">

function go_anchor(n){
document.getElementById("div1").scrollTop = document.getElementById(n).offsetTop
}

</script>

<DIV id="div1" style="position:relative;width:330px;height:180px;overflow:hidden;padding:5px;border:2px solid #000000"> 
<div id="sp1">Anchor 1</div>
<div id="sp2">Anchor 2</div>
<div id="sp3">Anchor 3</div>
<div id="sp4">Anchor 4</div>

</DIV>

<a href="#null" onclick="go_anchor('sp1')">To anchor 1</a>
<a href="#null" onclick="go_anchor('sp2')">To anchor 2</a>
<a href="#null" onclick="go_anchor('sp3')">To anchor 3</a>
<a href="#null" onclick="go_anchor('sp4')">To anchor 4</a>
 
Weet iemand hoe ik deze naar de rechterkant van de pagina zet?
Klik om te vergroten...
Met een {float: right;}.

En zet ik dit stukje script in de <head> van de pagina?
...
en de rest in de <body> ?
Klik om te vergroten...
Helemaal goed. :thumb:

Het leukst vind ik altijd om even te experimenteren: gewoon in een html-pagina zetten, en kijken wat ie doet. Ook al maak je daarbij eventueel de grootste fouten in html, css en/of javascript: je pc gaat er niet kapot van! :D

Zo kom ik op deze uit:
  • Testpagina www.developerscorner.nl/csshunter/tests/go-anchor.htm

  • Met een kleine correctie op het Huntingground-javascript (er moet altijd eerst een "var" (variabele) gedefinieerd worden, voordat je er mee aan de slag kunt).
  • En met een variant op de aanroep in de html: zodat het ook werkt als bij iemand javascript uit staat (de pagina verspringt dan in de hoogte, maar de scroll naar de juiste ankers blijft werken).
  • Zie het verschil met de Huntingground-pagina: als daar javascript uit staat doet het scroll-mechaniekje het niet.
  • Altijd uitkijken geblazen met gevonden scripts! ;)
Met vriendelijke groet,
CSShunter
 
bedankt csshunter, zonder jouw hulp was ik nergens.
Ik ben al een heel eind gekomen.
Zou je eens naar de css code willen kijken of ik geen rare dingen uitgespookt heb?

dit is het stukje van de div1
Code: 
#div1 {
        position:relative;
        float: right;
        width: 230px;
        height: 180px;
        margin-right: 35px;
        margin-left: 15px;
        overflow: auto;
        padding: 0px;
        border: 1px solid #943534;
        background: #f5f5f5;   
}

dit staat in de xhtml pagina
HTML: 
<div id="div1">
	<h2 style="background:#943534">Agenda</h2>
<p>
   <a href="#sp1" onclick="go_anchor('sp1'); return false;">Level 1</a> |
   <a href="#sp2" onclick="go_anchor('sp2'); return false;">Level 2</a> |<br />
   <a href="#sp3" onclick="go_anchor('sp3'); return false;">Level 3</a> |
   <a href="#sp4" onclick="go_anchor('sp4'); return false;">Level 4</a> |
</p>

	
        <h2 style="background:#943534" id="sp1">Level 1</h2>
        <br />
        <p>Datum:<br />
        Locatie:<br />
        <br /> 
	<br />
        Datum:<br />
        Locatie:<br />
        <br />
        Meer info / Inschrijven<br /> 
	</p>
 
		
	<h2 style="background:#943534" id="sp2">Level 2</h2>
        <p>Datum:<br />
        Locatie:<br />
        Inschrijven:<br /> 
	<br />
        Datum:<br />
        Locatie:<br />
        Meer info / Inschrijven<br /> 
	</p>
 
		
	<h2 style="background:#943534" id="sp3">Level 3</h2>
        <p>Datum:<br />
        Locatie:<br />
        Inschrijven:<br /> 
	<br />
        Datum:<br />
        Locatie:<br />
        Inschrijven:<br /> 
	</p>

	<h2 style=" background:#943534" id="sp4">Level 4</h2>
	<p>Datum:<br />
        Locatie:<br />
        Inschrijven:<br /> 
	<br />
        Datum:<br />
        Locatie:<br />
        Inschrijven:<br /> 
	</p>
</div>

dit stukje javascript staat in de <head>
[JS]
<script type="text/javascript">
function go_anchor(n){
var theScrollDiv = document.getElementById("div1");
theScrollDiv.scrollTop = document.getElementById(n).offsetTop;
}
</script>
[/JS]

Als ik in bovenstaande geen rare dingen gedaan heb. Want ik ben erg creatief geweest :)
Heb ik nog een paar vragen.
De tekst in het vakje staat binnen <p> </p> en volgt de css code op die voor de paginatekst van toepassing is.
dat is deze:
Code: 
#rightside p{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;
	margin-left: 25px;
	margin-right: 35px;
        margin-bottom: 20px;
}
In het tekstvakje wil ik de margin anders zodat de tekst dichter bij de kant komt.
Hoe doe ik dat?
En H2 zou ik graag een kleiner lettergrootte willen. Ik heb nog geen H2 in mijn CSS staan.
zet ik dan H2 in het rijtje van div1 met daarachter font-size: 14px; ?
 
ik had overigens een poging gedaan met h2 in stylesheet. Had het op dezelfde manier gedaan als h1. Echter dan is vakje weg en is tekst uit vakje over hele pagina verspreid.
Code: 
#rightside h1{
	margin: 10px 0px 10px 0px;
	width: 580px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
        margin-left: 25px;
}
#rightside h2{
	margin: 0px 0px 10px 0px;
	padding: 5px 0 0 0;
        font-size: 14px;
	font-weight: bold;
        color: #000000;

dit omdat de #rightside p{ ook doorwerkt in het vakje. Met h2 lukt dat niet.
 
Hoi merlijn,
Begrijp ik het goed dat de <div id="rightside"> om de <div id="div1"> heen staat? Dus:
HTML: 
<div id="rightside">
    ... eventuele andere dingen van #rightside ...
    <div id="div1">
        <h2 style="background:#943534">Agenda</h2>
        ...
        <h2 id="sp1">Level 1</h2>

        <p>Datum:<br />
        Locatie:</p>

        <p>Datum:<br />
        Locatie:<br />
        Meer info / Inschrijven:</p>

        ... rest van #div1 ...
    </div>
    ... eventuele andere dingen van #rightside ... 
</div>
Dan moet je de (aanvullende of plaatsvervangende) instructies niet doorgeven aan de #rightside, maar aan de #div1 zelf:
Code: 
#rightside p {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #000000;
    margin-left: 25px;
    margin-right: 35px;
    margin-bottom: 20px;
    }
#div1 p { /* afwijkende margins */
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5px;
    }
#div1 h2 {
    background: #943534; /* nieuwe background-kleur */
    }
Vanwege het Cascade-karakter van de CSS (Cascade Style Sheets!), gaat de waterval van de #rightside {...} stijlregels nu bv. niet over de <p>'s van de #div1 heen, omdat die de specifiekere #div1 p {...} stijlregels moeten volgen.

Op dezelfde manier kan je in 1 klap regelen dat de achtergrondkleur van alle <h2>'s in het blokje verandert, dan kunnen alle aparte <h2 style="background:#943534" ...> inline styles verdwijnen. :)

Verder zou ik alle opgegeven font-size maten niet in px doen, maar in em. Dat is een relatieve maat die loopt van 0 tot 1 (met alles daartussen achter de komma = achter de punt, op z'n Engels):
Code: 
#rightside p {
    font-size: 1.1em;
    }
#div1 p {
    font-size: .9em;
    }
Je moet maar even experimenteren met wat de juiste em-waardes moeten zijn.

Met vriendelijke groet,
CSShunter
 
bedankt csshunter,
Begrijp ik het goed dat de <div id="rightside"> om de <div id="div1"> heen staat?
Klik om te vergroten...
nee ik denk het niet, de pagina is opgedeeld in een smalle linker en een brede rechterzijde. Div1 staat IN de rechterzijde. (bij nader inzien, misschien noem je dat toch wel OM de div heen).

Met je heldere uitleg kom ik een heel stuk verder. :thumb: Ik ga weer verder experimenteren. :D
bedankt!
 
Heb een nieuw probleem. Heb de pagina getest in IE 8 en FF> werkt perfect.
In IE 6 en IE 7 begint de tekst niet naast div1 maar eronder. Scrol ik pagina naar beneden, dan gaat tekst onder de div1 door.
Weet je hier misschien een oplossing voor?
 
In IE 6 en IE 7 ...
Weet je hier misschien een oplossing voor?
Klik om te vergroten...
Nou, niet uit het blote hoofd. ;)
  • Heb je een link naar een testpagina die online staat? Dan kunnen we zien welke codes je precies hebt gebruikt, en waar het aan zou kunnen liggen (behalve aan IE).
Met vriendelijke groet,
CSShunter
 
bedankt voor je reactie csshunter.

Heb even een testpagina met dezelfde codes in elkaar geknutselt en online gezet. (de website staat nog niet online).

http://www.thermografie-centrum.nl/test-site


Weet je misschien ook of het mogelijk is om bijv. van Level I terug te klikken is naar die linken? ik bedoel deze die bovenaan staan:
Level A
Level B
Level I
Level II
Ik dacht gewoon door te nummeren met sp5, sp6 leek te gemakkelijk om waar te zijn.


edit: misschien handig dat ik erbij vermeld dat de validator 4 foutmeldingen geeft op het script van die plaatjeskubus. Had er nog meer in zitten die ik er uit gekregen heb, echter die laatste 4 krijg ik er niet uit.
 
Laatst bewerkt:
en hier de codes van de css

Code: 
* {margin:0px;padding:0px;top:0px;left:0px;}

body{
	text-align: center;
	background-color: #000000;
        scrollbar-arrow-color: #943534;
        scrollbar-face-color: #ffffff;
        scrollbar-highlight-color: #000000;
        scrollbar-3dlight-color: #ffffff;
        scrollbar-shadow-color: #943534;
        scrollbar-darkshadow-color: #333333;
        scrollbar-track-color: #ffffff;                                           
}
#central{
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	position: relative;
	width: 975px;
        text-align: left;
	background-color: #ffffff;
}
#header{
	background-image: url(images/header.jpg);
	height: 144px;
	width: 975px;
	left: 0px;
	top: 0px;
}
#header a{
	font-size: 18px;
	font-style: normal;
	line-height: normal;
	font-weight: bolder;
	color: #ffffff;
	text-decoration: none;
	margin-left: 935px;
	font-family: "Courier New", Courier, mono;
	margin-top: 35px;
}
#navlist{
	margin-left: 0px;
	padding-left: 0px;
	white-space: nowrap;
	position: absolute;
	height: 27px;
	width: 975px;
	top: 143px;
}
#navlist li{
	display: inline;
	list-style-type: none;
}
.active {
        padding-left: 10px;
        background-image: url(images/buttonover.gif);
        background-repeat: no-repeat;
        background-position: 0.10em;
}
#navlist a {
	padding: 3px 10px;	
	height: 20px;
	width: 93px;
	display: inline;
	position: absolute;
	text-align: center;
	color: #ffffff;
	text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
}
#navlist a:hover{background-image: url(images/buttonover.gif);}
#n1{left: 0px;}
#n2{left: 122px;}
#n3{left: 244px;}
#n4{left: 366px;}
#n5{left: 488px;}
#n6{left: 610px;}
#n7{left: 732px;}
#n8{left: 862px;}
#leftside{
	float: left;            
}
#leftside a{
        color: #943534;
        text-decoration: none;}
#leftside a:hover{ color: #666666;}
#leftside h3{
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #943534;
	border-right-color: #943534;
	border-bottom-color: #943534;
	border-left-color: #943534;
	width: 205px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #000000;
	background-color: #f5f5f5;
	text-align: left;
	display: block;
	margin-left: 20px;	
	margin-top: 20px;	
}
#content{	
        font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;                       
        margin-top: 170px;
	position: absolute;
	width: 975px;
        height: 520px;
	background-color: #ffffff;
}
#picture1{	
	margin-left: 35px;
        margin-top:  32px;
	height: 88px;
	width: 150px;
	background-image: url(images/psts-logo1.jpg);
	border: 0px 
}
#picture2{	
	margin-left: 35px;
        margin-top:  32px;
	height: 68px;
	width: 150px;
	background-image: url(images/sector-cert.jpg);
	border: 0px 
}
hr {
	clear: both;
}
#rightside .ill-links, #rightside .ill-rechts{
	margin-top: 4px;	
	text-align: center;
	font-style: italic;
	font-size: .85em;
}
.ill-links {
	float: left;
	margin-right: 15px;
        padding: 0px;
}
.ill-rechts {
	float: right;
	margin-left: 15px;
        margin-right: 15px;
        padding: 0px;
}	
.ill-links img, .ill-rechts img {
	margin-bottom: 3px;
}
#footer{
	clear: both;
	background-color: #000000;
	position: relative;
	height: 46px;
	background-image: url(images/footer.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}
#rightside{
	float: right;
	width: 720px;
	height: 520px;
        background-color: #ffffff;
	margin-right: 0px;
	margin-top: 0px;
	overflow: auto;           
}
#rightside p{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	color: #000000;
	margin-left: 25px;
	margin-right: 35px;
        margin-bottom: 20px;
}
#rightside h1{
	margin: 10px 0px 10px 0px;
	width: 580px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	color: #000000;
        margin-left: 25px;
}
#rightside span{
	margin-top: 10px;
	margin-bottom: 4px;
	width: 625px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}
#rightside a{
        color: #943534;
        text-decoration: underline;}
#rightside a:hover{ color: #666666;}
#div1 {
        position:relative;
        float: right;
        width: 230px;
        height: 250px;
        margin-right: 35px;
        margin-left: 15px;
        overflow: auto;
        padding: 0px;
        border: 1px solid #943534;
        background: #f5f5f5;   
}
#div1 p { /* afwijkende margins */
        font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 5px;
    }
#div1 h2 {
        font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	color: #ffffff;
        text-align: center;
        background: #943534; /* nieuwe background-kleur */
    }
#footer p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #0033ff;
	float: right;
	padding-top: 23px;
	margin-right: 10px;
}
#footer a{
        color: #ffffff;
        text-decoration: none;}
#footer a:hover{color: #666666;}
#imagepreloader{
	visibility: hidden;
	overflow: hidden;
	height: 0px;
	width: 0px;
}
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan