jQuery to load things into a div which pushes page down?

 
Post new topic   Reply to topic    34SP.com Forum Index // Web Design
View previous topic :: View next topic  
Author Message
mayonaize
Junior Member
Junior Member


Joined: 07 Mar 2004
Posts: 127

PostPosted: Wed Nov 10, 2010 3:31 pm    Post subject: jQuery to load things into a div which pushes page down? Reply with quote
Not sure how to explain this but sort of like an accordion effect in essence. I have a div full of thumbnails (see http://www.liambrazier.com/test1) - I want, when one is clicked, for all the thumbnails and rest of page to slide down revealing a single div above them (below the header and navigation) which will contain the larger image, or video for example. Clicking on a different thumbnail should load another image or vid etc.

With a close button to hide the revealed div and slide up the rest of page again.

I know this is possible but I am hopeless when it comes to jQuery so any help would be most welcomed!
Back to top
View user's profile Send private message Visit poster's website
philr
Super Member
Super Member


Joined: 05 Nov 2003
Posts: 990
Location: Exeter

PostPosted: Thu Nov 11, 2010 4:22 pm    Post subject: Reply with quote
I did something similar a while ago. I'll see if I can dig it out and post it for you somewhere.

EDIT:
» Yes, here it is.* « I had to strip it down a bit, but I think it's still working OK. If you want to build on this, you'll need to use Ajax to load the contents of the sliding div. Filling it directly with onclick event handlers is not a good idea, because it makes your content invisible to search engines. You also need to target the links (<a href="#" ...>) to pages containing the same content so that visitors without javascript (and search engines) can get around the site.

* NB: This link won't work if my computer's offline. If you don't get through, try again later.
_________________
Phil Ronan
フィリップ・ローナン
Back to top
View user's profile Send private message Visit poster's website
mayonaize
Junior Member
Junior Member


Joined: 07 Mar 2004
Posts: 127

PostPosted: Thu Nov 11, 2010 5:57 pm    Post subject: Reply with quote
thanks - i'll try the link again later
Back to top
View user's profile Send private message Visit poster's website
philr
Super Member
Super Member


Joined: 05 Nov 2003
Posts: 990
Location: Exeter

PostPosted: Fri Nov 12, 2010 9:46 am    Post subject: Reply with quote
Oops, that's not working at all, is it? Try this link instead.
_________________
Phil Ronan
フィリップ・ローナン
Back to top
View user's profile Send private message Visit poster's website
mayonaize
Junior Member
Junior Member


Joined: 07 Mar 2004
Posts: 127

PostPosted: Fri Nov 12, 2010 9:53 am    Post subject: Reply with quote
philr wrote:
Oops, that's not working at all, is it? Try this link instead.


thanks, that seems to be exactly what i was after i think.
Back to top
View user's profile Send private message Visit poster's website
mayonaize
Junior Member
Junior Member


Joined: 07 Mar 2004
Posts: 127

PostPosted: Fri Nov 12, 2010 11:22 am    Post subject: Reply with quote
Do the links have to be written in longform ampersand code like that? Unless I'm overlooking a character when I attempt to tidy it into readable it breaks(?)
Back to top
View user's profile Send private message Visit poster's website
philr
Super Member
Super Member


Joined: 05 Nov 2003
Posts: 990
Location: Exeter

PostPosted: Fri Nov 12, 2010 1:38 pm    Post subject: Reply with quote
Yes, they do. I'm actually generating these with a PHP script that passes everything through htmlspecialchars() and addslashes().

But like I said, you should really use jquery's ajax routines to load the content from elsewhere.

Something like this for example:
Code:
<script type="text/javascript">
function jqdisplay(src) {
  $.ajax({
    url: src,
    cache: true,
    success: function(s){
      $('#displayZone').html(s);
      $('#displayZone').slideDown(1200);
    }
  });
  return false;
}
</script>
  :
  :
<a href="item1.php" title="item 1" onclick="return jqdisplay('item1.php?ajax=1')"> ... </a>


Then you need to write a PHP script called item1.php that returns a complete HTML page unless $_GET['ajax'] is equal to 1, in which case it should return just the HTML code for the displayZone div at the top of the page, including a "Close" button:
Code:
<button onclick="$('#displayZone').slideUp(1200);">Close</button>


NB: You could use two separate static html files instead of a PHP script, but then you would have to maintain them separately. This is usually a bad idea.

Better still, store your HTML in a database and add another item to the query string to tell the server which page you want (e.g., "item.php?page=1" for the whole page, and "item.php?page=1&ajax=1" for the ajax content.)

Hope this makes sense
_________________
Phil Ronan
フィリップ・ローナン
Back to top
View user's profile Send private message Visit poster's website
mayonaize
Junior Member
Junior Member


Joined: 07 Mar 2004
Posts: 127

PostPosted: Fri Nov 12, 2010 3:28 pm    Post subject: Reply with quote
little bit out of my depth here

I adapted what you had before, which works, though now i'm thinking i'd quite like to embed youtube videos in some of them which i don't think is possible quite like this.

http://www.liambrazier.com/test1

I don't know anything about PHP I'm afraid!

Would it be better (and is this sort of what you were suggesting) if i created separate html page for each large image/video, with the writing beside it, styled how I want, then target a sort of iframe with the thumbnails?

I mean actually link to the html page with the large image but use the fancy js to make it load in the revealed div?

Surely that would mean if js was turned off visitors would just go to image1.html instead?

I'm confusing myself now..
Back to top
View user's profile Send private message Visit poster's website
philr
Super Member
Super Member


Joined: 05 Nov 2003
Posts: 990
Location: Exeter

PostPosted: Fri Nov 12, 2010 10:07 pm    Post subject: Reply with quote
Here's a quick and messy hack that doesn't use PHP.

I've only changed the first link; the rest work as before. I'll have to leave you to figure out what's happening, as I'm going to be rather busy for the next few days.
_________________
Phil Ronan
フィリップ・ローナン
Back to top
View user's profile Send private message Visit poster's website
mayonaize
Junior Member
Junior Member


Joined: 07 Mar 2004
Posts: 127

PostPosted: Sat Nov 13, 2010 6:06 pm    Post subject: Reply with quote
philr wrote:
Here's a quick and messy hack that doesn't use PHP.

I've only changed the first link; the rest work as before. I'll have to leave you to figure out what's happening, as I'm going to be rather busy for the next few days.


That's ace - all working well I think. Thanks so much!
Back to top
View user's profile Send private message Visit poster's website
mayonaize
Junior Member
Junior Member


Joined: 07 Mar 2004
Posts: 127

PostPosted: Sun Nov 14, 2010 10:18 am    Post subject: Reply with quote
philr wrote:
Here's a quick and messy hack that doesn't use PHP.

I've only changed the first link; the rest work as before. I'll have to leave you to figure out what's happening, as I'm going to be rather busy for the next few days.


Only issue ive come across is that the page (and your own 2nd link above - the first was fine) produces a completely blank page when viewed on some devices.

iPhone here is blank, Espresso preview on Mac is blank.

Firebug flashes up a JavaScript error(?)
Back to top
View user's profile Send private message Visit poster's website
philr
Super Member
Super Member


Joined: 05 Nov 2003
Posts: 990
Location: Exeter

PostPosted: Sun Nov 14, 2010 11:45 pm    Post subject: Reply with quote
Does it work now?
_________________
Phil Ronan
フィリップ・ローナン
Back to top
View user's profile Send private message Visit poster's website
mayonaize
Junior Member
Junior Member


Joined: 07 Mar 2004
Posts: 127

PostPosted: Mon Nov 15, 2010 7:29 am    Post subject: Reply with quote
philr wrote:
Does it work now?


Yep all working. Validation only throws up 1 error but I don't think there's a way around it (mentions the > before the 'close' isn't allowed there). Otherwise working perfectly I believe. Thanks again.
Back to top
View user's profile Send private message Visit poster's website
Post new topic   Reply to topic    34SP.com Forum Index // Web Design All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
Powered by phpBB © 2001, 2002 phpBB Group