Hiding DIVs based on screen resolution [was: Help with PHP (I'm new)]

Dev Shed Forums Sponsor:

February 13th, 2013, 06:40 AM

ingeborg.haarr

Registered User

Join Date: Feb 2013

Posts: 5

Time spent in forums: 21 m 23 sec
Reputation 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!

February 13th, 2013, 07:05 AM

Jacques1

pollyanna

Join Date: Jul 2012

Location: Germany

Posts: 1,875

Time spent in forums: 1 Month 2 Weeks 2 Days 4 h 42 m 18 sec
Reputation Power: 813

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 • The mystery of errors and exceptions

February 13th, 2013, 10:11 AM

paulh1983

Contributing User

Join Date: Dec 2004

Posts: 2,237

Time spent in forums: 2 Weeks 1 Day 11 h 3 m 46 sec
Reputation Power: 201

google search for meta queries that allow you to target devices of specific width.

February 13th, 2013, 10:26 AM

ManiacDan

Likely to be eaten by a grue.

Dev Shed God 10th Plane (9500 - 9999 posts)

Join Date: Oct 2006

Location: Pennsylvania, USA

Posts: 9,811

Folding Points: 127430 Folding Title: Super Ultimate Folder - Level 1

Time spent in forums: 2 Months 3 Weeks 19 h 13 m 52 sec
Reputation Power: 6112

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.

February 13th, 2013, 12:24 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 10 m 33 sec
Reputation Power: 4192

Welcome to DevShed Forums, ingeborg.haarr.

Quote:

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. I'm available for hire at Dynamic Site Solutions.

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

February 14th, 2013, 02:08 AM

Galadai

Registered User

Join Date: Apr 2009

Posts: 16

Time spent in forums: 7 h 47 m 18 sec
Reputation 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

February 14th, 2013, 02:00 PM

Paul-Ninja

Contributing User

Join Date: Jun 2012

Location: Troy, NY

Posts: 36

Time spent in forums: 15 h 32 m 38 sec
Reputation Power: 66

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

February 14th, 2013, 07:01 PM

Galadai

Registered User

Join Date: Apr 2009

Posts: 16

Time spent in forums: 7 h 47 m 18 sec
Reputation Power: 0

That is neat. I've learned something

February 15th, 2013, 12:04 AM

ingeborg.haarr

Registered User

Join Date: Feb 2013

Posts: 5

Time spent in forums: 21 m 23 sec
Reputation 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 ;-)

#10

February 16th, 2013, 03:49 AM

ingeborg.haarr

Registered User

Join Date: Feb 2013

Posts: 5

Time spent in forums: 21 m 23 sec
Reputation Power: 0

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

Code:

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

Thanks

#11

February 18th, 2013, 10:34 AM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 10 m 33 sec
Reputation Power: 4192

In case it wasn't clear, what Paul-Ninja posted is an example of a Media Query tailored to answer this specific question.

Quote:

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

Hiding DIVs based on screen resolution [was: Help with PHP (I'm new)]

Developer Shed Advertisers and Affiliates