Hi! I’m Starx

experienced Software Developer. And this is my blog
Start Reading About me
Blog Page
May 21, 2010

How to get class name using jquery

Question by Web Logic

Suppose I have an element like this:

<div id="dv" class="red green blue">Something Here !!</div>

I used this:


But it gives me all three at the same time, I need individually probably stored in an array.

How do I get each of those class names using jquery? Should be simple, right?

Answer by jAndy

var classNames = $('#dv').attr('class').split(' ');

if you just need to know if an element owns a class you might want to use

if( $('#dv').is('.green') ){
    alert('its green!');


if( $('#dv').hasClass('green') ){
    alert('its green!');

which is a derived function. Keep attention to the different notation

“.className” and just “className”

Answer by Starx

use this

Read more

Should a developer be a designer?


I have been developing websites for quite some time and I am not so good in designing websites? My Boss is refering me to take some lessons on it.

But I really want to stick to development rather than designing?

Answer by drekka

You don’t need to be a designer. But I would highly recommend you understand the process and some of the techniques used. Having that knowledge will assist in both working with designers and providing better back ends.

I’d do the course, but make it clear to my boss that it’s not what I want to do as a main job.

Answer by Starx

Well, if developing is the field you are comfortable with, stick with it.

But learning is never bad. Try to gain knowledge first, after taking the classes, you can answer this question yourself

Read more
May 20, 2010

Truncate lists with Jquery

Question by Globulopolis

How can I add a function for hide/show elements in the list?

For example we’ve several lists. When we click on “show” link, all list items are displayed, when we click on “hide” link, hide items in a list with an index greater than 3.

<div class="filter_item">
<h3>Network Name:</h3>

and js code

<script type="text/javascript">
            $('.filter_item ul').each(function(){
                $('li:gt(2)', this).hide();
                if ($(this, 'li').children().length > 3) {
                    $(this, ':last').append('<li><a href="javascript:void(0);" class="tr_more">More...</a></li>');
                $(this).attr('class', 'tr_less').text("Less...");
            }, function(){

How to implement hide items when we click on “hide” link?

Answer by Kobi

While this seems overly complex, this will work for you:


First it searches for the parent <ul>, and then hides child <li>s, but leaves the parent of the “Show/Hide” link.

Going with $(this).closest('li').prevAll().slice(2).hide(); didn’t work quite well – it hid the first nodes, not the last. prevAll seem to return elements in reverse order.

Answer by Starx


This will do

Read more

How to create CSS-based (big) quotation marks?

Question by alexchenco

I want something like this: http://img257.imageshack.us/img257/5906/globalcolleage.png
I know how to create CSS-image-based bullets, but for quotations I can’t figure out.

Answer by microspino

An example
another nice one See under

alt text
Gallery of Pull Quotes and Citations


Answer by Starx

you can setup a internal division with small text size and set a big font size for the division or similar for the quotes

Read more

Changing the background of other link on hover of the First link

Question by Wasim Shaikh

I have the following mark up.


When user hover on the first ‘a’ then the next a tag in LI , we remove the backgorund-image.

I hope you are clear what I want to do with this.

Answer by ANeves

You don’t need JavaScript – hurray for CSS skills!

You can do it with the adjacent selector (+ CSS selector), try hovering on a link in your HTML while using this CSS:

ul li a {
    color: red
ul li:hover+li a {
    color: blue

(JSFiddle is a good testing ground.)

Why you’d want something with such a low usability is beyond my comprehension.
But perhaps it makes sence, in your scenario.

Answer by Starx

I think you can do something like this

$('#linka').mouseover(function() {
     $(this).attr('class','somethingrandom'); //so that you can change remaining with ease
     $('.remaininga').removeclass('yourclass'); //whether add a new or remove
}).mouseout(function() {
     $(this).attr('class','remaininga');  //to bring back to previous state

What you actually need to do from my point, is change the class name each time so that you can change the class of remaining

Read more

what's the best technology for creating a web site which manages users accounts?

Question by embedded

I’m going to create a web site which should manage users accounts.
A user opens an account and gets relevant data for his needs.

What technology should I be using to create this site?
Are there any templates I could use?

I don’t have the time to take care of the web site’s desgin,
Are there any places where I can buy some graphics?


Answer by Starx

Well, if you are going for rapid application development, i suggest using a framework or a CMS as suggested by @Glycerine.

But I am not understanding what you mean by technology? I am not sure that there is anything called “technology” in php.

Apache is a server technology I am familiar with.

Read more
May 19, 2010

How to run my php code in every X minute?

Question by Holian

i try to make a “status monitor” for our small network. After the page was load i make a ping for every IP which i addedd. Its, ok. But i would like to do this ping in every X minute, without reload my hole page.

I can make it if i reload the page with header refresh, but i would like to do this witout reload.

I think i have to do this with AJAX?, But i dont know how..

Thank you

Answer by Dan McGrath

I’m not sure exactly what you want to do here, but this quick tutorial shows you how to call a php file every second and update a dib block with the results. It is quick and simple using jquery.

Answer by Starx

If it is entire code of page i suggest setting up a cron job

and if you want to use ajax ( ie jquery ajax there is a plugin called jquery timer) use it send a ajax request to the page with code you want to run.

check this out

Read more

Improving Performance on this Image Creation function

Question by Abs

I am making use of GD2 and the image functions to take in a string and then convert that into an image using different fonts at different sizes. The function I use is below.

Currently, its pretty quick but not quick enough. The function gets called about 20 times per user and the images generated are always new ones (different) so caching isn’t going to help!

I was hoping to get some ideas on how to make this function faster. Maybe supply more RAM to the script running? Anything else that is specific to this PHP function?

Anything else that I can do to tweak performance of this function?

  function generate_image($save_path, $text, $font_path, $font_size){

    $font = $font_path;

    * I have simplifed the line below, its actually a function that works out the size of the box
    * that is need for each image as the image size is different based on font type, font size etc
    $measure = array('width' => 300, 'height'=> 120);

    if($measure['width'] > 900){ $measure['width'] = 900; }

    $im = imagecreatetruecolor($measure['width'], $measure['height']); 
    $white = imagecolorallocate($im, 255, 255, 255);
    $black = imagecolorallocate($im, 0, 0, 0);

    imagefilledrectangle($im, 0, 0, $measure['width'], $measure['height'], $white);     

    imagettftext($im, $font_size, 0, $measure['left'], $measure['top'], $black, $font, '    '.$text);

    if(imagepng($im, $save_path)){

        $status = true;


        $status = false;



    return $status;


Thanks all for any help

Answer by Starx

I think its good

Read more

JQuery Hover li Show div which sits outside li structure

Question by Dave_Stott

I’m currently trying to create a “mega” dropout menu using JQuery but have encountered an issue I’m yet to be able to resolve. At the moment I have the following HTML structure:

<div id="TopNav" class="grid_16">
    <ul class="cmsListMenuUL level0" id="TopNavMenu">
        <li class="cmsListMenuLIcmsListMenuLI highlightedLI" id="TopNavMenu_Home"><a href="/">
            <span class="text">Home</span></a></li>
        <li class="cmsListMenuLIfirst" id="TopNavMenu_0_1"><a href="/Key-Sectors.aspx" class="cmsListMenuLink">
            <span class="text">Key Sectors</span></a></li>
        <li class="cmsListMenuLI" id="TopNavMenu_0_2"><a href="/Global-Brands.aspx" class="cmsListMenuLink">
            <span class="text">Global Brands</span></a></li>
        <li class="cmsListMenuLI" id="TopNavMenu_0_3"><a href="/News---Features.aspx" class="cmsListMenuLink">
            <span class="text">News &amp; Features</span></a></li>
        <li class="cmsListMenuLI" id="TopNavMenu_0_4"><a href="/Videos.aspx" class="cmsListMenuLink">
            <span class="text">Videos</span></a></li>
        <li class="cmsListMenuLI" id="TopNavMenu_0_5"><a href="/Events.aspx" class="cmsListMenuLink">
            <span class="text">Events</span></a></li>
        <li class="cmsListMenuLI" id="TopNavMenu_0_6"><a href="/Key-Cities.aspx" class="cmsListMenuLink">
            <span class="text">Key Cities</span></a></li>
        <li class="cmsListMenuLI" id="TopNavMenu_0_7"><a href="/Doing-Business-in-Yorkshire.aspx"
            class="cmsListMenuLink"><span class="text">Doing Business in Yorkshire</span></a></li>
        <li class="cmsListMenuLI" id="TopNavMenu_0_8"><a href="/How-We-Can-Help.aspx" class="cmsListMenuLink">
            <span class="text">How We Can Help</span></a></li>
        <li class="cmsListMenuLI" id="TopNavMenu_0_9"><a href="/Contact-Us.aspx" class="cmsListMenuLink">
            <span class="text">Contact Us</span></a></li>
<div class="sectorsDropped">
    <div class="floatLeft leftColumn">
        <div class="parentItem" style="border-color: #0064BE;">
            <a href="/Key-Sectors/Advanced-Engineering---Materials.aspx" class="parentItemContent">
                Advanced Engineering &amp; Materials</a><div class="childItem">
                    <a href="/Key-Sectors/Advanced-Engineering---Materials/Nuclear.aspx">- Nuclear</a></div>
            <div class="childItem">
                <a href="/Key-Sectors/Advanced-Engineering---Materials/Logistics---Infrastructure.aspx">
                    - Logistics &amp; Infrastructure</a></div>
        <div class="parentItem" style="border-color: #FFB611;">
            <a href="/Key-Sectors/Chemicals.aspx" class="parentItemContent">Chemicals</a></div>
        <div class="parentItem" style="border-color: #B7CC0B;">
            <a href="/Key-Sectors/Environmental-Technologies.aspx" class="parentItemContent">Environmental
                Technologies</a><div class="childItem">
                    <a href="/Key-Sectors/Environmental-Technologies/Offshore-Wind.aspx">- Offshore Wind</a></div>
            <div class="childItem">
                <a href="/Key-Sectors/Environmental-Technologies/Carbon-Capture---Storage.aspx">- Carbon
                    Capture &amp; Storage</a></div>
            <div class="childItem">
                <a href="/Key-Sectors/Environmental-Technologies/Tidal-Power.aspx">- Tidal Power</a></div>
            <div class="childItem">
                <a href="/Key-Sectors/Environmental-Technologies/Biomass.aspx">- Biomass</a></div>
    <div class="floatLeft rightColumn">
        <div class="parentItem" style="border-color: #AC26AA;">
            <a href="/Key-Sectors/Digital---New-Media.aspx" class="parentItemContent">Digital &amp;
                New Media</a></div>
        <div class="parentItem" style="border-color: #e1477e;">
            <a href="/Key-Sectors/Food---Drink.aspx" class="parentItemContent">Food &amp; Drink</a></div>
        <div class="parentItem" style="border-color: #00c5b5;">
            <a href="/Key-Sectors/Healthcare-Technologies.aspx" class="parentItemContent">Healthcare
                Technologies</a><div class="childItem">
                    <a href="/Key-Sectors/Healthcare-Technologies/Biotechnology.aspx">- Biotechnology</a></div>
            <div class="childItem">
                <a href="/Key-Sectors/Healthcare-Technologies/Pharmaceuticals.aspx">- Pharmaceuticals</a></div>
            <div class="childItem">
                <a href="/Key-Sectors/Healthcare-Technologies/Medical-Devices.aspx">- Medical Devices</a></div>
        <div class="parentItem" style="border-color: #AC1A2F;">
            <a href="/Key-Sectors/Financial---Professional.aspx" class="parentItemContent">Financial
                &amp; Professional</a></div>

In normal circumstances the div containing the “mega” menu options would sit inside the li item that fires the show/hide but this is currently not possible as the ul list of navigation links is rendered using a 3rd party piece of software which does not provide an equivalent of an OnItemDataBound event for me to be able to inject the div into the item

Does anyone know of a way, using JQuery, of showing the div but maintain the display of the div as the mouse focus leaves the li that originaly displayed the div and actually enters the div?

I’m currently using the following JQuery which displays the div correctly but as the mouse focus enters the div the div then disappears as the mouse focus from the li has now moved:

    $(document).ready(function() {

  function addMega(){

  function removeMega(){

var megaConfig = {
     interval: 500,
     sensitivity: 4,
     over: addMega,
     timeout: 500,
     out: removeMega





Answer by Starx

To show or hide a div on mouse over and out
try this


I am sorry, I didn’t read your post completely (it is quite lengthy) , but since you are trying to create a mega drop down menu why dont you try this menu.



        <a href="#">Link 1</a>
        <ul class="submenu">
           <li>Sub Link 1</li>
           <li>Sub Link 1</li>
Read more

How to verify a jQuery plugin is compatible with latest version of jQuery?

Question by jedatu

Are there any tools that can verify whether a jQuery plugin will be compatible with the latest version of jQuery?

Once a large number of jQuery plugins are selected and in use, an unknown number of dependencies can develop. It would be nice to upgrade jQuery, however not all plugins remain supported or provide consistently architected upgrades.

The only option seems to be adhoc manual regression testing. It would be nice to have a strategy for dealing with this issue.

Answer by Starx

Try to use that plugin with new jquery library

Read more

Please fill the form - I will response as fast as I can!