PDA

View Full Version : CSS -working with all browsers



tommydamic68
Mar 4th, 2012, 01:45 PM
hello all,
this site has been a great help for me so thanks in advanced. I have another caper on my hands. Here goes:

I added a "back to the top" button on my site here www.sphynxlair.com in order to view the button you must scroll down a bit and it's on the edge of the forum to the right of the page. It works with Jquery.

The question is- I dont believe it works on all browsers. Is there CSS code i can add to make the button viewable on all browsers? All i found was to add the code overflow:hidden; to the CSS- is this sufficient? I'm talking about IE, Opera and Firefox. I don't believe it works at all in IE.

Also a "nutty" question for you-is it possible to disable the button when someone views my site on an Ipad? it looks misplaced when viewing my site on an ipad.

A good example of this is www.tumblr.com they have a "to the top" button as well but when viewing there site on an ipad the button is not viewable while using the ipad.


#back-top {
position: fixed;
bottom: 175px;
margin-left: 940px;
display:none;
overflow:hidden;
border:none;
}

#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
display:block;
overflow:hidden;
}

/* arrow icon (span tag) */
#back-top span {
width: 65px;
height: 65px;
display: block;
margin-bottom: 7px;
background: #999 url(http://www.sphynxlair.com/forum/arrow.png) no-repeat scroll 0 0px;

/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #444;
display:block;
overflow:hidden;
}


Thanks!

dan-dan
Mar 4th, 2012, 02:31 PM
I just tried it on Firefox, Chrome, Opera and IE9. Works fine for me.

tommydamic68
Mar 4th, 2012, 02:46 PM
I just tried it on Firefox, Chrome, Opera and IE9. Works fine for me.

Thanks Dan, i think it's earlier versions of IE though.

tommydamic68
Mar 4th, 2012, 04:12 PM
I,m really stuck on the ipad thing. There must be a way to have it not show on the Ipad?

dan-dan
Mar 4th, 2012, 04:38 PM
You could see if someone was using an Ipad using this.


if (strpos($_SERVER['HTTP_USER_AGENT'],'iPad')) {
$usingIpad = true;
}

if ($usingIpad) {
// Enter your code here
}

tommydamic68
Mar 4th, 2012, 09:33 PM
You could see if someone was using an Ipad using this.


if (strpos($_SERVER['HTTP_USER_AGENT'],'iPad')) {
$usingIpad = true;
}

if ($usingIpad) {
// Enter your code here
}

Dan, i guess what i am trying to say is if there is code i could use to "not" have the button show or viewable to the user when viewing from an ipad. Basically it looks out of place when viewing on an ipad. its their but small and cut off. A good example as i mentioned above is www.tumblr.com they too have a scroll button to the top right of their site similar to mine. if you view their site on an Ipad the button is not there some how.

dan-dan
Mar 4th, 2012, 09:48 PM
Simple...



if (strpos($_SERVER['HTTP_USER_AGENT'],'iPad')) {
$usingIpad = true;
}

if (!$usingIpad) {
// Enter your code here
}


You can add your javascript here, though of course you'll need to be using PHP. There might be an overall javascript solution to this problem but I don't know, javascript isn't my friend!

tommydamic68
Mar 5th, 2012, 11:15 AM
Simple...



if (strpos($_SERVER['HTTP_USER_AGENT'],'iPad')) {
$usingIpad = true;
}

if (!$usingIpad) {
// Enter your code here
}


You can add your javascript here, though of course you'll need to be using PHP. There might be an overall javascript solution to this problem but I don't know, javascript isn't my friend!


Well i guess i will live with it for now. There must be an answer. Thanks anyway Dan.

dan-dan
Mar 5th, 2012, 12:24 PM
OK, I just found this online to detect one using javascript.



// For use within iPad developer UIWebView
// Thanks to Andrew Hedges!
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);

tommydamic68
Mar 6th, 2012, 11:37 AM
OK, I just found this online to detect one using javascript.



// For use within iPad developer UIWebView
// Thanks to Andrew Hedges!
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);


Hi Dan,
i'm not trying to detect whom is using the ipad. I am trying to find code to perhaps add to my CSS that keeps the "to the top" button from being viewed when a member uses an ipad.

thanks,

dan-dan
Mar 6th, 2012, 12:51 PM
if (strpos($_SERVER['HTTP_USER_AGENT'],'iPad')) {
$usingIpad = true;
}

if (!$usingIpad) {
// Enter your code here
}


You need to find out if the person is using an iPad before you can take any action on it.

That first statement will determine if the client is using an iPad, then set the variable $usingIpad to true.

That ! in the second statement is asking if $usingIpad is not equal to true. So you could then add your jQuery code below and that would only get executed if the person was not using an iPad.

Edit:
Just had a quick look at your code and if you find the HTML below, add it to that.



if (strpos($_SERVER['HTTP_USER_AGENT'],'iPad')) {
$usingIpad = true;
}

if (!$usingIpad) {
echo "<p id=\"back-top\">";
echo "<a href=\"http://www.sphynxlair.com/forum/arrow.png\" alt=\"\" border=\"0\" /><span></span></a></p>";
}

tommydamic68
Mar 8th, 2012, 12:55 AM
if (strpos($_SERVER['HTTP_USER_AGENT'],'iPad')) {
$usingIpad = true;
}

if (!$usingIpad) {
// Enter your code here
}


You need to find out if the person is using an iPad before you can take any action on it.

That first statement will determine if the client is using an iPad, then set the variable $usingIpad to true.

That ! in the second statement is asking if $usingIpad is not equal to true. So you could then add your jQuery code below and that would only get executed if the person was not using an iPad.

Edit:
Just had a quick look at your code and if you find the HTML below, add it to that.



if (strpos($_SERVER['HTTP_USER_AGENT'],'iPad')) {
$usingIpad = true;
}

if (!$usingIpad) {
echo "<p id=\"back-top\">";
echo "<a href=\"http://www.sphynxlair.com/forum/arrow.png\" alt=\"\" border=\"0\" /><span></span></a></p>";
}


would this be added to my php file?

dan-dan
Mar 8th, 2012, 01:21 AM
It would be added as PHP, yes.

In your source code it's inbetween the end of <!-- / PAGENAV POPUP --> and the start of <!--ticker-->.

I don't know how your website is structured, so I couldn't tell you where to find the code. You must know where from when you added it to you site!?


<!-- / PAGENAV POPUP -->




<table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%" align="center">
<tr>
<td class="tcat" align="center">
Sphynxlair Sponsor
</td>

</tr>
<tr>
<td class="alt1 smallfont">
<div align="center"><script type="text/javascript"><!--
google_ad_client = "pub-2556590227571531";
/* 728x90, created 3/6/09 */
google_ad_slot = "4190995815";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div><center><h1>Sphynx Cat Forum</h1></center>


</td>
</tr>

</table><br /><table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%" align="center">
<tr>
<td class="tcat" align="center">
<strong>Sharing is Caring!</strong>



<p style="font-size:10px;"></p>

</td>
</tr>

<tr>
<td class="alt1 smallfont">
<div align="center"><img src="www.sphynxlair.com/forum1/share-1.png" alt="Share Sphynxlair" border="0" /><br /><br /><span class='st_email_hcount' displayText='Email'></span><span class='st_tumblr_hcount' displayText='Tumblr'></span><span class='st_twitter_hcount' displayText='Tweet'></span><span class='st_facebook_hcount' displayText='Facebook'></span><span class='st_fblike_hcount' ></span><span class='st_plusone_hcount' ></span>


</div>
</td>
</tr>
</table><br />

<p id="back-top">
<a href="http://www.sphynxlair.com/forum/arrow.png" alt="" border="0" /><span></span></a></p>

<!--ticker-->