Skip to main content
Code Review

Return to Question

added 1 characters in body
Source Link
Dave Jarvis
Dave Jarvis
  • 1.9k
  • 1
  • 12
  • 29

Background

When a user leaves a page, if they haven't submitted form data, a button is animated to draw the user's attention. (This is a poor UX choice--all the form data should be submitted--but it is what I have to work with at the moment).

Only the text, which is centered on the button, must wiggle: the button itself must not shake.

Problem

The solution entails adding a button, a div, and a span. Without these elements, the shaking does not seem to work as desired.

Code

Button code:

<button type="submit" id="accept-list" style="width:100%"><div style="display:inline-block;width:0 auto;margin:0;padding:0"><span>&#x2714;</span></div></button>

jQuery code:

$("#accept-list > div > span").effect( "shake", { distance: 5 } );

Fiddle

Question

Is thereWhat is a simpler way (i.e., that does not require the inner div and span elements) to shake button text, which works cross-browser?

Background

When a user leaves a page, if they haven't submitted form data, a button is animated to draw the user's attention. (This is a poor UX choice--all the form data should be submitted--but it is what I have to work with at the moment).

Only the text, which is centered on the button, must wiggle: the button itself must not shake.

Problem

The solution entails adding a button, a div, and a span. Without these elements, the shaking does not seem to work as desired.

Code

Button code:

<button type="submit" id="accept-list" style="width:100%"><div style="display:inline-block;width:0 auto;margin:0;padding:0"><span>&#x2714;</span></div></button>

jQuery code:

$("#accept-list > div > span").effect( "shake", { distance: 5 } );

Fiddle

Question

Is there simpler way (i.e., that does not require the inner div and span elements) to shake button text, which works cross-browser?

Background

When a user leaves a page, if they haven't submitted form data, a button is animated to draw the user's attention. (This is a poor UX choice--all the form data should be submitted--but it is what I have to work with at the moment).

Only the text, which is centered on the button, must wiggle: the button itself must not shake.

Problem

The solution entails adding a button, a div, and a span. Without these elements, the shaking does not seem to work as desired.

Code

Button code:

<button type="submit" id="accept-list" style="width:100%"><div style="display:inline-block;width:0 auto;margin:0;padding:0"><span>&#x2714;</span></div></button>

jQuery code:

$("#accept-list > div > span").effect( "shake", { distance: 5 } );

Fiddle

Question

What is a simpler way (i.e., that does not require the inner div and span elements) to shake button text, which works cross-browser?

added 17 characters in body
Source Link
Dave Jarvis
Dave Jarvis
  • 1.9k
  • 1
  • 12
  • 29

Background

When a user leaves a page, if they haven't submitted form data, a button is animated to draw the user's attention. (This is a poor UX choice--all the form data should be submitted--but it is what I have to work with at the moment).

Only the text, which is centered on the button, must wiggle: the button itself must not shake.

Problem

The solution entails adding a button, a div, and a span. Without these elements, the shaking does not seem to work as desired.

Code

Button code:

<button type="submit" id="accept-list" style="width:100%"><div style="display:inline-block; widthblock;width: 0 auto"><span>&#x2714;<auto;margin:0;padding:0"><span>&#x2714;</span></div></button>

jQuery code:

$("#accept-list > div > span").effect( "shake", { distance: 5 } );

Fiddle

Question

Is there simpler way (i.e., that does not require the inner div and span elements) to shake button text, which works cross-browser?

Background

When a user leaves a page, if they haven't submitted form data, a button is animated to draw the user's attention. (This is a poor UX choice--all the form data should be submitted--but it is what I have to work with at the moment).

Only the text, which is centered on the button, must wiggle: the button itself must not shake.

Problem

The solution entails adding a button, a div, and a span. Without these elements, the shaking does not seem to work as desired.

Code

Button code:

<button type="submit" id="accept-list" style="width:100%"><div style="display:inline-block; width: 0 auto"><span>&#x2714;</span></div></button>

jQuery code:

$("#accept-list > div > span").effect( "shake", { distance: 5 } );

Fiddle

Question

Is there simpler way (i.e., that does not require the inner div and span elements) to shake button text, which works cross-browser?

Background

When a user leaves a page, if they haven't submitted form data, a button is animated to draw the user's attention. (This is a poor UX choice--all the form data should be submitted--but it is what I have to work with at the moment).

Only the text, which is centered on the button, must wiggle: the button itself must not shake.

Problem

The solution entails adding a button, a div, and a span. Without these elements, the shaking does not seem to work as desired.

Code

Button code:

<button type="submit" id="accept-list" style="width:100%"><div style="display:inline-block;width:0 auto;margin:0;padding:0"><span>&#x2714;</span></div></button>

jQuery code:

$("#accept-list > div > span").effect( "shake", { distance: 5 } );

Fiddle

Question

Is there simpler way (i.e., that does not require the inner div and span elements) to shake button text, which works cross-browser?

Source Link
Dave Jarvis
Dave Jarvis
  • 1.9k
  • 1
  • 12
  • 29

Eliminate nested HTML elements for jQuery animation?

Background

When a user leaves a page, if they haven't submitted form data, a button is animated to draw the user's attention. (This is a poor UX choice--all the form data should be submitted--but it is what I have to work with at the moment).

Only the text, which is centered on the button, must wiggle: the button itself must not shake.

Problem

The solution entails adding a button, a div, and a span. Without these elements, the shaking does not seem to work as desired.

Code

Button code:

<button type="submit" id="accept-list" style="width:100%"><div style="display:inline-block; width: 0 auto"><span>&#x2714;</span></div></button>

jQuery code:

$("#accept-list > div > span").effect( "shake", { distance: 5 } );

Fiddle

Question

Is there simpler way (i.e., that does not require the inner div and span elements) to shake button text, which works cross-browser?