AJAX powered portfolio

th3lonius · 2014-03-17 17:49:01

Hi all. I am putting together a portfolio site for a friend who does various wood and metal sculpture work. Another friend has designed the site and coded it so it is now my task to integrate with TXP. It is a single page site. Biographical information resides in a fixed container that slides in from the right of the viewport. Only the portfolio section loads asynchronously.

AJAX functions properly right now. This guy used jQuery’s .load() function to pull it off, taking the href value of an anchor (which corresponds to a section ID), stripping the extension (.php) and returning the content of the page in to a container.

I have no idea where to start tying this in to TXP. I need to have clean URLs for this. Someone visiting tylercochran.com/portfolio/walnut-table for instance needs to be taken to the view of that particular work.

I was thinking that it would be nice and neat if it’s possible to use TXP tags in a jQuery script but I’m not sure about that. Someone point me in the right direction please!

etc · 2014-03-17 20:56:57

th3lonius wrote #279777:

I was thinking that it would be nice and neat if it’s possible to use TXP tags in a jQuery script but I’m not sure about that. Someone point me in the right direction please!

Hi th3lonius,

it’s certainly possible to inject txp data into jQuery scripts, e.g.

<txp:if_individual_article>
<script>
$(function () {
	alert("Currently viewing <txp:title />");
});
</script>
</txp:if_individual_article>

but it would help a lot to see your js code.

th3lonius · 2014-03-17 21:51:21

I’m happy to hear that! I should mention that I am principally a designer and frontend guy so my java skills are minimal. I understand how this is working and it seems like it may be overly complicated for the TXP integration. I think my friend how coded the whole site probably took this code from elsewhere and hacked it up.

$(document).ready(function(){      

var hash = window.location.hash.substr(1);  
var href = $('#work-grid li a, #about-thru, #menu a, #next-thru, #prev-thru').each(function(){  
    var href = $(this).attr('href');  
    if(hash==href.substr(0,href.length-4)){  
        var toLoad = hash+'.php #content-cont';  
        $('#content-cont').load(toLoad)  
    }   
}); 

$("body").on('click', '#work-grid li a, #about-thru, #menu a, #next-thru, #prev-thru', function(event) {

    var toLoad = $(this).attr('href')+' #content-cont';
    var bkgdLoad = $(this).attr('href')+' #viewport';
    var leftpos = parseInt($('#left').css('left'));

    if (leftpos == 0) {
        $('#left').animate({left: -600}),
        $('#main').animate({left: 0}),
        $('#main-menu, #right-tog, .bkgd-desc').fadeIn(300);
    };

    $('#content-cont').hide('fast', function(){
        var divpos = parseInt($('#right').css('right'));

        if (divpos == 0) {
            $('#right').animate({right: -600}),
            $('#main').animate({right: 0}),
            $('#main-menu, #right-tog, .bkgd-desc').fadeIn(300);
        };
    }); 
    $('#viewport').fadeOut('fast',loadContent);
    $('#load').remove();  
    $('#wrapper').append('<span id="load">LOADING...</span>');  
    $('#load').fadeIn('normal');


    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);


    function loadContent() {  
        $('#content-cont').load(toLoad,''),
        $('#viewport').load(bkgdLoad,'',showNewContent());   
    }  
    function showNewContent() {  
        $('#content-cont').show('normal'),
        $('#viewport').fadeIn('5000',hideLoader());
    }  
    function hideLoader() {  
        $('#load').fadeOut('normal');  
    }   
    return false;  

}); 

});

{Edited to add Textile’s bc.. for formatting. – Uli}

Last edited by uli (2014-03-17 21:53:25)

th3lonius · 2014-03-17 22:21:20

http://ericbailey.co/gehry/

Here’s a look at the live, static site.

bici · 2014-03-17 23:01:55

th3lonius wrote #279787:

http://ericbailey.co/gehry/

Here’s a look at the live, static site.

What. A. Cool. Site.

Hope you will consider writing up a tutorial on this fine work.

etc · 2014-03-17 23:03:59

th3lonius wrote #279786:

I should mention that I am principally a designer and frontend guy so my java skills are minimal. I understand how this is working and it seems like it may be overly complicated for the TXP integration.

