CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede prodoc Nybegynder
25. september 2007 - 21:30 Der er 25 kommentarer og
1 løsning

Scrolle en div med et billede

Hej allesammen, jeg har en hjemmeside som jeg netop er ved at arbejde sammen med Joomla, derfor har jeg ændret min hjemmesidekode til Divs (i stedet for Iframes) men jeg kan simplethen ikke få det til at virke... altså scrolleren, der findes vel ikke en som kan fortælle mig hvad forskellen er mellem iframe og div... altså hvad fejlen er herunder??

<script type="text/javascript">
<!--

refreshspeed=10;
refreshspeed2=1000;

curpage="";
scrollvalue=0;
scrollheight=new Array();
scrollpages=new Array("MainID","SubmenuID");
chkvar=true;

window.onload=function(){

setInterval("scrollme();",refreshspeed);

for(ri=0;ri<scrollpages.length;ri++)scrollheight[ri]=document.getElementById(scrollpages[ri]).scrollHeight;

setInterval("scrollhigh();",refreshspeed2);

}

function scrollme(){
if(curpage!="")window.frames[curpage].scrollBy(0,scrollvalue);
}

function scrollhigh(){
for(ri=0;ri<scrollpages.length;ri++){
  cntmpt=document.getElementById(scrollpages[ri].replace("ID","st"));
  cntmpb=document.getElementById(scrollpages[ri].replace("ID","sb"));
    if(+window.frames[scrollpages[ri].replace("ID",""))].document.body.scrollHeight>+scrollheight[ri])chkvar=true;else chkvar=false;
  cntmpt.src=(chkvar)?cntmpt.src.replace(scrollpages[ri]+"notopscroll.jpg",scrollpages[ri]+"topscroll.jpg"):cntmpt.src.replace(scrollpages[ri]+"topscroll.jpg",scrollpages[ri]+"notopscroll.jpg");
  cntmpb.src=(chkvar)?cntmpb.src.replace(scrollpages[ri]+"nobottomscroll.jpg",scrollpages[ri]+"bottomscroll.jpg"):cntmpb.src.replace(scrollpages[ri]+"bottomscroll.jpg",scrollpages[ri]+"nobottomscroll.jpg");

}
}

//-->
</script>

<a href="#null" onmouseover="curpage='Submenu';scrollvalue=-1;" onmousedown="scrollvalue=-10;" onmouseup="scrollvalue=-2;" onmouseout="scrollvalue=0;"><img id="Submenust" src="Grafik/SubmenuIDtopscroll.jpg" border="0" height="15" width="59" /></a>


Jeg forstår simpelthen ikke hvorfor det ikke virker?
Avatar billede jhe-ting Nybegynder
26. september 2007 - 00:38 #1
den største forskel er nok: Du finder ingen DIV's i samlingen 'frames'.
For at finde din div skal du bruge noget i stil med:

  var elm = document.getElementById(strID);
Avatar billede jhe-ting Nybegynder
26. september 2007 - 00:39 #2
- og så skal du nok også se på 'style.overflow' på dine div's
Avatar billede jhe-ting Nybegynder
26. september 2007 - 00:41 #3
- øh - hvor ER egentlig dine div's ???
Avatar billede prodoc Nybegynder
26. september 2007 - 07:09 #4
Hov undskyld, dem glemte jeg lige at sætte ind :)

