How to hide PHP element on screen size?

[ibadullah]

Hello All,

I would like to remove the WordPress widget when re-sizing the browser widow. I am currently working on a responsive design so I would like to change the widgets on lower resolution.

Can anyone help me with this?

Is there any way we can remove PHP element by using javascript

Thanks In advance. (-

 

[roadhamster]

Check this: http://www.w3schools.com/jsref/prop_screen_width.asp
Wrap your PHP widget code in div's, do some javascript magic and display the div or not depending on the screen width.

[FONT=arial]document.getElementById(name-of-your-widget-div).style.display = 'block';
document.getElementById([FONT=arial]name-of-your-widget-div[/FONT]).style.display = 'none';[/FONT]

This should giv you a hint.
Good luck.

 

[ibadullah]

Check this: http://www.w3schools.com/jsref/prop_screen_width.asp
Wrap your PHP widget code in div's, do some javascript magic and display the div or not depending on the screen width.

[FONT=arial]document.getElementById(name-of-your-widget-div).style.display = 'block';
document.getElementById([FONT=arial]name-of-your-widget-div[/FONT]).style.display = 'none';[/FONT]

This should giv you a hint.
Good luck.

Thanks but I don't understand :S

I am learning at the moment.

 

[AppCentral]

Thanks but I don't understand :S

I am learning at the moment.

To execute JavaScript (Client Code) from the Server (PHP) you need to push JavaScript to the DOM. This can be done in PHP by doing the following:

echo "<script> /* Javascript code */ </script>";

In javascript "document.getElementById" gets the element on the page with the id of whatever you process, so if the element is like so:

    <div id="example"></div>

You would use

document.getElementById('example')

You can set the display style (CSS Property) of the element to either "block" (default) or "none" (invisible) from there using the code road hamster provided.

You can get the width and height of a screen in Javascript by using the

window.innerWidth and window.innerHeight

variables. An example would be the following

    echo "<script> if(document.innerWidth < 500) { document.getElementById('example').style.display = 'none'; } </script>";

Which will hide the "example" element if the width of the screen is under 500 pixels.

 

[lancis]

Use

@media only screen and (max-width: XXXpx)
{
}

in your CSS. No need in JavaScript. The media queries are like an "if" statements... e.q. if the screen is smaller than certain size start hiding unnecessary elements.

 

[AppCentral]

No need in JavaScript. The media queries are like an "if" statements... e.q. if the screen is smaller than certain size start hiding unnecessary elements.

He was asking how to do this with PHP, which is why JavaScript was provided. However, if you wanted to you could echo out CSS through the

<style></style>

tags.

 

[AbsoluteMig]

Why don't you use mediaqueries for this ?

 

[overtrade]

Check this: http://www.w3schools.com/jsref/prop_screen_width.asp
Wrap your PHP widget code in div's, do some javascript magic and display the div or not depending on the screen width.

[FONT=arial]document.getElementById(name-of-your-widget-div).style.display = 'block';
document.getElementById([FONT=arial]name-of-your-widget-div[/FONT]).style.display = 'none';[/FONT]

This should giv you a hint.
Good luck.

This is the best way to do it dynamically.