Hi! I’m Starx

Question 1

Question by Web Logic

Suppose I have an element like this:

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

I used this:

alert($('#dv').attr('class'));

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

Answer by jAndy

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!');
}

or

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

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

“.className” and just “className”

Answer

Answer by Starx

Starx

use this

alert($('#dv').attr('class'));

Question 2

Question

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

Answer by drekka

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

Answer by Starx

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

Question 3

Question by Globulopolis

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>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
...
</div>

and js code

<script type="text/javascript">
    //<![CDATA[
        jQuery(document).ready(function($){
            $('.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>');
                }
            });
            $('.tr_more').toggle(function(){
                $(this).closest('li').siblings().show();
                $(this).attr('class', 'tr_less').text("Less...");
            }, function(){
                ????
            });
        });
    //]]>
</script>

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

Answer

Answer by Kobi

Kobi

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

$(this).closest('ul').children('li:gt(2):not(:last)').hide();

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

Answer by Starx

Starx

$('.hidelink').click(function(){
     $(this).children('li').hide();
});

This will do

Question 4

Question by alexchenco

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

Answer by microspino

microspino

An example
another nice one See under

alt text
Gallery of Pull Quotes and Citations

🙂

Answer

Answer by Starx

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

Question 5

Question by Wasim Shaikh

Wasim Shaikh

I have the following mark up.

<ul>
<li><a><span>link-1</span></a></li>
<li><a><span>link-2</span></a></li>
<li><a><span>link-3</span></a></li>
</ul>

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

Answer by ANeves

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

Answer by Starx

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

Question 6

Question by embedded

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?

Thanks

Answer

Answer by Starx

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.

Question 7

Question by Holian

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

Answer by Dan McGrath

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

Answer by Starx

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.

http://plugins.jquery.com/project/timers
check this out

Question 8

Question by Abs

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;

    }else{

        $status = false;

    }

    imagedestroy($im);

    return $status;

}

Thanks all for any help

Answer

Answer by Starx

Starx

I think its good

Question 9

Question by Dave_Stott

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>
    </ul>
</div>
<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>
        <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>
    </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>
        <div class="parentItem" style="border-color: #AC1A2F;">
            <a href="/Key-Sectors/Financial---Professional.aspx" class="parentItemContent">Financial
                &amp; Professional</a></div>
    </div>
</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(){
    $(".sectorsDropped").toggle("fast");
    }

  function removeMega(){
    $(".sectorsDropped").toggle("fast");
    }

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

$("#TopNavMenu_0_1").hoverIntent(megaConfig)


});

Thanks

Dave

Answer

Answer by Starx

Starx

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

$("menubutton").mouseover(function(){
     $("#submenudiv").show();
}).mouseout(function(){
  $("#submenudiv").hide();
});

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.

http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/

Example:

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

Question 10

Question by jedatu

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

Answer by Starx

Starx

Try to use that plugin with new jquery library

Hi! I’m Starx

experienced Software Developer. And this is my blog

Blog Page

How to get class name using jquery

Question by Web Logic

Answer by jAndy

Answer by Starx

Should a developer be a designer?

Question

Answer by drekka

Answer by Starx

Truncate lists with Jquery

Question by Globulopolis

Answer by Kobi

Answer by Starx

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

Question by alexchenco

Answer by microspino

Answer by Starx

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

Question by Wasim Shaikh

Answer by ANeves

Answer by Starx

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

Question by embedded

Answer by Starx

How to run my php code in every X minute?

Question by Holian

Answer by Dan McGrath

Answer by Starx

Improving Performance on this Image Creation function

Question by Abs

Answer by Starx

JQuery Hover li Show div which sits outside li structure

Question by Dave_Stott

Answer by Starx

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

Question by jedatu

Answer by Starx

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