Her er SubmenuID:
<div id="SubmenuID" class="Undermenu" style="background-image:url('templates/isstemplate/images/SubMenu_Background.jpg'); color: White; position:absolute; overflow: auto; left: 89px; top: 226px; width: 165px; height: 232px; padding: 0px; padding-right: 0px;">
<?php if($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left" style="" />
<?php endif; ?>
</div>

Og her er MainID Div'en:
<div id="MainID" class="Main" style="background-image:url('templates/isstemplate/images/Main_Background.jpg'); color: White; position: absolute; overflow: auto; left: 281px; top: 123px; width: 478px; height: 464px; padding: 0px; padding-right: 0px;">
<a name="content"></a>
<?php if ($this->countModules('user1 + user2 + right + top')) : ?>
    <div id="main2">
<?php else : ?>
    <div id="main">
<?php endif; ?>

<?php if ($this->getBuffer('message')) : ?>
    <div class="error">
        <h2> Message </h2>
        <jdoc:include type="message" />
    </div>
<?php endif; ?>

    <jdoc:include type="component" />

        </div>
</div>

Det hele ligger på http://www.isyvsind.dk :)
(Har sat overflow til auto, fordi jeg var lidt træt af ikke at kunne scrolle, men ville helst at den stod på hidden:)
Avatar billede jhe-ting Nybegynder
26. september 2007 - 13:55 #5
Har du prøvet at rette 'scrollme'-funktionen så den bruger 'getElementById'?

function scrollme(){
if(curpage!="")document.getElementById(curpage).scrollBy(0,scrollvalue);
}

Hvad er det med ....replace("ID","st") ???

'curpage' _skal_ indeholde en gyldig ID-streng for at det virker.
Avatar billede jhe-ting Nybegynder
26. september 2007 - 13:58 #6
Det er links som denne:

<a href="#null" onmouseover="curpage='Submenu';scrollvalue=-1;" onmousedown="scrollvalue=-10;" onmouseup="scrollvalue=-2;" onmouseout="scrollvalue=0;"><img id="Submenust" src="Grafik/SubmenuIDtopscroll.jpg" border="0" height="15" width="59" /></a>

Der er vist ingen elementer der har 'Submenu' som ID, hedder den ikke 'SubmenuID'?

Er det ikke det samme problem med 'MainID' ???

Du må have ordentligt styr på navnene. ;-)
Avatar billede prodoc Nybegynder
26. september 2007 - 17:39 #7
Det andet sted hvor jeg havde Iframes hed de MainId og SubmenuID, men ja dengang gik den bestemt heller ikke igennem W3C kontrollen :)
Jeg kunne vel ikke få dig til at indføre de ændringer du nævner, for er ikke så skarp i Java programmeringen... :)
Avatar billede jhe-ting Nybegynder
26. september 2007 - 20:45 #8
Når du bruger PHP til at danne din HTML, hjælper det jo ikke så meget, hvis jeg bare viser dig, hvordan den rigtige HTML skal se ud.
Så må du fremvise den komplette kode, hvoraf det fremgår hvad alting hedder og hvordan det hænger sammen.
Avatar billede prodoc Nybegynder
26. september 2007 - 20:58 #9
Det må du undskylde, her er den komplette kode med forklaringer:
dette ligger på www.isyvsind.dk



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Thomas &Oslash;sterlund Mortensens hjemmeside</title>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/_system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template_css.css" type="text/css" />
<!--Herunder starter et af mine scripts som åbner to links med et tryk-->
<script type="text/javascript">
function twoLinks(link1,link2){
parent.Submenu.location.href = link1;
parent.Main.location.href = link2;
}

</script>
<!--Herunder starter det javascript som får sub og main menuen til at scrolle samt, at tjekke der overhovedet er brug for at scrolle, er dette ikke tilfældet kommer der et andet billede frem (i dette tilfælde ingenting, altså pilen fjernes)-->
<script type="text/javascript">
<!--

refreshspeed=10;
refreshspeed2=1000;

curpage="";
scrollvalue=0;
scrollheight=new Array();
scrollpages=new Array("MainID","SubmenuID");
chkvar=true;

window.onload=function(){

setInterval("scrollme();",refreshspeed);

for(ri=0;ri<scrollpages.length;ri++)scrollheight[ri]=document.getElementById(scrollpages[ri]).scrollHeight;

setInterval("scrollhigh();",refreshspeed2);

}

function scrollme(){
if(curpage!="")window.frames[curpage].scrollBy(0,scrollvalue);
}

function scrollhigh(){
for(ri=0;ri<scrollpages.length;ri++){
cntmpt=document.getElementById(scrollpages[ri].replace("ID","st"));
cntmpb=document.getElementById(scrollpages[ri].replace("ID","sb"));
if(+window.frames[(scrollpages[ri].replace("ID",""))].document.body.scrollHeight>+scrollheight[ri])chkvar=true;else chkvar=false;
cntmpt.src=(chkvar)?cntmpt.src.replace(scrollpages[ri]+"notopscroll.jpg",scrollpages[ri]+"topscroll.jpg"):cntmpt.src.replace(scrollpages[ri]+"topscroll.jpg",scrollpages[ri]+"notopscroll.jpg");
cntmpb.src=(chkvar)?cntmpb.src.replace(scrollpages[ri]+"nobottomscroll.jpg",scrollpages[ri]+"bottomscroll.jpg"):cntmpb.src.replace(scrollpages[ri]+"bottomscroll.jpg",scrollpages[ri]+"nobottomscroll.jpg");

}
}

//-->
</script>
<style type="text/css">
body    {
background-color:Black;
background-image:url(templates/isstemplate/images/Background_Overall.gif);
color: White;
font-family: Arial;
font-size: 11px;
margin-left: 0px;
margin-right: 0px;
}
</style>
</head>
<body>

<div class="container" style="postion: absolute; width: 880px; height: 697px;">

<div class="Perefi_Top" style="position: absolute; left: 0px; top: 0px; width: 860px; height: 15px; padding: 0px; padding-right: 0px;">
<img src="templates/isstemplate/images/Frame_Top_Transparent.gif" alt="" style="width: 860px; height: 15px; border: none;" />
</div>

