School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Welcome to Dream.In.Code
Become an Expert!

Join 307,036 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,249 people online right now. Registration is fast and FREE... Join Now!




what is the Concept of a web widget

 

what is the Concept of a web widget, widget like meebo me

knownasilya

1 Sep, 2008 - 09:20 AM
Post #1

D.I.C Head
Group Icon

Joined: 11 Jan, 2006
Posts: 147


My Contributions
I want to start a simple web project, a small web widget that users with blogs/webpages can add to their page (like the meebo me widget). The thing is that i dont know what the technical concept behind the whole thing is, how does a widget get loaded from just a url? or piece of js. I would love for someone to explain to me the general concept, or point me to an article or some code biggrin.gif Thanks all.

User is offlineProfile CardPM
+Quote Post


BetaWar

RE: What Is The Concept Of A Web Widget

2 Sep, 2008 - 07:45 PM
Post #2

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 4,777



Thanked: 277 times
Dream Kudos: 1400
My Contributions
The whole idea behind a widget is that you have a javascript file that writes content to a specific HTML tag (through using a specific ID). The JS can communicate with Server-side things through ajax making it able to use cookies and such to get more interesting content.

Here si a VERY simple example of a widget:

script.js:
CODE

function init(){
  var obj = document.getElementById("ThisIsTheWidget");
  obj.someEvent = function(){
    this.innerHTML = "HAHA";
  }
  obj.onSomeOtherEvent = function(){
    this.innerHTML= "HEHE";
  }
}
init();


Main HTML file that is using the widget:
CODE

<html>
  <head>
    <!-- STUFF HERE -->
  </head>
  <body>
    <!-- MORE STUFF HERE -->
    <div id="ThisIsTheWidget">
      <script src="script.js"></script>
    </div>
    <!-- AND STILL MORE STUFF HERE -->
  </body>
</html>


Basically all this does is make the div with the id="ThisIsTheWidget" change its innerHTML on 2 random (and at this time non-existant) events.

As I said earlier you can use ajax to communicate with server sid elanguages to enhance what widgets are capable of doing.

Hope that helps.
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/21/09 08:44AM

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month