Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

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

    General Discussion
    3
    5
    319
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • G
      guillaume ark last edited by

      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

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        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

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • G
          guillaume ark last edited by

          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

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            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

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • O
              openair last edited by

              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

              1 Reply Last reply Reply Quote 0
              • First post
                Last post

              Before you post

              Use the Search Feature. Maybe there is already a solution to your issue.

              1. Update Lay Theme and all Lay Theme Addons
              2. Disable all Plugins
              3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
              4. Now see if your problem solved itself
              5. Go here, see if your problem is listed here:
              Troubleshooting

              When you post:
              1. Post a link to where the problem is
              2. If the problem is difficult to explain, post screenshots / link to a video to explain it

              Thanks!

              Online Users

              Y
              A

              Recent Topics

              • S

                Theme crashed - because of Polylang?

              • J

                Split Screen just on front page / subpages without the split?

              • Y

                image quality dropped

              laytheme.com