Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 26 of 26
  1. #16
    New Coder
    Join Date
    Sep 2010
    Location
    Bradford, West Yorkshire
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I get the problem when navigating within the site..... so if I hover over entertainment > managed acts > click solo performers then click to load the tara page the tabs will work fine, but if I click homepage or contact page etc then try and go back to solo > then load tara again the tabs wont work?

  2. #17
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I think what's happning is that when you click again on the Tara link, the javascript is loading before the html, so it runs OK, but there's no page there to apply the changes to, and so none of the tabs is hidden. EDIT: Pretty sure that's the problem.

    I can recreate the problem intermittently, which would also support this logic.

    Given that you're using jQuery anyway, we might as well load the page using jQuery. This seems to make the issue go away.

    Keep a copy, but then replace this:

    Code:
    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)
    }
    if (bustcachevar) //if bust caching of external page
    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    page_request.open('GET', url+bustcacheparameter, true)
    page_request.send(null)
    }
    
    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
    }
    with this:

    Code:
    function ajaxpage(url, containerid){
        $('#'+containerid).load(url);
    }
    It's a bit shorter...and give that a try. Having made this replacement on test code I cannot recreate the issue.
    Last edited by SB65; 10-19-2010 at 11:57 AM.

  3. Users who have thanked SB65 for this post:

    helenmarie123 (10-19-2010)

  4. #18
    New Coder
    Join Date
    Sep 2010
    Location
    Bradford, West Yorkshire
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    oh my word you are an absolute genius!

    Yes that has worked ........ the only issue is, once you have clicked tara and loaded the page in, if you click on tara again it breaks the tabs? I know you shouldnt really be clicking on the same name once you have clicked it but it does it if you double click instead of single click too which an average user might do as habit. Is there a way to disable double click or disable the tara link once it is clicked until another link is clicked?

    Do you have a donate section or a paypal address? I would like to donate something to you for helping me

  5. #19
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Genius, no, heh! I don't feel completely comfortable that that's nailed it, to be honest.

    I spotted the issue with immediately clicking again as well. The following would sort this. Amend your html on the main page to remove all the javascript, and assign an id to the parent li element:

    Code:
    <li id="tara" ><a href="#">Tara - Female Vocalist</a></li>
    Then add the following javascript (jQuery) to your main page:

    Code:
    $(document).ready(function(){
        $('#tara').click(function(){
            if (!$(this).hasClass('activepage')){
                $(this).siblings().removeClass('activepage');
                ajaxpage('ajaxfiles/tara.htm','artistecolumn');
                loadobjs('ajaxfiles/artiste.css', 'ajaxfiles/tabs.css','ajaxfiles/tabs.js');
                $(this).addClass('activepage');
            }
            return false;
            });
    })
    So here we're adding the click event for Tara when the page loads. We check to see if the clicked item already has a class of "activepage". If it doesn't then it hasn't been clicked immediately before, and we then remove the activepage class from any other li elements, load the ajax stuff and set the class on this element.

    This'll just stop the reload if it's already on the page. You could use the activepage class in your css to mark the menu item as well I suppose.

    You would need to create an entry like this for each link, but it takes all the javascript out of your html, which is a good thing.

    As a slight aside, I don't know what your other ajax page loads will be, but assuming that the pages are all in the same sort of layout, it might be easier to have some standard javascript and css that applies to all the loaded pages, and load this on the main page. Then all you have to load on each page is the html itself - which would obviate the issues you've experienced here. You could wrap all of your html for each artiste in a div and assign an id to that div for the artist, then apply any specific styling through css via #artistename p {etc etc}.Just a thought. Might be less painful and easier to keep up to date.
    Last edited by SB65; 10-19-2010 at 01:20 PM.

  6. Users who have thanked SB65 for this post:

    helenmarie123 (10-19-2010)

  7. #20
    New Coder
    Join Date
    Sep 2010
    Location
    Bradford, West Yorkshire
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Yes all the artist pages are going to be exactly the same layout apart from the text content and images.

    So what you are saying is link the artiste.css and tabs.js to the main page so they load when the main page loads and not when the artist name is clicked?

  8. #21
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Yes, because I can't see any value in loading them on the click, and if all the artiste.css files are the same you'll just load the same file over and over again. The downside in loading the css and script and them not using them is trivial compared to how much simpler your code can be. That makes things a whole lot easier. Perhaps I should have thought of this earlier...If you then have your html set up like this:

    Code:
    <ul id="artistelist">
    <li><a href="ajaxfiles/tara.htm">Tara - Female Vocalist</a></li>
    <li><a href="ajaxfiles/two.htm">Solo name 2</a></li>
    etc
    </ul>
    Then the following code will work for every link, pulling the href from the link:

    Code:
    $(document).ready(function(){
        $('#artistelist li').click(function(){
            if (!$(this).hasClass('activepage')){
                $('#artistecolumn').html('<img src="images/loading.gif" />&nbsp;<b>Loading Content. Please wait...</b>');
    
                $(this).siblings().removeClass('activepage');
                $('#artistecolumn').load($(this).children().first().attr("href"),function(){
                    $(".tab_content").hide(); //Hide all content
                    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
                    $(".tab_content:first").show(); //Show first tab content
                
                    //On Click Event
                    $("ul.tabs li").click(function() {
                
                        $("ul.tabs li").removeClass("active"); //Remove any "active" class
                        $(this).addClass("active"); //Add "active" class to selected tab
                        $(".tab_content").hide(); //Hide all tab content
                
                        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
                        $(activeTab).fadeIn(); //Fade in the active ID content
                        return false;
                    });
                });
                $(this).addClass('activepage');
            }
            return false;
            });
    })
    So, on a click on any li in the artistelist ul, we check the class to see if it's already loaded as before, and if it hasn't we throw up the loading gif (which I think I lost somewhere in this), load the page by reading the href within the li, and wait till this is done and run the code that was in tabs.js - which is no longer required.

  9. Users who have thanked SB65 for this post:

    helenmarie123 (10-19-2010)

  10. #22
    New Coder
    Join Date
    Sep 2010
    Location
    Bradford, West Yorkshire
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thank you Thank you thank you thank you thank you

    I tried posting a massive animated thank you but it didnt work hahaha

  11. #23
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You're welcome. I'm still learning jQuery and it does make it very easy to do otherwise quite complex things.

  12. #24
    New Coder
    Join Date
    Sep 2010
    Location
    Bradford, West Yorkshire
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    hello, I have discovered it wont work in internet explorer.... i dont know if this is just an error at my end or not though?

    edit* Ignore me ............... it was an error with my IE browser ............ haha . Sorry about that
    Last edited by helenmarie123; 10-21-2010 at 11:21 AM.

  13. #25
    New Coder
    Join Date
    Sep 2010
    Location
    Bradford, West Yorkshire
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    sorry to be a pain

    Would I follow the same principle to have fancybox working on the external page?

    I want the enquire about this act link to open the enquire.php form using the iframe fancybox and also the images in the image tab to open using fancybox. I have tried inserting the code directly into the head of the external page but that didnt work and I have also tried putting the links to the fancybox scripts and css into the head of the main page but that didnt work either, when I clicked the enquire about this act link it just opened the page in another tab, so fancybox wasnt activating at all.

  14. #26
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You are instantiating fancybox when the page loads - but at this point the element to which you are applying fancybox is not in the DOM because it hasn't loaded yet via your AJAX call, so nothing works.

    Here, I think, the easiest solution would be to include the fancybox set up in the callback from the jQuery load().


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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