<div class="Ramme_Top" style="background-color: Black; color: black; position: absolute; left: 0px; top: 15px; width: 860px; height: 93px; padding: 0px; padding-right: 0px;">
<img src="templates/isstemplate/images/Frame_TopBar_1.jpg" alt="" style="width:860px; height:18px; border:none;" /><br />
<img src="templates/isstemplate/images/Frame_TopBar_2_Left.jpg" alt="" style="width:141px; height:29px; border:none;" /><img src="templates/isstemplate/images/Frame_TopBar_2_Button.jpg" alt="" style="width:25px; height:29px; border:none;" /><img src="templates/isstemplate/images/Frame_TopBar_2_Right.jpg" alt="" style="width:694px; height:29px; border:none;" /><br />
<img src="templates/isstemplate/images/Frame_TopBar_3.jpg" alt="" style="width:860px; height:46px; border:none;" />
</div>

<div class="Ramme_Hojre" style="background-color: Black; color: black; position: absolute; left: 0px; top: 108px; width: 89px; height: 494px; padding: 0px; padding-right: 0px;">
<img src="templates/isstemplate/images/Frame_LeftBar.jpg" alt="" style="width:89px; height:494px; border:none;" />

</div>

<div class="Ramme_Bund" style="background-color: Black; color: black; position: absolute; left: 0px; top: 602px; width: 860px; height: 95px; padding: 0px; padding-right: 0px;">
<img src="templates/isstemplate/images/Frame_Bottombar.jpg" alt="" style="width:860px; height:95px; border:none;" />
</div>


<div class="Menu" style="background-color: Black; color: black; position: absolute; left: 89px; top: 108px; width: 165px; height: 103px; padding: 0px; padding-right: 0px;">
<img src="templates/isstemplate/images/Menu_Top.jpg" alt="" style="width:165px; height:26px; border:none;" /><br />
<img src="templates/isstemplate/images/Menu_Media_Left.jpg" alt="" style="width:49px; height:17px; border:none;" /><img src="templates/isstemplate/images/Menu_Media_Button.jpg" alt="" style="width:37px; height:17px; border:none" /><img src="templates/isstemplate/images/Menu_Media_Right.jpg" alt="" style="width:79px; height:17px; border:none;" /><br />
<img src="templates/isstemplate/images/Menu_Projekter_Left.jpg" alt="" style="width:47px; height:18px; border:none;" /><img src="templates/isstemplate/images/Menu_Projekter_Button.jpg" alt="" style="width:72px; height:18px; border:none;" /><img src="templates/isstemplate/images/Menu_Projekter_Right.jpg" alt="" style="width:46px; height:18px; border:none;" /><br />
<img src="templates/isstemplate/images/Menu_Tanker_Left.jpg" alt="" style="width:45px; height:14px; border:none;" /><img src="templates/isstemplate/images/Menu_Tanker_Button.jpg" alt="" style="width:42px; height:14px; border:none;" /><img src="templates/isstemplate/images/Menu_Tanker_Right.jpg" alt="" style="width:78px; height:14px; border:none;" /><br />
<img src="templates/isstemplate/images/Menu_Mig_Left.jpg" alt="" style="width:44px; height:11px; border:none;" /><img src="templates/isstemplate/images/Menu_Mig_Button.jpg" alt="" style="width:21px; height:11px; border:none;" /><img src="templates/isstemplate/images/Menu_Mig_Right.jpg" alt="" style="width:100px; height:11px; border:none;" /><br />
<img src="templates/isstemplate/images/Menu_Andet_Left.jpg" alt="" style="width:45px; height:17px; border:none;" /><img src="templates/isstemplate/images/Menu_Andet_Button.jpg" alt="" style="width:46px; height:17px; border:none;" /><img src="templates/isstemplate/images/Menu_Andet_Right.jpg" alt="" style="width:74px; height:17px; border:none;" />
</div>

<div class="Undermenu_Scroller_Top" style="background-color: Black; color: black; position: absolute; left: 89px; top: 211px; width: 165px; height: 15px; padding: 0px; padding-right: 0px;">
<img src="templates/isstemplate/images/SubMenu_TopScroll_Left.jpg" alt="" style="width:53px; height:15px; border:none;" /><a href="#null" onmouseover="curpage='Submenu';scrollvalue=-1;" onmousedown="scrollvalue=-10;" onmouseup="scrollvalue=-2;" onmouseout="scrollvalue=0;"><img id="Submenust" src="templates/isstemplate/images/SubmenuIDtopscroll.jpg" alt="" style="width:59px; height:15px; border:none;"/></a><img src="templates/isstemplate/images/SubMenu_TopScroll_Right.jpg" alt="" style="width:53px; height:15px; border:none;" />

