Skin / Theme-Swap

872
Michael

Die Theme-Swap-Funktionalität wird über ein besseres Aussehen <div>am oberen Rand der Seite ausgeführt. Im Moment wird dies jedoch nur auf die Schaltfläche geworfen. Die Designvorgabe sollte durch die Aktualisierung von Seiten durch die Verwendung von Cookies erhalten bleiben.

Ich werde fünf verschiedene Themen in jeweils zwei verschiedenen Größen erstellen, da die Site sehr schlecht ist 800x600und immer noch ziemlich schlecht ist 1024x768.

Sag mir, ob es kaputt geht oder einfach nicht funktioniert. Ich habe einen Fehler entdeckt, der einmal in einem blauen Mond vorkommt, aber ich denke, das liegt daran, dass der Browser parallel arbeitet und ein Skript dem anderen zu weit voraus ist. Ich muss es genauer erforschen, aber ich denke, es ist jetzt gut genug, um Meinungen einzuholen.

Die Seite wird schließlich <noscript>für diejenigen angezeigt, für die JavaScript nicht aktiviert ist. Im Moment wird jedoch nur die folgende Meldung angezeigt:

Bitte schalten Sie JavaScript ein!

Wie es funktioniert:

  1. Nicht-JavaScript-Seite wird mit angezeigt <noscript>
  2. Wenn JavaScript aktiviert ist, werden die Design-Einstellungen von Cookies geladen.
  3. JavaScript wendet dann das bevorzugte Thema über AJAX an und ruft das entsprechende Thema ( skin[x].html) und den Inhalt der Seite ( [page_name.html]) ab.

Der Code ist noch nicht perfekt, und ich muss auf jeden Fall die Verwendung des Bildes einer anderen Person als Hintergrund für die zweite Haut entfernen, aber es ist fast fertig. Etwa die Hälfte des Codes befasst sich lediglich mit der Neupositionierung der Elemente, wenn die Größe des Fensters geändert wird. Der Kürze halber wird etwas Code nicht angezeigt. Ich entschuldige mich für die Länge.

index.html:

<script type="text/javascript"> 
window.onresize = function() { setContentPositions(); setJSMenuPositions(); }
$('html').addClass('js');
</script> 



<script type="text/javascript"> 
$().ready(function() {

getThemeInfo();

AJAX_LoadResponseIntoElement("mybody", "skin1.txt", function() {
  AJAX_LoadResponseIntoElement("contentdiv", "index.txt", initPage);
  });


if (themeSelect>1) { themeSwapNoInc();}

});
</script> 

funcs.js:

function getThemeInfo()
{
themeSelect=checkCookie();
}

function themeSwap()
{
  themeSelect++;
  if (themeSelect>2 || themeSelect<1) {themeSelect=1;}
  $('html').addClass('js');

  switch(themeSelect) {
    case 1:
      AJAX_LoadResponseIntoElement("mybody", "skin1.txt", function() {
        AJAX_LoadResponseIntoElement("contentdiv", "index.txt", initPage);
        });

      document.body.style.backgroundImage="url(http://www.solarcoordinates.com/images/bg2b.png)";
      document.body.style.backgroundRepeat="repeat-x";

      break;

    case 2:
      AJAX_LoadResponseIntoElement("mybody", "skin2.txt", function() {
        AJAX_LoadResponseIntoElement("contentdiv", "index.txt", initPage);
        });

      document.body.style.backgroundImage="url(http://www.constantcollide.com/wp-content/themes/killerbrown/images/texture.jpg)";
      document.body.style.backgroundRepeat="repeat";

      break;
  }

  setCookie("themeSelection",themeSelect,365);

}



function themeSwapNoInc()
{  
  themeSelect--;
  themeSwap();
}



function initPage()
{
    $('#vertnav .kwicks').kwicks({
        defaultKwick:0,
        max : 205,
        spacing : 3,
        isVertical : true
    });

setContentPositions();
replaceCSSMenu();
showContainer();
setJSMenuPositions();

}



function showContainer()
{
    $('html').removeClass('js');
}


