Search Results

Search found 243 results on 10 pages for 'keyup'.

Page 3/10 | < Previous Page | 1 2 3 4 5 6 7 8 9 10  | Next Page >

  • Calling a jQuery method at declaration time, and then onEvent

    - by cesarsalazar
    I've been writing JS (mainly jQuery) for quite a few months now, but today I decided to make my first abstraction as a jQuery method. I already have working code but I feel/know that I'm not doing it the right way, so I come here for some enlightenment. Note: Please do not reply that there's already something out there that does the trick as I already know that. My interest in this matter is rather educational. What my code is intended to do (and does): Limit the characters of a textfield and change the color of the counter when the user is approaching the end. And here's what I have: $(function(){ $('#bio textarea').keyup(function(){ $(this).char_length_validation({ maxlength: 500, warning: 50, validationSelector: '#bio .note' }) }) $('#bio textarea').trigger('keyup'); }) jQuery.fn.char_length_validation = function(opts){ chars_left = opts.maxlength - this.val().length; if(chars_left >= 0){ $(opts.validationSelector + ' .value').text(chars_left); if(chars_left < opts.warning){ $(opts.validationSelector).addClass('invalid'); } else{ $(opts.validationSelector).removeClass('invalid'); } } else{ this.value = this.value.substring(0, opts.maxlength); } } In the HTML: <div id="bio"> <textarea>Some text</textarea> <p class="note> <span class="value">XX</span> <span> characters left</span> </p> </div> Particularly I feel really uncomfortable binding the event each on each keyup instead of binding once and calling a method later. Also, (and hence the title) I need to call the method initially (when the page renders) and then every time the user inputs a character. Thanks in advance for your time :)

    Read the article

  • Jump handling and gravity

    - by sprawl
    I'm new to game development and am looking for some help on improving my jump handling for a simple side scrolling game I've made. I would like to make the jump last longer if the key is held down for the full length of the jump, otherwise if the key is tapped, make the jump not as long. Currently, how I'm handling the jumping is the following: Player.prototype.jump = function () { // Player pressed jump key if (this.isJumping === true) { // Set sprite to jump state this.settings.slice = 250; if (this.isFalling === true) { // Player let go of jump key, increase rate of fall this.settings.y -= this.velocity; this.velocity -= this.settings.gravity * 2; } else { // Player is holding down jump key this.settings.y -= this.velocity; this.velocity -= this.settings.gravity; } } if (this.settings.y >= 240) { // Player is on the ground this.isJumping = false; this.isFalling = false; this.velocity = this.settings.maxVelocity; this.settings.y = 240; } } I'm setting isJumping on keydown and isFalling on keyup. While it works okay for simple use, I'm looking for a better way handle jumping and gravity. It's a bit buggy if the gravity is increased (which is why I had to put the last y setting in the last if condition in there) on keyup, so I'd like to know a better way to do it. Where are some resources I could look at that would help me better understand how to handle jumping and gravity? What's a better approach to handling this? Like I said, I'm new to game development so I could be doing it completely wrong. Any help would be appreciated.

    Read the article

  • Contact Form using validation to send to phpmailer

    - by Jaciinto
    This is the first time I have ever wrote anything in java script so I am unsure if I am doing anything right. I used yensdesign.com tutorial as an example and went from there but cant get it to submit the var to validation.php and also can not get it to at the end give me congrats message for it passing. Any help would be greatly appreciated. //Form $(document).ready(function(){ //global vars var form = $("#contactForm"); var title = $("#contactTitle"); var name = $("#contactName"); var email = $("#contactEmail"); var message = $("#contactMessage"); //On blur name.blur(validateName); email.blur(validateEmail); title.blur(validateTitle); //On key press name.keyup(validateName); email.keyup(validateEmail); title.keyup(validateTitle); message.keyup(validateMessage); //validation functions function validateEmail() { //testing regular expression var a = $("#contactEmail").val(); var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/; //if it's valid email if(filter.test(a)) { email.removeClass("contactError"); return true; } //if it's NOT valid else { email.addClass("contactError"); return false; } } function validateName() { //if it's NOT valid if(name.val().length < 4) { name.addClass("contactError"); return false; } //if it's valid else { name.removeClass("contactError"); return true; } } function validateTitle() { //if it's NOT valid if(title.val().length < 4) { title.addClass("contactError"); return false; } //if it's valid else { title.removeClass("contactError"); return true; } } function validateMessage(){ //it's NOT valid if(message.val().length < 10){ message.addClass("contactError"); return false; } //it's valid else{ message.removeClass("contactError"); return true; } } var dataString = 'name='+ name + '&email=' + email + '&number=' + number + '&comment=' + comment; function valid () { if(validateName() & validateEmail() & validateTitle() & validateMessage()) { type: "POST", url: "bin/process.php", data: dataString, success: function() { $('#contactForm').html("<div id='message'></div>"); $('#message').html("<h2>Thanks!</h2>") .append("<p>We will be in touch soon.</p>") .hide() .fadeIn(1500, function() { $('#message').append("<img id='checkmark' src='images/check.png' />"); }); } else { return false; } } });

    Read the article

  • How can I make smoother upwards/downwards controls in pygame?

    - by Zolani13
    This is a loop I use to interpret key events in a python game. # Event Loop for event in pygame.event.get(): if event.type == QUIT: pygame.quit() sys.exit() if event.type == pygame.KEYDOWN: if event.key == pygame.K_a: my_speed = -10; if event.key == pygame.K_d: my_speed = 10; if event.type == pygame.KEYUP: if event.key == pygame.K_a: my_speed = 0; if event.key == pygame.K_d: my_speed = 0; The 'A' key represents up, while the 'D' key represents down. I use this loop within a larger drawing loop, that moves the sprite using this: Paddle1.rect.y += my_speed; I'm just making a simple pong game (as my first real code/non-gamemaker game) but there's a problem between moving upwards <= downwards. Essentially, if I hold a button upwards (or downwards), and then press downwards (or upwards), now holding both buttons, the direction will change, which is a good thing. But if I then release the upward button, then the sprite will stop. It won't continue in the direction of my second input. This kind of key pressing is actually common with WASD users, when changing directions quickly. Few people remember to let go of the first button before pressing the second. But my program doesn't accommodate the habit. I think I understand the reason, which is that when I let go of my first key, the KEYUP event still triggers, setting the speed to 0. I need to make sure that if a key is released, it only sets the speed to 0 if another key isn't being pressed. But the interpreter will only go through one event at a time, I think, so I can't check if a key has been pressed if it's only interpreting the commands for a released key. This is my dilemma. I want set the key controls so that a player doesn't have to press one button at a time to move upwards <= downwards, making it smoother. How can I do that?

    Read the article

  • Map Ctrl and Alt to mouse thumb buttons

    - by murphyslaw
    I'm running Ubuntu 12.04 and have a multi-button Microsoft mouse. I would like to map the CTRL and ALT modifier keys to the left and right thumb buttons of my mouse, respectively, so I can ctrl-click and alt-click without touching the keyboard. My thumb buttons are buttons 8 and 9. I tried the solution in this question: How do I configure a mouse thumb button? which explained how to map a double click to a thumb button - this worked for the double-click but I couldn't figure out how to modify the solution for CTRL and ALT I also tried this: How to map Ctrl/Shift to thumb buttons of Mouse? which used xdotools and xbindkeys. I modified the script to this: ~/.xbindkeysrc: "xdotool keydown alt" b:9 "xdotool keyup alt" release + alt + b:9 "xdotool keydown ctrl" b:8 "xdotool keyup ctrl" release + control + b:8 Which ALMOST works. It simulates a CTRL-key press when I click the left thumb button, but I can't actually hold the button and click at the same time - holding the thumb button seems to prevent it from listening to other input until it is released. Does anyone know how I can make my mouse thumb button actually work as a modifier key, so I can use thumb_button+click instead of CTRL-click?

    Read the article

  • Camera doesnt move on opengl qt

    - by hugo
    Here is my code, as my subject indicates i have implemented a camera but i couldnt make it move,Thanks in advance. #define PI_OVER_180 0.0174532925f define GL_CLAMP_TO_EDGE 0x812F include "metinalifeyyaz.h" include include include include include include include metinalifeyyaz::metinalifeyyaz(QWidget *parent) : QGLWidget(parent) { this->setFocusPolicy(Qt:: StrongFocus); time = QTime::currentTime(); timer = new QTimer(this); timer->setSingleShot(true); connect(timer, SIGNAL(timeout()), this, SLOT(updateGL())); xpos = yrot = zpos = 0; walkbias = walkbiasangle = lookupdown = 0.0f; keyUp = keyDown = keyLeft = keyRight = keyPageUp = keyPageDown = false; } void metinalifeyyaz::drawBall() { //glTranslatef(6,0,4); glutSolidSphere(0.10005,300,30); } metinalifeyyaz:: ~metinalifeyyaz(){ glDeleteTextures(1,texture); } void metinalifeyyaz::initializeGL(){ glShadeModel(GL_SMOOTH); glClearColor(1.0,1.0,1.0,0.5); glClearDepth(1.0f); glEnable(GL_DEPTH_TEST); glEnable(GL_TEXTURE_2D); glDepthFunc(GL_LEQUAL); glClearColor(1.0,1.0,1.0,1.0); glShadeModel(GL_SMOOTH); GLfloat mat_specular[]={1.0,1.0,1.0,1.0}; GLfloat mat_shininess []={30.0}; GLfloat light_position[]={1.0,1.0,1.0}; glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular); glMaterialfv(GL_FRONT,GL_SHININESS,mat_shininess); glLightfv(GL_LIGHT0, GL_POSITION, light_position); glEnable(GL_LIGHT0); glEnable(GL_LIGHTING); QImage img1 = convertToGLFormat(QImage(":/new/prefix1/halisaha2.bmp")); QImage img2 = convertToGLFormat(QImage(":/new/prefix1/white.bmp")); glGenTextures(2,texture); glBindTexture(GL_TEXTURE_2D, texture[0]); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, img1.width(), img1.height(), 0, GL_RGBA, GL_UNSIGNED_BYTE, img1.bits()); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glBindTexture(GL_TEXTURE_2D, texture[1]); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, img2.width(), img2.height(), 0, GL_RGBA, GL_UNSIGNED_BYTE, img2.bits()); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST); // Really nice perspective calculations } void metinalifeyyaz::resizeGL(int w, int h){ if(h==0) h=1; glViewport(0,0,w,h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0f, static_cast<GLfloat>(w)/h,0.1f,100.0f); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } void metinalifeyyaz::paintGL(){ movePlayer(); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity(); GLfloat xtrans = -xpos; GLfloat ytrans = -walkbias - 0.50f; GLfloat ztrans = -zpos; GLfloat sceneroty = 360.0f - yrot; glLoadIdentity(); glRotatef(lookupdown, 1.0f, 0.0f, 0.0f); glRotatef(sceneroty, 0.0f, 1.0f, 0.0f); glTranslatef(xtrans, ytrans+50, ztrans-130); glLoadIdentity(); glTranslatef(1.0f,0.0f,-18.0f); glRotatef(45,1,0,0); drawScene(); int delay = time.msecsTo(QTime::currentTime()); if (delay == 0) delay = 1; time = QTime::currentTime(); timer->start(qMax(0,10 - delay)); } void metinalifeyyaz::movePlayer() { if (keyUp) { xpos -= sin(yrot * PI_OVER_180) * 0.5f; zpos -= cos(yrot * PI_OVER_180) * 0.5f; if (walkbiasangle >= 360.0f) walkbiasangle = 0.0f; else walkbiasangle += 7.0f; walkbias = sin(walkbiasangle * PI_OVER_180) / 10.0f; } else if (keyDown) { xpos += sin(yrot * PI_OVER_180)*0.5f; zpos += cos(yrot * PI_OVER_180)*0.5f ; if (walkbiasangle <= 7.0f) walkbiasangle = 360.0f; else walkbiasangle -= 7.0f; walkbias = sin(walkbiasangle * PI_OVER_180) / 10.0f; } if (keyLeft) yrot += 0.5f; else if (keyRight) yrot -= 0.5f; if (keyPageUp) lookupdown -= 0.5; else if (keyPageDown) lookupdown += 0.5; } void metinalifeyyaz::keyPressEvent(QKeyEvent *event) { switch (event->key()) { case Qt::Key_Escape: close(); break; case Qt::Key_F1: setWindowState(windowState() ^ Qt::WindowFullScreen); break; default: QGLWidget::keyPressEvent(event); case Qt::Key_PageUp: keyPageUp = true; break; case Qt::Key_PageDown: keyPageDown = true; break; case Qt::Key_Left: keyLeft = true; break; case Qt::Key_Right: keyRight = true; break; case Qt::Key_Up: keyUp = true; break; case Qt::Key_Down: keyDown = true; break; } } void metinalifeyyaz::changeEvent(QEvent *event) { switch (event->type()) { case QEvent::WindowStateChange: if (windowState() == Qt::WindowFullScreen) setCursor(Qt::BlankCursor); else unsetCursor(); break; default: break; } } void metinalifeyyaz::keyReleaseEvent(QKeyEvent *event) { switch (event->key()) { case Qt::Key_PageUp: keyPageUp = false; break; case Qt::Key_PageDown: keyPageDown = false; break; case Qt::Key_Left: keyLeft = false; break; case Qt::Key_Right: keyRight = false; break; case Qt::Key_Up: keyUp = false; break; case Qt::Key_Down: keyDown = false; break; default: QGLWidget::keyReleaseEvent(event); } } void metinalifeyyaz::drawScene(){ glBegin(GL_QUADS); glNormal3f(0.0f,0.0f,1.0f); // glColor3f(0,0,1); //back glVertex3f(-6,0,-4); glVertex3f(-6,-0.5,-4); glVertex3f(6,-0.5,-4); glVertex3f(6,0,-4); glEnd(); glBegin(GL_QUADS); glNormal3f(0.0f,0.0f,-1.0f); //front glVertex3f(6,0,4); glVertex3f(6,-0.5,4); glVertex3f(-6,-0.5,4); glVertex3f(-6,0,4); glEnd(); glBegin(GL_QUADS); glNormal3f(-1.0f,0.0f,0.0f); // glColor3f(0,0,1); //left glVertex3f(-6,0,4); glVertex3f(-6,-0.5,4); glVertex3f(-6,-0.5,-4); glVertex3f(-6,0,-4); glEnd(); glBegin(GL_QUADS); glNormal3f(1.0f,0.0f,0.0f); // glColor3f(0,0,1); //right glVertex3f(6,0,-4); glVertex3f(6,-0.5,-4); glVertex3f(6,-0.5,4); glVertex3f(6,0,4); glEnd(); glBindTexture(GL_TEXTURE_2D, texture[0]); glBegin(GL_QUADS); glNormal3f(0.0f,1.0f,0.0f);//top glTexCoord2f(1.0f,0.0f); glVertex3f(6,0,-4); glTexCoord2f(1.0f,1.0f); glVertex3f(6,0,4); glTexCoord2f(0.0f,1.0f); glVertex3f(-6,0,4); glTexCoord2f(0.0f,0.0f); glVertex3f(-6,0,-4); glEnd(); glBegin(GL_QUADS); glNormal3f(0.0f,-1.0f,0.0f); //glColor3f(0,0,1); //bottom glVertex3f(6,-0.5,-4); glVertex3f(6,-0.5,4); glVertex3f(-6,-0.5,4); glVertex3f(-6,-0.5,-4); glEnd(); // glPushMatrix(); glBindTexture(GL_TEXTURE_2D, texture[1]); glBegin(GL_QUADS); glNormal3f(1.0f,0.0f,0.0f); glTexCoord2f(1.0f,0.0f); //right far goal post front face glVertex3f(5,0.5,-0.95); glTexCoord2f(1.0f,1.0f); glVertex3f(5,0,-0.95); glTexCoord2f(0.0f,1.0f); glVertex3f(5,0,-1); glTexCoord2f(0.0f,0.0f); glVertex3f(5, 0.5, -1); glColor3f(1,1,1); //right far goal post back face glVertex3f(5.05,0.5,-0.95); glVertex3f(5.05,0,-0.95); glVertex3f(5.05,0,-1); glVertex3f(5.05, 0.5, -1); glColor3f(1,1,1); //right far goal post left face glVertex3f(5,0.5,-1); glVertex3f(5,0,-1); glVertex3f(5.05,0,-1); glVertex3f(5.05, 0.5, -1); glColor3f(1,1,1); //right far goal post right face glVertex3f(5.05,0.5,-0.95); glVertex3f(5.05,0,-0.95); glVertex3f(5,0,-0.95); glVertex3f(5, 0.5, -0.95); glColor3f(1,1,1); //right near goal post front face glVertex3f(5,0.5,0.95); glVertex3f(5,0,0.95); glVertex3f(5,0,1); glVertex3f(5,0.5, 1); glColor3f(1,1,1); //right near goal post back face glVertex3f(5.05,0.5,0.95); glVertex3f(5.05,0,0.95); glVertex3f(5.05,0,1); glVertex3f(5.05,0.5, 1); glColor3f(1,1,1); //right near goal post left face glVertex3f(5,0.5,1); glVertex3f(5,0,1); glVertex3f(5.05,0,1); glVertex3f(5.05,0.5, 1); glColor3f(1,1,1); //right near goal post right face glVertex3f(5.05,0.5,0.95); glVertex3f(5.05,0,0.95); glVertex3f(5,0,0.95); glVertex3f(5,0.5, 0.95); glColor3f(1,1,1); //right crossbar front face glVertex3f(5,0.55,-1); glVertex3f(5,0.55,1); glVertex3f(5,0.5,1); glVertex3f(5,0.5,-1); glColor3f(1,1,1); //right crossbar back face glVertex3f(5.05,0.55,-1); glVertex3f(5.05,0.55,1); glVertex3f(5.05,0.5,1); glVertex3f(5.05,0.5,-1); glColor3f(1,1,1); //right crossbar bottom face glVertex3f(5.05,0.5,-1); glVertex3f(5.05,0.5,1); glVertex3f(5,0.5,1); glVertex3f(5,0.5,-1); glColor3f(1,1,1); //right crossbar top face glVertex3f(5.05,0.55,-1); glVertex3f(5.05,0.55,1); glVertex3f(5,0.55,1); glVertex3f(5,0.55,-1); glColor3f(1,1,1); //left far goal post front face glVertex3f(-5,0.5,-0.95); glVertex3f(-5,0,-0.95); glVertex3f(-5,0,-1); glVertex3f(-5, 0.5, -1); glColor3f(1,1,1); //right far goal post back face glVertex3f(-5.05,0.5,-0.95); glVertex3f(-5.05,0,-0.95); glVertex3f(-5.05,0,-1); glVertex3f(-5.05, 0.5, -1); glColor3f(1,1,1); //right far goal post left face glVertex3f(-5,0.5,-1); glVertex3f(-5,0,-1); glVertex3f(-5.05,0,-1); glVertex3f(-5.05, 0.5, -1); glColor3f(1,1,1); //right far goal post right face glVertex3f(-5.05,0.5,-0.95); glVertex3f(-5.05,0,-0.95); glVertex3f(-5,0,-0.95); glVertex3f(-5, 0.5, -0.95); glColor3f(1,1,1); //left near goal post front face glVertex3f(-5,0.5,0.95); glVertex3f(-5,0,0.95); glVertex3f(-5,0,1); glVertex3f(-5,0.5, 1); glColor3f(1,1,1); //right near goal post back face glVertex3f(-5.05,0.5,0.95); glVertex3f(-5.05,0,0.95); glVertex3f(-5.05,0,1); glVertex3f(-5.05,0.5, 1); glColor3f(1,1,1); //right near goal post left face glVertex3f(-5,0.5,1); glVertex3f(-5,0,1); glVertex3f(-5.05,0,1); glVertex3f(-5.05,0.5, 1); glColor3f(1,1,1); //right near goal post right face glVertex3f(-5.05,0.5,0.95); glVertex3f(-5.05,0,0.95); glVertex3f(-5,0,0.95); glVertex3f(-5,0.5, 0.95); glColor3f(1,1,1); //left crossbar front face glVertex3f(-5,0.55,-1); glVertex3f(-5,0.55,1); glVertex3f(-5,0.5,1); glVertex3f(-5,0.5,-1); glColor3f(1,1,1); //right crossbar back face glVertex3f(-5.05,0.55,-1); glVertex3f(-5.05,0.55,1); glVertex3f(-5.05,0.5,1); glVertex3f(-5.05,0.5,-1); glColor3f(1,1,1); //right crossbar bottom face glVertex3f(-5.05,0.5,-1); glVertex3f(-5.05,0.5,1); glVertex3f(-5,0.5,1); glVertex3f(-5,0.5,-1); glColor3f(1,1,1); //right crossbar top face glVertex3f(-5.05,0.55,-1); glVertex3f(-5.05,0.55,1); glVertex3f(-5,0.55,1); glVertex3f(-5,0.55,-1); glEnd(); // glPopMatrix(); // glPushMatrix(); // glTranslatef(0,0,0); // glutSolidSphere(0.10005,500,30); // glPopMatrix(); }

    Read the article

  • Camera doesn't move

    - by hugo
    Here is my code, as my subject indicates i have implemented a camera but I couldn't make it move. #define PI_OVER_180 0.0174532925f #define GL_CLAMP_TO_EDGE 0x812F #include "metinalifeyyaz.h" #include <GL/glu.h> #include <GL/glut.h> #include <QTimer> #include <cmath> #include <QKeyEvent> #include <QWidget> #include <QDebug> metinalifeyyaz::metinalifeyyaz(QWidget *parent) : QGLWidget(parent) { this->setFocusPolicy(Qt:: StrongFocus); time = QTime::currentTime(); timer = new QTimer(this); timer->setSingleShot(true); connect(timer, SIGNAL(timeout()), this, SLOT(updateGL())); xpos = yrot = zpos = 0; walkbias = walkbiasangle = lookupdown = 0.0f; keyUp = keyDown = keyLeft = keyRight = keyPageUp = keyPageDown = false; } void metinalifeyyaz::drawBall() { //glTranslatef(6,0,4); glutSolidSphere(0.10005,300,30); } metinalifeyyaz:: ~metinalifeyyaz(){ glDeleteTextures(1,texture); } void metinalifeyyaz::initializeGL(){ glShadeModel(GL_SMOOTH); glClearColor(1.0,1.0,1.0,0.5); glClearDepth(1.0f); glEnable(GL_DEPTH_TEST); glEnable(GL_TEXTURE_2D); glDepthFunc(GL_LEQUAL); glClearColor(1.0,1.0,1.0,1.0); glShadeModel(GL_SMOOTH); GLfloat mat_specular[]={1.0,1.0,1.0,1.0}; GLfloat mat_shininess []={30.0}; GLfloat light_position[]={1.0,1.0,1.0}; glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular); glMaterialfv(GL_FRONT,GL_SHININESS,mat_shininess); glLightfv(GL_LIGHT0, GL_POSITION, light_position); glEnable(GL_LIGHT0); glEnable(GL_LIGHTING); QImage img1 = convertToGLFormat(QImage(":/new/prefix1/halisaha2.bmp")); QImage img2 = convertToGLFormat(QImage(":/new/prefix1/white.bmp")); glGenTextures(2,texture); glBindTexture(GL_TEXTURE_2D, texture[0]); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, img1.width(), img1.height(), 0, GL_RGBA, GL_UNSIGNED_BYTE, img1.bits()); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glBindTexture(GL_TEXTURE_2D, texture[1]); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, img2.width(), img2.height(), 0, GL_RGBA, GL_UNSIGNED_BYTE, img2.bits()); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST); // Really nice perspective calculations } void metinalifeyyaz::resizeGL(int w, int h){ if(h==0) h=1; glViewport(0,0,w,h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0f, static_cast<GLfloat>(w)/h,0.1f,100.0f); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } void metinalifeyyaz::paintGL(){ movePlayer(); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity(); GLfloat xtrans = -xpos; GLfloat ytrans = -walkbias - 0.50f; GLfloat ztrans = -zpos; GLfloat sceneroty = 360.0f - yrot; glLoadIdentity(); glRotatef(lookupdown, 1.0f, 0.0f, 0.0f); glRotatef(sceneroty, 0.0f, 1.0f, 0.0f); glTranslatef(xtrans, ytrans+50, ztrans-130); glLoadIdentity(); glTranslatef(1.0f,0.0f,-18.0f); glRotatef(45,1,0,0); drawScene(); int delay = time.msecsTo(QTime::currentTime()); if (delay == 0) delay = 1; time = QTime::currentTime(); timer->start(qMax(0,10 - delay)); } void metinalifeyyaz::movePlayer() { if (keyUp) { xpos -= sin(yrot * PI_OVER_180) * 0.5f; zpos -= cos(yrot * PI_OVER_180) * 0.5f; if (walkbiasangle >= 360.0f) walkbiasangle = 0.0f; else walkbiasangle += 7.0f; walkbias = sin(walkbiasangle * PI_OVER_180) / 10.0f; } else if (keyDown) { xpos += sin(yrot * PI_OVER_180)*0.5f; zpos += cos(yrot * PI_OVER_180)*0.5f ; if (walkbiasangle <= 7.0f) walkbiasangle = 360.0f; else walkbiasangle -= 7.0f; walkbias = sin(walkbiasangle * PI_OVER_180) / 10.0f; } if (keyLeft) yrot += 0.5f; else if (keyRight) yrot -= 0.5f; if (keyPageUp) lookupdown -= 0.5; else if (keyPageDown) lookupdown += 0.5; } void metinalifeyyaz::keyPressEvent(QKeyEvent *event) { switch (event->key()) { case Qt::Key_Escape: close(); break; case Qt::Key_F1: setWindowState(windowState() ^ Qt::WindowFullScreen); break; default: QGLWidget::keyPressEvent(event); case Qt::Key_PageUp: keyPageUp = true; break; case Qt::Key_PageDown: keyPageDown = true; break; case Qt::Key_Left: keyLeft = true; break; case Qt::Key_Right: keyRight = true; break; case Qt::Key_Up: keyUp = true; break; case Qt::Key_Down: keyDown = true; break; } } void metinalifeyyaz::changeEvent(QEvent *event) { switch (event->type()) { case QEvent::WindowStateChange: if (windowState() == Qt::WindowFullScreen) setCursor(Qt::BlankCursor); else unsetCursor(); break; default: break; } } void metinalifeyyaz::keyReleaseEvent(QKeyEvent *event) { switch (event->key()) { case Qt::Key_PageUp: keyPageUp = false; break; case Qt::Key_PageDown: keyPageDown = false; break; case Qt::Key_Left: keyLeft = false; break; case Qt::Key_Right: keyRight = false; break; case Qt::Key_Up: keyUp = false; break; case Qt::Key_Down: keyDown = false; break; default: QGLWidget::keyReleaseEvent(event); } } void metinalifeyyaz::drawScene(){ glBegin(GL_QUADS); glNormal3f(0.0f,0.0f,1.0f); // glColor3f(0,0,1); //back glVertex3f(-6,0,-4); glVertex3f(-6,-0.5,-4); glVertex3f(6,-0.5,-4); glVertex3f(6,0,-4); glEnd(); glBegin(GL_QUADS); glNormal3f(0.0f,0.0f,-1.0f); //front glVertex3f(6,0,4); glVertex3f(6,-0.5,4); glVertex3f(-6,-0.5,4); glVertex3f(-6,0,4); glEnd(); glBegin(GL_QUADS); glNormal3f(-1.0f,0.0f,0.0f); // glColor3f(0,0,1); //left glVertex3f(-6,0,4); glVertex3f(-6,-0.5,4); glVertex3f(-6,-0.5,-4); glVertex3f(-6,0,-4); glEnd(); glBegin(GL_QUADS); glNormal3f(1.0f,0.0f,0.0f); // glColor3f(0,0,1); //right glVertex3f(6,0,-4); glVertex3f(6,-0.5,-4); glVertex3f(6,-0.5,4); glVertex3f(6,0,4); glEnd(); glBindTexture(GL_TEXTURE_2D, texture[0]); glBegin(GL_QUADS); glNormal3f(0.0f,1.0f,0.0f);//top glTexCoord2f(1.0f,0.0f); glVertex3f(6,0,-4); glTexCoord2f(1.0f,1.0f); glVertex3f(6,0,4); glTexCoord2f(0.0f,1.0f); glVertex3f(-6,0,4); glTexCoord2f(0.0f,0.0f); glVertex3f(-6,0,-4); glEnd(); glBegin(GL_QUADS); glNormal3f(0.0f,-1.0f,0.0f); //glColor3f(0,0,1); //bottom glVertex3f(6,-0.5,-4); glVertex3f(6,-0.5,4); glVertex3f(-6,-0.5,4); glVertex3f(-6,-0.5,-4); glEnd(); // glPushMatrix(); glBindTexture(GL_TEXTURE_2D, texture[1]); glBegin(GL_QUADS); glNormal3f(1.0f,0.0f,0.0f); glTexCoord2f(1.0f,0.0f); //right far goal post front face glVertex3f(5,0.5,-0.95); glTexCoord2f(1.0f,1.0f); glVertex3f(5,0,-0.95); glTexCoord2f(0.0f,1.0f); glVertex3f(5,0,-1); glTexCoord2f(0.0f,0.0f); glVertex3f(5, 0.5, -1); glColor3f(1,1,1); //right far goal post back face glVertex3f(5.05,0.5,-0.95); glVertex3f(5.05,0,-0.95); glVertex3f(5.05,0,-1); glVertex3f(5.05, 0.5, -1); glColor3f(1,1,1); //right far goal post left face glVertex3f(5,0.5,-1); glVertex3f(5,0,-1); glVertex3f(5.05,0,-1); glVertex3f(5.05, 0.5, -1); glColor3f(1,1,1); //right far goal post right face glVertex3f(5.05,0.5,-0.95); glVertex3f(5.05,0,-0.95); glVertex3f(5,0,-0.95); glVertex3f(5, 0.5, -0.95); glColor3f(1,1,1); //right near goal post front face glVertex3f(5,0.5,0.95); glVertex3f(5,0,0.95); glVertex3f(5,0,1); glVertex3f(5,0.5, 1); glColor3f(1,1,1); //right near goal post back face glVertex3f(5.05,0.5,0.95); glVertex3f(5.05,0,0.95); glVertex3f(5.05,0,1); glVertex3f(5.05,0.5, 1); glColor3f(1,1,1); //right near goal post left face glVertex3f(5,0.5,1); glVertex3f(5,0,1); glVertex3f(5.05,0,1); glVertex3f(5.05,0.5, 1); glColor3f(1,1,1); //right near goal post right face glVertex3f(5.05,0.5,0.95); glVertex3f(5.05,0,0.95); glVertex3f(5,0,0.95); glVertex3f(5,0.5, 0.95); glColor3f(1,1,1); //right crossbar front face glVertex3f(5,0.55,-1); glVertex3f(5,0.55,1); glVertex3f(5,0.5,1); glVertex3f(5,0.5,-1); glColor3f(1,1,1); //right crossbar back face glVertex3f(5.05,0.55,-1); glVertex3f(5.05,0.55,1); glVertex3f(5.05,0.5,1); glVertex3f(5.05,0.5,-1); glColor3f(1,1,1); //right crossbar bottom face glVertex3f(5.05,0.5,-1); glVertex3f(5.05,0.5,1); glVertex3f(5,0.5,1); glVertex3f(5,0.5,-1); glColor3f(1,1,1); //right crossbar top face glVertex3f(5.05,0.55,-1); glVertex3f(5.05,0.55,1); glVertex3f(5,0.55,1); glVertex3f(5,0.55,-1); glColor3f(1,1,1); //left far goal post front face glVertex3f(-5,0.5,-0.95); glVertex3f(-5,0,-0.95); glVertex3f(-5,0,-1); glVertex3f(-5, 0.5, -1); glColor3f(1,1,1); //right far goal post back face glVertex3f(-5.05,0.5,-0.95); glVertex3f(-5.05,0,-0.95); glVertex3f(-5.05,0,-1); glVertex3f(-5.05, 0.5, -1); glColor3f(1,1,1); //right far goal post left face glVertex3f(-5,0.5,-1); glVertex3f(-5,0,-1); glVertex3f(-5.05,0,-1); glVertex3f(-5.05, 0.5, -1); glColor3f(1,1,1); //right far goal post right face glVertex3f(-5.05,0.5,-0.95); glVertex3f(-5.05,0,-0.95); glVertex3f(-5,0,-0.95); glVertex3f(-5, 0.5, -0.95); glColor3f(1,1,1); //left near goal post front face glVertex3f(-5,0.5,0.95); glVertex3f(-5,0,0.95); glVertex3f(-5,0,1); glVertex3f(-5,0.5, 1); glColor3f(1,1,1); //right near goal post back face glVertex3f(-5.05,0.5,0.95); glVertex3f(-5.05,0,0.95); glVertex3f(-5.05,0,1); glVertex3f(-5.05,0.5, 1); glColor3f(1,1,1); //right near goal post left face glVertex3f(-5,0.5,1); glVertex3f(-5,0,1); glVertex3f(-5.05,0,1); glVertex3f(-5.05,0.5, 1); glColor3f(1,1,1); //right near goal post right face glVertex3f(-5.05,0.5,0.95); glVertex3f(-5.05,0,0.95); glVertex3f(-5,0,0.95); glVertex3f(-5,0.5, 0.95); glColor3f(1,1,1); //left crossbar front face glVertex3f(-5,0.55,-1); glVertex3f(-5,0.55,1); glVertex3f(-5,0.5,1); glVertex3f(-5,0.5,-1); glColor3f(1,1,1); //right crossbar back face glVertex3f(-5.05,0.55,-1); glVertex3f(-5.05,0.55,1); glVertex3f(-5.05,0.5,1); glVertex3f(-5.05,0.5,-1); glColor3f(1,1,1); //right crossbar bottom face glVertex3f(-5.05,0.5,-1); glVertex3f(-5.05,0.5,1); glVertex3f(-5,0.5,1); glVertex3f(-5,0.5,-1); glColor3f(1,1,1); //right crossbar top face glVertex3f(-5.05,0.55,-1); glVertex3f(-5.05,0.55,1); glVertex3f(-5,0.55,1); glVertex3f(-5,0.55,-1); glEnd(); // glPopMatrix(); // glPushMatrix(); // glTranslatef(0,0,0); // glutSolidSphere(0.10005,500,30); // glPopMatrix(); }

    Read the article

  • How does one close a Popup in Silverlight 3 by pressing the Escape key?

    - by Jacob
    I've just implemented a context menu control in Silverlight 3. One feature lacking in this control is for the Esc key to dismiss the menu. I've tried adding a KeyUp event handler in a few places, but the handler is never called. It looks like KeyUp is only available for items that can have focus. The popup menu cannot have focus, however, as it is only an ItemsControl. Have any of you successfully implemented having the Esc key close a Popup, or do you have any other suggestions on how I can implement this behavior?

    Read the article

  • jQueryMobile: how to work with slider events?

    - by balexandre
    I'm testing the slider events in jQueryMobile and I must been missing something. page code is: <div data-role="fieldcontain"> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> </div> and if I do: $("#slider").data("events"); I get blur, focus, keyup, remove What I want to do is to get the value once user release the slider handle and having a hook to the keyup event as $("#slider").bind("keyup", function() { alert('here'); } ); does absolutely nothing :( I must say that I wrongly assumed that jQueryMobile used jQueryUI controls as it was my first thought, but now working deep in the events I can see this is not the case, only in terms of CSS Design. What can I do? jQuery Mobile Slider source code can be found on Git if it helps anyone as well a test page can be found at JSBin As I understand, the #slider is the textbox with the value, so I would need to hook into the slider handle as the generated code for this slider is: <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br"> <label for="slider" class="ui-input-text ui-slider" id="slider-label">Input slider:</label> <input data-type="range" max="100" min="0" value="0" id="slider" name="slider" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c ui-slider-input" /> <div role="application" class="ui-slider ui-btn-down-c ui-btn-corner-all"> <a class="ui-slider-handle ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="54" aria-valuetext="54" title="54" aria-labelledby="slider-label" style="left: 54%;"> <span class="ui-btn-inner ui-btn-corner-all"> <span class="ui-btn-text"></span> </span> </a> </div> </div> and checking the events in the handler anchor I get only the click event $("#slider").next().find("a").data("events");

    Read the article

  • Databinding race condition

    - by Stephen Price
    I have a login form (using ChildWindow) and have implemented a Keyup event handler on the passwordbox. If the key is enter then it sets the ChildWindow ResultDialog to true. What seems to be happening is the databinding on the Passwordbox is not happening before the childwindow is closed so the Password property on my Login control is null. I've tried using KeyUp and Keydown, as well as using a buttonAutoPeer to invoke a click on the Ok button. I've also tried setting the focus to the OKbutton before setting the DialogResult (which closes the window). private void PasswordBox_KeyUp(object sender, KeyEventArgs e) { if (e.Key == Key.Enter) { if (UsernameBox.Text != userPrompt && !string.IsNullOrEmpty(PasswordBox.Password.Trim())) { this.DialogResult = true; } else { UsernameBox.Focus(); } } }

    Read the article

  • javascript/jquery input fields cleanup

    - by user271619
    I've created a few input fields, that I am cleaning up as the user types. So, I'm using a keystroke detection event, like .keyup() It's all working very well, but I do notice one thing that's rather annoying for the users. While the script is cleaning the data as they type, their cursor is being sent to the end of the input field. So, if you want to edit the middle of the value, you're cursor immediately goes to the end of the box. Does anyone know of a way to maintain the cursor's current position inside the input field? I'm not holding my breath, but I thought I'd ask. Here's the cleanup code I'm using: $(".pricing").keyup(function(){ // clean up anything non-numeric **var itemprice = $("#itemprice").val().replace(/[^0-9\.]+/g, '');** // return the cleaner value back to the input field **$("#itemprice").val(itemprice);** });

    Read the article

  • Convert this VB code to C#?

    - by Róisín Kerr Lautman
    I was wondering if anyone would be able to help me convert the below code to c#? From what I have read it seems to be similar however I am not sure if my 'case' statements are still able to be used? Public Class Form1 Dim dteStart As Date Dim dteFinish As Date Dim span As TimeSpan Public Sub KeyDown(ByVal Sender As System.Object, ByVal e As _ System.Windows.Forms.KeyEventArgs) Handles MyBase.KeyDown Select Case e.KeyCode Case Keys.Q Label1.BackColor = Color.Green dteStart = Now() Case Keys.W Label2.BackColor = Color.Green Case Keys.E Label3.BackColor = Color.Green Case Keys.R Label4.BackColor = Color.Green dteFinish = Now() span = dteFinish.Subtract(dteStart) Label5.Text = span.ToString End Select End Sub Public Sub KeyUp(ByVal Sender As System.Object, ByVal e As _ System.Windows.Forms.KeyEventArgs) Handles MyBase.KeyUp Select Case e.KeyCode Case Keys.Q Label1.BackColor = Color.Red Case Keys.W Label2.BackColor = Color.Red Case Keys.E Label3.BackColor = Color.Red Case Keys.R Label4.BackColor = Color.Red End Select End Sub End Class

    Read the article

  • jQuery: event that tracks click in browser autocomplete

    - by Fernando
    I have a keyup event on an input. This event works fine for auto complete when you select a value and press enter. But it doesn't work when you click at an auto complete value. Is there an event that i can use in such case? I already tried the change one but it doesn't work. Thanks! Edit: Maybe i was not clear but i am referring to the autocomplete feature that browsers have. I am not trying to build my own. Example: I have the following event: $('.product').keyup(searchByProduct); When user clicks at this input the old values that he already typed shows up ( it's the browser that does this ). If he clicks on one of the values, the function searchByProduct is not called. Which event do i have to register to track this click ( and that the input content has changed )?

    Read the article

  • How to free control inside its event handler?

    - by lyborko
    Hi, Does anybody know the trick, how to free control inside its event handler ? According delphi help it is not possible... I want to free dynamicaly created TEdit, when Self.Text=''. TAmountEdit = class (TEdit) . . public procedure KeyUp(var Key: Word; Shift :TShiftState); end; procedure TAmountEdit.KeyUp(var Key: Word; Shift :TShiftState); begin inherited; if Text='' then Free; // after calling free, an exception arises end; How should do to achieve the same effect? Thanx

    Read the article

  • ext-js update params dynamically

    - by jeffkolez
    I'm building a search using ext-js. I have an event that fires on keyup. I want to be able to change either the URL I'm searching, or the params. I've had luck with neither. Here's my snippit of code: Ext.get("search").on('keyup', function() { proxy.url = '/customer/list?key=' + $('search').value; store.load(); }); But, no love for me. The store loads, but the proxy.url is the old value. Is what I'm trying to do possible? Thanks in advance!

    Read the article

  • Using JS Methods in jQuery

    - by Wasabi
    In the following code snippet, the String.fromCharCode is used, can all JS methods be used within jQuery? Perhaps a noob question, but better to ask and prove a noob, then assume and be a fool. // Invoke setBodyClass when a key is pressed $(document).keyup(function(){ switch (String.fromCharCode(event.keyCode)){ case 'D': setBodyClass('default'); break; case 'N': setBodyClass('narrow'); break; case 'L': setBodyClass('large'); break; } });//end keyup

    Read the article

  • Stop running this script, IE7 using PHP

    - by Jomel Dicen
    I incorporate javascript in my PHP program: Try to check my codes. It loops depend on the number of records in database. for instance: $counter = 0; foreach($row_value as $data): echo $this->javascript($counter, $data->exrate, $data->tab); endforeach; private function javascript($counter=NULL, $exrate=NULL, $tab=NULL){ $js = " <script type='text/javascript'> $(function () { var textBox0 = $('input:text[id$=quantity{$counter}]').keyup(foo); var textBox1 = $('input:text[id$=mc{$counter}]').keyup(foo); var textBox2 = $('input:text[id$=lc{$counter}]').keyup(foo); function foo() { var value0 = textBox0.val(); var value1 = textBox1.val(); var value2 = textBox2.val(); var sum = add(value1, value2) * (value0 * {$exrate}); $('input:text[id$=result{$counter}]').val(parseFloat(sum).toFixed(2)); // Compute Total Quantity var qtotal = 0; $('.quantity{$tab}').each(function() { qtotal += Number($(this).val()); }); $('#tquantity{$tab}').text(qtotal); // Compute MC UNIT var mctotal = 0; $('.mc{$tab}').each(function() { mctotal += Number($(this).val()); }); $('#tmc{$tab}').text(mctotal); // Compute LC UNIT var lctotal = 0; $('.lc{$tab}').each(function() { lctotal += Number($(this).val()); }); $('#tlc{$tab}').text(lctotal); // Compute Result var result = 0; $('.result{$tab}').each(function() { result += Number($(this).val()); }); $('#tresult{$tab}').text(result); } function add() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { if (IsNumeric(arguments[i])) { sum += parseFloat(arguments[i]); } } return sum; } function IsNumeric(input) { return (input - 0) == input && input.length > 0; } }); </script> "; return $js; } When I running this on IE this message is always annoying me " Stop running this script? A script on this page is causing your web browser to run slowly. If it continues to run, your computer might become unresponsive." but in firefox it's functioning well.

    Read the article

  • Better way to find Class in event.target parentnodes using jquery and javascript?

    - by Cama
    Currently, I check the target of the input box keyup event to see if it is contained within a div wit class "editorRow" using: var $parentClass = event.target.parentNode.parentNode.parentNode.className; Is there a better way to do this in case extra markup is added between the div and the span tags? <div class="editorRow"> <li> <span class="wi1"> <input type="text" value="" style="width: 80px;" name="LineItems9" id="LineItems_9"> </span> </li> </div>   $("input").live("keyup", function(event) { return GiveDynamicFieldsLife(event); }); function GiveDynamicFieldsLife(event) { **var $parentClass = event.target.parentNode.parentNode.parentNode.className;** if ($parentClass == "editorRow") { //Do Stuff } }

    Read the article

  • stored context in a JQuery variable does not work

    - by user203687
    The following works fine: $(function() { EnableDisableButtons(); $('#TextBox1').keyup(function() { EnableDisableButtons(); }); }); function EnableDisableButtons() { var len = $('#TextBox1').val().length; if (len == 0) { $("#Button1").attr("disabled", "disabled"); } else { $("#Button1").attr("disabled", ""); } } But the following does not work at all: var txt = $('#TextBox1'); $(function() { EnableDisableButtons(); txt.keyup(function() { EnableDisableButtons(); }); }); function EnableDisableButtons() { var len = txt.val().length; if (len == 0) { $("#Button1").attr("disabled", "disabled"); } else { $("#Button1").attr("disabled", ""); } } The error it was throwing was " 'txt.val().length' is null or not an object". Can anyone help me on this. thanks

    Read the article

  • Attaching functions to elements in a loop

    - by user435377
    I have the following HTML and JavaScript it works for the first set of elements when I have a '1' in the selector but when I replace the '1' with an 'i' it doesn't attach itself to any of the elements. Any ideas as to why this might not be working? (the script is meant to add the first 3 columns of each row and display it in the fourth) <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ for (i = 2; i <= 14; i++) { $("#Q19_LND_"+i).keyup(function(){ $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val())); }); $("#Q19_CE_"+i).keyup(function(){ $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val())); }); $("#Q19_SOLSD_"+i).keyup(function(){ $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val())); }); } }); </script> </head> <body> <table> <tr> <td><font face="arial" size="-1">Lap Roux-N-Y</font>&nbsp;</td> <td align="center"><input tabindex="1" type="text" name="Q19_LND_1" size="3" value="" id="Q19_LND_1"></td> <td align="center"><input tabindex="2" type="text" name="Q19_CE_1" size="3" value="" id="Q19_CE_1"></td> <td align="center"><input tabindex="3" type="text" name="Q19_SOLSD_1" size="3" value="" id="Q19_SOLSD_1"></td> <td align="center"><input tabindex="4" disabled type="text" name="autoSumRow_1" size="3" value="" id="autoSumRow_1"></td> </tr> <tr> <td nowrap width="1" bgcolor="#006699" colspan="9"><img src="/images/wi/nothing.gif" width="1" height="1"></td> </tr> <tr> <td><font face="arial" size="-1">Lap Esophagectomy</font>&nbsp;</td> <td align="center"><input tabindex="5" type="text" name="Q19_LND_2" size="3" value="" id="Q19_LND_2"></td> <td align="center"><input tabindex="6" type="text" name="Q19_CE_2" size="3" value="" id="Q19_CE_2"></td> <td align="center"><input tabindex="7" type="text" name="Q19_SOLSD_2" size="3" value="" id="Q19_SOLSD_2"></td> <td align="center"><input tabindex="8" disabled type="text" name="autoSumRow_2" size="3" value="" id="autoSumRow_2"></td> </tr> <tr> </table> </body> </html>

    Read the article

  • Filtering List Data with a jQuery-searchFilter Plugin

    - by Rick Strahl
    When dealing with list based data on HTML forms, filtering that data down based on a search text expression is an extremely useful feature. We’re used to search boxes on just about anything these days and HTML forms should be no different. In this post I’ll describe how you can easily filter a list down to just the elements that match text typed into a search box. It’s a pretty simple task and it’s super easy to do, but I get a surprising number of comments from developers I work with who are surprised how easy it is to hook up this sort of behavior, that I thought it’s worth a blog post. But Angular does that out of the Box, right? These days it seems everybody is raving about Angular and the rich SPA features it provides. One of the cool features of Angular is the ability to do drop dead simple filters where you can specify a filter expression as part of a looping construct and automatically have that filter applied so that only items that match the filter show. I think Angular has single handedly elevated search filters to first rate, front-row status because it’s so easy. I love using Angular myself, but Angular is not a generic solution to problems like this. For one thing, using Angular requires you to render the list data with Angular – if you have data that is server rendered or static, then Angular doesn’t work. Not all applications are client side rendered SPAs – not by a long shot, and nor do all applications need to become SPAs. Long story short, it’s pretty easy to achieve text filtering effects using jQuery (or plain JavaScript for that matter) with just a little bit of work. Let’s take a look at an example. Why Filter? Client side filtering is a very useful tool that can make it drastically easier to sift through data displayed in client side lists. In my applications I like to display scrollable lists that contain a reasonably large amount of data, rather than the classic paging style displays which tend to be painful to use. So I often display 50 or so items per ‘page’ and it’s extremely useful to be able to filter this list down. Here’s an example in my Time Trakker application where I can quickly glance at various common views of my time entries. I can see Recent Entries, Unbilled Entries, Open Entries etc and filter those down by individual customers and so forth. Each of these lists results tends to be a few pages worth of scrollable content. The following screen shot shows a filtered view of Recent Entries that match the search keyword of CellPage: As you can see in this animated GIF, the filter is applied as you type, displaying only entries that match the text anywhere inside of the text of each of the list items. This is an immediately useful feature for just about any list display and adds significant value. A few lines of jQuery The good news is that this is trivially simple using jQuery. To get an idea what this looks like, here’s the relevant page layout showing only the search box and the list layout:<div id="divItemWrapper"> <div class="time-entry"> <div class="time-entry-right"> May 11, 2014 - 7:20pm<br /> <span style='color:steelblue'>0h:40min</span><br /> <a id="btnDeleteButton" href="#" class="hoverbutton" data-id="16825"> <img src="images/remove.gif" /> </a> </div> <div class="punchedoutimg"></div> <b><a href='/TimeTrakkerWeb/punchout/16825'>Project Housekeeping</a></b><br /> <small><i>Sawgrass</i></small> </div> ... more items here </div> So we have a searchbox txtSearchPage and a bunch of DIV elements with a .time-entry CSS class attached that makes up the list of items displayed. To hook up the search filter with jQuery is merely a matter of a few lines of jQuery code hooked to the .keyup() event handler: <script type="text/javascript"> $("#txtSearchPage").keyup(function() { var search = $(this).val(); $(".time-entry").show(); if (search) $(".time-entry").not(":contains(" + search + ")").hide(); }); </script> The idea here is pretty simple: You capture the keystroke in the search box and capture the search text. Using that search text you first make all items visible and then hide all the items that don’t match. Since DOM changes are applied after a method finishes execution in JavaScript, the show and hide operations are effectively batched up and so the view changes only to the final list rather than flashing the whole list and then removing items on a slow machine. You get the desired effect of the list showing the items in question. Case Insensitive Filtering But there is one problem with the solution above: The jQuery :contains filter is case sensitive, so your search text has to match expressions explicitly which is a bit cumbersome when typing. In the screen capture above I actually cheated – I used a custom filter that provides case insensitive contains behavior. jQuery makes it really easy to create custom query filters, and so I created one called containsNoCase. Here’s the implementation of this custom filter:$.expr[":"].containsNoCase = function(el, i, m) { var search = m[3]; if (!search) return false; return new RegExp(search, "i").test($(el).text()); }; This filter can be added anywhere where page level JavaScript runs – in page script or a seperately loaded .js file.  The filter basically extends jQuery with a : expression. Filters get passed a tokenized array that contains the expression. In this case the m[3] contains the search text from inside of the brackets. A filter basically looks at the active element that is passed in and then can return true or false to determine whether the item should be matched. Here I check a regular expression that looks for the search text in the element’s text. So the code for the filter now changes to:$(".time-entry").not(":containsNoCase(" + search + ")").hide(); And voila – you now have a case insensitive search.You can play around with another simpler example using this Plunkr:http://plnkr.co/edit/hDprZ3IlC6uzwFJtgHJh?p=preview Wrapping it up in a jQuery Plug-in To make this even easier to use and so that you can more easily remember how to use this search type filter, we can wrap this logic into a small jQuery plug-in:(function($, undefined) { $.expr[":"].containsNoCase = function(el, i, m) { var search = m[3]; if (!search) return false; return new RegExp(search, "i").test($(el).text()); }; $.fn.searchFilter = function(options) { var opt = $.extend({ // target selector targetSelector: "", // number of characters before search is applied charCount: 1 }, options); return this.each(function() { var $el = $(this); $el.keyup(function() { var search = $(this).val(); var $target = $(opt.targetSelector); $target.show(); if (search && search.length >= opt.charCount) $target.not(":containsNoCase(" + search + ")").hide(); }); }); }; })(jQuery); To use this plug-in now becomes a one liner:$("#txtSearchPagePlugin").searchFilter({ targetSelector: ".time-entry", charCount: 2}) You attach the .searchFilter() plug-in to the text box you are searching and specify a targetSelector that is to be filtered. Optionally you can specify a character count at which the filter kicks in since it’s kind of useless to filter at a single character typically. Summary This is s a very easy solution to a cool user interface feature your users will thank you for. Search filtering is a simple but highly effective user interface feature, and as you’ve seen in this post it’s very simple to create this behavior with just a few lines of jQuery code. While all the cool kids are doing Angular these days, jQuery is still useful in many applications that don’t embrace the ‘everything generated in JavaScript’ paradigm. I hope this jQuery plug-in or just the raw jQuery will be useful to some of you… Resources Example on Plunker© Rick Strahl, West Wind Technologies, 2005-2014Posted in jQuery  HTML5  JavaScript   Tweet !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

    Read the article

  • Green (Screen) Computing

    - by onefloridacoder
    I recently was given an assignment to create a UX where a user could use the up and down arrow keys, as well as the tab and enter keys to move through a Silverlight datagrid that is going be used as part of a high throughput data entry UI. And to be honest, I’ve not trapped key codes since I coded JavaScript a few years ago.  Although the frameworks I’m using made it easy, it wasn’t without some trial and error.    The other thing that bothered me was that the customer tossed this into the use case as they were delivering the use case.  Fine.  I’ll take a whack at anything and beat up myself and beg (I’m not beyond begging for help) the community for help to get something done if I have to. It wasn’t as bad as I thought and I thought I would hopefully save someone a few keystrokes if you wanted to build a green screen for your customer.   Here’s the ValueConverter to handle changing the strings to decimals and then back again.  The value is a nullable valuetype so there are few extra steps to take.  Usually the “ConvertBack()” method doesn’t get addressed but in this case we have two-way binding and the converter needs to ensure that if the user doesn’t enter a value it will remain null when the value is reapplied to the model object’s setter.  1: using System; 2: using System.Windows.Data; 3: using System.Globalization; 4:  5: public class NullableDecimalToStringConverter : IValueConverter 6: { 7: public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 8: { 9: if (!(((decimal?)value).HasValue)) 10: { 11: return (decimal?)null; 12: } 13: if (!(value is decimal)) 14: { 15: throw new ArgumentException("The value must be of type decimal"); 16: } 17:  18: NumberFormatInfo nfi = culture.NumberFormat; 19: nfi.NumberDecimalDigits = 4; 20:  21: return ((decimal)value).ToString("N", nfi); 22: } 23:  24: public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 25: { 26: decimal nullableDecimal; 27: decimal.TryParse(value.ToString(), out nullableDecimal); 28:  29: return nullableDecimal == 0 ? null : nullableDecimal.ToString(); 30: } 31: }            The ConvertBack() method uses TryParse to create a value from the incoming string so if the parse fails, we get a null value back, which is what we would expect.  But while I was testing I realized that if the user types something like “2..4” instead of “2.4”, TryParse will fail and still return a null.  The user is getting “puuu-lenty” of eye-candy to ensure they know how many values are affected in this particular view. Here’s the XAML code.   This is the simple part, we just have a DataGrid with one column here that’s bound to the the appropriate ViewModel property with the Converter referenced as well. 1: <data:DataGridTextColumn 2: Header="On-Hand" 3: Binding="{Binding Quantity, 4: Mode=TwoWay, 5: Converter={StaticResource DecimalToStringConverter}}" 6: IsReadOnly="False" /> Nothing too magical here.  Just some XAML to hook things up.   Here’s the code behind that’s handling the DataGridKeyup event.  These are wired to a local/private method but could be converted to something the ViewModel could use, but I just need to get this working for now. 1: // Wire up happens in the constructor 2: this.PicDataGrid.KeyUp += (s, e) => this.HandleKeyUp(e);   1: // DataGrid.BeginEdit fires when DataGrid.KeyUp fires. 2: private void HandleKeyUp(KeyEventArgs args) 3: { 4: if (args.Key == Key.Down || 5: args.Key == Key.Up || 6: args.Key == Key.Tab || 7: args.Key == Key.Enter ) 8: { 9: this.PicDataGrid.BeginEdit(); 10: } 11: }   And that’s it.  The ValueConverter was the biggest problem starting out because I was using an existing converter that didn’t take nullable value types into account.   Once the converter was passing back the appropriate value (null, “#.####”) the grid cell(s) and the model objects started working as I needed them to. HTH.

    Read the article

  • Limiting Number of Characters in a ContentEditable div

    - by Bill Dami
    Hi guys, I am using contenteditable div elements in my web application and I am trying to come up with a solution to limit the amount of characters allowed in the area, and once the limit is hit, attempting to enter characters simply does nothing. This is what I have so far: var content_id = 'editable_div'; //binding keyup/down events on the contenteditable div $('#'+content_id).keyup(function(){ check_charcount(content_id, max); }); $('#'+content_id).keydown(function(){ check_charcount(content_id, max); }); function check_charcount(content_id, max) { if($('#'+content_id).text().length > max) { $('#'+content_id).text($('#'+content_id).text().substring(0, max)); } } This DOES limit the number of characters to the number specified by 'max', however once the area's text is set by the jquery .text() function the cursor resets itself to the beginning of the area. So if the user keeps on typing, the newly entered characters will be inserted at the beginning of the text and the last character of the text will be removed. So really, I just need some way to keep the cursor at the end of the contenteditable area's text.

    Read the article

  • Html Select List: why would onchange be called twice?

    - by Mark Redman
    I have a page with a select list (ASP.NET MVC Page) The select list and onchange event specified like this: <%=Html.DropDownList("CompanyID", Model.CompanySelectList, "(select company)", new { @class = "data-entry-field", @onchange = "companySelectListChanged()" })%> The companySelectListChanged function is getting called twice? I am using the nifty code in this question to get the caller. both times the caller is the onchange event, however if i look at the callers caller using: arguments.callee.caller.caller the first call returns some system code as the caller (i presume) and the second call returns undefined. I am checking for undefined to only react once to onchange, but this doesnt seem ideal, whcy would onchange be called twice? UPDATE: ok, found the culprit! ...apart from me :-) but the issue of calling the companySelectListChanged function twice still stands. The onchange event is set directly on the select as mentioned. This calls the companySelectListChanged function. ..notice the 'data-entry-field' class, now in a separate linked javascript file a change event on all fields with this class is bound to a function that changes the colour of the save button. This means there is two events on the onchange, but the companySelectListChanged is called twice? The additional binding is set as follows: $('.data-entry-field').bind('keypress keyup change', function (e) { highLightSaveButtons(); }); Assuming its possible to have 2 change events on the select list, its would assume that setting keypress & keyup events may be breaking something? Any ideas?

    Read the article

< Previous Page | 1 2 3 4 5 6 7 8 9 10  | Next Page >