</div>
<!--Herunder starter den div så hvori Submenuen er, koden er til Joomla-->
<div id="Submenu" class="Undermenu" style="background-image:url('templates/isstemplate/images/SubMenu_Background.jpg'); color: White; position:absolute; overflow: auto; left: 89px; top: 226px; width: 165px; height: 232px; padding: 0px; padding-right: 0px;">
<?php if($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left" style="" />
<?php endif; ?>
</div>

<div class="Undermenu_Scroller_Bund" style="background-color: Black; color: black; position: absolute; left: 89px; top: 458px; width: 165px; height: 15px; padding: 0px; padding-right: 0px;">
<img src="templates/isstemplate/images/SubMenu_BottomScroll_Left.jpg" alt="" style="width:54px; height:15px; border:none;" /><a href="#null" onmouseover="curpage='Submenu';scrollvalue=1;" onmousedown="scrollvalue=10;" onmouseup="scrollvalue=2;" onmouseout="scrollvalue=0;"><img id="Submenusb" src="templates/isstemplate/images/SubmenuIDbottomscroll.jpg" alt="" style="width:59px; height:15px; border:none;" /></a><img src="templates/isstemplate/images/SubMenu_BottomScroll_Right.jpg" alt="" style="width:52px; height:15px; border:none;" />
</div>

<div class="Bamsediv" style="background-color: Black; color: black; position: absolute; left: 89px; top: 473px; width: 165px; height: 129px; padding: 0px; padding-right: 0px;">
<img src="templates/isstemplate/images/BoksebamseTop.jpg" alt="" style="width:165px; height:44px; border:none;" /><br />
<img src="templates/isstemplate/images/BoksebamseMiddleLeft.jpg" alt="" style="width:13px; height:19px; border:none;" /><a href="index.php?option=com_user&view=login"><img src="templates/isstemplate/images/BoksebamseMiddleButton.jpg" alt="" style="width:19px; height:19px; border:none; cursor:default;" /></a><img src="templates/isstemplate/images/BoksebamseMiddleRight.jpg" alt="" style="width:133px; height:19px; border:none;" /><br />
<img src="templates/isstemplate/images/BoksebamseBottom.jpg" alt="" style="width:165px; height:66px; border:none;" />
</div>

<div class="Ramme_Midt" style="background-color: Black; color: black; position: absolute; left: 254px; top: 108px; width: 27px; height: 494px; padding: 0px; padding-right: 0px;">
<img src="templates/isstemplate/images/Frame_MiddleBar.jpg" alt="" style="width:27px; height:494px; border:none;" />
</div>

<div class="Main_Scroller_Top" style="background-color: Black; color: black; position: absolute; left: 281px; top: 108px; width: 478px; height: 15px; padding: 0px; padding-right: 0px;">
<img src="templates/isstemplate/images/Main_TopScroll_Left.jpg" alt="" style="width:209px; height:15px; border:none;" /><a href="#null" onmouseover="curpage='Main';scrollvalue=-5;" onmousedown="scrollvalue=-10;" onmouseup="scrollvalue=-5;" onmouseout="scrollvalue=0;"><img id="Mainst" src="templates/isstemplate/images/MainIDtopscroll.jpg" alt="" style="width:59px; height:15px; border:none;" /></a><img src="templates/isstemplate/images/Main_TopScroll_Right.jpg" alt="" style="width:210px; height:15px; border:none;" />
</div>
<!--Herunder starter den div så hvori MainMenuen er, koden er til Joomla-->
<div id="Main" class="Main" style="background-image:url('templates/isstemplate/images/Main_Background.jpg'); color: White; position: absolute; overflow: auto; left: 281px; top: 123px; width: 478px; height: 464px; padding: 0px; padding-right: 0px;">
<a name="content"></a>
<?php if ($this->countModules('user1 + user2 + right + top')) : ?>
<div id="main2">
<?php else : ?>
<div id="main">
<?php endif; ?>

<?php if ($this->getBuffer('message')) : ?>
<div class="error">
<h2> Message </h2>
<jdoc:include type="message" />
</div>
<?php endif; ?>

<jdoc:include type="component" />

</div>
</div>

<div class="Main_Scroller_Bund" style="background-color: Black; color: black; position: absolute; left: 281px; top: 587px; width: 478px; height: 15px; padding: 0px; padding-right: 0px;">
<img src="templates/isstemplate/images/Main_BottomScroll_Left.jpg" alt="" style="width:209px; height:15px; border:none;" /><a href="#null" onmouseover="curpage='Main';scrollvalue=5;" onmousedown="scrollvalue=10;" onmouseup="scrollvalue=5;" onmouseout="scrollvalue=0;"><img id="Mainsb" src="templates/isstemplate/images/MainIDbottomscroll.jpg" alt="" style="width:59px; height:15px; border:none;" /></a><img src="templates/isstemplate/images/Main_BottomScroll_Right.jpg" alt="" style="width:210px; height:15px; border:none;" />
</div>

<div class="Ramme_Venstre" style="background-color: Black; color: black; position: absolute; left: 759px; top: 108px; width: 101px; height: 494px; padding: 0px; padding-right: 0px;">
<img src="templates/isstemplate/images/Frame_RightBar.jpg" alt="" style="width:101px; height:494px; border:none;" />
</div>

<div class="Pereferi_Venstre" style="position:absolute; left:860px; top:0px; width:20px; height:697px; padding:0px; padding-right:0px;">
<img src="templates/isstemplate/images/Frame_Right_Transparent.gif" alt="" style="width:20px; height:697px; border:none;" />
</div>

</div>
</body>
</html>

Håber mine kommentarer i koden er tilstrækkelig?
Avatar billede jhe-ting Nybegynder
26. september 2007 - 21:02 #10
Ingen grund til at undskylde, som sådan, jeg ser lige på det ...
Avatar billede jhe-ting Nybegynder
26. september 2007 - 21:39 #11
Alle steder hvor der står <?php  ...    $this->  ...  ?> giver PHP fejl.


Hvor kommer f.eks.
  $this->language
  $this->template
  $this->countModules()
og
  $this->getMessage()
fra?

Er det jomla?

Den kode du viser er desværre ikke 'stand-alone', derimod afhænger den af 'noget udenom', så jeg kan ikke teste den som den er.
Jeg kan selvfølgelig prøve at gætte, men det vil være lidt omstændeligt at sende så megen kode frem og tilbage her på siden. Kan du 'skrælle' det overflødige fra så jeg kan arbejde på en stand-alone udgave?
Avatar billede prodoc Nybegynder
27. september 2007 - 00:34 #12
Hej jhe-ting så har jeg beskrevet og forkortet koden så det er mere ind til benet... :) Måske skulle jeg lige nævne at da jeg første gang fik hjælp til at lave denne funktion var det her: http://www.eksperten.dk/spm/701619 det skete. Håber det er bedre nu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Thomas &Oslash;sterlund Mortensens hjemmeside</title>
<!--Joomlakode start, har ingen betydning for noget andet end Joomla koden-->
<jdoc:include type="head" />
<!--Joomlakode slut-->
<!--Herunder starter det javascript som får sub og main menuen til at scrolle samt, at tjekke der overhovedet er brug for at scrolle, er dette ikke tilfældet kommer der et andet billede frem (i dette tilfælde ingenting, altså pilen fjernes)-->
<script type="text/javascript">
<!--

