Tagged: 

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1289168

    Hi.
    I’ve placed team information content elements within columns. I’ve given the column under the tab advanced a column link. Now, I’ve read that when I simply add the code
    ?iframe=true
    to the url, the page should be loaded within an iframe.
    i’ve set the link to be opened in a new page and the destination page has no footer, nor header.
    I’m trying to achieve what happens when you click on team members on this site; https://buijstandartsen.nl/over-ons
    is this a pop-up, or iframe?

    #1289520

    Hey the_digital_manager,

    It looks like a full-screen popup, not an iframe.

    Best regards,
    Victoria

    #1289530

    Hi Victoria, the logical question from my side would be: how to achieve this pop-up with enfold? 😂 ;)

    #1290512

    Hi? How do I achieve a pop-up as the given example ?

    #1290753

    Hi,
    Sorry for the very late reply, please try this solution, a further explanation of this example is here.
    If you would like more help with this please create a test page on your site and include an admin login s in the Private Content area so I assist.

    Best regards,
    Mike

    #1290865

    Hi Mike, thx for this. i saw the picture https://savvyify.com/img/image/2021-03-15-075321.EB56 but what I’m looking for is not a small pop-up but a full screen pop-up. I’ve build the desired layout for a page by using a grid with 3 columns, setting it to full height, the left column with an image, the middle column empty and the rigth column with a centered special heading and text. the solution you offers requires the content to be put into a code block? is there another way to place the grid as described above as hidden content and show it via a pop-up?

    The site is locally hosted currently, so I can’t give admin access.

    #1290903

    Hi the_digital_manager,

    It might be better, in this case, to create a page with the content that you need using the blank template without the header and the footer and show it on click with the ?iframe=true. And you will need to change the iframe dimensions to show it fullscreen.

    Best regards,
    Victoria

    #1290919

    Hi Victoria, but that’s exactly what I did, but as I described in the initial post: then the enfold site simply loads a new page in a new window…?
    or is a page with the grid columns, as I described, not workable?

    #1290951

    can you provide steps for this?

    #1290961

    Hi,
    This popup image shows the popup with only one line of text so it is naturally small, I believe you will find that the popup will grow with more content, to a point, but to make it 100% will require more css adjustments, are you sure you really want a 100% popup? The example page you linked to with this was a little confusing from a UX standpoint, in my option. Might I suggest a 90% popup with the opacity background because it is a more familiar UX?

    Anyways… in different examples that I have worked on I find that iframes can be much slower on popup load where the method I point to is very fast, because the content is already loaded.
    If you really want to use the iframe solution I was able to create a page that would be the “popup” with a grid row element and such,
    2021-03-28_125752.jpg
    this is the Avia Layout Builder Debugger code:

    [av_layout_row border='' min_height_percent='' min_height='400px' color='main_color' mobile='av-flex-cells' id='' av_element_hidden_in_editor='0' av_uid='av-c6pja3']
    
    [av_cell_one_half vertical_align='middle' padding='130px' padding_sync='true' background_color='' src='https://test.kriesi.at/enfold-2017/wp-content/uploads/sites/24/2015/07/business-support-1.jpg' attachment='582' attachment_size='full' background_attachment='scroll' background_position='top center' background_repeat='stretch' mobile_display='' av_uid='av-10qarv']
    
    [/av_cell_one_half][av_cell_one_half vertical_align='middle' padding='30px' padding_sync='true' background_color='#f8f8f8' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' mobile_display='' av_uid='av-8qt0kr']
    
    [av_heading tag='h2' padding='0' heading='Our Support Team' color='' style='blockquote modern-quote modern-centered' custom_font='' size='30' subheading_active='subheading_below' subheading_size='15' custom_class='' admin_preview_bg='' av_uid='av-t3b2z']
    Customer Satisfaction
    [/av_heading]
    
    [av_hr class='custom' icon_select='no' icon='ue808' font='entypo-fontello' position='center' shadow='no-shadow' height='50' custom_border='av-border-fat' custom_width='50px' custom_margin_top='150px' custom_margin_bottom='150px' custom_border_color='#000000' custom_icon_color='' id='' custom_class='' template_class='' av_uid='av-5uoavf' sc_version='1.0' admin_preview_bg='']
    
    [av_textblock size='' font_color='' color='' admin_preview_bg='' av_uid='av-f9ep7']
    <p style="text-align: center;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    [/av_textblock]
    
    [av_hr class='custom' icon_select='no' icon='ue808' font='entypo-fontello' position='center' shadow='no-shadow' height='50' custom_border='av-border-fat' custom_width='50px' custom_margin_top='155px' custom_margin_bottom='155px' custom_border_color='#000000' custom_icon_color='' id='' custom_class='' template_class='' av_uid='av-kmte5zf0' sc_version='1.0' admin_preview_bg='']
    
    [av_font_icon icon='ue8f1' font='entypo-fontello' style='' caption='' link='manually,http://twitter.com' linktarget='_blank' size='20px' position='center' color='' admin_preview_bg='' av_uid='av-1yhd23'][/av_font_icon]
    
    [/av_cell_one_half][/av_layout_row]

    with no header, sidebar, title bar, or footer
    Then I used this link in a button http://test.test/popup-test?iframe=true
    2021-03-28_130237.jpg
    and then I used this css to make the popup 100vh & 100vw:

    .mfp-container,
    .mfp-iframe-holder .mfp-content,
    .mfp-iframe-holder .mfp-iframe {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        padding: 0 !important;
    }
    

    and it worked, but I also lost the ability to close the popup, try using the above css as your base and see if you can adjust to allow to close the popup, I would recommend making the popup 90vh & 90vw 🙂🚀

    Best regards,
    Mike

    #1295309

    Hi Mike,

    thx for providing me with these clear steps. So, I’ve tried this and it works. I also found out why I didn’t succeed earlier. I have several questions/remarks:

    1. It seems that Enfold doesn’t allow a column to load/link an/to iframe url. The iframe command works on buttons, but not when you add the code to a column link url. It simply loads the page in the browser, rather than putting it in an iframe. Can we fix this?

    2. somehow it takes long for the iframe to load. Why is this the case? on other sites this goes pretty instant.

    3. in the example provided in the private content you’ll see that when you click on a team member you can’t scroll on the page anymore. When I use the Enfold Iframe you can still scroll on the page that is below. How do I change this?

    4. when I change the size of the pop-up it isn’t centered. How do I center the pop-up?

    5. I see arrows left and right in the pop-up, why is this the case?

    thx in advance! :)

    #1295531

    Hi,
    I would like to point out that the page you are trying to copy is not using iframes, iframes load a page source from another url, or page. The popups you are seeing are embedded in the current page source in the div’s with the class member-bio
    Please review the page source code and you will see this is similar to my suggestion above with using a code block element for your popups, this is why it seems to load instantly. An iframe will load slower because it must call another url and load that page.
    The other issues you question have to do with our built-in popup javascript which is naturally not the same as the page you are trying to copy. So while you can create a similar page and effect with the Enfold options and elements, having an exact copy of that page would require you to use the same javascript and source code as that page.
    Are you rebuilding this site for this customer or are you modeling it for another?
    Are you looking for exact or similar?

    Best regards,
    Mike

    #1295577

    Hi Mike, I must admit that I am fairly new with coding, so when you ask me to check a page’s sourcecode I am thinking ‘oh boy.. not sure about this’ ;P

    I’m not exactly rebuilding this site, I just like this feature and would to like to realize this in an exact manner, if possible. Do you have a debugger code by any chance which I can add and test the feature/approach you mentioned?

    #1296063

    Hi,
    To achieve the exact function of that page team section you would need to use the same css, javascript, and html structure, this could then be added to a code block section in your page. While this is a cool effect I can’t justify the time to scrape this code and reformat it in a clean matter for you as it is not really an Enfold task. You would basically right-click and save as the page to your desktop and then clean up the css, javascript, and html, but if you don’t feel comfortable doing this you could hire someone to do it for you in a few hours for pretty cheap money, UpWork.com or Fiverr.com might be a good place to look.
    The debugger code and example links above to achieve a similar effect in Enfold also work as described, but they are similar not exact.

    Best regards,
    Mike

    #1296116

    Hi Mike :) I completely understand that and I’m very gratefull for your help insofar. Big thumbs up for you and the team :)
    I’ll ponder on my options, thanks for now and you can close this ticket.
    Would be handy though for other people if columns can also link to iframes, similar as buttons. feels a bit buggy that this doesn’t work!

    #1296556

    Hi,
    Very good we will go ahead and close this then, for your information through, column links are actually “fake” and are simulated within Enfold, the URL is actually added in a separate link element inside the column.

    Best regards,
    Mike

Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Link column to full screen pop-up / iframe’ is closed to new replies.