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
    .
    .
    .
}
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

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");

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

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

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

November 20, 2011

JavaScript test if a CSS stylesheet is applied with CSS3 media query

Question by Craig Francis

I have two style sheets:

<link rel="stylesheet" type="text/css" href="/core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/core-desktop.css" media="only screen and (min-width: 800px)" id="css-desktop" />

The second one should only be loaded when the window is 800px or wider (narrower displays get a layout more appropriate for mobile devices).

The JavaScript needs to know if that second style sheet is being applied, I have tried the jQuery:

($(window).width() > 800)

But when you get around the 790 – 810px width, Chrome/Firefox (and probably others) will return a value such as 791, and the 800px+ style sheet will still be loaded.

I suspect it’s due to the scroll bar (but targeting the $(document) or $(‘html’) either doesn’t work, or are the same).

So is there a way to test if $(‘#css-desktop’) is enabled/active/used?

Answer by Niels

You can do the following.

  1. Make a div which has a display: none; in the first stylesheet, so it is not shown.
  2. In the second stylesheet you will add a position: absolute
  3. In your Javascript you check if( $("#thediv").css("position") == "absolute")

The position: absolute; is only applied in the second stylesheet.

Answer by Starx

There is a problem with what you are attempting.

If a user is browsing the page while resizing the window below 800px in width then, he will get the mobile version of the page and later when he/she maximizes, he will still get the mobile version.

So, relying on screen width are not a reliable method as the screen resolution of the mobiles are growing significantly nowadays.

Your best shot is to read the User Agent information of the browser, which will easily reveal whether it is a mobile browser or other and load the css files according to it. Then for the variable screen resolution, you can use your current techniques to load width specific codes.

How to change the label text in javascript function?

Question by user1047651

i want to validate login page using java script function.
i take one label button for displaying message and two text box for username and password and one button for “Login” .

when user click on “Login” button without enterning username and password then message will be display in label control. So how to check textbox value in javascript function and how to change the value in lblmessage. I call this function in Ok button . I set this function on Button OnClientClick event but this does not work.

Answer by Starx

With javascript

A simple example

var lblElement = document.getElementbyId("yourlabelsid");

lblElement.innerHtml("Your new updated text in the label");

But try to use a javascript libray like jquery, it has a lot of benefits and ease.
Generically on jquery, to change the markup of any element, we use

$("#theselector").html("the new markup inside the markup");

In case input elements, we use .val();
$(“#mytextbox”).val(“the value in the textbox”);


Based on your description, you want to change the text inside label so a simple example

For this label

<label id="lbl_name">Name:</label>

Use

$("#lbl_name").html("the updated html"); 

Anywhere you need on the script

November 17, 2011

My First Blog

Today, November 17, 2011 13: 11 (GMT + 5:45), I am composing my first blog ever. My name is Nabin Nepal. I am 20 year 7 months 12 day 3 hours old, living in a small area of Budhanilkantha in Kathmandu. Professionally I am a programmer. Academically, I am doing my undergrad. I am invisible to most of people (I actually like it that way ;)), but among those who see me I am known as Nabin to most, as Starx to some, as neo to very few & as Knobin, to a special friend Kabir Basnet, who thought of this name…… and also became the name of my blog — — —

...

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