www.wysiwygwebbuilder.com

[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!

ooowwww I like that!

Thank you Sir!!

Big thank Rabbi.

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

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.

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

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

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.

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

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

Thanks

best decision

currently, paypal is the only payment method available

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

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

Hi Rz, thanks for your fast answer But i dont really untherstand what you are saying!

1- You mean a have to take all the mistakes out before i use your extension. I looked and i have 10 errors in my site all ID related!
2- I have to put it on every page of my site!?

But does your extension makes my site look good in every brouwser or do i have to do something else!

Thanks and sorry for being unexperienced

your question is not related to the extension
first, you should build your site without any error
if you have id-related errors, open your project and fix your id-related errors
the button can be placed wherever you need, if you need the same button in more than one page, you may consider the use of masterobjects

Thanks RZ,

I know i have to solve the errors first!
But does your extension makes my site look good in every brouwser or do i have to use something els and can you help me whit that?

none of my extensions broke the rules
so if the rest of your site has correctly been done, will not be any problem
however, you should be aware that not all browsers render texts exactly the same and this has nothing related to my extensions as they are strictly w3c compliant

Thanks for your explenation RZ

Hi RZ i know we been over this issue before but if you look at my site http://www.nicetouch.nl there is a big gap between the text and the picture in the default page and the 320BP page. Look at ontspanningsmassage and for example ayurvedische massage in Firefox and Crome and see the difference.

Where a change something in one browser it looks off in an other. Its going back and forth without finding the right way!

This appears only in crome and IE and looks terrible! I know that all browsers view differend and have there one way of rendering. Is there something a can change in the browser settings to make this looks better and close the gap or maby use WC3 to make it better?
Can you give me same tips on how to go from here! I will apreciate your help or advice!

Thanks in advange

is your issue related to my extension/s ?

How to set link to bookmark?

open button properties dialog box
behavior category
link
link to -> external web address
url -> ./mydestinationpage.html#mybookmark

[RZ] wrote:open button properties dialog box
behavior category
link
link to -> external web address
url -> ./mydestinationpage.html#mybookmark

I didn't say. I want that page scroll (elegant scroll) to the bookmark. So this is the bookmark on the same page.

put the page you want

Working but just jump without elegant scroll.

so instead of using a relative path (./) use absolute path (http://www.yoursite.com/yourpage.html#yourbookmark)
if it does not work try entering only the bookmark (#yourbookmark) in the link to

I tried all but won't scroll. Just jump.

your question is not related to the [rz] Button but to the [rz] Elegant Scroll
so let me ask you a simple question, did you follow the steps in the same stated order in the first post there and in the attached info file?
lets see...

1. Design your (large and/or wide) page as you usually do.
2. Add the properly placed anchors (bookmarks - please read the crystal clear wb help and documentation on how to make links with bookmarks to the same page).
3. Add the [rz] Elegant Scroll and set up its fx parameters (just a few ones!).

is the [rz] Elegant Scroll instance the last one in your page?

Elegant scroll working to all links/bookmarks on the page but this.
When I set link to this bookmark into site menu then scroll.

weird... it has been working at my end
i will try to improve your startup issue (in the [rz] Elegant Scroll) asap
you will see the post there
(anyhow, if you want, you will also receive the update in your email)

Is it possible to create buttons like you see on this page:

https://bingoweken.blokker.nl/


?

[RZ] wrote:weird... it has been working at my end
i will try to improve your startup issue (in the [rz] Elegant Scroll) asap
you will see the post there
(anyhow, if you want, you will also receive the update in your email)

I tried UPS instead od Elegant Scroll but didn't help.
So I guess the problem isn't in Elegant Scroll.

jerryco wrote:Is it possible to create buttons like you see on this page:

https://bingoweken.blokker.nl/


?

yes, kind of but better

naftalina wrote:So I guess the problem isn't in Elegant Scroll.

nor in the [rz] Button
the [rz] Elegant Scroll will include an improvement for this specific case

Why dialog "URL/Page in this Project" don't show bookmarks?

naftalina wrote:Why dialog "URL/Page in this Project" don't show bookmarks?

unfortunately not and this does not depend on me

[RZ] wrote:

jerryco wrote:Is it possible to create buttons like you see on this page:

https://bingoweken.blokker.nl/


?

yes, kind of but better

Can you show me this exact type of button created in WB with just a visual 'push down effect'?

it is an extension, not a button created in wb

How do you advise to create such a button? Drawing>Shape and then add text through the Text tab? How will it 'sink in' like you see on https://bingoweken.blokker.nl/?

you can write your own script or use widely tested extensions

I feel like totally nagging here. Can't help myself. Sorry.

How does your extension work? Do you point it to Shapes you want to animate or what?

dont need shapes just drag and drop the extension and setup your preferences (you can use your own custom images)

But does it work with Shapes or do they need to become an image first?

[RZ] wrote:dont need shapes just drag and drop the extension and setup your preferences (you can use your own custom images)

this means that the extension does not need a shape belonging to
and if you want you can design and use your own images or not use images

Can you post me a screenshot of the settings at mailto[a]alshetkwartjevalt.nl

what your problem is?

My problem is I don't understand how it works It would probably really help to see the settings screen.

you have an online demo to see how it works
you have many "3d push" effects among many other options as well
that's all, you only need to drag and drop the extension (you don't need extra objects to work with)
currently i cannot do a screenshot because of the many configuration options it has and i do not have here the graphics utility to edit larger images than the physical screen
basically you drag and drop an instance and open the extension properties dialog, there, you assign the images you want (if you have, it is optional), patterns, texts, colors, borders, etc
the same as you usually do with other objects/extensions

I see. So it creates the buttons as well as animates them?