function AJAX_LoadResponseIntoElement (elementId, fetchFileName, cfunc) {
  var XMLHRObj;
  if (window.XMLHttpRequest) { XMLHRObj=new XMLHttpRequest(); }
    else { XMLHRObj=new ActiveXObject("Microsoft.XMLHTTP"); }

  XMLHRObj.onreadystatechange=function()
    {
    if (XMLHRObj.readyState==4 && XMLHRObj.status==200)
      {
      document.getElementById(elementId).innerHTML=XMLHRObj.responseText;
      cfunc();
      }
    }
  XMLHRObj.open("GET",fetchFileName,true);
  XMLHRObj.send();
}


function findLeft(obj) {
  var curleft = 0;

  if (obj.offsetParent) { do {curleft += obj.offsetLeft;} while (obj = obj.offsetParent);} 
  else { curleft += obj.offsetLeft; }

  return curleft;
}


function findTop(obj) {
   var curtop = 0;

  if (obj.offsetParent) { do {curtop += obj.offsetTop;} while (obj = obj.offsetParent);}
  else { curtop += obj.offsetTop; }

  return curtop;
}


function findmyparent(e) {
    var srcElement = e.srcElement ? e.srcElement : e.target;

    if (srcElement.className.search("jsmenu")==-1 && srcElement.className.search("kwick")==-1 && srcElement.className!="vertnav" && srcElement.className!="active") 
    { 
        document.getElementById("jsmenu" + lastindex).style.display="none";
        submenuvisible=false;
    } 
}


function getContentHeight() { return window.innerHeight; }

function getContentWidth() { return window.innerWidth; }

function setContentPositions() {


  var DOMheight = getContentHeight()? getContentHeight(): window.document.body.parentElement.clientHeight;
  var DOMwidth = getContentWidth()? getContentWidth(): window.document.body.parentElement.clientWidth;

  var y_lbound, x_lbound, x_ubound;
  var container_ymod, container_ymin;
  var container_xmod, container_xmax, container_xmin;
  var content_xmod, content_xmax, content_xmin;


switch (themeSelect) {

  case 1:

    y_lbound=727;
    x_lbound=910;
    x_ubound=1400;

    container_ymod=-240;
    container_ymin=487;

    container_xmod=-240;
    container_xmax=1160;
    container_xmin=670;

    content_xmod=-490;
    content_xmax=910;
    content_xmin=420;


    break;

  case 2:

    y_lbound=710;
    x_lbound=910;
    x_ubound=1400;

    container_ymod=-178;
    container_ymin=532;

    container_xmod=-300;
    container_xmax=1100;
    container_xmin=610;

    content_xmod=-350;
    content_xmax=1050;
    content_xmin=560;



    break;

  default:


} // end switch



    if (DOMheight > y_lbound) {  document.getElementById('containerdiv').style.height = (DOMheight+container_ymod) + 'px';   }
      else { document.getElementById('containerdiv').style.height = container_ymin + 'px'; }

    if (DOMwidth > x_lbound) {
        if (DOMwidth < x_ubound) {
            document.getElementById('containerdiv').style.width = (DOMwidth+container_xmod) + 'px';
            document.getElementById('contentdiv').style.width = (DOMwidth+content_xmod) + 'px'; 
        } else {
            document.getElementById('containerdiv').style.width = container_xmax +'px';
            document.getElementById('contentdiv').style.width = content_xmax + 'px'; 
        }
    } else {
        document.getElementById('containerdiv').style.width = container_xmin + 'px';
        document.getElementById('contentdiv').style.width = content_xmin + 'px'; 
    }



}

jsmenucontent.js:

