jimfog Posted October 22, 2015 Share Posted October 22, 2015 I am following this ...http://code.tutsplus.com/tutorials/how-to-load-in-and-animate-content-with-jquery--net-26 Concentrate on line 25 on step 5. The whole tutorial is about using ajax to load in content when a link is clicked...and the function on line 25 just adds an effect to it. The question: In the context of the code you see there could a page transition be applied....in the function I mention?The code accomplishes what I want...I just want to add a transition effect when the new content gets loaded. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 22, 2015 Share Posted October 22, 2015 You do know this will NOT be SEO friendly. Link to comment Share on other sites More sharing options...
jimfog Posted October 22, 2015 Author Share Posted October 22, 2015 No I did not know it...nonetheless I am not surprised hearing it. Either way, I want to do it....so as to provide a better UX for my users Link to comment Share on other sites More sharing options...
dsonesuk Posted October 22, 2015 Share Posted October 22, 2015 If transition can be be created using jquery or maybe using a class to reference css3 transistion styling it should be workable when new content is loaded. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 22, 2015 Share Posted October 22, 2015 It will be fine for SEO, the links still work and the ajax URLs have a hash to tell the server to send ajax instead of normal content.You can replace that line with anything that's going to show the content. If you want to transition between the new and old content then you also need to change how it hides the old content. Link to comment Share on other sites More sharing options...
jimfog Posted October 22, 2015 Author Share Posted October 22, 2015 It will be fine for SEO, the links still work and the ajax URLs have a hash to tell the server to send ajax instead of normal content. I do not quite understand that...the importance of a hash in the URL. Regarding the other comments...I understand... but how am I going to translate these into code...specifically how am I going to achieve transitions within this code context. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 22, 2015 Share Posted October 22, 2015 Depends on what transition you require there are several options function showNewContent() { $('#content').fadeIn(500,hideLoader()); function showNewContent() { $('#content').slideDown(500,hideLoader()); Link to comment Share on other sites More sharing options...
justsomeguy Posted October 22, 2015 Share Posted October 22, 2015 This part: var toLoad = $(this).attr('href')+' #content';tells jQuery to only keep the element with the ID content (or actually just the contents of it). That's not standard, it's just something that jQuery supports. So the ajax request loads the entire page from the href and strips out the contents of that element to keep. Link to comment Share on other sites More sharing options...
jimfog Posted October 23, 2015 Author Share Posted October 23, 2015 Depends on what transition you require there are several options function showNewContent() { $('#content').fadeIn(500,hideLoader()); function showNewContent() { $('#content').slideDown(500,hideLoader()); I was looking to implement some of these http://tympanus.net/Development/PageTransitions/. It uses CSS animations animation with keyframes...so I am trying to implement a CSS solution here, Link to comment Share on other sites More sharing options...
dsonesuk Posted October 23, 2015 Share Posted October 23, 2015 (edited) Then it just should be the matter of adding class ref of css3 transition you wish to use to #content element or #wrapper if you want similar effect from previous link. Edited October 23, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted October 23, 2015 Share Posted October 23, 2015 The link #1 design is old, outdated doctype and jquery Link to comment Share on other sites More sharing options...
jimfog Posted October 23, 2015 Author Share Posted October 23, 2015 The link #1 design is old, outdated doctype and jquery You mean the link in tympanus? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 23, 2015 Share Posted October 23, 2015 #1 = post #1 Link to comment Share on other sites More sharing options...
jimfog Posted October 23, 2015 Author Share Posted October 23, 2015 (edited) #1 = post #1 It does my job though...till some point...there is the transitions issue that is unsolved yet. Did you mean something like this? function showNewContent() { $('#container').addClass('pt-page-moveFromRight');}//css.pt-page-moveFromRight { -webkit-animation: moveFromRight .6s ease both; animation: moveFromRight .6s ease both;}@keyframes moveFromRight { from { -webkit-transform: translateX(100%); transform: translateX(100%); }} Edited October 23, 2015 by jimfog Link to comment Share on other sites More sharing options...
dsonesuk Posted October 23, 2015 Share Posted October 23, 2015 Yes it does the job for current setup, but you need to add class on load to run transition, and remove after transition finished, else it won't run anymore, if you want to use something like .delay() to do this, it wont work because the jquery version used does not support it.And yes, that is the method i suggested, but it will move #content only, not main parent container like your second link showed which fills the whole screen. Link to comment Share on other sites More sharing options...
jimfog Posted October 23, 2015 Author Share Posted October 23, 2015 first of all my intention is not to fill the whole screen...just a div....in the link about transitions I am just showcasing the how I would like to do it. Secondly I tried it and something weird happened...the div got an attribute display of none..here is the whole code $('a#app_btn').click(function(e){ e.preventDefault(); var toLoad = $(this).attr('href')+' #container_cal'; $('#container').hide('fast',loadContent) function loadContent() { $('#container').load(toLoad,'',showNewContent)} function showNewContent() { $('#container').addClass('pt-page-moveFromRight');}//trying to apply the transition here...for the css see #14// function hideLoader() { $('#loading').fadeOut('normal');}}); #container gets display none....why? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 23, 2015 Share Posted October 23, 2015 because this tells it to $('#container').hide('fast',loadContent) Link to comment Share on other sites More sharing options...
jimfog Posted October 23, 2015 Author Share Posted October 23, 2015 hmmm...show the code that hides the original content makes all the "damage here"... And as I understand using show() reverts this.... So.what can I do then...cause as already stated addclass() must replace show() so as to make transition possible... What do you suggest? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 23, 2015 Share Posted October 23, 2015 don't use hide(), since you want it to come from right change to .css() to force it out of view at right edge, then transition will bring it into view. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 23, 2015 Share Posted October 23, 2015 OR remove $('#container').hide('fast',loadContent) completely and just use loadContent(); instead. Link to comment Share on other sites More sharing options...
jimfog Posted October 23, 2015 Author Share Posted October 23, 2015 OR remove $('#container').hide('fast',loadContent) completely and just use loadContent(); instead. Yes that did it...thanks a lot....of course I am considering better ways for the original code to go away....but the transition worked. Link to comment Share on other sites More sharing options...
jimfog Posted October 26, 2015 Author Share Posted October 26, 2015 there is one more detail....the new content being loaded to the div is just HTML.... The problem is that nothing is loaded if this HTML is created dunamically(with JS)... What can I do in such a case? You see...the final goal here is that to create a calendar(with JS) and have this displayed with transitions in front of the user. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 28, 2015 Share Posted October 28, 2015 Looks as though you can't with partial loading of page. Can't you identify what page it is and load appropriate calender somehow? Link to comment Share on other sites More sharing options...
jimfog Posted October 29, 2015 Author Share Posted October 29, 2015 (edited) Looks as though you can't with partial loading of page. Can't you identify what page it is and load appropriate calender somehow? sorry..but I am confused by your answer...can you restate/rephrase. What exactly I cannot do with partial loading of page? And I do not understand the rest also. Are you suggesting that I do not know where my calendar is?(that is even more confusing) Edited October 29, 2015 by jimfog Link to comment Share on other sites More sharing options...
dsonesuk Posted October 29, 2015 Share Posted October 29, 2015 It would PROBABLY work loading the whole page, but by loading just part ie #content container content it is likely to fail. IF the calender is the created content you are talking about? can't you just recreate that, after the content from the other pages is loaded, after all you have the code for it to be dynamically created! IF the calender requires to know what page it relates to (guessing assuming here) you have to have some method to identify the page it relates to produce appropriate calendar which may contain restricted dates, fully booked dates I don't know? i'm not telepathetic i haven't a clue what its used for?. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now