May 31, 2012

jQuery setInterval

Question by gkunno

I have a jQuery function that flips an element and then turn it back after a few seconds, however there is multiple elements with the same “flip” tag and the setInterval elements flip all the elements back after the first click. How could i implement the flip effect to turn only the elements that have been clicked in e kind of flow, so that not all elements flip after the delay. The code is:

$(document).ready(function() {

    $('.click').toggle(function() //on click functions => toggle elements
    {           

        setTimeout( function() { // trigger the flip-back after delay (1500ms)
        $('.flip').trigger('click');
        }, 1500) 

        $this = $(this);
        $this.addClass('flip');
        $this.children('.front').delay(600).hide(0);
        $this.children('.back').delay(600).show(0);

    },          
        function() 
        {

        $this = $(this);
        $this.removeClass('flip');
        $this.children('.front').delay(600).show(0);
        $this.children('.back').delay(600).hide(0);

        });  
});

My intention is that the elements would flip back after the delay, but now all the clicked elements flip back after the delay, even though they are only visible for the time – delay. Hops this makes sense ๐Ÿ™‚

Thnx for any help!

Answer by Starx

Use, $(this) or this to refer the current item that is click. Also, the extra function is not needed, just use toggleClass() to apply/remove the class.

$('.click').click(function() //on click functions => toggle elements
{           

    var $this = $(this);
    setTimeout( function() { // trigger the flip-back after delay (1500ms)
        $this.trigger('click');
    }, 1500);

    $this.toggleClass('flip');
    $this.children('.front').delay(600).hide(0);
    $this.children('.back').delay(600).show(0);

});

How to share content from our site to google plus

Question by keerthi

How to share content from our site to google plus

I tried it like this

<a href="javascript:void(0);" onclick="window.open('https://plus.google.com/share?url=<?php echo urlencode('http://example.com');?>&via=example', 'Share on Google Plus', 'width=600,height=400,left=450').focus();" >

Here I can not share content from my site. How it is possible with this?
I want to share content (example: hello) to goggle plus with sharing capability

Answer by Starx

Its been some time since the Google has brought its share button. You can find this, on their developer’s page. [Here]

Paste the generated code on your web page, then link of the page will be automatically received by the API.

Best way to save encrypt/decrypt key?

Question by Kenneth Poulsen

I’m developing a wordpress plugin.
In that plugin the user need to type some important login details, which I will use in a cron-job.

I will of cause like to encrypt the password, and found this useful stuff:
Best way to use PHP to encrypt and decrypt?

However, how should I save the key?
I can’t save it in a file, since all files will be replaced when the user update the plugin.
And save it in the database, well – that’s not exactly smart i guess.

Any suggestions?

Answer by Starx

I think its better, if you save the key on the database table. About the part of securing the database and making sure that the data in the table will only be accessible by the authorized person, You can create a second user, with the privilege of accessing and reading such vital tables.

Therefore, create a separate user, who will have the authority to access the table and its contents. Now, use the website, with a different user, and switch to a administrative database user, when you need to access the encryption key and other vital information.

May 30, 2012

CSS disable text selection

Question by Neil

Currently i have put this in the body tag to disable text selections

body{
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

However my input and textarea boxes are now unselectable .How can i only make these input elements selectable and the reset unselectable

Answer by Someth Victory

Don’t apply these properties to the whole body. Move them to a class and apply that class to the elements you want to disable select:

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

Answer by Starx

Use a wild card selector * for this purpose.

#div * { /* Narrowing, to specific elements, like  input, textarea is PREFFERED */
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

Now, every element inside a div with id div will have no selection.

Demo

May 29, 2012

How to make application browser compatible

Question by Rajesh

I am building an application which is working fine in IE8 and Mozilla Firefox,but not in IE7. I like firebug and I like to debug my application using that,but currently I am struggling with browser compatibility thing. I found that application developed is working in IE8,FF11 but not in IE7(mainly layout is highlighly impacted). I am using jquery for browser related functionality and the jquery thing seems to be working..what shall I do to make layout working fine in IE7?
Framework used is spring3,hibernate..
I have huge set of CSS I dont think pasting that here will be any helpful.I have used postion relative and used top,left position some things..padding and margin are used but not that much..is that the cause? what is the possible suggestion? why IE7 and IE8 render things in different way? Shall I load different set of CSS for IE7,using spring? is it good solution?if yes then how to do that in spring?
Shall i discard using firebug and rely on IE8 debugger because our client mainly use IE7

Answer by Starx

Browser compatibility is a very lengthy topic and it covers more than one area to perform correctly.

If IE 7 or IE browsers are your only problem, then CSS Conditional comments is the PERFECT solution for you.

Create a separate stylesheet, with all the neccessary fixes for IE7 browser. Then call the script is such a way, only IE 7 will render it.

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" media="screen" href="ie7fix.css" />
<![endif]-->

Now, the above stylesheet is only apply, in case if the browser is IE 7. So, all your fixes will be applied, thus the layout will be fixed. ๐Ÿ™‚


To read more about conditional comments, read this article.

How to get last li's anchor tag with simple dom html in php

Question by Ravi Kotwani

I am crawling a web with the help of simple dom in PHP.

I am getting following html with the help curl:

<ul><li>1</li><li>2</li><li>3</li><li><a href="http:abc.com">4</a></li></ul>

Now, I need to href (link) of anchor tag which is in the last li of this ul with the help of simple dom object. Please provide me syntax how can I do this?

I have tried with the following code but i am not able to find the last li…

require_once 'simple_html_dom.php';
        $html = "<ul><li>1</li><li>2</li><li>3</li><li><a href="http:abc.com">4</a></li></ul>";
        $oDocumentModel = new simple_html_dom();
        $oDocumentModel->load($html);
        $ul = $oDocumentModel->find('ul',0);

Answer by Sanjay

You can loop through the li and convert it in array and find the last element. if you have smaller set of li like…

require_once 'simple_html_dom.php';
$html = "<ul><li>1</li><li>2</li><li>3</li><li><a href='http:abc.com'>4</a></li></ul>";
$oDocumentModel = new simple_html_dom();
$oDocumentModel->load($html);
$ul = $oDocumentModel->find('ul',0);

$items = array();
foreach( $ul->find('li') as $li ){
    $items[] = $li->plaintext;
}
$last = end($items);
print_r($last);

Or you can use lastChild() just go through the http://simplehtmldom.sourceforge.net/manual_api.htm

Answer by Starx

You can extract the link this way.

$ul = $oDocumentModel->find('ul',0);
$a = $ul -> lastChild() -> find('a'. 0);
$href = $a -> href;

jQuery Validate – Success event?

Question by Probocop

I am using the jQuery Validate plugin on my site, and then submitting the form via ajax. Is there an event I can use when the entire form is valid?

Answer by Starx

There is no event for this. Just check the status using a simple if statement.

if($("form").valid()) {
 //go ahead
}

But, if you are trying to have a workaround solution to catch the valid event, you can do something like this

$("form").submit(fucntion() {
    if($(this).valid()) {
       //go ahead
    } else {
       //do some error handling
    }
});
May 28, 2012

PHP Currency Regular Expression

Question by Lee

I am trying to find a piece of regex to match a currency value.

I would like to match only numbers and 1 decimal point ie

Allowed

  • 10
  • 100
  • 100.00

Not Allowed

  • Alpha Characters
  • 100,00
  • +/- 100

I have search and tried quite a few without any luck.

Hope you can advise

Answer by The Pixel Developer

if (preg_match('/^[0-9]+(?:.[0-9]+)?$/im', $subject))
{
    # Successful match
}
else
{
    # Match attempt failed
}

Side note : If you want to restrict how many decimal places you want, you can do something like this :

/^[0-9]+(?:.[0-9]{1,3})?$/im

So

100.000

will match, whereas

100.0001

wont.

If you need any further help, post a comment.

PS If you can, use the number formatter posted above. Native functions are always better (and faster), otherwise this solution will serve you well.

Answer by Starx

How about this

if (preg_match('/^d+(.d{2})?$/', $subject))
{
   // correct currency format
} else {
  //invalid currency format
}
May 27, 2012

Push associated variables into array in PHP

Question by Dev Newb

I have a loop and each time the loop runs I need to add two variables to an array. What I am trying right now is:

$attach_array['outline'] = array();

foreach ($_POST['attachment'] as $key => $value) {
  $attachmentName        = $value['name'];
  $path                  = "1";
  $name                  = "alsdkjf";
  $attach_array['outline']['path']=$path;
  $attach_array['outline']['name']=$name;
}

Then later in the script I try to get these values out for PHPMAILER:

foreach ($attach_array['outline'] as $key => $value) {
   $mail->AddAttachment($value['path'], $value['name']);
}

This and other attempts are not working so I’m hoping for some help on putting $name and $path into an array in my first loop to use later.

Answer by Starx

You are overriding the same variables on each loop. You should do something like this:

  $attach_array['outline'][] = array('path' => $path, 'name' => $name);

By doing this, now all the path and values will remain on the array as separate items. You dont have to change the code you are using it from.

How can I replace part of a string which is wider than 50 px with "…"?

Question by Snehal Kumar Mishra

I am looking for a function which replaces part of a string which is wider than 50px with "...". I want to implement it in Javascript/jQuery.

Example:

  • Say I have a variable var="Theta Saving Non-Qualified Plan"; I want to put a restriction on the length of the string (based on pixel width). If the length of string is more that 50px, then the part of the string which is from the 51st pixel to theend of string will be replaced with "...".

Any idea guys?

Answer by Starx

This cannot be deduced as easy as you would like it to be. Because how much width a character or set of characters will take will depend upon the font-size. And calculating a text width is hardly accurate.

So, its better you create your interface to be friendly with characters rather than the width.

var t = $("#div").text();
if(t.length > 50) {
    $("#div").text(t.substr(0,50)+"...");
} 
...

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