Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Dynamic Ajax Content - loadobjs

  1. #1
    Join Date
    Nov 2011
    Location
    the Netherlands
    Posts
    11
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default Dynamic Ajax Content - loadobjs

    1) Script Title: Dynamic Ajax Content

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

    3) Describe problem:

    Hi!

    I am new to dynamic drive en fairly new to javascript. I would really appreciate your help on the following.

    I have just used the example from the Dynamic Ajax Content tutorial and added my own .htm file which is called externalmagic.htm

    I want to use magiczoom.css and magiczoom.js in externalmagic.htm

    I've learned from the tutorial, that I should load them separately using loadobjs

    This is what I use to try load externalmagic.htm including "magiczoom.css" and "magiczoom.js" :

    [CODE]<div style="margin-top: 2em">Load CSS & JS files</div>
    <a href="javascript:ajaxpage('ajaxfiles/externalmagic.htm', 'rightcolumn');loadobjs('ajaxfiles/magiczoom.css', 'ajaxfiles/magiczoom.js');">Load "magiczoom.css" and "magiczoom.js"</a>
    </div>[ICODE]

    The html loads fine, but magiczoom isn't working. For sure I miss something, but I don't have a clue where to look for it.

    Thanks in advance!

    Kind Regards,

    Robert

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's not how loadobjs works. It's really rather useless. You could get the same result simply by putting the scripts and styles in the head of the 'top' page.

    The problem is that magiczoom.js executes when the page's code is first parsed by the browser (domload, or domready, whatever you want to call it, like onload - just a little faster). But since you're using AJAX to import the content, it arrives after that. It's too late.

    With a script where the code can be clearly read you can usually just put the initialization for the script (usually just a few lines or less for a typical script) in the loadpage function of Ajax Content (additions red and green):

    Code:
    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
    //code for initialization goes here
    }
    }
    Sometimes a test or two should be performed to make sure it's OK to run the init at that point, and/or something might need to be done to remove a previously initialized instance, or to skip portions of the initialization if they've already been performed and need not/should not be duplicated.

    But since Magic Zoom is commercial and its code is obfuscated, I'm not sure what initialization code and tests to put there or what you can do to find out other than contact Magic Zoom support.

    There is a similar Dynamic Drive Script:

    http://www.dynamicdrive.com/dynamici...uredzoomer.htm

    It would be easier to get it to work with AJAX because its code is written out more or less plainly. But it's not rated for mobile devices like Magic Zoom is. How important is that to you? Mobile devices have their own innate ways of intuitively zooming in on images. Perhaps they could simply be served the images.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    robertvanroon (11-05-2011)

  4. #3
    Join Date
    Nov 2011
    Location
    the Netherlands
    Posts
    11
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    John,

    Thanks for your reply! I am at work now and will take a closer look at your solution when I am at home.

    I've taken a quick peek at the Dynamic Drive Zoom Script. It really looks good!

    One thing I miss is Innerzoom, is it possible to implement it by changing the coordinates where the magnify window should appear?

    Really great that you gave me such an extensive answer!

    (the mobile functions are not that important at this moment, your suggestion of plain images is a good solution.)

    Robert

  5. #4
    Join Date
    Nov 2011
    Location
    London, UK
    Posts
    1
    Thanks
    0
    Thanked 2 Times in 1 Post

    Default Dynamic Ajax content with Magic Zoom

    To use Magic Zoom, you should call MagicZoom.refresh() once your Ajax request has completed and the HTML content has changed. That code will start the Magic Zoom initialization.

    Explanation and examples here:

    http://www.magictoolbox.com/magiczoom/integration/#api

    Inner zoom is activated like so:

    Code:
    <a href="big.jpg" class="MagicZoom" rel="zoom-position: inner"><img src="small.jpg"/></a>

  6. The Following 2 Users Say Thank You to magictoolbox For This Useful Post:

    jscheuer1 (11-06-2011),robertvanroon (11-05-2011)

  7. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Cool. If that will initialize imported content, then using the Dynamic Ajax Content script we could simply forget about loadobjs. Put the tags for magiczoom.css and magiczoom.js on the 'top' page, and in the loadpage function of Ajax Content (additions highlighted):

    Code:
    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
    //code for initialization goes here:
    MagicZoom.refresh();
    }
    }
    We might want or need to do a MagicZoom.stop() first:

    Code:
    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
    //code for initialization goes here:
    MagicZoom.stop();
    MagicZoom.refresh();
    }
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    robertvanroon (11-05-2011)

  9. #6
    Join Date
    Nov 2011
    Location
    the Netherlands
    Posts
    11
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    Hi John and Igor (I think),

    I've tried your suggestions, but it doesn't seem to work until now.

    If you want to take a look at what I' ve at this moment over here

    Thanks for your help so far and great that Magictoolbox has joined!

    Robert

  10. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Did you try it without MagicZoom.stop();? Because that's throwing an error. Testing in IE and Opera seems to indicate that getting rid of that will fix it. But if doing it without MagicZoom.stop(); isn't working try:

    Code:
    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
    //code for initialization goes here:
    setTimeout(function(){MagicZoom.refresh();}, 1000);
    }
    }
    If that works, try gradually reducing the 1000 by half. You may even be able to use 0 there. Even a 0 timeout can give enough of a delay in certain situations.

    But I think just getting rid of MagicZoom.stop(): will fix it.
    Last edited by jscheuer1; 11-05-2011 at 12:00 PM. Reason: did more testing
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. The Following User Says Thank You to jscheuer1 For This Useful Post:

    robertvanroon (11-05-2011)

  12. #8
    Join Date
    Nov 2011
    Location
    the Netherlands
    Posts
    11
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    Hi John

    (and I thought I had tested that!)

    Works!

    Great!

    You are right setTimeout(function(){MagicZoom.refresh();}, 1000); wasn't necessary.

    Removal of MagicZoom.stop(); did it!

    Thanks very much for learning me how this works! Still learning every day!

    Robert

  13. #9
    Join Date
    Nov 2011
    Location
    the Netherlands
    Posts
    11
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    Hi John and everyone who's reading this on DD,

    I really understand what the essence is, why javascripts don't run without extra effort when using Ajax content. (because they are executed on loading)

    I've been practicing a bit, but with not too much result

    I've made myself a very simple javascript, that just says the right thing according to the time of the day.

    I cannot get it right, done everything I've learned so far.

    Could you take a look and help me understand things better?

    Take a look over here

    Thanks in advance!

    Robert

  14. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Although it works when used without AJAX and while the page is loading, that's not very good javascript. That's almost a separate issue, except that it impacts your question to a degree.

    I used this ajaxfiles/hHello.js file (not how I would write it, just made serviceable for these purposes):

    Code:
    function getgreeting(){
    	var dDay = new Date()
    	var nHours = dDay.getHours()
    	if ((nHours <12 ) && (nHours >=6)){
    	var hHello = ("Goodmorning !") }
    	if ((nHours >=12) && (nHours <18)) {
    	var hHello = ("Goodafternoon !") }
    	if ((nHours >=18) && (nHours <24)) {
    	var hHello = ("Goodevening !") }
    	if ((nHours >=0) && (nHours <6)){
    	var hHello = ("Goodnight !") }
    	return hHello;
    }
    and this and only this in my ajaxfiles/hello.htm page (which is how external pages should look, no extraneous tags other than a single containing div):

    HTML Code:
    <div>
    <div id="externalhello">Hello I say: </div>
    </div>
    On the top page I put this (addition highlighted):

    Code:
    <!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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Ajax Rotating Includes Script</title>
    <script type="text/javascript" src="ajaxfiles/hHello.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  . . .
    And my link on that page is:

    HTML Code:
    <a href="javascript:ajaxpage('ajaxfiles/hello.htm', 'rightcolumn');">Hello</a>
    Finally, in my loadpage function:

    Code:
    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
    if(document.getElementById('externalhello'))
    {
    	document.getElementById('externalhello').firstChild.nodeValue += getgreeting();
    }
    }
    }
    By no means ideal, but certainly workable and illustrates in a basic sort of way the sort of thing that's generally done in such situations.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  15. The Following User Says Thank You to jscheuer1 For This Useful Post:

    robertvanroon (11-12-2011)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •