Split screen webpage: e.preventDefault(); works only while pressing CTRL

[guillaume ark]

Hey everybody,
I am struggling with something on the website I am building right now. I have a split screen and I want on one side (left side) a Project Thumbnail Grid and open the projects on the right side. For this I created a Iframe on the right side and I added this custom code to open the projects in the Iframe :

<script>
jQuery(document).on('click', '.thumb', function(e){ 
    e.preventDefault(); 
    var url = jQuery(this).attr('href');
    jQuery("#project-frame").attr('src', url);
});
</script>

But I first thought that my code wasn't working, then I realized that it is working only when I press the Ctrl or Cmd while clicking on a thumbail...

Actually it is only this part who doesn't work properly :

 e.preventDefault();  

I am working on chrome but the issue also happen in firefox...
Here is the link of the website page : [http://www.ark.amsterdam/category/projects]

Does someone got a similar issue ? or can someone help me fixing this ?

Thank you

[mariusjopen]

Dear @guillaume-ark

I would not use the iFrame solution.
I would do a footer and put the projects there. Then with CUSTOM CSS I would make the split screen.

This is way cleaner and you have a good transition.

Best!

Marius

[guillaume ark]

Hey @mariusjopen
Thank you for your answer, but I don't really get how I can load my projects in this page...

Because what I am tyrying to do is something similar to this : (http://spectorbooks.com/)
So that the right side of the page is kind of a project menu with all the project thumbails displayed and on the left side, make the projects pages appear.

Is there a way to load the project pages in this page via javascript ?

Best,
Guillaume

[mariusjopen]

Dear @guillaume-ark
you could create a footer page and have the projects in there.

Then with CUSTOM CSS you make the footer position fixed and width 50% and height 100vh.

Then you have two rows.
Of course you need to adjust the format of the gridder then.

Hope that helps!

Best!

Marius

[openair]

Dear @mariusjopen

I'm interested in trying this also, and your solution sounds nicely straightforward. However, even so, I'm somehow struggling.... when I give the footer a class the footer simply disappears. Take the custom CSS out and it appears as regular, as a footer at the bottom of the page again.

Can you help with this please? Am I entering the CSS tag in the wrong place? I'm simply right-clicking in the footer page and adding it in the add class.

Thanks in advance,
Sam