[Javascript-CSS] Aanpassen van ext. CSS met ext. JS ? - Softwareontwikkeling

donderdag 9 december 2010 19:21

Acties:

Verwijderd

Topicstarter

Hallo,

Is het mogelijk om een extern css stylesheet aan te passen met een extern javascript file?

Voor hetgeen ik javascript gebruik, had ik eerst inline css in mijn index.html. Dit werkte perfect voor het aanpassen van die inline css.

Nu heb ik die inline css in een extern stylesheet geplaatst, maar nu blijkt mijn javascript geen effect te hebben op de css...

De mappenstructuur is als volgt:

[map]images/submenu.png
[map]css/stylesheet.css
[map]javascript/slider.js
index.html

Mijn bedoeling is om een uitschuifbaar submenu te maken. Met de background image "images/submenu.png".

Nadat ik de inline (css) opmaak had verplaatst naar mijn extern stijlblad, bleek mijn menu niet meer te werken. De inhoud en de background image zijn niet meer te zien op mijn webpagina.

Ik heb alle paden nagekeken, en die zouden goed moeten zijn...

Moet ik mijn onclick event misschien aanpassen? (onclick="slide('slidemenu', this);")

donderdag 9 december 2010 19:33

Acties:

mcDavid

Je kunt sowieso geen CSS aanpassen met Javascript. Wel DOM-styles.

Waarschijnlijk heb je gewoon iets verkeerd gedaan met het schuiven van code. Maar daar valt met zo'n karige openingspost natuurlijk geen zinnig woord over te zeggen. Als je eerst eens een testcase maakt kom je daar waarschijnlijk vanzelf achter.

donderdag 9 december 2010 19:45

Acties:

Verwijderd

Topicstarter

Zo ziet het er uit:

images/submenu.png

index.html

HTML:

<html>
    <head>
        <script type="text/javascript" src="javascript/slider.js"></script>
        <link rel="stylesheet" href="css/stylesheet.css" type="text/css" />
    </head>
    <body onload="slide('slidemenu', this);">
                <div id="left">
                
                  <div id="slidebtn"></div>
                  
                  <div id="slidemenu">
                    Content
                  </div>
                  
                </div>
    </body>
</html>

css/stylesheet.css

Cascading Stylesheet:

div#middle div#left {
    margin-top: 35px;
    position: relative;
    top: 0px;
    left: 0px;
    width: 217px;
    height: 278px;
}
div#middle div#left div#slidebtn {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0px;
    left: 0px;
    background: none;
    text-align: center;
    color: #FFFFFF;
}
div#middle div#left div#slidemenu {
    position: absolute;
    width: 0px;
    height: 0px;
    top: 0px;
    left: 20px;
    background: url('../images/submenu.png') no-repeat;
    overflow: hidden;
}

javascript/slider.js

JavaScript:

function slide(elementId, headerElement)
{
   var element = document.getElementById(elementId);
   if(element.up == false)
   {
      animate(elementId, 20, 0, 0, 0, 250, null);
      element.up = true;
      element.down = false;
      headerElement.innerHTML = '<img src="../images/topright.ico" alt="maximize" />';
   }
   else
   {
      animate(elementId, 20, 0, 215, 278, 300, null);
      element.down = true;
      element.up = false;
      headerElement.innerHTML = '<img src="../images/topleft.ico" alt="minimize" />';
   }
}

function animate(elementID, newLeft, newTop, newWidth, newHeight, time, callback)
{
  var el = document.getElementById(elementID);
  if(el == null)
    return;
 
  var cLeft = parseInt(el.style.left);
  var cTop = parseInt(el.style.top);
  var cWidth = parseInt(el.style.width);
  var cHeight = parseInt(el.style.height);
  
  var totalFrames = 1;
  if(time > 0)
    totalFrames = time/40;

  var fLeft = newLeft - cLeft;
  if(fLeft != 0)
    fLeft /= totalFrames;
  
  var fTop = newTop - cTop;
  if(fTop != 0)
    fTop /= totalFrames;
  
  var fWidth = newWidth - cWidth;
  if(fWidth != 0)
    fWidth /= totalFrames;
  
  var fHeight = newHeight - cHeight;
  if(fHeight != 0)
    fHeight /= totalFrames;
    
  doFrame(elementID, cLeft, newLeft, fLeft, cTop, newTop, fTop, 
      cWidth, newWidth, fWidth, cHeight, newHeight, fHeight, callback);
}

