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

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
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
Link fra form input Af jnrmgs i HTML 9 19/09/202319:10 23/09/202313:11
includere i HTML Af slein55 i HTML 3 15/09/202313:47 16/09/202309:40
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 dag 10:07 Fjerne dele af en celle Af lurup i Excel
I dag 09:48 Konverter flere VCards til CSV excel på en gang Af Rikkrag74 i Excel
I går 18:05 Program til deling af billeder på nettet Af Bukse i Billedbehandling
I går 17:03 Program til deling af billeder på nettet Af Bukse i Office & Kontorpakker
I går 11:54 Markedplace Af lupin12 i Fri debat
White papers
Flere white papers »


Premium
Teaser billede
Staten køber ejendom til halv milliard kroner til Styrelsen for It og læring: Her er adressen
Læs mere »
Staten tvunget til at udvide kæmpekontrakt med DXC: Prisen stiger pludselig med 50 procent
I sidste øjeblik: Danmarkshistoriens største GDPR-retssag mod det offentlige udskydes på ubestemt tid
EU udspørger Microsoft om risici forbundet med Copilot: Mistænkes for at have overtrådt ny lov
Se alle »
Computerworld
Teaser billede
Om under en uge går det løs: Pc’en bliver aldrig den samme igen
Læs mere »
Test: Motorolas lækre nye toptelefon er skarpt prissat – men den gemmer på en gevaldig bommert
Nyopdaget sårbarhed rammer næsten alle VPN'er: Gør dem usikre og nærmest ubrugelige
Test: Samsungs nyeste laptop er noget af det tætteste du kommer på en Windows-Macbook
Se alle »
CIO
Teaser billede
Nu begynder den største GDPR-retssag mod dansk myndighed nogensinde: Står over for million-bøde
Læs mere »
Sådan har Coop sagt farvel til mainframen - sparer et to-cifret millionbeløb årligt på licenser
Lukker it-systemerne ned i to uger på grund af implementering: Den bedste måde at sikre, at ingen data går tabt
Opdater Windows nu: Microsoft lapper 60 sikkerhedshuller og fikser VPN-fejl
Se alle »
Job & Karriere
Teaser billede
Her er Danmarks fem bedste CIO’er lige nu: Se de fem nominerede til prisen som Årets CIO 2024
Læs mere »
Medarbejderne fik udleveret badetøfler ved indflytningen: Kom med inden for i IBM Danmarks nye topmoderne hovedkontor
Får du den løn, du fortjener? Få overblikket over hvor meget dine kolleger tjener hver måned
Google fyrer hele sit Python-team
Se alle »
White paper
Teaser billede
Guide: Sådan udvikler du en moderne netværksstrategi
Læs mere »
Nemmere overblik, styring og omkostningskontrol i dit multicloud-miljø
Sæt turbo på din cloudperformance og minimér risikoen for DDoS-angreb
MDR: Transparent sikkerhed og overvågning i realtid
Se alle »

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