Question

Basically, Im trying to setup a page so that when a link is clicked it will open in the iframe but the url of the parent page will update with the hash but the url of the iframe will be the original clicked url (without the hash). I got to the point where the initial click event functions. but the change event (if the user links directly to the page) does not work. Here is a snippet of my code:

$j('.products-grid .item a, .post a').click(function(){
   $details.fadeIn().addClass('active');
   $j.address.value($j(this).attr('href').substr(2));
   $details.animate({left:detailGap}, { duration: 500, easing: 'easeInOutExpo'});
});

    }).change(function(event) {
       $iframe.attr('src', event.value);
       $details.fadeIn().addClass('active');
       $details.animate({left:detailGap}, { duration: 500, easing: 'easeInOutExpo'});
       var loadurl = location.origin + location.pathname +location.hash.substr(1);
       alert(loadurl);
       $iframe.attr('src', loadurl);
    });

ie: for the url, http://www.url.com/product-1 (iframe url)
I want it to show up as http://www.url.com/#/product-1 (page url)
this is in magento.

thanks, Robert

Answer 1

figured it out

    $j('.products-grid .item li a').click(function(){
            $j('html, body').animate({scrollTop: '0px'}, 100);
            $j.address.value($j(this).attr('href'));
            $details.fadeIn().addClass('active');
            $j('body').addClass('open');
            $iframe.attr('src', 'about:blank');
            $details.animate({'left':detailGap - navGap}, { duration: 500, easing: 'easeInOutExpo'});
});

opens the slide out panel i created which housed the iframe.

I set the target to the iframe so the url opens within that. but still allows for deep linking.

you can see the final solution here:

http://www.echodesign.com/