Frontend Archives

09 Sep 2016

Comodo SSL Trustlogo installation on site

By Igor Usoltsev

Comodo is a pretty popular SSL provider and our client decided to purchase certificate there.

They also wanted to install Trustlogo icon with a popup that shows info about domain.

Usually, you can use the quick setup from Comodo – https://ssl.comodo.com/free-trust-logo.php

Or:

download TrustLogo / use your custom logo.

Add this code before your </head> closing tag

<script type="text/javascript"> //<![CDATA[ 
var tlJsHost = ((window.location.protocol == "https:") ? "https://secure.comodo.com/" : "http://www.trustlogo.com/");
document.write(unescape("%3Cscript src='" + tlJsHost + "trustlogo/javascript/trustlogo.js' type='text/javascript'%3E%3C/script%3E"));
//]]>
</script>

var tlJsHost = ((window.location.protocol == "https:") ? "https://secure.comodo.com/" : "http://www.trustlogo.com/");

document.write(unescape("%3Cscript src='" + tlJsHost + "trustlogo/javascript/trustlogo.js' type='text/javascript'%3E%3C/script%3E"));

//]]>

</script>

Add this at the final location on the page before </body> closing tag

<script language="JavaScript" type="text/javascript"> TrustLogo("https://example.com/trustlogo.jpg", "CL1", "none"); </script>
1
2
3
<script language="JavaScript" type="text/javascript">
TrustLogo("https://example.com/trustlogo.jpg", "CL1", "none");
</script>

Please, note that https://example.com/trustlogo.jpg should be changed on the real absolute URL of the TrustLogo on your server

Of course I got a few problems.

First, I got the text – “IdAuthority™ Credentials are NOT available for this site”. This is fine for your local server, as no valid domain is supplied to Comodo. The issue appeared on a dev/live sites on client domains as well, and this is not fine, totally.

The reason is in this line of code:

TrustLogo("https://example.com/trustlogo.jpg", "CL1", "none");

1	TrustLogo("https://example.com/trustlogo.jpg", "CL1", "none");

Comodo support team quickly replied on the raised ticket that I used wrong certificate type – CL1. They recommended change this to SC2.

Ok, popup now shown (yay!)

Wait, why I see the scrollbars?

Iframe content is wider than iframe itself (weirdo). So CSS/JS hacks won’t work here, and they seem ridiculuos to me to be applied on the out-of-the-box widget. No main site styles collisions here as well.

Luckily, I had a fellow developer in contact who successfully installed TrustLogo on his site – just use SC5 instead of SC2.

The final code will be

TrustLogo("https://example.com/trustlogo.jpg", "SC5", "none");

1	TrustLogo("https://example.com/trustlogo.jpg", "SC5", "none");

And now the widget is shown without any issues.

Hope that saved some time for you!

16 May 2016

Advanced Custom Fields plugin proper multilanguage site redirection after posts save

By admin

Based on ACF acf/save_post action hook.

29 Apr 2016

Bootstrap modal iOS momentum issue

By admin

Recently on one of the projects using Bootstrap 3 I encountered really weird bug – when the modal is opened, you can scroll the underlay.

In theory you have a backdrop over main body content, and only modal should be scrolled. No actions on page content itself.

In some cases it was not only aesthetic problem. My modal even stopped reacting on touch actions. The body was scrolled instead.

I have read tons of articles, and issue was using css property -webkit-overflow-scrolling: touch; on my Bootstrap modal.

If you don’t use this, you have really poor scrolling experience. The css rule applies so called infinite (or momentum) scrolling.

So, imagine you have this HTML:

<body>
<!-- main page wrapper div is going here -->
<div class="page-wrapper">
<!-- your page header... -->
<header>...</header>
<!-- ...content... -->
<div class="main-content">...</div>
<!-- ...and footer -->
</footer>
</div>
<!-- standard Bootstrap 3 modal code here -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">...</div>
</body>

<body>

</footer>

</div>

</body>

Then, in your custom modal .less file add following lines:

.modal-open {
    @media only screen and (min-resolution:150dpi) and (max-width: @screen-sm),
            only screen and (-webkit-min-device-pixel-ratio:1.5) {
        height: 100%;
        position:absolute;
        overflow:hidden;
        -webkit-overflow-scrolling: auto;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-transform: translateZ(0);

        >.page,
        >.footer,
        >.header{
            display: none;
        }
        .modal {
            position: relative;
            overflow-y: scroll !important;
            -webkit-overflow-scrolling: touch;
            -webkit-backface-visibility: hidden;
            -webkit-transform: translateZ(0px);
            -webkit-transform: translate3d(0,0,0);
            -webkit-perspective: 1000;
            transform: none;
        }
    }
}

.modal-open {

@media only screen and (min-resolution:150dpi) and (max-width: @screen-sm),

only screen and (-webkit-min-device-pixel-ratio:1.5) {

height: 100%;

position:absolute;

overflow:hidden;

-webkit-overflow-scrolling: auto;

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

-webkit-transform: translateZ(0);

>.page,

>.footer,

>.header{

display: none;

}

.modal {

position: relative;

overflow-y: scroll !important;

-webkit-overflow-scrolling: touch;

-webkit-backface-visibility: hidden;

-webkit-transform: translateZ(0px);

-webkit-transform: translate3d(0,0,0);

-webkit-perspective: 1000;

transform: none;

}

Please, make sure that your modal has class .modal-open when it’s opened.

In my case, I had a modal with the height larger than mobile screen.

So, a pretty nice solution was to make modal full screen.

So that I have no scroll issues when I open modal – it should be always scrolled to top, and the page saved its scroll position when the modal is closed, I added few jQuery lines (as you are using Bootstrap jQuery is OK here):

if($(window).width()<768){
  var st;
  $('.modal').on('show.bs.modal', function () {
    st = $(window).scrollTop();
  });
  $('.modal').on('shown.bs.modal', function () {
    $('.page-wrapper').hide();
  });
  $('.modal').on('hide.bs.modal', function () {
    $('.page-wrapper').show();
    $('body,html').scrollTop(st);
  });
}

if($(window).width()<768){

var st;

$('.modal').on('show.bs.modal', function () {

st = $(window).scrollTop();

});

$('.modal').on('shown.bs.modal', function () {

$('.page-wrapper').hide();

});

$('.modal').on('hide.bs.modal', function () {

$('.page-wrapper').show();

$('body,html').scrollTop(st);

});

}

Hope this will work for you!

Frontend

Viewing posts from the Frontend category

Comodo SSL Trustlogo installation on site

Advanced Custom Fields plugin proper multilanguage site redirection after posts save

Recent Posts

Archives

Categories