0

I'm creating a portfolio webpage for my school project (High School), and I have got a section called work. There I want to have images appear along side eachother (just some padding) and then if you click on them, there will be a kind of a dropdown menu where the image will appear on the left site, and text on the right. This will also push the rest of the content on the webpage down.

An example? Google Images. If you search on someting, let's say "google", and then you go to images, if you now click on a random image, there is a smooth dropdown with the image and some text, and the rest of the content on the site is pushed down. This is what I want. It's just that I have no clue on how I get that drop down and to get the rest of the page pushed down.

Making the images float like on google is no big deal, the problem here is getting that dropdown thing appear when you click on an image, and getting the content pushed down.

I'm using PHP to be able to put things in when ever I want, but getting that imagedropdown is not within my competence right now.

This does not nessescarly have to work in all browsers, as long as it works in webkit and mozilla it is fine.

Any help? :)

Lasse Stenløs
  • 29
  • 5
  • 1
    Check their HTML source code, it could give you some ideas – Maen Mar 22 '13 at 13:21
  • 1
    Also, use some framework or plugin that already does this. If you don't know where to start, you'll hardly make it on your own quick/functional enough, I believe. – Zlatko Mar 22 '13 at 13:22
  • Yeah, I'm looking into it. But it is kinda messy and hard to find the relevant information. – Lasse Stenløs Mar 22 '13 at 13:23
  • Ie. try to do something with YUI Animations? Like http://yuilibrary.com/yui/docs/anim/. – Zlatko Mar 22 '13 at 13:24
  • 1
    People are probably going to hate me for encouraging it on a vanilla JS question. However, there are jQuery plugins that do this. If you don't want to use it (which I completely understand, I rarely use it myself) you might want to look at their source code and see how it was done. – Benjamin Gruenbaum Mar 22 '13 at 13:24
  • @BenjaminGruenbaum Depends on the purpose. The OP doesn't even know where to start, so we can try to help him finish :) Then he can reverse engineer his way back to knowledge. – Zlatko Mar 22 '13 at 13:26
  • "But it is kinda messy and hard to find the relevant information" No, it's not. But you have to learn how to walk first, before trying to run. I think you have no clue what you are talking about, so I suggest you check out jQuery for instance. – Natrium Mar 22 '13 at 13:26
  • Okay. I do know how to get that dropdown, at least with pure css (display:none, and on hover, display:visible, and then just change it to an onclick with javascript). Howeever, getting the content pushed down is what I'm wondering about. Any cleus on that? I will look through the code on google, and if I can't manage I will find a plugin (though, I would like to learn it). – Lasse Stenløs Mar 22 '13 at 13:31
  • 1
    I answered the similar question recently: http://stackoverflow.com/questions/15465197/how-to-target-div-at-the-end-of-the-row/15465326#15465326. Check comments for complete example of implementation. – dfsq Mar 22 '13 at 13:32
  • possible duplicate of [Displaying images like Google Image Search](http://stackoverflow.com/questions/6561064/displaying-images-like-google-image-search) – tmcc Nov 26 '14 at 19:48

2 Answers2

1

you can do this with JQuery..

simply create a div which you want to animate with display none.

the use Jquery slide down function

$(selector).slideDown();

and Jquery documentation

http://api.jquery.com/slideDown/

(Dont forget to include JQuery first if you havent already)

EDIT - (I really hate not being able to comment on questions yet)

anyway to push content down when needed just wrap what you want in a container div with a min-height of say 100px then if anything inside that container is greater to 100px the div will grow to make it fit and will push everything bellow it down.

here is a updated fiddle http://jsfiddle.net/hvf7Q/1/

Hope I helped

Toby Osborne
  • 385
  • 1
  • 10
  • http://meta.stackexchange.com/questions/45176/when-is-use-jquery-not-a-valid-answer-to-a-javascript-question – Benjamin Gruenbaum Mar 23 '13 at 00:39
  • I understand what you are saying... but he has not said anything about not using plugins and just because this has been posted under JavaScript does not mean that we cannot submit alternative answers using tools that people may not have known about previously. (Is this a fair assumption)? – Toby Osborne Mar 23 '13 at 09:40
0

Have each row of images be in something like a div. Then, the dropdown should probably already exist in your HTML somewhere and 'transport' it using jQuery (functions remove, append, after, etc..).

The little triangle can be positioned using the index of the image in its row. Easier if they're squares, otherwise use jquery width for rectangles.

greener
  • 4,989
  • 13
  • 52
  • 93