[rz] Button Pack *** UPD 2016-Feb-27 ***

In this section you can announce self-made paid extensions.
*** THIS SECTION CONTAINS PAID EXTENSIONS ONLY ***
Post Reply
User avatar
[RZ]
 
 
Posts: 2107
Joined: Tue Nov 04, 2008 12:08 pm

[rz] Button Pack *** UPD 2016-Feb-27 ***

Post by [RZ] » Mon Dec 16, 2013 11:32 pm

[rz] Button pack v2.1.3

The complement for the [rz] Layers extensions scheme.
This lightweight and highly customizable extension allows you to setup an image and/or text button with ease.
Similar to the rollover extension; no jQuery-based effects but proprietary smooth ones are available.
This button can receive focus, supports events and many link options and can even be embedded in a form.
Sample project file included.

Included versions: Advanced, Lite (or standard) and Ghost.

(Note: this is the standalone version that comes with the [rz] Layers II pack; plus new features!)

DEMO


HTML 4.01 Transitional
W3C compliant


* New in version 2.1.3:

Added "delegate" mode for links (advanced use); useful to delegate and manage links via external resources/handlers.
Smaller library files.

* New in version 2.1.2.2:

Improved backward focus control compatibility.
Improved support for standard buttons and modal behavior simulations (useful for [rz] Alert and [rz] Confirm extensions).
Workaround for an Internet Explorer alignment bug in RTL mode (ghost version).

* New in version 2.1.2.1:

Improved compatibility with [rz] Preloaded Links.

* New in version 2.1.2:

Workaround for font weight artifacts with some Google fonts in webkit-based browsers.
Workaround for text artifacts with custom shadows in some high-contrast scenarios (ghost version).
Workaround for a sporadic cache issue in Chrome during startup (standard version).
Workaround for a color transition bug in Edge (ghost version).

* New in version 2.1.1:

New extension: [rz] Button (ghost); it is text-only based, lightweight, modern and versatile with highly customizable look and behavior.
Improved for iOS based touch devices.
Added image padding to [rz] Button (lite).
Text direction for better ltr and rtl handling.
Standard form-submit validation is not stricly required (recommended) to make the button work in "send" mode.
More transparencies variations.

* NEW in version 2.1:

Added support for RWD.
Optimized core for faster loading and render times and smoother performance.

- Light version:

Improved clickable area dimensions.
Improved image resizing.
Added more horizontal alignment options.
Added vertical alignment options.

- Advanced version:

Workaround for rounded borders/rendering artifacts with custom shadows in FireFox.
Workaround for text borders/rendering artifacts with custom shadows in IE.
Added more image size options.

* NEW in version 2.0.0.1:

Bug fixed in lite version; now the image is correctly restored back when the mouse is moved out of the button while it is being pressed.

* NEW in version 2.0:

Text added with nine possible alignments plus horizontal and vertical offsets; also applies for the images.
Contrast area for the text.
Images, shadows, texts, border colors, background modes and colors, pattern images for normal/hover/push/disabled statuses of the button.
Images can be rendered in full width, full height, original width, original height or in a fixed size mode.
Texture/pattern for the button background.
Texture/pattern for the images (must have transparencies).
Can be placed within a form as a submit and reset button; automatically detects the javascript code with the form validation rules.
Many effects were added such as push-in, push-out, 3D-push with selectable directions, smart perspective handling to build metro-like buttons.
Rounded borders for button, image, and text contrast area.
Selectable transparency levels for the button, images, contrast area and text.
Allow/disallow borders overlapping for image/text size and position calculations.
Tooltips for enabled/disabled status; compatible with the [rz] Tooltip extension.
Selectable mouse cursor styles.
Smooth effects presets or customizable ones.
Smart effects release; links are triggered only when the button is completely back to its normal position and size.
The button can be enabled/disabled visible/hidden at design time.
...and many many more.

Available javascript functions for advanced applications/manipulations:
- MyButton.enable(); changes to active mode.
- MyButton.disable(); changes to inactive mode; no events and no actions will take place.
- MyButton.setfocus(); forces the button to get the focus.
- MyButton.losefocus(); forces the button to lose the focus.
- MyButton.show(); makes the button visible.
- MyButton.hide(); hides the button.

Flags:
- MyButton.focus returns true when the button has the focus.
- MyButton.hover returns true when the mouse is over the button.

About the lite version:
This new pack comes with two versions, the [rz] Button (adv) and [rz] Button (std) modes.
The advanced mode has all the features described above and the standard mode is image-based only as the advanced predecessor in its initial times.
The lite mode also has new features:
Alignment: useful for left-to-right and right-to-left systems (when the clickable area is the whole button as appears in design mode).
Resizable icon: the icon can be displayed in its original size, in proportional modes or can cover the whole area of the button.
Click area: can be clicked the whole area of the button or only the icon.


* NEW in version 1.6:

Resizable icons.
Rewritten from scratch and the workarounds were removed, not needed anymore.
The option to get or not the focus when the button is clicked (when possible, depends on the browsers/versions).
The images used for the button now aren't draggable (when possible).

* NEW in version 1.5:

Improved mouse and keyboard handling to "onfocus", "onblur", "onmouseover" and "onmouseout" events with tab and enter keys (includes workarounds for Chrome and IE). This allows a full integration with the [rz] Layers extension set behavior.


Enjoy!
Last edited by [RZ] on Sun Feb 28, 2016 2:06 am, edited 8 times in total.

User avatar
bburgess
 
 
Posts: 201
Joined: Mon May 13, 2013 5:05 am
Location: Australia

Re: Button Pack

Post by bburgess » Tue Dec 17, 2013 1:30 am

