javascript - jQuery click event stop working in plugin -

-

i've been trying add event listeners part of plugin. idea simple, goal slider plugin handles 2 dimensions (horizontally , vertically)

so have this

<div class="tab-container bg-dark-blue" start-tab="home">      <div class="tab-page" x-index="1" y-index="1" id="home">         <h1>x=1, y=1</h1>     </div>      <div class="tab-page" x-index="1" y-index="2">         <h1>x=1, y=2</h1>     </div>      <div class="tab-page" x-index="2" y-index="1">         <h1>x=2, y=1</h1>     </div>      <div class="tab-page" x-index="2" y-index="2">         <h1>x=2, y=2</h1>     </div>  </div>

where tab-page divs absolutely positioned 100% width , height, , tab-container relatively positioned 100% width , height of browser.

var __mymethods = { width : 0 height : 0, container : null, // other stuff setup : function(tab_container) { // setup __myplugin.container = tab_container // setup width, height of container },             /*          * movement functions          *          */         move : function(direction)         {              if( direction == 'left' )             {                 __mymethods.x--;                 __mymethods.translate( 'left', __mymethods.width );                 //             }              if( direction == 'right' )             {                 __mymethods.x++;                 __mymethods.translate( 'left', (-1)*__mymethods.width );                  //             }              if( direction == 'up' )             {                 __mymethods.y--;                 __mymethods.translate( 'top', __mymethods.height );             }              if( direction == 'down' )             {                 //                 __mymethods.y++;                 __mymethods.translate( 'top', (-1)*__mymethods.height );                 //             }           },           translate : function(property, offset)         {               // each .tab-page in animate css property             $(__mymethods.container).children(".tab-page").each( function() {                 var animation = {};                  var x = parseint( $(this).css(property).replace('px','') ) + offset;                   animation[property] = x.tostring() + 'px';                  $(this).animate(                     animation,                     {                         'duration' : 0,                         'queue' : false,                     }                 );              });           },       }; $.fn.myplugin = function() {     __mymethods.setup(this);       $(".btn").click( function(event)     {         __mymethods.move( $(this).attr("move") );         console.log(this);     });       return this; };

so put 

<button class="btn" move="up"></button> <button class="btn" move="down"></button>  <button class="btn" move="left"></button> <button class="btn" move="right"></button>

somewhere in html , works fine up, left, right... if click move="down" button works first time.

i don't know why hapening, event never fires again if click button, tried doing console.log(this) inside click event function, doesn't show after down button clicked...

any idea of can happening?

thank can give me

edit: here demo

regards

in jsfiddle down button seems stay behind tab-page s. giving z-index menu , tab-page elements solves problem.

in css file: add

z-index: 10;

to .menu

add

z-index: 1;

to .tab-page


Comments

Post a Comment

Popular posts from this blog

php - Invalid Cofiguration - yii\base\InvalidConfigException - Yii2 -

-
Image
i've installed yii2-user module/dektrium yii2-app-basic application command composer require "dektrium/yii2-user:0.9.*@dev" config/console.php return [ . . 'modules' => [ 'gii' => 'yii\gii\module', 'user' => [ 'class' => 'dektrium\user\module', ], ], . . ] config/web.php 'components' => [ . . /* 'user' => [ 'identityclass' => 'app\models\user', 'enableautologin' => true, ], */ 'modules' => [ 'user' => [ 'class' => 'dektrium\user\module', ], ], . . ] after that, run command $ php yii migrate/up --migrationpath=@vendor/dektrium/yii2-user/migrations updating database schema . but, when run http://localhost/mylawsuit/yii/web/index.php?r=u
Read more

How to show in django cms breadcrumbs full path? -

-
need advice - how show in breadcrumbs whole path article or page? i've got code: {% ance in ancestors %} <li> {% if not forloop.last %} <a href="{{ ance.get_absolute_url }}">{{ ance.get_menu_title }}</a> {% else %} <span class="active">{{ ance.get_menu_title }}</span> {% endif %} </li> {% endfor %} but shows "home" , current page. how modify show whole path in breadcrumbs? i've found in file menu_tags.py code calls ancestors. @ least there class showbreadcrumbs: class showbreadcrumb(inclusiontag): """ shows breadcrumb node has same url current request - start level: after level should breadcrumb start? 0=home - template: template used render breadcrumb """ name = 'show_breadcrumb' template = 'menu/dummy.html' options = options( argument('start_level', default=0, require
Read more

ruby on rails - npm error: tunneling socket could not be established, cause=connect ETIMEDOUT -

-
i have app uses rails framework , implements angularjs part of front end. i have pushed heroku , have heroku toolbelt installed, when try migrate db using "heroku run rake db:migrate" receive following error(s): installing core plugins heroku-cli-addons, heroku-apps, heroku-fork, heroku-git, heroku-local, heroku-run, heroku-status... error installing package. try running again gode_debug=info see more output. ! `run` not heroku command. ! perhaps meant `-h`, `2fa`, `auth`, `join`, `open`, `orgs`, `pg`, `ps` or `rake`. ! see `heroku help` list of available commands. i run command "gode_debug=info heroku run rake db:migrate" , receive error: npm err! darwin 14.5.0 npm err! argv "/users/christopher_pelnar/.heroku/node-v4.2.1-darwin-x64/bin/node" "/users/christopher_pelnar/.heroku/node-v4.2.1-darwin-x64/lib/node_modules/npm/cli.js" "install" "heroku-cli-addons" "heroku-apps" "heroku-fork
Read more