refreshspeed=10; <!--Refreshspeed ved mouseover-->
refreshspeed2=1000;<!--Refreshspeed ved tryk på scroll billedet-->

curpage="";
scrollvalue=0;
scrollheight=new Array();
scrollpages=new Array("MainID","SubmenuID"); <!--Hvad hedder de Iframes som scrolleren skal påvirkes af-->
chkvar=true;

window.onload=function(){

setInterval("scrollme();",refreshspeed);

for(ri=0;ri<scrollpages.length;ri++)scrollheight[ri]=document.getElementById(scrollpages[ri]).scrollHeight;

setInterval("scrollhigh();",refreshspeed2);

}

function scrollme(){
if(curpage!="")window.frames[curpage].scrollBy(0,scrollvalue);
}
<!--Herunder er den funktion hvor den finder ud af om der er brug for en scroller hvis ikke så viser den billederne noxxxscroll.jpg-->
function scrollhigh(){
for(ri=0;ri<scrollpages.length;ri++){
cntmpt=document.getElementById(scrollpages[ri].replace("ID","st"));
cntmpb=document.getElementById(scrollpages[ri].replace("ID","sb"));
if(+window.frames[(scrollpages[ri].replace("ID",""))].document.body.scrollHeight>+scrollheight[ri])chkvar=true;else chkvar=false;
cntmpt.src=(chkvar)?cntmpt.src.replace(scrollpages[ri]+"notopscroll.jpg",scrollpages[ri]+"topscroll.jpg"):cntmpt.src.replace(scrollpages[ri]+"topscroll.jpg",scrollpages[ri]+"notopscroll.jpg");
cntmpb.src=(chkvar)?cntmpb.src.replace(scrollpages[ri]+"nobottomscroll.jpg",scrollpages[ri]+"bottomscroll.jpg"):cntmpb.src.replace(scrollpages[ri]+"bottomscroll.jpg",scrollpages[ri]+"nobottomscroll.jpg");

}
}

//-->
</script>

</head>
<body>