You seem to do a great job on the frontend, and txp integration shouldn’t be complicated at all, though you’ll have to import all site content as txp articles. I’m not sure I would just keep the existing structure, it’s unusable with js disabled, but well…

It’s getting late here in Europe, I couldn’t give you a tested solution right now (someone else?), but start by replacing var toLoad = $(this).attr('href')+' #content-cont'; with var toLoad = $(this).attr('href')+' #content-cont > *';, and so on. You will see no difference, but the current markup is invalid (multiply defined nested #content-cont ids).

th3lonius · 2014-03-20 19:10:01

Do you think there is a way to pull this off with clean URLs?

Gocom · 2014-03-20 19:25:00

Before the world explodes, give parseInt() radix. E.g.

parseInt($('#right').css('right'), 10);

Otherwise you may get base 8 and 16 integers.

etc · 2014-03-20 21:44:37

th3lonius wrote #279852:

Do you think there is a way to pull this off with clean URLs?

Certainly, but if all you need is replacing tylercochran.com/#walnut-table with tylercochran.com/portfolio/walnut-table, you can do some .htaccess redirect, and just replace the line

var hash = window.location.hash.substr(1);

with

var path = window.pathname.split("/");
var hash = (path.length >= 2 && path[0] == "portfolio" ? path[1] : "");

and maybe window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4); with something similar.

th3lonius · 2014-04-01 15:24:10

etc wrote #279783:

Hi th3lonius,

it’s certainly possible to inject txp data into jQuery scripts, e.g.

<txp:if_individual_article>...

but it would help a lot to see your js code.

In this case you are using txp tags within a script but the script itself lay within a txp form. I’m wondering if it’s possible to inject txp data in to an external script. I don’t want to get in to the habit of inserting javascript in to HTML. I did try this method however and I can’t get it to work.

I appreciate all the feedback from everyone (I made some js changes) but I’m still no closer to implementing this. There must be a way to pare down the AJAX code as I have it above. That code relies on extracting the hashtag value from the url hash but with a CMS this wouldn’t be necessary right? So how do I use the jQuery .load() function to extract data from an article in the txp database? Isn’t that the best way to do this?

th3lonius · 2014-04-01 15:29:51

Or maybe I misunderstand the .load() function… is exploiting the hash value the only way to use it?

colak · 2014-04-01 15:40:46

th3lonius wrote #280006:

I appreciate all the feedback from everyone (I made some js changes) but I’m still no closer to implementing this. There must be a way to pare down the AJAX code as I have it above. That code relies on extracting the hashtag value from the url hash but with a CMS this wouldn’t be necessary right? So how do I use the jQuery .load() function to extract data from an article in the txp database? Isn’t that the best way to do this?

Would external output work?

th3lonius · 2014-04-01 15:54:35

It looks like it would! Though I’m not sure how to go about using it. Would this preserve clean URL’s or is it jankier than that?

colak · 2014-04-01 17:34:47

this is untested but create the tag you want to parse in txp>presentation>forms. Name the form rah_eo_something. Insert some php in your external js by using <?php echo file_get_contents('http://www.yoursirte.tld/?rah_external_output=something'); ?>

I’m not sure if documents with js extension can parse php but you can try it as I don’t think that it will blow up your server:)

etc · 2014-04-02 09:25:54

th3lonius wrote #280006:

I don’t want to get in to the habit of inserting javascript in to HTML.

You don’t have to insert the whole js block into your form, just this

<script>
var hash = '<txp:some_tag />';
</script>

and then call hash js variable in your external js file.

I did try this method however and I can’t get it to work. … So how do I use the jQuery .load() function to extract data from an article in the txp database?

Stricto sensu, .load() doesn’t extract data from db, but from an html page. If you decide to use txp, you should convert all these guggenheim.php pages into txp articles, inside some portfolio section. Then (in section/article url mode) their valid url will be .../portfolio/guggenheim, that you can access normally, even without js. No hash extraction is needed anymore, but you’ll have to create a page form that preserves the structure (#content-cont, #viewport, etc) of the static site. You will also have to populate #work-grid and so on with txp tags.

Now, you could also just tweak a little the static site, without txp, to be able to use clean links, following these lines.

Textpattern CMS

Textpattern CMS support forum

#1 2014-03-17 17:49:01