ooowwww I like that!

Thank you Sir!! :)
KISS is the key!

adex1
 
 
Posts: 177
Joined: Fri Apr 01, 2011 1:13 pm

Re: Button Pack

Post by adex1 » Tue Dec 17, 2013 2:53 am

Big thank Rabbi.
Buy Automation Shopping Cart for CMS WEBSHOP + 2.2 Using WB10!
- Use secure gateway to buy using PAYPAL website.

User avatar
[RZ]
 
 
Posts: 2107
Joined: Tue Nov 04, 2008 12:08 pm

Re: Button Pack

Post by [RZ] » Tue Dec 17, 2013 7:56 am

@bburgess @adex1
thank you for your feedback
hope you can find this useful
(don't forget to show us your work)

User avatar
[RZ]
 
 
Posts: 2107
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Button Pack *** UPD 2014-Nov-03 ***

Post by [RZ] » Mon Nov 03, 2014 12:42 am

UPGRADE AVAILABLE

* NEW in version 2.1.0.0:

Added support for RWD.
Optimized core for faster loading and render times and smoother performance.

- Light version:

Improved clickable area dimensions.
Improved image resizing.
Added more horizontal alignment options.
Added vertical alignment options.

- Advanced version:

Workaround for rounded borders/rendering artifacts with custom shadows in FireFox.
Workaround for text borders/rendering artifacts with custom shadows in IE.
Added more image size options.

* NEW in version 2.0.0.1:

Bug fixed in lite version; now the image is correctly restored back when the mouse is moved out of the button while it is being pressed.

naftalina
 
 
Posts: 265
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: [rz] Button Pack *** UPD 2014-Nov-03 ***

Post by naftalina » Tue Dec 16, 2014 7:05 am

Is it possible to use the button as a gallery? Is it possible that click on the button opens the image in full size?

User avatar
[RZ]
 
 
Posts: 2107
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Button Pack *** UPD 2014-Nov-03 ***

Post by [RZ] » Tue Dec 16, 2014 8:10 am

if you are referring to the button image, the button itself does not have that feature
however, you can setup your own custom events/function calls to the button in the extension properties dialog box
that event can call a function written by you to show the button image in full size
you can abbreviate the process using the [rz] Fullsize Background extension with the same image of the button and toggle its visibility

naftalina
 
 
Posts: 265
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: [rz] Button Pack *** UPD 2014-Nov-03 ***

Post by naftalina » Tue Dec 16, 2014 11:45 am

I assumed that this is possible, but unfortunately I do not have enough knowledge to do it. :(
If you would add feature "show full image size" I would be very happy, and I think also for other users, this feature would be useful.
Thus, I mean the full size of image - not full screen size! Just the way they behave standard galleries. :)
Last edited by naftalina on Fri Apr 03, 2015 8:39 am, edited 1 time in total.

User avatar
[RZ]
 
 
Posts: 2107
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Button Pack *** UPD 2014-Nov-03 ***

Post by [RZ] » Tue Dec 16, 2014 12:08 pm

this is a multi-purpose button, this means that you can trigger an onclick event within the extension and toggle the visibility of the image you want or even any other function call
for example, you can use the [rz] Slideshow Opener to simplify all this work: viewtopic.php?f=53&t=63189
you can open from [rz] Button, with the help of [rz] Slideshow Opener, the gallery you want, not just a static image

naftalina
 
 
Posts: 265
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: [rz] Button Pack *** UPD 2014-Nov-03 ***

Post by naftalina » Tue Dec 16, 2014 12:28 pm

Yes! I think that I get it. So I'll use Button and Slideshow Opener together :)

Thanks :)

User avatar
[RZ]
 
 
Posts: 2107
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Button Pack *** UPD 2014-Nov-03 ***

Post by [RZ] » Tue Dec 16, 2014 12:38 pm

best decision :)

sharpola
 
 
Posts: 4
Joined: Fri Oct 17, 2014 8:39 pm

Re: [rz] Button Pack *** UPD 2014-Nov-03 ***

Post by sharpola » Tue Jan 27, 2015 7:03 pm

Hi rz, do you happen to have another means of receiving payment other than paypal for your extensions?

Thanks,
Ray

User avatar
[RZ]
 
 
Posts: 2107
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Button Pack *** UPD 2014-Nov-03 ***

Post by [RZ] » Tue Jan 27, 2015 7:16 pm

currently, paypal is the only payment method available

Bart Design
 
 
Posts: 187
Joined: Thu Dec 12, 2013 9:38 am

Re: [rz] Button Pack *** UPD 2014-Nov-03 ***

Post by Bart Design » Sat Feb 14, 2015 3:40 pm

Hi RZ,

Iam working with WB10 and making my first site http://www.nicetouch.nl I found out a lot off problems to make my site look good in all brouwsers! In Firefox and Crome it looks good but in IE it is totaly different. Iam making my site RWD as we speak and because iam making my tekt in a block vorm it wil cut of words and wil move the layout in IE.

Iam looking at your site and reading about W3C! Correct me if iam wrong, but does W3C solve this problem or only give me error report.

You also advertise that if you make a site, it will look good in anny brouwser! Can you give me some advise what i have two do to make my site look good in all brouwsres.

Thanks in advange, Bart Design

User avatar
[RZ]
 
 
Posts: 2107
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Button Pack *** UPD 2014-Nov-03 ***

Post by [RZ] » Sat Feb 14, 2015 4:30 pm

yes, my extensions are w3c compliant
of course if the rest of your site does not follow these basics or you add invalid code, this rule could be broken and the results are unpredictable, and in that case does not matter how my extensions w3c compliant can be

Post Reply