<!--Herunder er top scroller billedet til Submenuen-->
<div class="Undermenu_Scroller_Top" style="background-color: Black; color: black; position: absolute; left: 89px; top: 211px; width: 165px; height: 15px; padding: 0px; padding-right: 0px;">
<img src="templates/isstemplate/images/SubMenu_TopScroll_Left.jpg" alt="" style="width:53px; height:15px; border:none;" /><a href="#null" onmouseover="curpage='Submenu';scrollvalue=-1;" onmousedown="scrollvalue=-10;" onmouseup="scrollvalue=-2;" onmouseout="scrollvalue=0;"><img id="Submenust" src="templates/isstemplate/images/SubmenuIDtopscroll.jpg" alt="" style="width:59px; height:15px; border:none;"/></a><img src="templates/isstemplate/images/SubMenu_TopScroll_Right.jpg" alt="" style="width:53px; height:15px; border:none;" />

</div>
<!--Herunder starter den div så hvori Submenuen er-->
<div id="Submenu" class="Undermenu" style="background-image:url('templates/isstemplate/images/SubMenu_Background.jpg'); color: White; position:absolute; overflow: auto; left: 89px; top: 226px; width: 165px; height: 232px; padding: 0px; padding-right: 0px;">
<!--Joomlakode start-->
<?php if($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left" style="" />
<?php endif; ?>
<!--Joomlakode slut-->
</div>
<!--I denne div herunder er den kode hvor scrollbilledet til Submenuen er i-->
<div class="Undermenu_Scroller_Bund" style="background-color: Black; color: black; position: absolute; left: 89px; top: 458px; width: 165px; height: 15px; padding: 0px; padding-right: 0px;">
<img src="templates/isstemplate/images/SubMenu_BottomScroll_Left.jpg" alt="" style="width:54px; height:15px; border:none;" /><a href="#null" onmouseover="curpage='Submenu';scrollvalue=1;" onmousedown="scrollvalue=10;" onmouseup="scrollvalue=2;" onmouseout="scrollvalue=0;"><img id="Submenusb" src="templates/isstemplate/images/SubmenuIDbottomscroll.jpg" alt="" style="width:59px; height:15px; border:none;" /></a><img src="templates/isstemplate/images/SubMenu_BottomScroll_Right.jpg" alt="" style="width:52px; height:15px; border:none;" />
</div>

<!--Main top scroller billedet er herunder-->
<div class="Main_Scroller_Top" style="background-color: Black; color: black; position: absolute; left: 281px; top: 108px; width: 478px; height: 15px; padding: 0px; padding-right: 0px;">
<img src="templates/isstemplate/images/Main_TopScroll_Left.jpg" alt="" style="width:209px; height:15px; border:none;" /><a href="#null" onmouseover="curpage='Main';scrollvalue=-5;" onmousedown="scrollvalue=-10;" onmouseup="scrollvalue=-5;" onmouseout="scrollvalue=0;"><img id="Mainst" src="templates/isstemplate/images/MainIDtopscroll.jpg" alt="" style="width:59px; height:15px; border:none;" /></a><img src="templates/isstemplate/images/Main_TopScroll_Right.jpg" alt="" style="width:210px; height:15px; border:none;" />
</div>
<!--Herunder starter den div så hvori MainMenuen er-->
<div id="Main" class="Main" style="background-image:url('templates/isstemplate/images/Main_Background.jpg'); color: White; position: absolute; overflow: auto; left: 281px; top: 123px; width: 478px; height: 464px; padding: 0px; padding-right: 0px;">
<!--Joomlacontent start-->
<a name="content"></a>
<?php if ($this->countModules('user1 + user2 + right + top')) : ?>
<div id="main2">
<?php else : ?>
<div id="main">
<?php endif; ?>

<?php if ($this->getBuffer('message')) : ?>
<div class="error">
<h2> Message </h2>
<jdoc:include type="message" />
</div>
<?php endif; ?>

<jdoc:include type="component" />
<!--Joomlacontent slut-->
</div>
</div>
<!--Main bund scroller billedet er herunder-->
<div class="Main_Scroller_Bund" style="background-color: Black; color: black; position: absolute; left: 281px; top: 587px; width: 478px; height: 15px; padding: 0px; padding-right: 0px;">
<img src="templates/isstemplate/images/Main_BottomScroll_Left.jpg" alt="" style="width:209px; height:15px; border:none;" /><a href="#null" onmouseover="curpage='Main';scrollvalue=5;" onmousedown="scrollvalue=10;" onmouseup="scrollvalue=5;" onmouseout="scrollvalue=0;"><img id="Mainsb" src="templates/isstemplate/images/MainIDbottomscroll.jpg" alt="" style="width:59px; height:15px; border:none;" /></a><img src="templates/isstemplate/images/Main_BottomScroll_Right.jpg" alt="" style="width:210px; height:15px; border:none;" />
</div>

</body>
</html>
Avatar billede jhe-ting Nybegynder
27. september 2007 - 04:19 #13
OK - Nu er jeg tættere på en løsning.

Der er flere forskelle mellem div's og iframes, end bare det at finde dem.
Der er intet document inden i en div, så der er ikke support fro scrollBy(...), man må bruge sctollTop og scrollLeft for at rulle.
Derfor omskriver jeg nu det oprindelige script så det husker positionen og ruller op/ned på de to div's "Main" og "Submenu".
Det betyder at de fire "a" tag's der aktiverer rulningen nok også kommer til at blive rettet.
Der går nok lidt tid med det ... :-P
Vender snart tilbage...
Avatar billede jhe-ting Nybegynder
27. september 2007 - 05:49 #14
Det er måske ikke den mest elegante løsning, men på denne måde er det 'nok' at rette script'et til dette:


<script type="text/javascript">
<!--

refreshspeed=10;
refreshspeed2=1000;

curpage="";
scrollvalue=0;
scrollheight=new Array();
scrollpages=new Array("MainID","SubmenuID");
chkvar=true;

function gEl(idStr){
    return document.getElementById(idStr);
}
window.onload=function(){

setInterval("scrollme();",refreshspeed);

for(ri=0;ri<scrollpages.length;ri++)scrollheight[ri]=document.getElementById(scrollpages[ri].replace("ID","")).scrollHeight;

setInterval("scrollhigh();",refreshspeed2);

}

function scrollme(){
  if(curpage!=""){
    var el = gEl(curpage);
    var top = el.scrollTop;
    //if (el.scrollTop < el.scrollHeight - parseInt(el.style.height)){
      el.scrollTop=top+scrollvalue;
    //}
  }
}

function scrollhigh(){
for(ri=0;ri<scrollpages.length;ri++){
  cntmpt=document.getElementById(scrollpages[ri].replace("ID","st"));
  cntmpb=document.getElementById(scrollpages[ri].replace("ID","sb"));
    if(+gEl((scrollpages[ri].replace("ID",""))).scrollHeight>+scrollheight[ri])chkvar=true;else chkvar=false;
  cntmpt.src=(chkvar)?cntmpt.src.replace(scrollpages[ri]+"notopscroll.jpg",scrollpages[ri]+"topscroll.jpg"):cntmpt.src.replace(scrollpages[ri]+"topscroll.jpg",scrollpages[ri]+"notopscroll.jpg");
  cntmpb.src=(chkvar)?cntmpb.src.replace(scrollpages[ri]+"nobottomscroll.jpg",scrollpages[ri]+"bottomscroll.jpg"):cntmpb.src.replace(scrollpages[ri]+"bottomscroll.jpg",scrollpages[ri]+"nobottomscroll.jpg");

}
}

//-->
</script>
Avatar billede jhe-ting Nybegynder
27. september 2007 - 06:12 #15
Mere effektivt ville være at slukke for timer-rutinerne når der ikke er brug for dem (onmouseout) og starte dem når de er i brug (onmouseover).

Hvis du ellers kan bruge den rene script-ændring er det så også i orden.

Hvis der er problemer med scriptet, kan det skyldes at din kode ikke er XHTML men HTML.

Jeg testede med denne headder:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
Avatar billede prodoc Nybegynder
27. september 2007 - 10:34 #16
Jaaa så virker det! Men der er dog et par småbugs.. Når een af Main eller Submenu div'en ikke skal bruge scroll så fjerner den det for dem begge (altså scrollbilledet) og noscroll kommer slet ikke frem?
se eventuelt på www.isyvsind.dk
Avatar billede jhe-ting Nybegynder
28. september 2007 - 21:03 #17
Prøv at rette fra:

for(ri=0;ri<scrollpages.length;ri++)scrollheight[ri]=document.getElementById(scrollpages[ri].replace("ID","")).scrollHeight;


til:


for(ri=0;ri<scrollpages.length;ri++)
  scrollheight[ri]=parseInt(
    document.getElementById(
      scrollpages[ri].replace("ID","")
    ).style.height
  );
Avatar billede jhe-ting Nybegynder
28. september 2007 - 21:04 #18
Har prøvet det på siden og set det virke ;)
Avatar billede prodoc Nybegynder
01. oktober 2007 - 00:17 #19
Hejsa undskyld den sene udmelding, har været på weekendtur med min familie (fars 60 års fødselsdag :)) Nu virker det sgu... Det er lidt synd at den lige tager et sek om at opdatere scroll-billeder, men det er der ikke noget at gøre ved... :)

