Wordpress Plugin with Javascript

Question

I am working on a wordpress plugin which allows a user to enter a image url and konami code. When the konami code is entered an image pops up, but I can't get it to animate, I am somewhat unfamiliar with jQuery and Javascript, and I am just starting to learn it... Any help would be fantastic!

<script type="text/javascript" charset="utf-8">
if ( window.addEventListener ) {
  var kkeys = [], konami = "{$this->opts['wpk_code']['current']}";
  window.addEventListener("keydown", function(e){
    kkeys.push( e.keyCode );
    if ( kkeys.toString().indexOf( konami ) >= 0 ){
     var elms=document.getElementById("konami").style;
     elms.display=(elms.display=="block")?"none":"block";
}
  }, true);
}
</script>

agtb · Accepted Answer · 2011-10-11 13:50:47Z

2

Have a play with some of the examples on jQuery's animate() - they seem to do what you want.

answered Oct 11, 2011 at 13:50

agtb

4774 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jamie Over a year ago

Yes, I have tried several different ways of adding that function - however if i remove 'var elms=document.getElementById("konami").style; elms.display=(elms.display=="block")?"none":"block";' which tells the display to switch from none to block - the image doesnt appear, and when I add to the code it doesn't animate.

agtb Over a year ago

I see - depending on your animation you can call .show() or do something like $('#konami').animate({ 'opacity': 'show' }, 1000 );

Mattias Hagström · Accepted Answer · 2011-10-11 13:57:20Z

0

Try this:

$('#inputField').keyup(function () {
            if ($(this).val().length > 0) {
                $('#konami').animate({
                    opacity: 1,
                    left: '50'
                }, 100); 
            }
            else {
                $('#konami').animate({
                    opacity: 0,
                    left: '0'
                }, 100); 
            }
        });

HTML:

<input type="text" id="inputField" />
<img src="..." id="konami" style="position:relative;" />

edited Oct 11, 2011 at 13:57

answered Oct 11, 2011 at 13:29

Mattias Hagström

2113 silver badges8 bronze badges

5 Comments

Jamie Over a year ago

that just adds an input box and hides the image... When a specific code is executed by the user an image should pops up -which it does, but I want to add animate so it slides across the page.

Mattias Hagström Over a year ago

Then you should take a look at the animate method in jquery. you can find it here: api.jquery.com/animate

Mattias Hagström Over a year ago

Look above i have add some new lines of code that will move the image 50px and fade. NOTE that the new style property on the img - style="position:relative;" is critical.

Jamie Over a year ago

thanks! I got it..

<script> var kkeys = []; var konami = "{$this->opts['wpk_code']['current']}"; $(document).keydown(function(e) {     kkeys.push(e.keyCode);     if (kkeys.toString().indexOf(konami) >= 0)     {         kkeys = [];         $(".konami").show(1000);     } }); </script>

<div class="konami" style="display: none">     <p class="konami2">         <img src="<?php echo $url?>" />     </p> </div>

Mattias Hagström Over a year ago

Great :) If you found my answer´s useful, feel free to mark it :)

Collectives™ on Stack Overflow

Wordpress Plugin with Javascript

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related