...

Hi! I’m Starx

experienced Software Developer. And this is my blog
Start Reading About me
Blog Page
December 2, 2011

How to add load more button for a HTML/CSS page?

Question by Saiful Islam

I want to make a single page website and it will have huge content. Suppose it has 1000 photos on it. I don’t want people to wait 5 minutes to load my page. So I wanna add LOAD MORE button on the page bottom.

How to do that with HTML/CSS/JS?

Answer by Purmou

You could set all the divs’ to display:none; at first and then use jQuery to show the first 10 (or however many you wish to show):

$(function(){
    $("div").slice(0, 10).show(); // select the first ten
    $("#load").click(function(e){ // click event for load more
        e.preventDefault();
        $("div:hidden").slice(0, 10).show(); // select next 10 hidden divs and show them
        if($("div:hidden").length == 0){ // check if any hidden divs still exist
            alert("No more divs"); // alert if there are none left
        }
    });
});

Example.

This saves you the trouble of including an entire plugin when what you want can be achieved in a few lines of code.

Answer by Starx

The closest i can get reading your question, you want the effect which google and facebook uses nowadays to load posts.

Visit infinite-scroll.com
They have your answer.

Read more

Is it safe to put email addreses in PHP variables against email harvesters?

Question by enchance

Is it safe to use either of these lines without having the emails being picked up by email harvesters?

My email: <a href="mailto:<?php echo 'testing@example.com'; ?>"><?php echo 'testing@example.com'; ?></a>

or this one with variables

<?php $email = 'testing@example.com'; ?>
My email: <a href="mailto:<?php echo $email; ?>"><?php echo $email; ?></a>

or does it even matter for as long as it’s generated by PHP then it’s safe?

Answer by Jeremy Banks

Those will provide no protection at all. PHP is run on the server side. It will generate an HTML document and send it to the client. From the perspective of a bot or a user this is exactly the same as if you had just put the email address in a normal HTML document:

My email: <a href="mailto:testing@example.com">testing@example.com</a>

Answer by Starx

Your both example with give the same HTML output

My email: <a href="mailto:testing@example.com">testing@example.com</a>

and YES it is vulnerable to crawler.

If email address is such of such importance.

Create a contact form, add some captcha and send the form details through PHP, without exposing the email address anywhere in the page.

Read more

MySQL list IN list

Question by Dave

I currently store user’s inputs in comma separated lists like so:

Userid | Options
1      |  1,2,5

A user ticks a set of options in a form which is an array, which is then joined with a comma to make

1,2,5.

Then MySQL is trying to find other users who some or all of the same options ticked on a different field name (although same table).

Currently I do this:

WHERE `choices` IN ('.$row['myoptions'].')

So this could be something like:

WHERE 1,2,5,8 IN (1,4,6)

This would return true because theres at least one value match right? Or have i got this confused..

Answer by Starx

May be you are going the wrong way to do this.

The function FIND_IN_SET might be helpful if the options column type is SET.

Example:

SELECT * FROM yourtabe WHERE FIND_IN_SET('2', Options);

But, it will only let you compare one string at a time, in the above example, it compares if 2 is present in the rows. If you have to compare multiple values you cannot accomplish that by using FIND_IN_SET.

However, in your case, LIKE clause may be of use to.

May be something like

SELECT * FROM yourtable WHERE Options LIKE '%2,3%';

Now this will search for 2,3 value anywhere in the column, and give the result. But this also comes with another complication, it gives the result only if 2,3 is present side by side of each other, if the column has 2,1,3 or 2,4,5,3 or even 3,2 it will not list these records.

Now coming to your question

`WHERE `choices` IN (1,4,6)`, 

will translate to

where `choice` = '1' or `choices` = '4' or `choices` = '6'

so it will return false

Why?

because your column contains not only 1 or 4 or 6 but 1,2,5 as one string. So all the comparisons above to return false

Read more
November 29, 2011

Redirection using PHP footer in Worpress

Question by The Waves

I have a question about timed redirects in PHP – specifically in wordpress.

We have setup a site using a free Woothemes placeholder theme, it is very limited. But that is OK – the site is simple.

After 20 seconds I would like the page to redirect to another URL – would it be possible to insert some code into footer.php to do this? I have found what looks like the right code:

// Redirect with a delay:
header('Refresh: 20; url=http://www.example.org/');

Can this be inserted antwhere in footer.php?

Any input is welcome.

Answer by Starx

Yes, it can be inserted, but in case some HTML is already by the server you will receive an warning such as header already sent by ..... and the redirection will not function as it should.

Instead you can perform such by clearing everything in the output buffer using ob_clear() that is to be printed and then send the redirection header.

Example:

if($casespecial==true) {
    ob_clean(); //make sure nothing is outputed to the browser
    header('Refresh: 20; url=http://www.example.org/'); //now send the header param

    //After wards, you can resume your normal code and output the template as you require
    .
    .
    .
}
Read more
November 28, 2011

Enlarge div automatically , just to fit for the image background automatically

Question by warl0ck

