Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Loading a new page with sliding animation (Ajax?)


Go to End


10 Posts   9433 Views

Avatar
iraira88

Community Member, 19 Posts

28 August 2013 at 12:18am

Hi,

I'm working with SilverStripe to build up a new website for a client and now I have the following problem:

Each page (and the children of these pages) will have a specific background image and I want that theses background images slide to the side when a new page is loaded instead of loading the whole page as usual (here you can see an example of what I mean: http:// www.thenomadhotel.com/). I guess I have to do that with Ajax or is there a better solution? Since I'm not so familiar with Ajax, my big question is: How do I work with Ajax in SilverStripe? Can anyone help me with this issue? I'm not the super-programmer but a fast learner, so any help would be appreciated! :)

Avatar
iraira88

Community Member, 19 Posts

3 September 2013 at 4:18am

Edited: 03/09/2013 4:29am

Hi everyone,

I get some hints how to start this whole idea (you can read it here: http://stackoverflow.com/questions/18471187/loading-a-new-page-with-sliding-animation-in-silverstripe-3-with-ajax) and have now a website which loads the content with ajax and slide the background image if you click on a menu link..but I still don't know how to get the next background image (..at the moment I just slide the same picture..). where should I put the code of the background image? inside the ajax/content template? and how can I get the bg image of each page (which is never the same)?

What I have done until now:

1. I created a template for my pages to be loaded via ajax ("AjaxPage.ss"), containing only the content I'll update on page change, so no <header> etc...my background image code is also not in this template..the bg code looks like this:

<div id="BgSlideWrapper">
		<div id="slideInner">
			<div id="BgContainer" class="slide" style="background : url($Photo.URL) no-repeat 0 0 #fff;background-size:cover;"> </div>
		</div>
</div>

2. in my Page.php I have this:

public function index() {
	    if(Director::is_ajax()) {
		return $this->renderWith("AjaxPage");
	    } else {
		return Array();
	    }
}

3. In my Page.ss I use jQuery's ajax function "load" when somebody click on a menu link and then slide the background image:

$('a').click(function(e){

   var a = $(this);
   var href = a.attr('href');

   //copy the background image div tag and set it right to the original one (out of sight)
   var area = $('#BgContainer');
   var newArea = area.clone().attr('id', 'BgContainerNext').insertAfter(area);
   newArea.css( "marginLeft", screenwidth );
			
   $('#PageWrapper').load(href, function() { //get content via ajax

      $('#slideInner').animate({marginLeft: -screenwidth},{ 
         //slide both ('#BgContainer and #BgContainerNext) to the left side
			easing: 'swing',
			duration: 'slow',
			complete: function(){ //delete the first(original) bg image div and "reset" the #slideInner div
			   area.remove();
			   newArea.css("marginLeft", "0px").attr('id', 'BgContainer');
			   $('#slideInner').css("marginLeft", "0px");
			   area = newArea;   
		}});
	});
	e.preventDefault();
   });

That's it. Now I really need some help, please! :/

Avatar
iraira88

Community Member, 19 Posts

6 September 2013 at 7:35pm

Nobody? ..any hints or help would be great!!

Avatar
Willr

Forum Moderator, 5523 Posts

7 September 2013 at 1:51pm

iraira88 to get the next image it depends on how you have 'next' as the definition. Are they all in the CMS and you want to get the next child page? In that case you need to put some information into your ajax templates to pass the page information (such as ID) so that you can look for the next sibling or pass the next page href in the ajax response and use that.

To get the next Page object from a current page you can use the following tutorial - http://www.ssbits.com/tutorials/2009/creating-previous-and-next-buttons-on-a-page/

Avatar
iraira88

Community Member, 19 Posts

9 September 2013 at 12:35am

Hi Willr!

Thank you for answering!

The background images are all in the cms --> each page/child has an upload field for the desired background image (if no image is uploaded, an image will be randomly loaded from a folder). Currently my template is structured as follows :

<body>

	<div id="BgSlideWrapper">
		<div id="slideInner">
			// here is my background-image..not in the ajax template
		</div>
	</div>
	
	<% include Header %> //my header
	
	<div id="main">

				<div id="navigation">
				   	 <% include Navigation %> // Sidebar with navigation/menu
				</div>

				<div id="PageWrapper">
					$Layout //here is my ajax template
				</div>

	</div>

</body>

If I understood you correctly, I have to set the background image in the ajax template where my content is, right? And than just call it via the load function through passing the next page href and using the variable of the background image? Is it possible to set the background image in a separate template and than load both of them (image+content) on menu click? If yes: how should my controller look like instead of:

public function index() { 
    if(Director::is_ajax()) { 
      return $this->renderWith("AjaxPage"); 
    } else { 
      return Array(); 
    } 
}

?

Avatar
iraira88

Community Member, 19 Posts

25 September 2013 at 9:30pm

Hi everyone!

I solved the background issue..but one last question is left: how can I change the URL in the browser window for each page on ajax load so that the user get the impression that something has changed and a new page was "loaded"?

Can anyone help me?

Avatar
Willr

Forum Moderator, 5523 Posts

25 September 2013 at 9:33pm

Google pushstate. History.js is a good library for doing that.

Avatar
iraira88

Community Member, 19 Posts

26 September 2013 at 5:05am

Thank you very much, Willr ! It's working now! Yay! :)

Go to Top