function doFrame(eID, cLeft, nLeft, fLeft, cTop, nTop, fTop, 
    cWidth, nWidth, fWidth, cHeight, nHeight, fHeight, callback)
{
  var el = document.getElementById(eID);
  if(el == null)
    return;

  cLeft = moveSingleVal(cLeft, nLeft, fLeft);
  cTop = moveSingleVal(cTop, nTop, fTop);
  cWidth = moveSingleVal(cWidth, nWidth, fWidth);
  cHeight = moveSingleVal(cHeight, nHeight, fHeight);

  el.style.left = Math.round(cLeft) + 'px';
  el.style.top = Math.round(cTop) + 'px';
  el.style.width = Math.round(cWidth) + 'px';
  el.style.height = Math.round(cHeight) + 'px';
  
  if(cLeft == nLeft && cTop == nTop && cHeight == nHeight 
    && cWidth == nWidth)
  {
    if(callback != null)
      callback();
    return;
  }
    
  setTimeout( 'doFrame("'+eID+'",'+cLeft+','+nLeft+','+fLeft+','+cTop+','
      +nTop+','+fTop+','+cWidth+','+nWidth+','+fWidth+','+cHeight+','
      +nHeight+','+fHeight+','+callback+')', 40);
}

function moveSingleVal(currentVal, finalVal, frameAmt)
{
  if(frameAmt == 0 || currentVal == finalVal)
    return finalVal;
  
  currentVal += frameAmt;
  if((frameAmt > 0 && currentVal >= finalVal) 
      || (frameAmt < 0 && currentVal <= finalVal))
  {
    return finalVal;
  }
  return currentVal;
}

Die javascript heb ik uiteraard niet zelf geschreven

maar het was dus enkel nodig om die eerste functie aan te passen

Ik hoop dat jullie eruit kunnen?

ps: die css opmaak stond dus eerst in de html als inline css. (style="......")

en die images/topleft.ico en topright.ico dienen als interface om op te klikken zodat het menu verschijnt/verdwijnt

donderdag 9 december 2010 19:51

Acties:

mcDavid

Verwijderd schreef op donderdag 09 december 2010 @ 19:45:
Zo ziet het er uit:

images/submenu.png
[snip]

Dat is geen testcase, dat is gewoon je complete code

Die javascript heb ik uiteraard niet zelf geschreven
maar het was dus enkel nodig om die eerste functie aan te passen

Ik hoop dat jullie eruit kunnen?

Dan vraag je het degene die dat script WEL gemaakt heeft? We zijn hier geen helpdesk voor andermans software

ps: die css opmaak stond dus eerst in de html als inline css. (style="......")

en die images/topleft.ico en topright.ico dienen als interface om op te klikken zodat het menu verschijnt/verdwijnt

Je gebruikt relatieve paden. Heb je die ook aangepast?

donderdag 9 december 2010 19:59

Acties:

Verwijderd

Topicstarter

Ok, maar het heeft dus gewoon met de paden te maken?

Ik zal proberen een bericht te sturen naar diegene die het gemaakt heeft.

donderdag 9 december 2010 20:38

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Verwijderd schreef op donderdag 09 december 2010 @ 19:59:
Ok, maar het heeft dus gewoon met de paden te maken?

Dat kun je zelf prima bepalen; geeft een pad een image/css/html terug of een 404? Lijkt me niet bepaald rocket science.

Verwijderd schreef op donderdag 09 december 2010 @ 19:59:
Ik zal proberen een bericht te sturen naar diegene die het gemaakt heeft.

In ieder geval doen we hier niet aan support op 3rd party code. Verder verwachten we een klein beetje basiskennis (wel zo handig; dat praat makkelijker) en wat meer eigen inspanning. En als je code post probeer dat dan te beperken tot relevante(!) code en kleed die een eventuele testcase uit tot de bare-essentials zodat we niet door meters lange code hoeven worstelen.

[ Voor 22% gewijzigd door RobIII op 09-12-2010 20:39 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij