Think Solution Business, Mind and Healty

After test in Drupal

output

Script sample

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="stickytooltip.js">

</script>

<link rel="stylesheet" type="text/css" href="stickytooltip.css" />

<p>Some page contents here...</p>

<p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">Thailand</a></p>
<p><a href="http://en.wikipedia.org/wiki/British_columbia" data-tooltip="sticky2">British Columbia</a></p>
<p><img src="http://img403.imageshack.us/img403/3403/redleaves.jpg" data-tooltip="sticky3" /></p>

<p>Some page contents here...</p>

<!--HTML for the tooltips-->
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1" class="atip" style="width:200px">
<img src="http://img121.imageshack.us/img121/746/thailand.jpg" /><br />
Thailand boasts some of the most popular and luxurious resorts in Asia.
</div>

<div id="sticky2" class="atip" style="width:262px">
<img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" /><br />BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.
</div>

<div id="sticky3" class="atip">
<img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" />
</div>

</div>

<div class="stickystatus"></div>
</div>

Defining your tooltips

All tooltips on the page should be defined inside a single DIV, with each DIV itself wrapped around a DIV with a unique ID attribute. The basic structure is:

<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">
<div id="sticky1">
Sticky Tooptip 1 content here...
</div>
<div id="sticky2">
Sticky Tooptip 2 content here...
</div>
<div id="sticky3">
Sticky Tooptip 3 content here...
</div>
</div>
<div class="stickystatus"></div>
</div>

In this case I've defined 3 tooltips. Notice how all 3 are contained inside the DIV with CSS class "stickytooltip", which you should retain (the CSS class that is). Each individual tooltip DIV plus the outermost container should carry a unique but arbitrary ID attribute.

With your tooltip defined, you associate a particular tooltip with an element on the page by inserting the attribute "data-tooltip=tooltipid" into the element, for example:

<a href="http://easy-step-webdesign-solution.blogspot.com/" data-tooltip="sticky1">Dynamic Drive</a>

You set data-tooltip to the ID of the tooltip you want this element to show, in this case, sticky1. You can insert this attribute not just inside links, but any element on the page you wish a tooltip to appear when the mouse rolls over it.

Modifying global settings

There are also some variables inside stickytooltip.js that affect your sticky tooltips in general that you may want to customize. Firstly, near the top of the file:

tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
fadeinspeed: 200, //duration of fade effect in milliseconds
rightclickstick: true, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ?
stickybordercolors: ["black", "darkred"], //border color of tooltip depending on sticky state
stickynotice1: ["Press \"s\"", "or right click", "to sticky this box"], //customize tooltip status message
stickynotice2: "Click outside this box to hide it", //customize tooltip status message

These variables control things such as the offset of the tooltips from the mouse cursor, and whether each tooltip should be "stickied" when the right mouse button is clicked over the anchor element etc. More importantly, however, is the last line inside stickytooltip.js:

infotooltip.init("*[data-tooltip]", "mystickytooltip")

The 2nd parameter should be set to the ID of the DIV holding all your tooltips, which by default is "mystickytooltip". The 1st parameter is reserved for advanced users only, and accepts a jQuery selector limiting the elements the page that are parsed for potentially carrying a tooltip.

Thank's toyou

Sample in drupal

output :

sample script

<p>
<link href="http://localhost/iframetest/popupmenu.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://localhost/iframetest/jquery.min.js"></script> <script type="text/javascript" src="http://localhost/iframetest/popupmenu.js">

/***********************************************
* Flex Level Popup Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.3lucky.com/ for this script and 100s more
***********************************************/

</script></p>
<p style="text-align: left;"><a data-popupmenu="popmenu1" href="http://www.3lucky.com">Dynamic Drive</a></p>
<p style="text-align: left;"><a data-popupmenu="popmenu2" href="http://www.3lucky.com">Webmaster Resources</a></p>
<!--HTML for popup Menu 1-->
<ul class="jqpopupmenu" id="popmenu1">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
<ul>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
</ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
<ul>
<li><a href="#">Sub Item 5.1a</a></li>
<li><a href="#">Item Folder 5.2a</a>
<ul>
<li><a href="#">Sub Item 5.2.1a</a></li>
<li><a href="#">Sub Item 5.2.2a</a></li>
<li><a href="#">Sub Item 5.2.3a</a></li>
<li><a href="#">Sub Item 5.2.4a</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 6a</a></li>
</ul>
<!--HTML for popup Menu 2-->
<ul class="jqpopupmenu" id="popmenu2">
<li><a href="http://www.3lucky.com/">Dynamic Drive</a></li>
<li><a href="http://easy-step-webdesign-solution.blogspot.com/">CSS Drive</a></li>
Reference</a></li>
</ul>

Information :

Defining and adding a popup menu to a link is simple enough. Firstly, define the popup menus, which should each just be a regular UL list, nested if you desire multiple levels. For example:

<ul id="popmenu1" class="jqpopupmenu">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
<ul>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
</ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
<ul>
<li><a href="#">Sub Item 5.1a</a></li>
<li><a href="#">Item Folder 5.2a</a>
<ul>
<li><a href="#">Sub Item 5.2.1a</a></li>
<li><a href="#">Sub Item 5.2.2a</a></li>
<li><a href="#">Sub Item 5.2.3a</a></li>
<li><a href="#">Sub Item 5.2.4a</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 6a</a></li>
</ul>

Notice how the UL menu carries a unique ID and CSS class of "jqpopupmenu". This is required. The ID attribute can be arbitrary but unique in value.

With the popup menu defined, to associate it with a link on the page, just insert the attribute "data-popupmenu" inside it pointing to the ID of the desired popup menu:

<a href="http://www.3lucky.com" data-popupmenu="popmenu1">Dynamic Drive</a>

And that's it. Moving the mouse over the link "Dynamic Drive" above will now activate the popup menu with ID "popmenu1".

There are also a few variables inside popupmenu.js that you may wish to edit, which affect things such as the arrow image's full path, animation speed, plus delay before menu appears/ disappears onMouseover:

arrowpath: 'arrow.gif', //full URL or path to arrow image
popupmenuoffsets: [0, 0], //additional x and y offset from mouse cursor for popup menus
animspeed: 200, //reveal animation speed (in milliseconds)
showhidedelay: [150, 150], //delay before menu appears and disappears when mouse rolls over it, in milliseconds

Adding Flex Level Pop Up Menu to Image Maps

You can also associate a pop up menu with hotspots within an image map, so moving the mouse over these hot spots display a pop up menu. Simply define your Image Map as usual, then insert the attribute "data-popupmenu" into the desired AREA elements just as you would inside a regular link. For example:

<map name="piechart">
<area href="http://www.3lucky.com.com" shape="rect" coords="91, 88, 186, 156" data-popupmenu="popmenu1">
<area href="http://easy-step-webdesign-solution.blogspot.com/" shape="rect" coords="137, 42, 223, 68" data-popupmenu="popmenu2">
</map>
<img border="0" src="piechart.jpg" width="237" height="172" usemap="#piechart"></td>

thank's to to you

Installation & Use:
-------------------------------------------------------------------------------

1.  Enable module in module list located at administer > build > modules.
2.  Go to admin/settings/quicktabs to select a style for your tabs
3.  Go to admin/build/quicktabs and click on the "New QT block" local task tab.
4.  Add a title for your block and start entering information for your tabs
5.  Use the Add another tab button to add more tabs.
6.  Use the drag handles on the left to re-arrange tabs.
7.  Once you have defined all the tabs, click 'Next'.
8.  You will be taken to the admin/build/block screen where you should see yor new tabbed block listed.
9.  Configure & enable it as required.

Simple step how to create doropdown menu

1. Must have block menu

2 create menu http://localhost/cms/drupal614/admin/build/menu and click "add menu"

3. create content and sample link menu name : Master Plan Design see as below :

4. goto block menu      :Http://localhost/cms/drupal614/admin/build/block see my pict and save block

3. goto http://localhost/cms/drupal614/admin/build/menu and see my sample and save

result

TEMPLATE GENERATOR

| More

Label: INFO

Jika anda tidak puas dengan blog dan website yang sudah dibuat sendiri desain templatenya atau kode-kode template-template bebas buatan orang lain yang beredar di luar sana dan ingin membuat sendiri desain anda dengan mudah tanpa terlalu ahli di bidang kode web, maka template generator ini adalah yang anda perlukan, karena mudah digunakan dengan struktur dasar yang mudah dipahami. Berikut review 10+ Template Generator terbaik tersebut.

1. CSSEZ http://cssez.com

CSSEZ ini adalah generator template online untuk blog wordpress dan movable type. Jika anda ingin menggunakan layanan ini, anda perlu registrasi gratis disini. Beberapa fiturnya yang bagus adalah memilih antara satu sampai empat kolom template, mengatur lebar kolom, padding, margin, border, font dan style link. Anda juga dapat mengupload gambar atau membuat sendiri dengan image maker.

2. Dotemplate

http://www.dotemplate.com

Dotemplate ini menyediakan 12 template XHTML dan CSS compliant dasar gratis yang bisa anda pilih sendiri. Anda bisa memilih salah satu dan kemudian mengkustomisasinya dengan mengubah warna, font, teks, posisi teks dan lain sebagainya pada background, container, footer, menu dan boks. Selain itu anda juga bisa menambahkan efek seperti drop shadow, gradien dan round corner. Layanan ini sangat menarik karena tidak memerlukan pengetahuan html yang terlalu banyak untuk mempergunakannya, selain itu ada pilihan untuk mengupload gambar anda sendiri.

3. Drupal Theme Generator

http://xlecom.com/?q=node/152

Generator ini adalah generator theme berbasis MS Excel untuk situs atau blog drupal yang menggunakan template PHP dan Xtemplate. Layanan ini gratis dan memiliki fitur yang kaya seperti generator theme random color, preview theme langsung, html color assistant, dan integrasi CSS, javascript, PHP dan kode html pada theme dari file eksternal dan lain sebagainya. Selain itu ada 9 theme yang bisa anda dapatkan ketika mendownload generator ini.

4. Eris’ Template Generator

http://www.erisfree.com/d2/apart.php

Generator ini menyediakan 11 skin untuk blog anda dengan tiga pilihan kolom untuk setiap skinnya. Saat ini layanan ini mendukung diaryland, diary-x, movabletype, blogger, wordpress, b2 dan free html site template lainnya. Anda bisa menambahkan tagline, meta tag dan termasuk link ke index, arsip, email, notes, profile, buddylist dan juga 5 entri untuk diaryland, 10 entri untuk movable type, kalender untuk b2, blogroll untuk wordpress, XHTML compliant dan content copyright, webring, chat screen name dan button.

5. Firdamatic

http://www.wannabegirl.org/firdamatic

Generator template online untuk blogger dan movable type ini memiliki pilihan dua dan tiga kolom, anda bisa memasukkan sendiri informasi pada boks relevan pada form online yang tersedian dan klik generate template, selain itu anda juga bisa menambahkan judul situs, url gambar dan memilih huruf dan warnanya.

6. HTML PHP CSS Website Template Generator

http://www.maketemplate.com

Online generator ini mampu membuat template situs PHP, bersamaan dengan file CSS dan HTML. Anda juga bisa mengkustomisasi style sheet, header, sidebar, dan footer dengan menambahkan sendiri font, warna, margin dan alignment pada form online template generator. ANda juga bisa membuat sendiri scriptnya yang bisa anda kopi dan simpan untuk keperluan anda nanti.

7. PsycHo

http://psyc.horm.org

Generator online template open source ini dapat diaplikasikan pada platform blogger, persian blog, dan blogFa. Anda bisa mengatur sendiri judul halaman, warna background body template, judul background, deskripsi, teks, spacing dan memilih hingga 4 pilihan kolom. Anda juga bisa preview template anda dan menyimpan kodenya. Layanan ini mudah digunakan tanpa pengetahuan html yang terlalu banyak.

8. Templatr

http://templatr.cc

Templatr ini menyediakan lebih dari 20 layout dan pilihan formatting untuk berbagai elemen halaman termasuk halaman utama, header, footer, titles, margin, padding, border dan banyak lagi untuk keperluan wordpress blog. Selain itu, layanan ini juga menyediakan upload dimana anda bisa mengupload grafis/gambar . Setelah itu anda bisa mendownload template jika anda telah selesai dan mengaplikasikannya pada blog anda.

9. Weebly

http://www.weebly.com

Generator template yang rapi ini memiliki 15 desain pre-built yang bisa dikustomisasi dengan menambahkan elemen seperti iklan, feed icon, map, contact form, teks dan layout gambar, kolom google dan youtube video dan lain sebagainya. Jika anda sudah selesai anda bisa mempublikasikan situs/blog tersebut pada platform anda.

10. WordPress Theme Generator
http://www.yvoschaap.com/wpthemegen/

Layanan generator online dapat membantu anda untuk membuat sendiri theme wordpress anda dengan mudah tanpa pengetahuan html dan css language. Layanan ini menyediakan pilihan untuk memilih sendiri nama blog, ukuran body, lokasi sidebar dan ukurannya, menambahkan kolom ketiga, layout menu, warna dan skema teks, anda juga bisa menambahkan tag cloud, arsip dan kotak pencarian. Selain itu anda bisa mengupload logo situs anda online dan membuat link-nya dari template. Jika anda telah selesai anda bisa melihat hasil kreasi anda dan mendownloadnya dalam file zip.

CSS Poster is a free online tool from chami.com. Just upload a CSS file, and CSS Poster will make a chart based on your CSS file.

Here is a cropped example using Drupal's Bluemarine template's CSS file:

A potential use for CSS Poster that immediately comes to mind is using it as a reference when customizing Drupal themes, or any kind of CSS file that was created by someone else.

http://tips.webdesign10.com/css-poster