Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question CSS -working with all browsers

    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.

    Code:
    #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!

  • #2
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    I just tried it on Firefox, Chrome, Opera and IE9. Works fine for me.

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dan-dan View Post
    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.

  • #4
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I,m really stuck on the ipad thing. There must be a way to have it not show on the Ipad?

  • #5
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    You could see if someone was using an Ipad using this.

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

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


  • #6
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dan-dan View Post
    You could see if someone was using an Ipad using this.

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

  • #7
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Simple...

    PHP Code:
    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!
    Last edited by dan-dan; 03-04-2012 at 08:52 PM.

  • #8
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dan-dan View Post
    Simple...

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

  • #9
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    OK, I just found this online to detect one using javascript.

    Code:
    // 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);

  • #10
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dan-dan View Post
    OK, I just found this online to detect one using javascript.

    Code:
    // 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,

  • #11
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    PHP Code:
    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.

    PHP Code:
    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>";

    Last edited by dan-dan; 03-06-2012 at 08:53 PM.

  • #12
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dan-dan View Post
    PHP Code:
    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.

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

  • #13
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    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!?

    Code:
    <!-- / 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-->


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •