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 1 of 2 12 LastLast
Results 1 to 15 of 26
  1. #1
    New Coder
    Join Date
    Sep 2010
    Location
    Bradford, West Yorkshire
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Dynamic content and JQuery tabs script not working

    Hello,

    I have posted in another section of the forum about this but I haven't got a reply so I thought I might have put it in the wrong section?

    I am having problems getting some javascript to work. I am new to javascript, ajax etc so I havent a clue why this isnt working

    The probem is I am trying to load an external html page into a DIV using the dynamic drive ajax content script and within the external page there are elements that use javascript so I am using the loadobjs function to try load them in, but the tabs.js file I am trying to load will not work. I have messed around with this so much I have completely confused myself and am willing to pay someone to help me out with this as I need it doing asap.

    The link to the test page I am talking about is http://www.hm-designs.co.uk/crossland2/solo.php

    and if you click on the top name in the left column it will load the page where the tabs section is. As you will see, it doesnt work.

    I am also wanting to try and get an ajax contact form in the expandable box above the tabs and also I would like fancybox on the images BUT i havent even attempted those yet as I cant even get this one working.

    Can anyone help me with this?

    Thank you, Helen

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Looks like your class selector isn't quite right here.

    Your html has:

    Code:
    <div class="tab-content">
    but the css is:

    Code:
    .tab_content {
        padding: 20px;
        font-size: 1em;
        color:#FFF;
    }
    and the jQuery also looks for tab_content.

    I think there's more to it than this, but that's a start.

  • Users who have thanked SB65 for this post:

    helenmarie123 (10-19-2010)

  • #3
    New Coder
    Join Date
    Sep 2010
    Location
    Bradford, West Yorkshire
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    hiya,

    thank you for your reply :-)

    I have been doing some changes over the last hour or so........ I have gone back to the basic scripts without the loading content message on the ajax content and I have managed to get the tabs script working again BUT if you navigate away from the page and then go back to the page the tabs break and dont work properly?

    I also want the loading message 'loading content .... please wait' to work but it seems to break the javascript tabs when I add the code in

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I'm not seeing tabs on your current live page.

  • Users who have thanked SB65 for this post:

    helenmarie123 (10-19-2010)

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    OK, the code below works for me on a local server (with repointed ajaxfiles). Mostly what I've done is tidy your javascript up with proper line terminations.
    At the moment your tabs are white text on a white background, as well.

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <title>Untitled Document</title>
    <link href="main.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="dropdown.css"/>
    <link href="fade.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    <!--
    document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>");
    
    function initImage() {
        imageId = 'thephoto';
        image = document.getElementById(imageId);
        setOpacity(image, 0);
        image.style.visibility = "visible";
        fadeIn(imageId,0);
    }
    function fadeIn(objId,opacity) {
        if (document.getElementById) {
            obj = document.getElementById(objId);
            if (opacity <= 100) {
                setOpacity(obj, opacity);
                opacity += 10;
                window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
            }
        }
    }
    function setOpacity(obj, opacity) {
        opacity = (opacity == 100)?99.999:opacity;
        // IE/Win
        obj.style.filter = "alpha(opacity:"+opacity+")";
        // Safari<1.2, Konqueror
        obj.style.KHTMLOpacity = opacity/100;
        // Older Mozilla and Firefox
        obj.style.MozOpacity = opacity/100;
        // Safari 1.2, newer Firefox and Mozilla, CSS3
        obj.style.opacity = opacity/100;
    }
    window.onload = function() {initImage()}
    // -->
    </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 bustcachevar=0;//bust potential caching of external pages after initial request? (1=yes, 0=no)
    var loadedobjects="";
    //var rootdomain="http://"+window.location.hostname
    var bustcacheparameter="";
    
    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)
        }
        document.getElementById(containerid).innerHTML='<img src="images/loading.gif" />&nbsp;<b>Loading Content. Please wait...</b>';
        if (bustcachevar) 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)){
            if (typeof ajaxcontent_loadtimer!="undefined") clearTimeout(ajaxcontent_loadtimer);
            ajaxcontent_loadtimer=setTimeout(function(){document.getElementById(containerid).innerHTML=page_request.responseText}, 2000);
        }
    }
    
    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>function toggleLayer( whichLayer )
    {
      var elem, vis;
      if( document.getElementById ) // this is the way the standards work
        elem = document.getElementById( whichLayer );
      else if( document.all ) // this is the way old msie versions work
          elem = document.all[whichLayer];
      else if( document.layers ) // this is the way nn4 works
        elem = document.layers[whichLayer];
      vis = elem.style;
      // if the style.display value is blank we try to figure it out here
      if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
        vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
      vis.display = (vis.display==''||vis.display=='block')?'none':'block';
    }</script>
    </head>
    
    <body><noscript><span style="background-color:#F00; font-family:Arial, sans-serif; font-weight: bold;font-size:24px; color:#FFF; letter-spacing:-2pt; text-align:center;">This website uses Javascript to function correctly. Please enable Javascript and then refresh or press F5 to reload the page</span></noscript><div id="container">
      <div id="logo"><a href="index.php"><img src="images/logo.png" alt="al crossland uk entertainment agency" /></a></div><div id="div2"></div><div class="menu"><ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Events & Functions</a>
    
            
        </li>
        <li><a href="#">Venues</a>
    
            
        </li><li class="current"><a href="#">Entertainment</a>
    
            <ul>
                <li><a href="#">Our Managed Artistes</a>
                    <ul>
                        <li><a href="solo.php">Solo Performers</a></li>
                        <li><a href="duo-trio.php">Duos and Trios</a></li>
    
                        <li><a href="live-bands.php">Live Bands</a></li>
                        
                    </ul>
                </li>
                <li><a href="comedy-acts.php">Comedy Acts</a></li>
                <li><a href="tribute-acts.php">Tribute Acts</a></li>
    
                <li><a href="after-dinner-speakers.php">After Dinner Speakers</a></li>
    
                <li><a href="speciality-entertainment-acts.php">Speciality Acts</a></li>
                <li><a href="disco-karaoke.php">Disco and Karaoke</a></li>
                <li><a href="childrens-entertainers.php">Childrens Entertainers</a></li>
            </ul>
        </li>
        <li><a href="contact.php">Contact Us</a></li>
    </ul></div>
    
      <div id="photoholder"><img src="images/live-ent.png" width="900" height="244" id="thephoto" /></div>
    <div id="content">
      <h1>Solo Performers&nbsp;&nbsp;&nbsp;<span style="font-size:11px; letter-spacing:normal; font-weight:normal">Artistes listed here are solely managed by us, we have access to thousands of acts from across the UK. Please contact us for more information</span></h1>
      <div class="leftcolumn"><ul><li><a href="javascript:ajaxpage('http://ajaxfiles/tara.htm','artistecolumn'); loadobjs('ajaxfiles/artiste.css', 'ajaxfiles/tabs.css','ajaxfiles/tabs.js')">Tara - Female Vocalist</a></li><li>Solo name 2</li><li>Solo name 3</li><li>Solo name 4</li><li>Solo name 5</li><li>Solo name 6</li><li>Solo name 7</li><li>Solo name 1</li><li>Solo name 2</li></ul></div><div id="artistecolumn">
    
      <h4>&lt; Click on an artiste name to view their profile</h4>
      </div></div></div>
    <div id="footercontainer"><div id="footer"><div class="postal">
    <h2>Postal Address</h2><p><span style="font-size:12px">Al Crossland Entertainments<br />16 Toronto Place<br />Chapel Allerton<br />Leeds<br />LS7 4LJ</span></p>
    <p>Telephone:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+44&nbsp;&nbsp;(0113) 2940824</p>
    
    <p>Telephone:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+44 &nbsp;(0113) 2940825</p>
    <p>Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:info@alcrosslandentertainments.co.uk">info@alcrosslandentertainments.co.uk</a></p></div><div class="message">
      <h2>Send us a message</h2>
      <img src="contact-footer.png" width="481" height="189" /> </div>
    
    </div><div id="bottom"><img class="bottomimg" src="images/aa-logo.png" width="20" height="19" alt="al crossland entertainments is a registered member of the agents association" />
    <p>Registered member of the Agents Association UK - &nbsp;&nbsp;<a href="index.php">Al Crossland</a><script language="JavaScript" type="text/javascript"> 
     
     today=new Date(); 
     
     y0=today.getFullYear(); 
    
    </script> 
    Copyright &copy; 2010 - <script language="JavaScript" type="text/ 
    javascript">document.write(y0);</script> &nbsp;(0113) 2940825 &nbsp;- &nbsp;(0113) 2940824 &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp; <a href="links.php">Links</a> &nbsp;| &nbsp;<a href="sitemap.php">Sitemap</a> &nbsp;| &nbsp;<a href="privacy.php">Privacy Policy</a></p></div></div>
    
    </body>
    </html>
    Last edited by SB65; 10-18-2010 at 07:52 PM.

  • Users who have thanked SB65 for this post:

    helenmarie123 (10-19-2010)

  • #6
    New Coder
    Join Date
    Sep 2010
    Location
    Bradford, West Yorkshire
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    can you see them now?

    From my end the tabs work fine so long as you dont click on the Tara - female vocalist link again...... if you do then it breaks the tabs.

    Thank you so much for taking the time to reply to me, i really appreciate it

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    No, still can't see on your live page. What I'm assuming is tabs is the purple box arrangement, with Audio, Video, Images in line at the top - is that right?

  • #8
    New Coder
    Join Date
    Sep 2010
    Location
    Bradford, West Yorkshire
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    yeah thats right, it worked alright here for the first few times but its broken now

    Is it something to do with the tabs.js file not being applied everytime?

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I think it's just your javascript line syntax - per my post#5 above - have a look here for an amended page. Is that doing what you want?

  • #10
    New Coder
    Join Date
    Sep 2010
    Location
    Bradford, West Yorkshire
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    yes it is,

    what parts of the code did you change?

  • #11
    New Coder
    Join Date
    Sep 2010
    Location
    Bradford, West Yorkshire
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I have used the code you posted, it works the first time but then it breaks when you click away from the page and then go back to the same page. I think it must have something to do with the cache

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    what parts of the code did you change?
    All I did was add line endings throughout.

    it breaks when you click away from the page and then go back to the same page
    I cannot recreate this. Are you saying that if you use the page, click the artist page to load the ajax page, then navigate to another page and then back to the page and click again the ajax stuff won't load?

  • #13
    New Coder
    Join Date
    Sep 2010
    Location
    Bradford, West Yorkshire
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    The ajax page will load but the tabs wont work, they just display stacked on top of one another and the clickable tab headers dont work. I have tested it in Mozilla 3.6, IE 8, Chrome and Safari and it does it in them all.


  • #14
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    OK, if I do the following on your link, that doesn't happen. To avoid confusion, I am navigating to that link, clicking to load the ajax content. This loads OK, tabs OK. I'm then navigating to Google. Then reentering the url, and loading the ajax stuff again. Tabs still OK.

    Is that the same as what you are doing?

  • #15
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Right, you're saying the tabs don't work when you click on them, rather than they don't display, right. I do see that. Hmm...


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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