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.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    slideshow not working in ajax div

    Hello

    I've been struggling with an issue of a slide show loading into a div.
    I've tried a number of versions, and all seem to have the similar problems.

    First option tried:
    The page with the slideshow loads displays correctly in the div, the controls do not function.

    Second option tried:
    The page with the slideshow loads but only displays the images in the div, they appear stacked as if they have no styling and the controls do not appear.

    Could there be an issue will call back or paths issue?
    I thought of just having the slideshow appear on the actual page and having a second div to load the other content, but this would not work well as the user would have to navigate back to the original home page.

    Many thanks for any help on this.

    Code below


    First Option
    Here is the index source code:
    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" />
    <title>site</title>
    <link href='http://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/site.css" />
    <link rel="stylesheet" href="css/slide.css" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-slides.js"></script>
    <script type="text/javascript" src="js/ajax-load.js"></script>
    
    
    <!--SLIDE-ACROSS--->
    <script>
    $(document).ready(function() {
    	 $("#social").hide();
      $('#socbutton').click(function() {
        $(this).next().animate({width: 'toggle'});
      });
    });
    </script>
    
    
    </head>
    
    <body onLoad="loadPage('contentLayer',null,'pages/lookbook.html')">
    
    <div class="container">
    <div class="bar">
    <div class="innerbar">
      <p class="htext"><a href="#"> basket</a></p></div></div>
    
      <div class="header"><a href="#"><img src="images/black-noborder.png" alt="logo" name="" id="logo" /></a></div>
      <div class="navbar-top">
      
          <div id="navcontainer">
    <ul class="innerbar" id="navlist">
    <li id="lookbook"><a href="javascript:loadPage('contentLayer',null,'pages/lookbook.html')">lookbook</a></li>
    <li id="shopping"><a href="javascript:loadPage('contentLayer',null,'pages/shopping.html')">shopping</a></li>
    <li id="about"><a href="javascript:loadPage('contentLayer',null,'pages/about.html')">about costin</a></li>
    <li id="contact"><a href="#">contact</a></li>
    </ul>
    </div>
        <!-- end .header --></div>
        
    <iframe name="contentFRM" id="contentFRM" width="0" height="0" frameborder="0">
    </iframe>
      <div id="contentLayer" class="content">
    
        <!-- end .content --></div>
    <div id="socbutton"><img src="images/plus.png" /></div>
    <p id="social"><img src="images/social-sprites.png" usemap="#socialicons" border="0" />
      <map name="socialicons" id="socialicons">
        <area shape="rect" coords="0,0,35,39" href="facebook.com" target="_blank" alt="facebook" />
        <area shape="rect" coords="41,0,75,39" href="linkedin.com" target="_blank" alt="linkdin" />
        <area shape="rect" coords="84,0,120,42" href="twitter.com" target="_blank" alt="twitter" />
        <area shape="rect" coords="125,0,160,37" href="instagram.com" target="_blank" alt="instagram" />
      </map>
    </p>
    
      <div class="footer"> <div class="footbar"></div>   
        <div id="navcontainer">
    <ul class="innerbar" id="navlist">
    <li id="active"><a href="#" id="current">shopping</a></li>
    <li><a href="#">where to buy</a></li>
    <li><a href="#">Return and Exchange Policy</a></li>
    <li><a href="#">Privacy and Legal Policy</a></li>
    <li><a href="#">Mailing List</a></li>
    </ul>
    </div>
      <!-- end .footer --></div>
        
      <!-- end .container --></div>
    </body>
    </html>
    Here is the Ajax code
    Code:
    var nn4= (document.layers);
    var nn6= (document.getElementById && !document.all);
    var ie4= (document.all && !document.getElementById);
    var ie5= (document.all && document.getElementById);
    
    function loadPage(id,nestref,url) {
    // change the 550 value to make the layer wider or smaller
    content_width           = 550;
    if (nn4) {
    var lyr = (nestref)? eval('document.'+nestref+'.document.'+id) : document.layers[id]
    lyr.load(url,content_width)
    }
    
    
    
    else if(ie4) parent.contentFRM.location = url;
    
    else if(ie5 || nn6) document.getElementById('contentFRM').src = url;
    }
    
    function showPage(id) {
    if (ie4) {
    document.all[id].innerHTML = parent.contentFRM.document.body.innerHTML;
    }
    
    else if(nn6 || ie5) { 
    document.getElementById(id).innerHTML = window.frames['contentFRM'].document.getElementById('theBody').innerHTML;
    }
    }
    Here is the Slider code
    Code:
    $(document).ready(function(){
      var currentPosition = 0;
      var slideWidth = 530;
      var slides = $('.slide');
      var numberOfSlides = slides.length;
    
      // Remove scrollbar in JS
      $('#slidesContainer').css('overflow', 'hidden');
    
      // Wrap all .slides with #slideInner div
      slides
        .wrapAll('<div id="slideInner"></div>')
        // Float left to display horizontally, readjust .slides width
    	.css({
          'float' : 'left',
          'width' : slideWidth
        });
    
      // Set #slideInner width equal to total width of all slides
      $('#slideInner').css('width', slideWidth * numberOfSlides);
    
      // Insert controls in the DOM
      $('#slideshow')
        .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
        .append('<span class="control" id="rightControl">Clicking moves right</span>');
    
      // Hide left arrow control on first load
      manageControls(currentPosition);
    
      // Create event listeners for .controls clicks
      $('.control')
        .bind('click', function(){
        // Determine new position
    	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
        
    	// Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
          'marginLeft' : slideWidth*(-currentPosition)
        });
      });
    
      // manageControls: Hides and Shows controls depending on currentPosition
      function manageControls(position){
        // Hide left arrow if position is first slide
    	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    	// Hide right arrow if position is last slide
        if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
      }	
    });

    Second option:

    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" />
    <title>site</title>
    <link rel="stylesheet" type="text/css" href="css/site.css" />
    <link rel="stylesheet" type="text/css" href="css/slide.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/jquery-slides.js"></script>
    
    <!--SLIDE-ACROSS--->
    <script>
    $(document).ready(function() {
    	 $("#social").hide();
      $('#socbutton').click(function() {
        $(this).next().animate({width: 'toggle'});
      });
    });
    </script>
    
    <script>
    lookbook(document).ready(function() {
    
        //Load the slideshow page       
        lookbook("#pageContent").load("pages/page_1.html", function () {
            // as soon as the ajax content is loaded, start the slideshow:
            lookbook(this).s3Slider({timeOut:5000});
        });
    
    });
    </script>
    
    </head>
    
    <body>
    
    <div class="container">
    <div class="bar">
    <div class="innerbar">
      <p class="htext"><a href="#"> basket</a></p></div></div>
    
      <div class="header"><a href="#"><img src="images/black-noborder.png" alt="logo" name="" id="logo" /></a></div>
      <div class="navbar-top">
      
          <div id="navcontainer">
    <ul class="innerbar" id="navlist">
    <li id="lookbook"><a href="#page1">lookbook</a></li>
    <li id="shopping"><a href="#page2">shopping</a></li>
    <li id="about"><a href="#page3">about costin</a></li>
    <li id="contact"><a href="#">contact</a></li>
    </ul>
    </div>
        <!-- end .header --></div>
        
      <div id="pageContent" class="content"  onLoad="loadPage('null,'../pages/page_1.html')">
    
        <!-- end .content --></div>
    <div id="socbutton"><img src="images/plus.png" /></div>
    <p id="social"><img src="images/social-sprites.png" usemap="#socialicons" border="0" />
      <map name="socialicons" id="socialicons">
        <area shape="rect" coords="0,0,35,39" href="facebook.com" target="_blank" alt="facebook" />
        <area shape="rect" coords="41,0,75,39" href="linkedin.com" target="_blank" alt="linkdin" />
        <area shape="rect" coords="84,0,120,42" href="twitter.com" target="_blank" alt="twitter" />
        <area shape="rect" coords="125,0,160,37" href="instagram.com" target="_blank" alt="instagram" />
      </map>
    </p>
    
      <div class="footer"> <div class="footbar"></div>   
        <div id="navcontainer">
    <ul class="innerbar" id="navlist">
    <li id="active"><a href="#" id="current">shopping</a></li>
    <li><a href="#">where to buy</a></li>
    <li><a href="#">Return and Exchange Policy</a></li>
    <li><a href="#">Privacy and Legal Policy</a></li>
    <li><a href="#">Mailing List</a></li>
    </ul>
    </div>
      <!-- end .footer --></div>
        
      <!-- end .container --></div>
    </body>
    
    </html>

    JqueryAjax obviously the slide js is the same as option1

    Code:
    var default_content="";
    
    $(document).ready(function(){
    	
    	checkURL();
    	$('ul li a').click(function (e){
    
    			checkURL(this.hash);
    
    	});
    	
    	//filling in the default content
    	default_content = $('#pageContent').html();
    	
    	
    	setInterval("checkURL()",250);
    	
    });
    
    var lasturl="";
    
    function checkURL(hash)
    {
    	if(!hash) hash=window.location.hash;
    	
    	if(hash != lasturl)
    	{
    		lasturl=hash;
    		
    		// FIX - if we've used the history buttons to return to the homepage,
    		// fill the pageContent with the default_content
    		
    		if(hash=="")
    		$('#pageContent').html(default_content);
    		
    		else
    		loadPage(hash);
    	}
    }
    
    
    function loadPage(url)
    {
    	url=url.replace('#page','');
    	
    	$('#loading').css('visibility','visible');
    	
    	$.ajax({
    		type: "POST",
    		url: "load_page.php",
    		data: 'page='+url,
    		dataType: "html",
    		success: function(msg){
    			
    			if(parseInt(msg)!=0)
    			{
    				$('#pageContent').html(msg);
    				$('#loading').css('visibility','hidden');
    			}
    		}
    		
    	});
    
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,159
    Thanks
    23
    Thanked 599 Times in 598 Posts
    Why are you reinventing the wheel? There are 99 way to find a slideshow app.
    Google apps jack....
    or look here 20 of the Best jQuery Slideshow Plugins | Vandelay Design
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for this,

    I don't have issue with the slideshow, that works on it's own, just loses all it's interaction and in option 2 removes all formatting as well, when loaded into the ajax div.

    Can you help with this issue, if theres a nice elegant solution that you know of that would be great.

  • #4
    New Coder
    Join Date
    Jul 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Any help with this, or shall I just give up on this forum?

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,159
    Thanks
    23
    Thanked 599 Times in 598 Posts
    A place to start:
    'document.layers', in the ajax code, has been obsolete for billions and billions of years.
    The same for
    function showPage(id) {
    if (ie4) {
    document.all[id].innerHTML = parent.contentFRM.document.body.innerHTML;
    }
    So maybe looking into something more modern is called for rather then wasting time fixing old code.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, I'll hunt down some other solutions, as obviously I'm still using neolithic code and therefore beyond assistance from this forum.

    Many thanks and good bye.

  • #7
    New Coder
    Join Date
    Jul 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Update

    I've found a solution all on my own, how about that, don't need forums after all


  •  

    Posting Permissions

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