function setJSMenuPositions()
{
    var popupleft = findLeft(document.getElementById('kwick1'))+168;
    var popuptop = findTop(document.getElementById('kwick1'));

    document.getElementById('jsmenu0').style.left = popupleft + "px";
    document.getElementById('jsmenu0').style.top = popuptop -12+ "px";

    document.getElementById('jsmenu1').style.left = popupleft + "px";
    document.getElementById('jsmenu1').style.top = popuptop +33+ "px";

    document.getElementById('jsmenu2').style.left = popupleft + "px";
    document.getElementById('jsmenu2').style.top = popuptop +77+ "px";

}
Antworten
3
Sie verwenden jQuery für das DOM, verwenden es dann jedoch nicht, um Ajax in einer Art Browser zu behandeln, die mit Ihrem Browser kompatibel ist? Ich würde `$ .ajax` verwenden, anstatt XMLHRObj manuell zu verwirren. Wenn Sie sich die Mühe machen, jQuery zu verwenden, können Sie es auch mehr verwenden. Es macht dein Leben leichter. Raynos vor 9 Jahren 4
@Micheal - Es gibt mehrere Diskussionen darüber in Meta. : P. Zusätzlich zu dem, was Raynos erwähnt hat, sollten Sie ein jQuery-Plugin (http://www.electrictoolbox.com/jquery-cookies/) zur Handhabung von Cookies ausprobieren. Andrew vor 9 Jahren 1
Haben Sie http://www.alistapart.com/articles/bodyswitchers/ gelesen? Ohne zu viele Details zu machen, ist Ihre Methode überentwickelt, Sie sollten jQuery * ordnungsgemäß * verwenden (und aktualisieren - die Version, die Sie verwenden, liegt 3 Hauptversionen hinter sich!) Und Sie sollten versuchen, keinen Code aus W3Schools zu kopieren. Yi Jiang vor 9 Jahren 0
Nein, ich habe den Artikel nicht gelesen ... danke für den Link. Ich gehe davon aus, dass Sie mit "über-technisch" meinen, dass ich zu viel selbst getan habe und mehr jQuery hätte verwenden können. Ich denke, ich werde nicht wissen, was Sie meinen, bis ich den Artikel gelesen habe ... den ich später heute Abend machen werde. Michael vor 9 Jahren 0
RE W3S: Ich lese ihre Artikel gelegentlich (zusammen mit anderen) als Referenz, aber mit Ausnahme der AJAX-Abruffunktion hat hier, soweit ich weiß, kein Code etwas mit jedem auf W3S gefundenen Code gemeinsam. Die AJAX-Abruffunktion weist geringfügige Unterschiede auf, ähnelt jedoch dem von W3S. Es ähnelt auch fast jeder AJAX-Abruffunktion, die jemals im Internet veröffentlicht wurde (die ich jedenfalls gesehen habe ... Ich habe mir ungefähr 30 Beispiele angesehen), daher sehe ich das nicht als Problem (?). Michael vor 9 Jahren 0
Nur eine kurze Anmerkung, Sie sollten window "unprognostizieren". Unresize, da viele Browser das Ereignis jeden Tick der Größenänderung aufrufen (während der Benutzer zieht), was dazu führen kann, dass Ihr Event-Handler Hunderte / Tausende von Malen als Benutzer auslöst zieht den Rand des Fensters. Referenz: http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/ und http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/ TheXenocide vor 9 Jahren 0

1 Antwort auf die Frage

6
Hailwood

Dies kann nur ich bin Picking.

Aber mit diesem Ansatz sehe ich sehr unordentlich. Wenn Sie sich entscheiden, 40 Themen zu haben. Das ist eine Menge von Javascript! und vor allem, wenn Sie entscheiden, dass Sie Dinge wie Mobile oder Tablet unterstützen.

Sie ändern das Aussehen Ihrer Seite mit Javascript. Es wäre meiner Meinung nach besser, wenn Sie:

<link rel="stylesheet" href="..\css\themes\th1.css" id="themesheet" type="text/css" /> 

in deiner html haben

<select id="theme">
  <option value="th1" selected="selected">Theme One</option>
  <option value="th2">Theme Two</option>
</select>

dann in deinem javascript haben

$('#theme').change(function(){
    var link = '..\css\themes\{name}.css';
    link = link.replace('{name}', $(this).val());
    $('#themesheet').attr('href', link);   
});

Auf diese Weise ändern Sie nur das CSS-Blatt, anstatt in den Stiländerungen für jedes Thema zu codieren.

Ich gehe davon aus, dass Sie sich auf Switch / Case-Abschnitte von themeSwap () beziehen. Ja, ich habe vor, das zu wiederholen, und ja, die Theme-Swaps werden über CSS-Ersetzungen durchgeführt. Wenn skin [x] .txt nicht bereits zu 100% CSS-gesteuert ist, wird dies geschehen, und dann werde ich die Funktion themeSwap () ändern, um über CSS-Swaps zu funktionieren: main.css wird in "skin1.css" geändert "und ein Wechsel zu skin [x] wird es durch" skin [x] .css "ersetzen. Und ja, ich plane auch einen Skin für mobile Geräte zu erstellen. Vielen Dank, dass Sie mich wissen lassen, dass jQuery dies tun kann. Ich bin neu bei JS und jQuery und weiß noch nicht, was alles mit jQuery für mich tun kann. Michael vor 9 Jahren 0