I’m trying to place a image under certain div tag , but when there’s no text , it won’t show at all , so how can i force the div show the whole size of image background ?

  <html>
    <head>
        <title> This is an demo </title>
        <style>
            .board {
                background: url('1.jpg') no-repeat;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="board">Pic</div>
            <div class="board">Pic</div>
            <div class="board">Pic</div>
            <div class="board">Pic</div>
        </div>
    </body>
</html>

I tried background-size , it doesn’t work at all (cover / contain)

Answer by Starx

You have to fix the dimensions of the <div> with respect to the size of the image. Otherwise it wont show.

Something similar to this

.board { 
    min-width: 300px;
    min-height: 400px;
    display: block;
}


Notes:

  • if possible avoid the use of min-height or min-width. Use height & width instead
Read more

How to concatenate a string and a variable into a constant name?

Question by rajzana

I have a constant like define(“EMPLOYEE_NAME_ID”,”employee”); and a variable $code = EMPLOYEE;

now i want to print like below

<?php echo $code.NAME_ID; ?>

But this prints only “EMPLOYEE_NAME_ID” and i want to print “employee”. Then how to print this. The all over means is that i want to retriew variables from lang file.

Answer by ajreal

A unquote string in PHP will be parsed as constant,
and if the constant is undefined,
it will treat as the string (instead of a variable)

If you dealing with constant, you can make use of constant function :-

echo constant("{$code}_NAME_ID");

However, use of this function will return warning message if the constant is not defined.
There are other option like parse_ini_file you can take a look,
this is ideal for handling large amount of setting / configuration

Answer by Starx

Better way would be to use constant function

echo constant($code."NAME_ID");
Read more

How to auto scroll down an iframe 100px every 5 secs?

Question by Kaoukkos

I would like to know how can I scroll down an iframe 100px every 5 secs using maybe javascript. I know that there is a window.scrollTo(x,y); but how does this change to an iframe?

The iframe is an external page.
Any possibility of software to download that does this thing?

Answer by Starx

Its very easy using a jquery,

Lets say the id of your iframe is testframe then the code for it would be

$("#testframe").scrollTop(400).scrollLeft(400);

Now just wrap it inside an interval and put it inside.

var tick=1;
function scrolldown(tick) {
    $("#testframe").scrollTop(tick*100);
}
self.setInterval("scrolldown("+(tick+1)+")",5000);

Note: Just a typo

Read more

jquery how to change class of one <td> based on id of another <td>

Question by Martlark

I have two tables and I want to highlight a cell in table 1 when I hover over another cell in table 2. Not sure how to get there from here. I’m thinking I should take the id from table 2 and look for the same id thing in table 1 and add the highlight class.

<!DOCTYPE html> 
<html> 
<head> 
  <style> 
.cell {    background-color:#FFCC00 } 
.cell-highlight {    background-color:green } 
</style> 
  <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 

<table border='1' id='table-1'>
    <tr>
        <td class='cell' id='cell-0-0'>Cell 0,0</td><td class='cell' id='cell-0-1'>Cell 0,1</td>
    </tr>
    <tr>
        <td class='cell' id='cell-1-0'>Cell 1,0</td><td class='cell' id='cell-1-1'>Cell 1,1</td>
    </tr>
</table>
<br/>
<table border='1' id='table-2'>
    <tr>
        <td class='cell' id='t2cell-0-0'>2 Cell 0,0</td><td class='cell' id='t2cell-0-1'>2 Cell 0,1</td>
    </tr>
    <tr>
        <td class='cell' id='t2cell-1-0'>2 Cell 1,0</td><td class='cell' id='t2cell-1-1'>2 Cell 1,1</td>
    </tr>
</table>
<script> 
  var id;
  $("td.cell").mouseover(function() { 
    id=$(this).find("id");
    $(this).addClass('cell-highlight' ); 
  }).mouseout(function() { 
    $(this).removeClass('cell-highlight' ); 
  }); 

</script> 

</body> 

Answer by Starx

Make the following changes it your code

$("td.cell").mouseover(function() { 
    id=$(this).attr("id");
    $(this).addClass('cell-highlight' ); 
    secondid = "#t2"+id;
    $(secondid).addClass('cell-highlight');
  }).mouseout(function() { 
    $(this).removeClass('cell-highlight' );
    id=$(this).attr("id");
    secondid = "#t2"+id;
    $(secondid).removeClass('cell-highlight'); 
}); 
Read more
November 27, 2011

Unknown space between list item

Question by joomlearner

I am designing a simple joomla template. When I came to a very weird problem. Although, I didn’t gave any margin or padding, some spaces are appearing between the list items.

Here is a link to the fiddle. Click here

Can someone tell me what am i doing wrong?

Firebug shows nothings.

Answer by Starx

This doesn’t have anything to do with the joomla scenario. But this is default way the inline-blocks behave. They add about 4px margin to the right, automatically.

A quick fix of this is applying float:left to the list items

But, a similar question has been asked already and the answerer has provided with the better solution. i.e. closing and starting the li‘s in a same line

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

Furthermore, this might be worth reading as well.

Read more
November 21, 2011

Move text baseline in <li> 2 px up

Question by Narek

I have implemented my webpage menu by inline li-s of ul. li has a colored border and contains a. Now onmousehover I need to change color of the text inside a and move it 2px up by not moving the li border. How can I do that?

Answer by Starx

The trick is too remove the top padding a bit and increase the bottom padding a bit to maintain the markup integrity.

I have set up a simple example of what you want. Check it on the fiddle here

Read more
...

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