Avatar billede mikkelfp Nybegynder
14. januar 2009 - 16:42 Der er 9 kommentarer og
1 løsning

"Thickbox" virker ikke i "Dynamic Ajax Content"

Hej Eksperter

Jeg sidder og er igang med at lave mit portfolio. Jeg bruger "Thickbox" til at præsentere mit arbejde. På forsiden har jeg lagt et eksempel ind hvor "Thickbox" virker. Men når jeg så loader siden "Work" ind ved at trykke i menuen, virker "Thickbox" ikke. Jeg bruger "Dynamic Ajax Content" til at loade nye sider.

http://www.fangel-poulsen.dk

Jeg fandt ud af ved at kigge i et andet forum at følgende javascript skulle kunne klare det. Men det virker heller ikke for mig.

<script type="text/javascript">
function tb_init(){
    $(document).click(function(e){
    e = e || window.event;
    var el = e.target || e.scrElement || null;
    if(el && el.parentNode && !el.className || !/thickbox/.test(el.className))
    el = el.parentNode;
    if(!el || !el.className || !/thickbox/.test(el.className))
    return;
    var t = el.title || el.name || null;
    var a = el.href || el.alt;
    var g = el.rel || false;
    tb_show(t,a,g);
    el.blur();
    return false;
    });
};
</script>

Som I kan se virker det hele fint på forsiden. men så snart jeg skal have det til at virke på en loadet side virker det ikke. Tryk på det link der hedder station.

Håber der nogen som kan hjælpe en grafiker i nød.

/Mikkel
Avatar billede jokkejensen Novice
14. januar 2009 - 17:07 #1
Thickbox forudsætter et window.load, det er her, den erstatter den fysiske sti fra href attributten med et javascript link der generere en popup.

Når du med javascript (dynamic ajax content), henter indholdet fra en anden fil, afvikles window.load ikke.

Du skal altså afvikle tb_init() fra ThickBox Lib når og efter du har opdateret sidens indhold.

Vh
/J
Avatar billede mikkelfp Nybegynder
14. januar 2009 - 17:24 #2
Ja det er rigtigt.
Avatar billede jokkejensen Novice
14. januar 2009 - 17:31 #3
Ovenstående eksempel, det fix du lister, kræver jQuery for at køre.

Desuden skal tb_init() afvikles <body onload="tb_init()" />, ellers bliver det aldrig afviklet.

Dog ville jeg slette det totalt, og erstatte

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText;
tb_init('a.thickbox, area.thickbox, input.thickbox'); // tilføjer thickbox på det nye indhold.
}

Med:

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
Avatar billede jokkejensen Novice
14. januar 2009 - 17:32 #4
ups...

Jeg lavede mine ændringer i det jeg ville erstatte, altså linien :

tb_init('a.thickbox, area.thickbox, input.thickbox'); // tilføjer thickbox på det nye indhold.

Skal tilføjes efter
document.getElementById(containerid).innerHTML=page_request.responseText;

/J
Avatar billede mikkelfp Nybegynder
14. januar 2009 - 17:44 #5
hmm det virker stadig ikke...

jeg har sat dette ind i toppen af min <head>

<script type="text/javascript">
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText;
tb_init('a.thickbox, area.thickbox, input.thickbox'); // tilføjer thickbox på det nye indhold.
}
</script>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
Avatar billede jokkejensen Novice
14. januar 2009 - 18:00 #6
Du skal finde den eksisterende metode der hedder:

function loadpage(page_request, containerid){

og tilføje:

tb_init('a.thickbox, area.thickbox, input.thickbox'); // tilføjer thickbox på det nye indhold.

Til sidst.

Og ellers slette den tb_init() der lå der før.

/J
Avatar billede mikkelfp Nybegynder
14. januar 2009 - 23:00 #7
hej jokke

det køre stadig ikke.

I mit dynamic content script fandt jeg en function som nu ser sådan her ud:

function loadpage(page_request, containerid){
tb_init('a.thickbox, area.thickbox, input.thickbox'); // tilføjer thickbox på det nye indhold.
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

Plus jeg stadig har den kode som jeg rettede til at starte med...
Avatar billede mikkelfp Nybegynder
14. januar 2009 - 23:02 #8
Skriver lige hele min kode, så du kan se den... tak fordi du hjælper :-)

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>mikkel fangel poulsen</title>

<script type="text/javascript">
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText;
tb_init('a.thickbox, area.thickbox, input.thickbox'); // tilføjer thickbox på det nye indhold.
}
</script>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>

<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
tb_init('a.thickbox, area.thickbox, input.thickbox'); // tilføjer thickbox på det nye indhold.
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
    swfobject.registerObject("siteMenu", "10.0.0", "expressInstall.swf");
</script>

<script type="text/javascript">
ajaxpage('home.html', 'content') //load "test.htm" into "content" DIV
</script>

<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />

</head>

<body>

<div id="wrapper">
  <div id="top"><img class="logo" src="images/logo.png" />
        <div class="menu">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="255" height="79" id="siteMenu">
                <param name="movie" value="menu.swf" />
                <param name="allowscriptaccess" value="always" />
                <param name="allownetworking" value="all" />
                <param name="wmode" value="transparent" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="menu.swf" width="255" height="79">
                    <param name="allowscriptaccess" value="always" />
                    <param name="allownetworking" value="all" />
                    <param name="wmode" value="transparent" />
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflashplayer">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
  </div>
  <hr />
 
  <div id="content"></div>

</div>
<a href="http://www.station.dk?keepThis=true&TB_iframe=true&height=650&width=1050" title="Station.dk - i samarbejde med Mads Viktor Hartvig" class="thickbox"><div id="topic"><img src="images/workthumbs/station.jpg" /><p class="headline">WEB // station.dk</p></div></a>
</body>
</html>
Avatar billede mikkelfp Nybegynder
15. januar 2009 - 15:06 #9
1000 tak jokke. Jeg har fået det til at virke...
Avatar billede jokkejensen Novice
16. januar 2009 - 11:01 #10
Ja jeg fik vist vrøvlet lidt, men det er afgørende at

1: tb_init()
køres EFTER
2: document.getElementById(containerid).innerHTML=page_request.responseText

Det er 2 der ligger nyt indhold ud på din side, det er linie 1 der bearbejder det nye indhold, henter du ikke det nye indhold ind før du bearbejder det så vil bearbejdningen ikke være synlig.
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester