Results 1 to 9 of 9

Thread: Ajax Tabs content and LightWindow

  1. #1
    Join Date
    Feb 2008
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Ajax Tabs content and LightWindow

    Ajax Tabs content

    http://www.dynamicdrive.com/dynamici...tent/index.htm

    By the way, I love this forum. Everyone is so helpful!

    Can I make one of the tabs launch an html page (embedded flash gallery-SimpleViewer) in LightWindow?
    LightWindow seems to be the only script of it's kind that works well with different types of content.

    Thanks!

  2. #2
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Ajaxtabs Lightbox Issues

    Hello, I was wondering if someone could give a hand here.
    I installed Ajaxtabs:
    http://www.dynamicdrive.com/dynamici...tent/index.htm

    And I'm trying to get Visual LightBox to work inside the tabs...
    http://visuallightbox.com/ this is a Lightbox2 script.

    I seems we are not getting the script call inside the tab.

    See example: http://youregiftbasket.com/mice-c-1_9.html

    I also have a 2nd issue with Ajaxtabs, how can I set auto height according to content when using #iframe mode?
    In ajaxtabs.js the onlything I could do is Set a single hight for all,
    There is a height:auto; in file but, this dose not work...
    I am using min-height: to set a single hieght for all....

    Any ideas out there?

    Thanks,
    Ronnie

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    You are using the iframe method of import. But there are no scripts on the page in the iframe that would enable visual lightbox to function there. Even if there were, the effect would probably be confined to the iframe. If you used the AJAX method of import, we might be able to devise a command that will allow all visual lightbox content to work, even that on imported pages:

    Code:
    jQuery(document).click(function(e){
    		var el = e.target;
    		if(el.rel && el.rel.indexOf('lightbox') === 0){
    			e.preventDefault();
    			Lightbox.start(el);
    		} else if (el.parentNode && el.parentNode.rel && el.parentNode.rel.indexOf('lightbox') === 0){
    			e.preventDefault();
    			Lightbox.start(el.parentNode);
    		}
    	});
    - John
    ________________________

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

  4. #4
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank you for the reply John,
    I have added the lightbox scripts to "Freatured tab"

    Code:
    <!-- Start VisualLightBox.com HEAD section -->
    <link rel="stylesheet" href="engine/css/vlightbox.css" type="text/css" />
    <style>#vlightbox a#vlb{display:none}</style>
    <link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
    <script src="engine/js/jquery.js" type="text/javascript"></script>
    <script src="engine/js/jquery.tools.min.js" type="text/javascript"></script>
    <script src="engine/js/visuallightbox.js" type="text/javascript"></script>
    <!-- End VisualLightBox.com HEAD section -->
    
    <script type="text/javascript">
    function showLightBox() 
    { Lightbox.start(document.getElementById('firstImage'));}
    </script>
    But I get a "Page is done but with errors,
    'jquery is undefined
    visuallightbox.js Line:14
    and lightbox still does'nt work.

    How exactly do I apply the code you posted?

    Thanks again for your reply John..

    Ronnie

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Where to begin? Both on the top page, and in the page in the iframe, these two script tags go nowhere (both are 404 not found):

    Code:
    <script src="engine/js/jquery.js" type="text/javascript"></script>
    <script src="engine/js/jquery.tools.min.js" type="text/javascript"></script>
    The:

    Code:
    <script src="engine/js/visuallightbox.js" type="text/javascript"></script>
    on the top page only works because you've included jQuery 1.3.2 in this script:

    Code:
    <script type="text/javascript" src="ddaccordion.js"></script>
    I don't know why you have an attempt at jquery.tools.min.js at all, as it appears to not be required, unless you've included it in another script and I just can't find it. Or it is required but the script that needs it just hasn't let us know about it's being missing yet.

    All of the scripts should be in the head of the page and in the proper order as required for their correct operation. That is unless a script is required to be elsewhere, in which case it should be included where required, also in the correct order as required. It's OK to include jQuery in that other script, as long as the order in which it falls works with other scripts requiring it, and its code is only linked to one time for any given page. But on the page in the iframe, it doesn't make much sense to use accordion, as it doesn't appear to be required on that page.

    Now, the code I gave would go on the top page after jQuery and visuallightbox, but will do no good unless the imported pages requiring visuallightbox are imported via AJAX, not iframe. Even then, a slight modification to it and/or to visuallightbox.js may also be needed.
    - John
    ________________________

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

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

    ronrrico (01-14-2010)

  7. #6
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hello John,
    One again, thank you for your reply!

    I fugured out the problem.

    The install instructions in http://visuallightbox.com/ were somewhat incorrect.

    The instructions say to add to the head:
    <script src="engine/js/jquery.js" type="text/javascript"></script>
    <script src="engine/js/jquery.tools.min.js" type="text/javascript"></script>

    But these files are not included in the generated script by the software, so we added them.
    Since we added:
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    We no longer get error in pags when we add script and lightbox is workig.

    Sorry but I also failed to tell you that for some reason my lightboxes never work when placing the script in the head, I always have to put it below the the actual lightboxes...I still can't figure that one out my self! I've done 3 fresh OSc sites and this has been the rule with all 3... I personaly think this is my servers doing, somehow , someway,

    Now that I got Lightbow going, it seens that my 2nd issue is key to complete perfect functionality. (((iframe Auto-Size))) Since I have set the height of the iframe to about hight:3000px to show complete 24 products if available, when a page has only 3 prods the iframe continues to be hight:3000px. As a result, when we click lightbox by defalt it popups in the middle of the page (((meaning))) the middle of hight:3000px, at about hight:1500px. See what I mean? http://youregiftbasket.com/mice-c-1_9.html see featurd tab and click on Zoom for lightbox.

    John,
    thank you so much for your time.
    We apreciate your input....

    Ronnie

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Resizing iframes is generally a process fraught with cross browser issues, unless you know what size.

    However, this would not be an issue if you used the AJAX approach I've been mentioning. If you decide to go that route, make sure to backup everything you have so far first.
    Last edited by jscheuer1; 01-13-2010 at 06:23 PM. Reason: accuracy
    - John
    ________________________

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

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

    ronrrico (01-14-2010)

  10. #8
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank you John,
    We backup our entire site on a daily basis in to a terrabite external drive.

    Can you recomend any iframe auto-height scripts for my for my situation?

    Thnaks again,
    Ronnie

  11. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    No. They can all be nightmares. I was looking at the page with an eye toward specifying the size of the iframe though. Like when you click on 'Featured' or other similar links to bring in a page via iframe, it could also specify the height for the iframe. But with the script you are using for that (AJAX Tabs), there doesn't appear to be any straightforward way to do that. The iframe could be set to 100% height, then we could just adjust the countrydivcontainer division's height. But even that would be a little tricky to do. Even if we could work it out, which I'm sure we could, our best guess at the height might not work well in all cases.

    Although it would be a bit of work to change to the AJAX method, I still think that's the way to go here. With an AJAX import the height of the division wouldn't need to be set, just it's width, perhaps not even that. As long as there's room enough for it to expand downwards, it will expand to the required height. The visuallightbox would be on the top page, so should act like it does currently for the non-iframe content.
    - John
    ________________________

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

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
  •