1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to hide PHP element on screen size?

Discussion in 'PHP & Perl' started by ibadullah, Oct 6, 2015.

  1. ibadullah

    ibadullah Registered Member

    Joined:
    Jul 10, 2011
    Messages:
    97
    Likes Received:
    8
    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. (-
     
  2. roadhamster

    roadhamster Regular Member

    Joined:
    Mar 12, 2012
    Messages:
    335
    Likes Received:
    242
    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.
    Code:
    [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 Thanks x 1
  3. ibadullah

    ibadullah Registered Member

    Joined:
    Jul 10, 2011
    Messages:
    97
    Likes Received:
    8
    Thanks but I don't understand :S

    I am learning at the moment.
     
  4. AppCentral

    AppCentral Newbie

    Joined:
    Oct 7, 2015
    Messages:
    32
    Likes Received:
    8
    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:

    PHP:
    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:

    Code:
        <div id="example"></div>
    
    You would use

    Code:
    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
    Code:
    window.innerWidth and window.innerHeight
    variables. An example would be the following

    PHP:
        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.
     
  5. lancis

    lancis Elite Member

    Joined:
    Jul 31, 2010
    Messages:
    1,680
    Likes Received:
    2,416
    Occupation:
    Entrepreneur
    Location:
    Milky Way
    Home Page:
    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.
     
  6. AppCentral

    AppCentral Newbie

    Joined:
    Oct 7, 2015
    Messages:
    32
    Likes Received:
    8
    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
    Code:
    <style></style>
    tags.
     
  7. AbsoluteMig

    AbsoluteMig Newbie

    Joined:
    Oct 18, 2012
    Messages:
    14
    Likes Received:
    3
    Why don't you use mediaqueries for this ?
     
  8. overtrade

    overtrade Jr. VIP Jr. VIP

    Joined:
    Feb 2, 2015
    Messages:
    314
    Likes Received:
    57
    Home Page:
    This is the best way to do it dynamically.