Add elements via JavaScript from the database

Question

Add elements via JavaScript from the database

Navigation

#1 by (1 votes)

0

I'm using a Full Screen Overlay effect in my site , this effect I got on Codrops . It's working normal, however, as I'm looking for data in BD, how to make it work not just on one button, but how many?

JS :

(function() {
var triggerBttn = document.getElementById('menudrops'),
    overlay = document.querySelector( 'div.overlay' ),
    closeBttn = overlay.querySelector( 'p.overlay-close' );
    transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
    },
    transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
    support = { transitions : Modernizr.csstransitions };
    s = Snap( overlay.querySelector( 'svg' ) ), 
    path = s.select( 'path' ),
    steps = overlay.getAttribute( 'data-steps' ).split(';'),
    stepsTotal = steps.length;

function toggleOverlay() {
    if( classie.has( overlay, 'open' ) ) {
        var pos = stepsTotal-1;
        classie.remove( overlay, 'open' );
        classie.add( overlay, 'close' );

        var onEndTransitionFn = function( ev ) {
                classie.remove( overlay, 'close' );
            },
            nextStep = function( pos ) {
                pos--;
                if( pos < 0 ) return;
                path.animate( { 'path' : steps[pos] }, 60, mina.linear, function() { 
                    if( pos === 0 ) {
                        onEndTransitionFn();
                    }
                    nextStep(pos);
                } );
            };

        nextStep(pos);
    }
    else if( !classie.has( overlay, 'close' ) ) {
        var pos = 0;
        classie.add( overlay, 'open' );

        var nextStep = function( pos ) {
            pos++;
            if( pos > stepsTotal - 1 ) return;
            path.animate( { 'path' : steps[pos] }, 60, mina.linear, function() { nextStep(pos); } );
        };

        nextStep(pos);
    }
    }

    triggerBttn.addEventListener( 'click', toggleOverlay );
    closeBttn.addEventListener( 'click', toggleOverlay );
})();

PHP :

<section>
    <p id="menudrops">'.$titulo.'</p>
</section>

php javascript

asked by anonymous 24.03.2014 / 18:42

1 answer

ClickOnce failed to load report Crystal Reports Global angular variable problem

score 1 · Accepted Answer

You can do this another way, without using the plugin

My alternative to this would be to use a div with display none and overflow hidden and at the moment of the click give an animate in the height of it ...

Follow the example codes

HTML

<div class='Efeito'>
        coloque o conteudo aqui
    </div>
<a class="ativarefeito" href='javascript:void(0)'>Clique para ativa o efeito</a>

CSS

.Efeito{position: absolute; bottom: 0; left: 0; background: red; width: 100%; height: 0; z-index: 9999; opacity: 0.5; overflow: hidden;}

Javascript

$(function(){
    $('.ativarefeito').click(function(){
        $('.Efeito').animate({
            height: '100%'
        });
    });
});

By working a little bit on the code you can make the effect come from the point you want, even from the center going towards the tips, this is just the simplest example I could do, I used something similar on this page: link