Home Forums Porto Template Loading Issues

This topic contains 21 replies, has 2 voices, and was last updated by  Support2 1 day, 10 hours ago. This post has been viewed 161 times

Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #10027765

    cochn01
    Participant

    Hello,

    1. For starters I’m trying to get the Load more feature to work on my site.. I was told it must be uploaded live… Well it now is but STILL DOESN’T WORK…

    2.Also, I can’t get Contact Form to work. tried to find documentation on this… but had no success.

    3. Third and last… Another work-around I tried to use for ReCaptcha… but the template within the contact area is pushing the SEND button off the page… It might be a fixed position

    Please view site link above for reference.
    Thank you!

    Nina


    #10027768

    Support2
    Keymaster

    Hello,

    1) Entering on your website and making a test, the load more it’s working.
    * For each new content you want to load you need create a new file inside the “/ajax” folder, for example: “portfolio-ajax-load-more-2.html”, “portfolio-ajax-load-more-3”, etc.
    * Note that you need change the HTML on each file (portfolio-ajax-load-more-2.html, portfolio-ajax-load-more-3.html, etc…) content as per your needs.

    2) We made a test in your contact form and it’s returning syntax error on the PHPMailer script, as you can see on the image below:

    The probably reason of this error is the PHP version in your server. You need a PHP with version 5.5 or more.

    3) This is only on demo one page agency, because on this demo the contact form has a fixed height. In that case need recalculate the height after the recaptcha is loaded. For it please follow the steps below:

    3.1) Add in (js/custom.js):

    var onloadCallback = function() {
    	setTimeout(function(){
    		var $height = $('.custom-contact-box').outerHeight();
    
    		$('.custom-contact-box, .google-map').css({ 
    			height: Math.abs($height + $('.g-recaptcha').height()) + 'px'
    		});
    
    		$('.custom-contact-box').css({
    			'margin-top': -Math.abs($height + $('.g-recaptcha').height()) + 'px'
    		});
    	}, 1500);
    };

    3.2) On the script of google recaptcha, add the onload callback:

    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>

    3.3) Also, for a better alignment of recaptcha and submit button, please change the HTML:
    – Recaptcha:

    <div class="g-recaptcha mt-3" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxx-x"></div>

    – Submit:

    <input type="submit" value="SUBMIT" class="btn btn-primary custom-btn-style-2 text-color-light custom-margin-2 float-left mt-2" data-loading-text="Loading...">

    3.4) Add the code below in (js/custom.js):

    var adjustHeight = function( $alert ) {
    	setTimeout(function(){
    		var $height = $('.custom-contact-box').outerHeight();
    
    		$('.custom-contact-box, .google-map').css({ 
    			height: Math.abs( $height + ( $( $alert ).height() + $('.g-recaptcha').height() ) ) + 'px'
    		});
    
    		$('.custom-contact-box').css({
    			'margin-top': -Math.abs( $height + ( $( $alert ).height() + $('.g-recaptcha').height() ) ) + 'px'
    		});
    	}, 1500);
    };

    3.5) I saw that you are using the version 7.0.0 of the file “js/views/view.contact.js”. Please replace with the old file of version 6.2.1 (since you are using the 6.2.1 version of the template). Then change the code to like the image below:

    adjustHeight( '#contactForm .alert-success' );
    
    and
    
    adjustHeight( '#contactForm .alert-danger' );

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10027769

    cochn01
    Participant

    Hello Rodrigo,

    Awesome – I was able to get 1) Load More to work… but however when I click button the same loads are appearing. Quite sure I missed a step somewhere… Could you so kindly take another look at the page?

    2) The PHP version 5.5 doesn’t make any sense.. I presently am on the same server using Contact Form and ReCaptcha without any issues. It has to be something wrong in the coding.

    3) I haven’t gotten a chance to check out

    Thanks for your help.
    Nina


    #10027776

    Support2
    Keymaster

    Hello Nina,

    1) Sorry, I forgot to mention that on Dome One Page Agency it’s not necessary include the file examples.portfolio.js on the page, so please to get it working follow the steps below:

    1.1) Remove the script on footer of page:

    <!-- Examples -->
    <script src="js/examples/examples.portfolio.js"></script>

    1.2) I saw that you define data-total-pages="8", so in that case will be necessary 7 files inside the “/ajax” folder:
    – demo-one-page-agency-ajax-load-more-2.html
    – demo-one-page-agency-ajax-load-more-3.html
    – demo-one-page-agency-ajax-load-more-4.html
    – demo-one-page-agency-ajax-load-more-5.html
    – demo-one-page-agency-ajax-load-more-6.html
    – demo-one-page-agency-ajax-load-more-7.html
    – demo-one-page-agency-ajax-load-more-8.html

    1.3) Replace the code of “Load More” in js/demos/demo-one-page-agency.js with the new on link below:
    https://pastebin.com/raw/KmtLpy8c

    2) The PHP error that it’s returning is related to a old version of PHP. Please let us know what version of PHP you are using.
    Note that the PHPMailer script it’s a third party plugin that we include with the template, so we don’t make any change on the code of this script.

    3) Ok.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10027783

    cochn01
    Participant

    Hi Rodrigo,

    Okay, I did as you suggested
    But, still only one page is loading

    Also I included 8 pages — because:
    demo-one-page-agency-ajax-load-more.html is included wit the other files with in the ajax folder. I tried renaming file to portfolio-ajax-load-more-1.html… Didn’t work. So it appears demo-one-page-agency-ajax-load-more.html is the only file being recognized… tried renaming others to match as follows: demo-one-page-agency-ajax-load-more-2.html … that did not work either… So

    Could this setting inside the html doc need changing?

    <div class=”container”>
    <div class=”container”>
    <div id=”LoadMoreBtnWrapper” class=”row text-center mt-4 pt-4 mb-4″>
    <div class=”col”>
    <div id=”loadMoreLoader” class=”load-more-loader”>
    <div class=”bounce-loader”>
    <div class=”bounce1″></div>
    <div class=”bounce2″></div>
    <div class=”bounce3″></div>
    </div>

    </div>
    <button id=”loadMore” type=”button” class=”btn custom-btn-style-1 text-color-dark”>LOAD MORE</button>
    </div>
    </div>
    </div>
    </div>

    I’m stumped…? Thank you
    Nina


    #10027784

    cochn01
    Participant

    Hi, also took a look at resize code…

    Still does not work… Look at the layout — it now is off!
    Also, when resize window is when ReCaptcha and SEND button only appears together…

    I am also getting code errors on sending email…

    Uncaught ReferenceError: adjustHeight is not defined
    at Object.<anonymous> (view.contact.js:87)
    at u (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at k (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)

    Ugh, No good!:(


    #10027788

    Support2
    Keymaster

    Hello Nina,

    1) Regarding the Load More first clear your browser cache (http://www.refreshyourcache.com/en/home/) to see the changes you have made.
    Even clearing the cache it’s returning an error that’s caused because you removed all code inside demo-one-page-agency.js and added only the “Load More” code. As per my instruction before, you should maintain all code in that file and replace only the “Load More” code with the new.

    2) Regarding the error on contact form, this it’s because is missing the code I provided for you on previous instructions. You can see that it’s missing the code inside the file: https://codenyc.net/okley_codenyc/js/views/view.contact.js.

    I saw that it’s missing a lot of changes provided on the step 3 here: http://www.okler.net/forums/topic/loading-issues/#post-10027768. Please make all the mentioned changes for get the contact form working with the recaptcha.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10027789

    cochn01
    Participant

    HAVE CLEARED CACHE EACH TIME Perhaps some of coding you didn’t because I was in the process of reverting ALL back to original coding.

    1) Follow your instructions here?

    * For each new content you want to load you need create a new file inside the “/ajax” folder, for example: “portfolio-ajax-load-more-2.html”, “portfolio-ajax-load-more-3”, etc.

    I DID DO THIS…..

    * Note that you need change the HTML on each file (portfolio-ajax-load-more-2.html, portfolio-ajax-load-more-3.html, etc…) content as per your needs.

    I DID DO THIS…..

    NOTE: (the ‘demo-one-page-agency.js’ is now updated). NOW YOU SAY and added only the “Load More” code. As per my instruction before, you should maintain all code in that file and replace only the “Load More” code with the new. I’m not understanding? SORRY


    #10027790

    cochn01
    Participant

    YES!! Okay now I understand… Thank you!
    I deleted all the code demo-one-page-agency.js’ instead just replacing the LOAD MORE portion of the code… It’s working. Thanks for all your help…
    🙂

    However, I still can’t get around the Contact Form issue??? When I did do the Resize — nothing changed! The SEND Button sits behind ReCaptcha and pushes elements down out of the frame.

    At one point I got the ReCaptcha window to turn green… But the email did not send!

    I’ll re-work a few more things and will get back later…

    Thanks

    Thanks


    #10027795

    Support2
    Keymaster

    Hello Nina,

    Great that solved the issue with the load more.

    Regarding the contact form, we entered in your website now and it’s returning error 404.
    To help you with the contact form resize we need inspect the code of your website to make some tests.

    Kind Regards,

    Rodrigo.


    #10027797

    Support2
    Keymaster
    This reply has been marked as private.
    #10027802

    cochn01
    Participant

    Ahhh Thank you!

    I just went ahead and change size issue in CSS… Because I tried the suggested #3 but did not work for some reason..
    Now I will try your suggestion… if the height resizes in different viewports… Does this code allow this?

    If not I’m gonna have to figure out a way… It looks horrible LOL

    BTW… Thought you’d like to know:
    As for the ReCaptcha and Contact Form return errors..There was something wrong in the coding for demo-one-page-agency.html. You can go in and swop your code from one of your other layouts… That’s exactly what I did 🙂 The code for demo-medical.html and it now works!

    Regards,
    NIna


    #10027804

    Support2
    Keymaster

    Hello Nina,

    The current code apply only on the first load of page. For example if you open the page on mobile device will works. But if you open in a desktop and then resize the window to a mobile size, the size will not be recalculated. If you need a code that recalculate on resize, just let us know and we can help you with that.

    Regarding the reCaptcha we will investigate this. Great that you figured it out.

    Kind Regards,

    Rodrigo.


    #10027807

    cochn01
    Participant

    Hello,

    Sure, I would be interested in recalculating on resize… Would like this feature for the Contact Form Resize.

    Thanks,
    Nina


    #10027815

    Support2
    Keymaster

    Hello Nina,

    We came to the conclusion that this resize it’s not good. So we created a new solution using only CSS (without javascript). We will add this on the Demo One Page Agency for the next versions of Porto.

    Please follow the steps below:

    1) Remove all the JS code we sent for you in the last replys on this ticket.

    2) Change the HTML of contact form and the map to:
    https://pastebin.com/raw/ixCPe9DQ
    * Change the recaptcha data-sitekey="" to yours.

    3) Add in (css/custom.css):

    .map-above {
    	min-height: 630px;
    	position: relative;
    }
    
    .map-above .map-above-map {
    	position: absolute;
    	top: 0;
    	min-height: 630px;
    	height: 100%;
    	width: 100%;
    }
    
    @media (max-width: 767px) {
    	.map-above .map-above-map {
    		position: relative;
    	}
    }
    
    .map-above .map-above-content {
    	background: transparent;
    }

    This will certainly solve the issue with resizes and new content inside the form.
    Hope it helps!

    Let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10027817

    cochn01
    Participant

    Thanks Rodrigo.

    I will certainly keep for future reference. But I went ahead and just changed the Contact Form to something else for this project.

    Again, thank you for all your help!
    Nina


    #10027818

    cochn01
    Participant

    I’m sorry…
    One last thing…

    How do I fix the following:

    ABOUT US
    SERVICES – Images – what-we-do-1.png/what-we-do-2.png
    KEY FEATURES
    and FIND YOUR NICHE Sections

    Notice they’re too far to the left – not centered in MOBILE VIEW.

    https://codenyc.net

    Thanks 🙂


    #10027823

    Support2
    Keymaster
    This reply has been marked as private.
    #10027825

    cochn01
    Participant

    Thanks,

    Your absolutely right… I didn’t move over png element.

    1) and 4) However, are you viewing page from an actual mobile device… Because when you resize on desktop the code works, but on iPhone 6 and Android it does not.

    2) That code did it!

    Is there a way I can provide a screen shot?

    Nina


    #10027827

    Support2
    Keymaster

    Hello Nina,

    Great. Regarding the mobile device we tested in several models of iPhone and Android.
    You can use a service like http://tinypic.com/ to generate a link with your image and share with us.

    Kind Regards,

    Rodrigo.


    #10027829

    cochn01
    Participant

    As you probably figured out! 😊

    I went in and fixed the problem.
    Thanks for the link. This will be very helpful for me.

    Cheers,
    Nina


    #10027830

    Support2
    Keymaster

    Hello Nina,

    Great! 🙂

    If you need further assistance, feel free to contact us.

    Kind Regards,

    Rodrigo.


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