#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    5
    Rep Power
    0

    Help with PHP (I'm new)


    This is probably an easy fix,

    I want a div-tag on my site to appear only when a use screen resolution is greater than 1024px (it's a floating left "fixed" navigation div that doesn't look good on iPhone). Is this possible? Is PHP the right way to do it, or is it possible with CSS too?

    Code:
        <div id="floatNav">
        
        	<ul> 
        	
        		<li>Quick Navigation</li> 
        		<li>&nbsp;</li>
        		<li><a href="#top">Back to Top</a></li> 
        	
        	</ul>
        </div>
    Code:
    	#floatNav {
    		float:left;
    		position:fixed;
    		padding-right: 20px;
    		margin-top: 50px;
    		left: 0;
    		background: #00dc8f;
    		border-radius: 0px 12px 12px 0px;
    	}
    	
    	#floatNav li {
    		list-style-type: none;
    		margin-left: -20px;
    		font-size: 0.7em;
    		color: #ffffff;
    	}
    I thought that with PHP I could use an "if" command or something.

    Thanks for any help!
  2. #2
  3. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1046
    Hi,

    PHP doesn't know anything about the screen solution of the client, because it runs on the server and not in the browser (like JavaScript). All it knows is the user agent (browser), but this information isn't really reliable, because it can be set to anything.

    Google for "mobile website" to check common practices of making websites ready for mobile devices.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,969
    Rep Power
    374
    google search for meta queries that allow you to target devices of specific width.
  6. #4
  7. Sarcky
    Devshed Supreme Being (6500+ posts)

    Join Date
    Oct 2006
    Location
    Pennsylvania, USA
    Posts
    10,846
    Rep Power
    6351
    thread moved to CSS, though this may be a JS question.
    HEY! YOU! Read the New User Guide and Forum Rules

    "They that can give up essential liberty to obtain a little temporary safety deserve neither liberty nor safety." -Benjamin Franklin

    "The greatest tragedy of this changing society is that people who never knew what it was like before will simply assume that this is the way things are supposed to be." -2600 Magazine, Fall 2002

    Think we're being rude? Maybe you asked a bad question or you're a Help Vampire. Trying to argue intelligently? Please read this.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Welcome to DevShed Forums, ingeborg.haarr.

    Originally Posted by paulh1983
    google search for meta queries that allow you to target devices of specific width.
    "Meta queries"? Perhaps you mean "media queries"? Media queries are the best way to do this.

    Comments on this post

    • paulh1983 agrees : sorry that is what i meant.. doh!
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    16
    Rep Power
    0

    Javascript is the easiest way


    Javascript is the way to go about this.

    Code:
    function getPageWidth()
    {
    	var html = document.getElementsByTagName('html');
    	var pageWidth = parseInt(getComputedStyle(html[0],"").getPropertyValue('width'));
    	return (pageWidth);
    }
    
    // For Browser width use
    if (getPageWidth() < 1024) document.getElementById("floatNav").style.display = "none";
    
    // For full screen width use
    if (screen.width < 1024) document.getElementById("floatNav").style.display = "none";
    That should do it
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68
    Javascript is unnecessary. Just use this rule in your css:

    Code:
    @media only screen and (max-width:1024px) {
    .floatnav {display:none }
    }

    Comments on this post

    • ManiacDan agrees : Slick
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    16
    Rep Power
    0
    That is neat. I've learned something
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    5
    Rep Power
    0
    Thank you so much everyone! I'm going to try it later on and get back to you if it doesn't work ;-)
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    5
    Rep Power
    0

    Talking


    Tried it! Worked like a charm. The code I used:

    Code:
    @media only screen and (max-width:1024px) {
    .floatnav {display:none }
    }
    Thanks
  20. #11
  21. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    In case it wasn't clear, what Paul-Ninja posted is an example of a Media Query tailored to answer this specific question.

    Originally Posted by Galadai
    Javascript is the way to go about this.
    Why use getComputedStyle? IE8 doesn't support it (to be fair, IE8 doesn't support CSS3 Media Queries either). Isn't it easier to use innerWidth and/or clientWidth instead?

    The good thing here is that the media query is used to give a style to mobile devices, so it doesn't matter very much that old versions of IE will ignore it. (Though they will show that element even when the browser window less wide than 1024px, which is probably more likely for people who rarely upgrade.)
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo