GetSimple Support Forum
Newsletter (or contact) sliding sidebar - Printable Version

+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: Scripts & Components (http://get-simple.info/forums/forumdisplay.php?fid=11)
+--- Thread: Newsletter (or contact) sliding sidebar (/showthread.php?tid=4632)

Newsletter (or contact) sliding sidebar - filmpl - 2013-04-15

Hello,

I wanted to put MLD Newsletter into a nice sticky sidebar inspired from http://spyrestudios.com/demos/sliding-panel-left/

You can see my example here :

http://bit.ly/XJFW6Z

Here is how I proceed.

JS in PHP template (just before </head>) :

PHP Code:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    
<script type="text/javascript">
$(document).ready(function(){

$("a[href='http://www.mysite.net/newsletter/']").attr('href', '#')

    $(".trigger").click(function(){
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
});
</script> 

HTML in PHP template (just before </body>) :

PHP Code:
<div class="panel">

<p>Please subscribe newsletter :</p>
 <?php mldNewsletterForm(); ?>
</div>
<a class="trigger" href="http://www.mysite.net/newsletter/">newsletter</a> 

The original code from spyrestudio was modified in order to enhance accessibility :
- Without JS, newsletter button links to a NL dedicated page (http://www.mysite.net/newsletter/) ;
- With JS, newsletter button permits the click/toggle function by changing the original link into a #.

Finally, here is my CSS :

Code:
p.mld_label{
    padding:0px;
    line-height:1em;
}

label.mld_label {
    display:block;
    font-weight:bold;
    padding : 0px;
}

input {
    display:block;
    max-width:90%;
    margin: 2px 8px 0px 12px;
}
input .submit {
    display:block-inline;
    margin-top:2px;
padding-top:3px;
}

#contact #mldmessage {
    color: black!important;
    font-weight:bold;
    padding-bottom:3px;
}

#contact #unsubscribe {
}

#newsletter #mldmessage {
    color: #fff!important;
    font-weight:bold;
    padding-bottom:3px;
}

div.mld_newsletterpreview {
    width: auto;
    border: 1px solid #222222;
}

.animated {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes flash {
    0%, 50%, 100% {opacity: 1;}    
    25%, 75% {opacity: 0;}
}

@-moz-keyframes flash {
    0%, 50%, 100% {opacity: 1;}    
    25%, 75% {opacity: 0;}
}

@-o-keyframes flash {
    0%, 50%, 100% {opacity: 1;}    
    25%, 75% {opacity: 0;}
}

@keyframes flash {
    0%, 50%, 100% {opacity: 1;}    
    25%, 75% {opacity: 0;}
}

#mldmessage {
    -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -o-animation-name: flash;
    animation-name: flash;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
        -webkit-animation-delay: 1s;
        -moz-animation-delay: 1s;
        -o-animation-delay: 1s;
        -animation-delay: 1s;
    -webkit-animation-iteration-count: 5;
    -moz-animation-iteration-count: 5;
    -o-animation-iteration-count: 5;
    -animation-iteration-count: 5;
    }

#newsletter #mldmessage {
        -webkit-animation-delay: 3s;
        -moz-animation-delay: 3s;
        -o-animation-delay: 3s;
        -animation-delay: 3s;
}

There is one more thing I'd want to do, but I'm not good enough in Ajax for it.

When you submit, the page reloads and the sidebar gets closed. Consequently, you can't read the confirmation message.

Could someone tell me how keep the sidebar open and make the mesage appear ? I think it's about reloading/not-reloading parts of the page...

Thanks for your help !