Ever wanted to add a RegEx to your prototype? Here's instant embedded AxQuery and JavaScript without header files/plugins

advanced-prototyping
#21

I actually had an issue with it not working on Safari 6.0

#22

All JavaScript, or just the RegEx?

#23

Just your example. Normally Javascript runs no problems. Went back a couple of times and managed to get the first two to work ok, but the last one would absolutely not play.

#24

I’m not completely clear on what you’re referring to when you say “the first two” and “the last one”. Can you clarify? I had no issues on the latest version of Safari on Mac.

#25

I think I may be confusing this thread with another - my apologies.

#26

I did not change any Axure settings, but I am running it on a machine at work and did not install it myself. I will try at home to make sure it is not somehow related to the installation.

#27

Hey there!

Awesome hack and thank you so much for sharing it! It’s a whole new world opening!

Amongst other things, I wanted to use this to make a custom widget library where all the widgets has our inhouse widget style. In that way we would have some powerful templates to build from.

However, it seems to me, that the CSS I ad is only added to the text in the widget - not the widget it self. For Example, when I ad this CSS to a text field, I do not quite get what I expect (you can also see it in action in my copy of the template from above):

.contentForm {
****-moz-border-bottom-colors: none;
****-moz-border-left-colors: none;
****-moz-border-right-colors: none;
****-moz-border-top-colors: none;
****background: none no-repeat scroll left top #f6f6f6;
****border-color: -moz-use-text-color #ede8e0 #ede8e0 -moz-use-text-color;
****border-image: none;
****border-radius: 3px;
****border-style: none solid solid none;
****border-width: 0 1px 1px 0;
****box-shadow: 1px 1px 1px 0 #9e998f inset;
****color: #545454;
****font-family: Tahoma,Geneva,sans-serif;
****font-size: 13px;
****height: 28px;
****line-height: 22px;
*padding: 0 11px;
}
CSS on text field.rp (90.2 KB)

#28

Glad you like it! Thanks for giving it a try. Let me know how it works for you as your project(s) proceed.

I looked at your prototype and if I understand your issue correctly, it may be due to the structure of the HTML generated by Axure.

As it stands, your CSS is being applied to the div with the “.contentForm” data-label, which has the text field inside of it. If you change your CSS selector to “.contentForm input”, your CSS will apply to the input field within the div instead of the div itself.

Does that help?

#29

Hi ColinB

To be quite honest, none of us knew what a css selector is, but we added " input" in the css like this:

.contentForm input{
****-moz-border-bottom-colors: none;
****-moz-border-left-colors: none;
…etc…

…and it works now :o)

Thanks A LOT for the clue (and for the hack you invented). This will help us quite a bit in making prototypes that are so much closer to the end product!

-Martin

#30

Glad that fixed it. :slight_smile:

Your CSS selector is that line that designates what your style applies to, before you enter the {}. “.contentForm” means “anything with the class contentForm”, but “.contentForm input” means “any input object inside of anything with the contentForm class”. Your first version was trying to style the div that had the input form inside of it, whereas the second one selects the input form itself. There are tons of crazy things you can do with selectors, like “.contentForm input:focus” for the input form that currently has focus. Go here for more: CSS Selectors Reference

Does that make things clearer?

#31

Hey Colin

Yes, it did. Thank you!

-Martin

#32

Hi,
many thanks for posting this as could dig me out of some tricky holes.
I’m trying to implement the basic function shown below to calculate elapsed time by getting the millisecond value and then convert it in a function, but i can’t get it to fly.

How do you reference axure global variables and say table cell contents to read/write the values?

function calc_time(ms){
x = ms / 1000;
seconds = x % 60;
x /= 60;
minutes = x % 60;
x /= 60;
hours = x % 24;
x /= 24;
days = x;
}

Hope you can help. Thanks.

#33

Registered here specifically to THANK YOU! This is a lifesaver and sadly as of September 2017 nothing like this has been added to Axure itself. Good luck!

#34

why not use textarea to debug the js code？

#35

As an alternative, check this out: http://dejongh.dk/wiki/doku.php?id=interaction:axure_javascript
Just found it, no experience yet but very promising so far.

closed #36