Lige sidst du ved vel ikke hvad jeg skal være for at baggrunden på div'sne igen bliver fixed? altså sådan at de ikke følger med når der scrolles? :)
(Kommer du ikke lige med et svar) :)
Avatar billede jhe-ting Nybegynder
02. oktober 2007 - 01:49 #20
Du kan vist bare fjerne (fra begge divs):

background-attachment:fixed;
background-position: XXpx  YYpx;
Avatar billede prodoc Nybegynder
02. oktober 2007 - 10:02 #21
Hej Jhe-ting, tusind tak for hjælpen, prøvede mig lidt frem i går aftes og fandt ud af det helt selv :) altså det med baggrunden..... Problemet er så bare hvordan jeg centrer min cintainer på siden, men den finder jeg ud af med tiden :)

Igen tusind tak for hjælpen!
Avatar billede jhe-ting Nybegynder
02. oktober 2007 - 22:20 #22
Du kan få den til at opdatere tidligere (måske) hvis du må (for jomla) bruge

  window.onload=scrollHigh;

Så kan du vist endda droppe 'setInterval("scrollhigh();",refreshspeed2);'

};D)
Avatar billede jhe-ting Nybegynder
02. oktober 2007 - 22:29 #23
Mere muligt er det at du kan bruge den lidt tungere løsning:

  var oldWinOnload = window.onload;

  window.onload=function(e){
    if (oldWinOnload) oldWinOnload(e);
    scrollHigh();
  }
