CODEWITHSUNDEEP
jqueryhtmlcsspluginswidget
Zeus
Zeus

Reputation: 3357

How to create generic client side widget using jQuery?

*I am new to clienside development and not sure if this is appropriate question for stackoverflow, do let me know if I should move this somewhere else.

I need to create a client side widget (think loan calculator) which can be hosted as a public page and needs to do following

  1. widget needs to be added inside any page and should inherit stylesheet of master page
  2. All the calculation should happen on client side
  3. Pre-populate few fields if values are being passed to it

Architecturally I am thinking of creating jquery widget using html and css. Host a page somewhere on the public site.

Question 1: What is the best way to load widget inside the page ? Load public url via iFrame or use jquery to render DIV dynamically on page load.

i.e.

<script id="jsCal" />
<div id"containerCal" class="default" />

Question 2: What is the best way to style this widget ?

  1. I can create a default style sheet and provide the implementer team with guide if they want to customize the widget.
  2. I can provide attributes in URL so implementer can pass in style values i.e. background color, font color etc.

Thanks

Upvotes: 0

Views: 216

Answers (2)

Ben Dyer
Ben Dyer

Reputation: 1656

An iframe won't inherit the styles of the parent page by default. You can get around this by using Javascript to load the parent's stylesheets into the DOM, but then you're requesting the files twice.

I think a more problematic issue would be that you're going to have to define dimensions for an iframe code snippet. If you have a script that renders the calculator inline, you can set it up to fit the dimensions made available to it, whether it's a big content area, a small sidebar, a mobile device, etc. Iframe dimensions can, of course, be changed but if this is being distributed to technically-disinclined users, it would probably be easier if it just "worked" as easily as possible without requiring their intervention.

Conversely, if you are distributing a script to be distributed on a variety of sites and CMS platforms, an iframe may be easier because some CMS platforms will strip out <script> tags by default.

Your requirements are fairly loose though. Everything I just outlined is correctable. Technically speaking, either way would probably work perfectly fine.

Upvotes: 1

m.casey
m.casey

Reputation: 2599

A very broad question, but I'll give it a go. First, go here to get an idea where to begin on the JavaScript/jQuery side of things.

  1. As for how to load the widget, that depends on what you consider the best user experience. I prefer the div tag personally.
  2. Style the widget using its own CSS file. You can make it possible to change the style based on arguments passed during instantiation if you wish.

Upvotes: 1

Related Questions