...

Hi! I’m Starx

experienced Software Developer. And this is my blog
Start Reading About me
Blog Page
February 27, 2012

Fade out a background-image

Question by user1235147

I have a simple image menu. There is a background-image which disappears on hover to show the menu items. I am looking for jQuery solution to fade out this image slowly. Any ideas?

HTML:

<div id="m1">
    <ul class="joomla-nav">
         <li>...</li>
    </ul>
</div>

CSS:

#m1 {
background-image:url('../images/m1.jpg');
width:320px;
height:210px; 
background-color:#1F91B7;
float:left;}

#m1:hover {
background-image:none;
background-color:transparent}

#m1:hover .joomla-nav {
display:block!important; }

#m1 .joomla-nav {
display:none!important; }

Many thanks!

Answer by Starx

jQuery’s .animate() is only able to animate numeric Values.

Unlike background-color a background-image is not represented by numbers, so it cannot be animated.

What you can do is use another div with no background. And then fade the current div, so that it will look like the current background is fading out.

Read more

Use multiple methods

Question by consindo

I’m having trouble using multiple methods in JavaScript. What would be the best way to construct something like this:

task.data(id).display();
task.data(id).edit();

Answer by Starx

Its possible but little tricky

function data(id) {
  return {
    display: function () {
      alert('some message');
    }
  };
}
//now use it
data(id).display();

Demo


For this to work in your context, you need to chain three methods

Read more

limit cell width with css and hide overflow – IE anomaly

Question by Mark Belli

I am having problems with a table.

It’s made of 3 cells each row, each cell has a max width and the text that doesn’t fit in the cells has to be discarded.

I already looked this:

How to limit a table cell to one line of text using CSS?

And I made the code.

http://jsfiddle.net/e3Eqn/222/

The problem is that I don’t understand why firefox, chrome, safari are ok with it and internet explorer displays a crazy formatting and does not consider the overflow:hidden!

Answer by Starx

A common problem again. However there is a easier workaround than to plunge in various techniques instead.

Use this format

<td>
<div>
Your longlonglongcontent
</div>
</td>

Then use this as CSS

td div { width: 100%; overflow: hidden; }

This will work in ff, opera and IE7

See your demo with this hack

Read more

Which MySQL storage engine will be better in my situation

Question by Mukesh Kumar

I have to develop a big application, a School management system; which MySQL storage engine will be better? MyIsam or InnoDB or any other?

Answer by Starx

InnoDb Support Relationships and MyISAM does not. If your application require this features, you should use InnoDB.
Other major differences includes:

  • InnoDB is newer while MyISAM is older.
  • InnoDB is more complex while MyISAM is simpler.
  • InnoDB is more strict in data integrity while MyISAM is loose.
  • InnoDB implements row-level lock for inserting and updating while MyISAM implements table-level lock.
  • InnoDB has transactions while MyISAM does not.
  • InnoDB has foreign keys and relationship contraints while MyISAM does not.
  • InnoDB has better crash recovery while MyISAM is poor at recovering data integrity at system crashes.
  • MyISAM has full-text search index while InnoDB has not.

By Yang Yang source

See this question and find out yourself, which fits better in the situation.

Read more

How to add a colons (:) between inline list elements?

Question by DexyOnline

Is there anyway to add colons between inline list elements?

Example:

home : blog : contact

Answer by Sarfraz

You can use :after and content:

/* add : after each li */
#ul li:after{
  content:":"
}  

/* remove from last one */
#ul li:last-child:after{
  content:""
}

Working Example

Answer by Starx

The proper ways would be these

ul li:not(:last-child):after{
  content:":"
}
Read more

How can we specify rules for jquery validation plugin by class?

Question by Zesty

The jQuery Validation plugin works great and is very easy to use:

$(".selector").validate({
})

Just by setting css classes like “required email”, the default message will be displayed.

However, I need to customize the messages. The documentation says you can specify rules using a key-value pair for elements and their corresponding messages:

$(".selector").validate({
   rules: {
     name: "required",
     email: {
       required: true,
       email: true
     }
   },
   messages: {
     name: "Please specify your name",
     email: {
       required: "We need your email address to contact you",
       email: "Your email address must be in the format of name@domain.com"
     }
   }
})

But, it is not practical to specify a rule for every form element, especially server-generated controls in ASP.NET. Is it possible to specify rules that would apply to ALL elements? Or can I use a class selector somehow?

I tried the following, but it didn’t work:

$("#frmMyForm").validate
({
    rules:
    {
        $(".required email"):
        {
            required: true,
            email: true
        }
    },
    messages:
    {
        $(".required email"):
        {
            required: "Please enter your email address",
            email: "Your email address must be in the format of name@domain.com"
        }
    }
});

That seemed to have a syntax error – the plugin didn’t do anything. Then I tried:

$("#frmMyForm").validate
({
    rules:
    {
        ".required email":
        {
            required: true,
            email: true
        }
    },
    messages:
    {
        ".required email":
        {
            required: "Please enter your email address",
            email: "Your email address must be in the format of name@domain.com"
        }
    }
});

This didn’t have any syntax error – the plugin worked, but it ignored the rules/custom messages. Has anyone here used jQuery Validation plugin? If so, how did you apply rules/custom messages to multiple elements?

Thanks!

Answer by Sparky672

For the purposes of my example, this is the base starting code:

HTML:

<input type="text" name="field_1" />
<input type="text" name="field_2" />
<input type="text" name="field_2" />

JS:

$('#myForm').validate({
    rules: {
        field_1: {
            required: true,
            number: true
        },
        field_2: {
            required: true,
            number: true
        },
        field_3: {
            required: true,
            number: true
        }
    }
});

Option 1) You can assign classes to your fields based on desired common rules and then assign those rules to the classes. You can also assign custom messages.

HTML:

<input type="text" name="field_1" class="num" />
<input type="text" name="field_2" class="num" />
<input type="text" name="field_3" class="num" />

The .rules() method must be called after invoking .validate()

JS:

$('#myForm').validate({
    // your other plugin options
});

$('.num').each(function() {
    $(this).rules('add', {
        required: true,
        number: true,
        messages: {
            required:  "your custom message",
            number:  "your custom message"
        }
    });
});

Option 2a) You can pull out the groups of rules and combine them into common variables.

var ruleSet1 = {
        required: true,
        number: true
    };

$('#myForm').validate({
    rules: {
        field_1: ruleSet1,
        field_2: ruleSet1,
        field_3: ruleSet1
    }
});

Option 2b) Related to 2a above but depending on your level of complexity, can separate out the rules that are common to certain groups and use .extend() to recombine them in an infinite numbers of ways.

var ruleSet_default = {
        required: true
        number: true
    };

var ruleSet1 = {
        max: 99
    };
$.extend(ruleSet1, ruleSet_default); // combines defaults into set 1

var ruleSet2 = {
        min: 3
    };
$.extend(ruleSet2, ruleSet_default); // combines defaults into set 2

var ruleSet3;
$.extend(ruleSet3, ruleSet_1, ruleSet_2); // combines sets 2 & 1 into set 3.  Defaults are included since they were already combined into sets 1 & 2 previously.

$('#myForm').validate({
    rules: {
        field_1: ruleSet2,
        field_2: ruleSet_default,
        field_3: ruleSet1,
        field_4: ruleSet3
    }
});

End Result:

  • field_1 will be a required number no less than 3.

  • field_2 will just be a required number.

  • field_3 will be a required number no greater than 99.

  • field_4 will be a required number between 3 and 99.

Answer by Starx

jQuery.validator.addClassRules(); will attach the validation to class, but there is no option for messages, it will use the general error messages.

If you want that to work then, you should refactor the rules like this

$.validator.addMethod(
     "newEmail", //name of a virtual validator
     $.validator.methods.email, //use the actual email validator
     "Random message of email"
);

//Now you can use the addClassRules and give a custom error message as well.
$.validator.addClassRules(
   "email", //your class name
   { newEmail: true }
 );
Read more

In codeigniter, How to get the token returned from google login as parameter to controller?

Question by kamal

I am working with AuthSub to view portfolios of google finance api on codeigniter framework.

after successful login of google it redirects to the url we provide.

I have provided url like: www.finance.mysite.com/google/token/

google will append its token like:

www.finance.mysite.com/google/token/?token=1/gyXbtvKT4XaIuUIhEBAsuxyDgATMDk3ztAG3MocNkKI

How can I get it inside a function token() inside google controller.

Answer by Starx

Just extract the token, and route it to controller of your choice.
You can extract the params like this

$params = "http://www.finance.mysite.com/google/token/?token=1/gyXbtvKT4XaIuUIhEBAsuxyDgATMDk3ztAG3MocNkKI";
$parsed = parse_url($params);
$pieces = explode("=", $parsed['query']);
$searchIndex = array_search("token", $pieces);
if($searchIndex) {
    $token = $pieces[$searchIndex+1];
    //now use it as you need
    redirect("controller/google/$token");
}

Note: The code above will only work, if there is only single parameter on the url, or else not.

Read more

Why does my Image stretch when I crop it?

Question by Starx

I am using the following code snippet in order to crop a image?

   function crop($width,$height) {
       $new_image = imagecreatetruecolor($width, $height);
       imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $this->getWidth(), $this->getHeight(), $width, $height );
       $this->image = $new_image;
   }

Here, $this->image is the original image $this->getWidth() and $this->getHeight() holds the original dimensions of the picture, where as $width and $height, is the crop area.

But for some reason, the crop image is resized(we can almost say it is resized).

How to fix this?

Answer by Starx

Well, the problem is giving the source dimensions. Giving the dimensions of entire image will re size instead of cropping.

This should solve the problem

   function crop($width,$height) {
       $new_image = imagecreatetruecolor($width, $height);
       imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $width, $height );
       $this->image = $new_image;
   }
Read more

One line code to get one value from function that returns an array

Question by Salman A

Possible Duplicate:
Parse error on explode('-','foo-bar')[0] (for instance)

In PHP there are functions that return an array, for example:

$a = parse_url("http://stackoverflow.com/q/9461027/87015");
echo $a["host"]; // stackoverflow.com

My question is how to combine the above two statements into a single statement. This (is something that works in JavaScript but) does not work:

echo parse_url("http://stackoverflow.com/q/9461027/87015")["host"];

Answer by Starx

You can do a little trick instead, write a simple function

function readArr($array, $index) {
    return $array[$index];
}

Then use it like this

echo readArr(parse_url("http://stackoverflow.com/questions/9458303/how-can-i-change-the-color-white-from-a-uiimage-to-transparent"),"host");
Read more
...

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