Avatar billede prodoc Nybegynder
02. oktober 2007 - 22:38 #24
Skal jeg så bare skrive:
window.onload=scrollHigh;

i stedet for:
setInterval("scrollhigh();",refreshspeed2);

for hvis jeg gør det så forblir scrollOn billedet der og forsvinder ikke?
Avatar billede jhe-ting Nybegynder
04. oktober 2007 - 01:12 #25
Åh - det kan være det varer lidt efter onload før hele jomla-delen er færdig.
Måske er der et jomla-event man kan hægte sig på.
Hvor længe varer det før de forsvinder hvis refreshspeed2 gøres meget lille (10-20 ms.)?
Måske kan du nøjes med en forsinkelse...
Avatar billede prodoc Nybegynder
04. oktober 2007 - 21:37 #26
Heh jeg har faktisk fået overtalt en ven til at hjælpe mig med at lave et lille frontend cms, så jeg undgår Joomla... :) jeg synes godt nok det har været lidt svært at bruge det joomla, specielt fordi det system som jeg vil have på min side tit går væk fra Joomla, altså der er menuen som ikke er en del af Joomla etc...
Men ja har sat refreshspeed2 til 5 ms, så er det da næsten usynligt... det er nok det bedste jeg kan få... :)
Tusind tak, det med at baggrunden kan scrolles ned prøver jeg at spørge min ven om når vi i weekenden skal have programmeringsweekend... :)

Tak for hjælpen og good weekend!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML 2 30/10/202409:37 30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML 2 29/09/202410:58 30/09/202412:04
Bredde på div elementer Af dane022 i HTML 2 16/02/202408:29 20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML 2 21/12/202322:51 22/12/202308:03
validering <input tlfnr. Af slein55 i HTML 5 15/10/202311:43 15/10/202314:51
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 22:30 Underlig meddelelse på skærmen Af Jordegern i E-mail programmer
I går 15:56 Navigation i Peugeot 3-2008 fra 2017 Af arnepedersen i Andet software
I går 14:10 Outlook henter ikke mails Af TTA i Office & Kontorpakker
I går 13:58 vise billeder i kartotek med store ikoner inklusive optagelsesdato Af Malm i Billedbehandling
I går 13:35 Adobe Elements 2019, Organizer Crasher Af mort1 i Billedbehandling
White papers
Flere white papers »


Premium
Teaser billede
Vil købe tele-løsninger til det offentlige for 370 millioner kroner
Læs mere »
Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"
Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen
Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet
Se alle »
Computerworld
Teaser billede
Microsofts nye pc er ekstrem billig – men kan blive ekstrem sikker og fleksibel
Læs mere »
Test: Prøv kun disse B&O-hovedtelefoner, hvis du har råd
Kæmpe datalæk på hospital: 750.000 patienters fortrolige data lækket
Telegigant klar med AI-baseret mormor: Holder telefon-svindlere fast i røret med sniksnak og dumme spørgsmål
Se alle »
CIO
Teaser billede
Konsulenthus vil rulle Microsoft 365 Copilot ud til 200.000 ansatte
Læs mere »
Kæmpe-opgave for Danske Bank har banet vej for fuldautomatiseret migrering til cloud: Nu udbredes metoden i hele AWS
Microsofts store årlige event: De tre vigtigste nøglebudskaber fra Satya Nadella om Microsofts fremtid
Tre vigtige erkendelser, som Computerworld tog med hjem fra Gartners store topmøde i Barcelona
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Topchef Sara Green mener, at der er brug for et radikalt nyt syn på it-ledelse - særligt én ny trend hader hun som pesten
Se alle »
White paper
Teaser billede
Sæt turbo på din cloudperformance og minimér risikoen for DDoS-angreb
Læs mere »
Sikkerhed uden grænser: Cisco Hypershield
Vær proaktiv og prioritér IT-sikkerheden – før det er for sent
Sådan gør du: Elektronisk dokumentudveksling i praksis
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »