1

Javascript novice here. I am working on a piece of code provided here - http://codepen.io/mariusbalaj/pen/beALH/

I'm trying to modify the behavior so that instead of just zooming in the list element when clicked, it should load a different html page within the animated frame.

$(document).ready(function() {
    var $box = $('.box');

    $('.metro li').each(function() {
        var color = $(this).css('backgroundColor');
        var content = $(this).html();
        $(this).click(function() {
            $box.css('backgroundColor', color);
            $box.addClass('open');
            $box.find('p').html(content);
        });

        $('.close').click(function() {
            $box.removeClass('open');
            $box.css('backgroundColor', 'transparent');
        });
    });
});

Can anyone point me to the right direction?

Update 1 : I figured out that modifying the 'content' variable on the below line would change the content of the animated frame:

       ` $box.find('p').html(content);`

And if I change it to something like:

       ` $box.find('p').html('<h1>Test Page</h1>');`

It works as expected. However, I want the content to be different for each list element. Is there an easy way of doing this per element? I am quite confused with the 'this' keyword.

Yad
  • 229
  • 1
  • 8
  • 19

1 Answers1

2

You may be looking for this answer, if you want to open another HTML page:

how to change page from within javascript

If you're trying to open it WITHIN the animated frame, you should look into making some requests to the content of the new page/tile and filling that with content, which is answered here: How to get the response of XMLHttpRequest?

It all depends what you want to do, let us know :)

Community
  • 1
  • 1
Jonathan M. Hethey
  • 714
  • 6
  • 15
  • Thanks for the quick reply. I am trying to open it within the animated frame. I am very new to this and do not understand some of the terms used but I'm eager to learn. I'll check out the second link you posted and post some updates if it helps. :) – Yad Sep 29 '15 at 08:54