.png)
Hey guys!
Haven't done a blog post in a while but I have been working very hard on the development of the handful of projects I am working on. Mainly I have been working on RedVelvet but I also just started up the Daily UI challenge to improve my design/development skills. I just finished up the second one and made a credit card input form. Using Javascript/Jquery to include highlighted segments of the card based on which element was clicked. It wasn't very difficult but I feel it is a simple and elegant solution to any language barriers that may exist for a website in need of credit card input. (which in itself probably isn't too much of a problem but here it is anyway!)
Check it out at http://www.KyleDiggs.com/daily-ui#2
This is actually the first time I have ever used the JQuery events focusin and focusout and thought I would share part of the process of how I did it.
Code-wise it is very simple.
$('individual segment').css("opacity", 0);
This line sets the individual highlights to opacity 0 in case someone doesn't have JS turned on. This way the user can still visually see which elements on their card are important since they won't be set to 0 by default. Passed this each individual element can be highlighted on the text box focus below using
$('text container").on("focusin", function () {
//set opacity of individual pieces to 1 from 0
}).on("focusout", function () {
//set opacity back to 0 to prep for the next click
});
The second half allows you to set them back to 0 on focus loss. A simple way to make sure only the relevant field is highlighted and all of the others are kept invisible. Try focusin and focusout and let me know what you come up with via Twitter! @KyleDiggsDesign
Until Next Time!
Kyle Diggs
Hey guys!
Haven't done a blog post in a while but I have been working very hard on the development of the handful of projects I am working on. Mainly I have been working on RedVelvet but I also just started up the Daily UI challenge to improve my design/development skills. I just finished up the second one and made a credit card input form. Using Javascript/Jquery to include highlighted segments of the card based on which element was clicked. It wasn't very difficult but I feel it is a simple and elegant solution to any language barriers that may exist for a website in need of credit card input. (which in itself probably isn't too much of a problem but here it is anyway!)
Check it out at http://www.KyleDiggs.com/daily-ui#2
This is actually the first time I have ever used the JQuery events focusin and focusout and thought I would share part of the process of how I did it.
Code-wise it is very simple.
$('individual segment').css("opacity", 0);
This line sets the individual highlights to opacity 0 in case someone doesn't have JS turned on. This way the user can still visually see which elements on their card are important since they won't be set to 0 by default. Passed this each individual element can be highlighted on the text box focus below using
$('text container").on("focusin", function () {
//set opacity of individual pieces to 1 from 0
}).on("focusout", function () {
//set opacity back to 0 to prep for the next click
});
The second half allows you to set them back to 0 on focus loss. A simple way to make sure only the relevant field is highlighted and all of the others are kept invisible. Try focusin and focusout and let me know what you come up with via Twitter! @KyleDiggsDesign
Until Next Time!
Kyle Diggs
Here is the full snippet of the JQuery code that I used to get all the individual pieces working together!
$(".du-2-cc-num").css("opacity", 0);
$('#CC-Num').on("focusin", function () {
$(".du-2-cc-num").css("opacity", 1);
}).on("focusout", function () {
$(".du-2-cc-num").css("opacity", 0);
});
$(".du-2-cc-date").css("opacity", 0);
$('#Exp-Date').on("focusin", function () {
$(".du-2-cc-date").css("opacity", 1);
}).on("focusout", function () {
$(".du-2-cc-date").css("opacity", 0);
});
$(".du-2-cc-name").css("opacity", 0);
$('#Card-Holder').on("focusin", function () {
$(".du-2-cc-name").css("opacity", 1);
}).on("focusout", function () {
$(".du-2-cc-name").css("opacity", 0);
});
$(".du-2-cc-ccv").css("opacity", 0);
$('#CCV').on("focusin", function () {
$(".du-2-cc-ccv").css("opacity", 1);
}).on("focusout", function () {
$(".du-2-cc-ccv").css("opacity", 0);
});
Until Next Time!
Kyle Diggs
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form