Home Forums Tucson Template Some bug fixes

This topic contains 3 replies, has 3 voices, and was last updated by  Support 4 years, 5 months ago. This post has been viewed 1542 times

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10007513

    Rita
    Participant

    Hi there,

    As there is an existing holding page on my site url and SmartFTP keeps failing to connect to my hosting servers, I’m unable to show you my site the normal way. Any other suggestions, would be great.

    I have 4 bug fixes to be solved but I can fix one I’ll can put the site live so the other 3 can solved more easily.

    I have a button on my home page that should launch a popup (a Google Form) when clicked. However, it’s opening the form in another tab instead. So this is what I’m calling in my index.html:

    <div class="col-md-6">
    <h4 class="shorter">INVESTORS</h4>
    <p><a class="btn btn-primary btn-lg push-top" href="investor-invite.html">Request Invite</a></p>
    </div>

    And the script I’m using a separate html file is:

    <div class=”popup”>
    <script type=”text/javascript”>
    var matchClass=[‘popup’];
    var popup2 = ‘width=760,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=20,top=20’;

    //The pop-up function
    function tfpop(){
    var x = 0;
    varpopClass;
    //Cycle through the class names
    while(x < matchClass.length){
    popClass = “‘.”+matchClass[x]+”‘”;
    //Attach the clicks to the popup classes
    $(eval(popClass)).click(function() {
    //Get the destination URL and the class popup specs
    var popurl = $(this).attr(‘href’);
    var popupSpecs = $(this).attr(‘class’);
    //Create a “unique” name for the window using a random number
    var popupName = Math.floor(Math.random()*10000001);
    //Opens the pop-up window according to the specified specs
    newwindow=window.open(popurl,popupName,eval(popupSpecs));
    return false;
    });
    x++;
    }
    }

    //Wait until the page loads to call the function
    $(function() {
    tfpop();
    });
    </script>

    <iframe src=”https://docs.google.com/forms/d/1TcQaT1AuavMRssheTyv-c7NBZ-CYPk07YJYsR1X0H_o/viewform?embedded=true&#8221; width=”760″ height=”500″ frameborder=”10″ marginheight=”0″ marginwidth=”0″>Loading…</iframe>

    </div>
    </body>
    </html>

    I have looked at Magnific-Popup but I’m struggling to understand what is needed to call the pop up in the index file and what houses the Google Form iframe in a .js file. I’m not a coder so documentation is a challenge to read as it assume a level of knowledge that I do not have.

    Just so aware, other 3 issues are:
    – Top paragraph indented under each toggle on FAQs page. Looks messy but not sure how to resolve it though I’m assuming its a CSS issue.
    – Twitter API for the Twitter fall in the Footer is not working and I cant see any conceivable reason why
    – Pricing table looks message as the length row is different due to different added value options dependent on pricing option. Is there a way to make the table all all the same length across the 4 columns?

    Thank you!


    #10007523

    Support
    Keymaster

    Hello,

    1) To open a modal with an iFrame using the magnific popup you must use this:

    HTML:

    <a class="btn btn-primary btn-lg push-top open-investor-invite" href="investor-invite.html">Request Invite</a>

    JS:
    (js/custom.js)

    $(document).ready(function() {
    	$('.open-investor-invite').magnificPopup({
    		disableOn: 700,
    		type: 'iframe',
    		mainClass: 'mfp-fade',
    		removalDelay: 160,
    		preloader: false,
    
    		fixedContentPos: false
    	});
    });

    It will open the file investor-invite.html in a iFrame inside the modal.

    Regarding the other issue, it would be necessary that you send me the URL so I can check, unfortunately those can be happening for different reasons.

    Kind Regards,

    Jonas


    #10008616

    FLLLPE
    Participant

    How could i set the width and height of the iframe? Because appears that is a default size. Could you help me?


    #10008623

    Support
    Keymaster

    Hello, the Magnific Popup uses a default size indeed, mainly because it’s responsive, but if you want to reduce the size of the iframe you can add a custom css:

    (css/custom.css)

    .mfp-iframe-holder .mfp-content {
    	max-width: 500px;
    }

    Kind Regards,

    Jonas


Viewing 4 posts - 1 through 4 (of 4 total)