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 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2013
    Posts
    15
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question Button renders twice on Android phone

    Hi All.

    I'm an amateur coder (as all small business owners have to be!) and I'm building a mobile friendly 'hub' for my business.

    I have a large button at the top of my page to encourage bookmarking and it is rendering twice on Android phones... on every other device and browser it's fine.

    Can anyone help me sort this? I image my code is not the cleanest by a long shot.

    Here's the page.

    Here's the javascript for the bookmarking:

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    function bookmarkPage(url,title) {
    	if (!url) {url = window.location}
    	if (!title) {title = document.title}
    	var browser=navigator.userAgent.toLowerCase();
    	if (window.sidebar) { // Mozilla, Firefox, Netscape
    		window.sidebar.addPanel(title, url,"");
    	} else if( window.external) { // IE or chrome
    		if (browser.indexOf('chrome')==-1){ // ie
    			window.external.AddFavorite( url, title); 
    		} else { // chrome
    			alert('Please Press CTRL+D (or Command+D for macs) to bookmark this page.');
    		}
    	}
    	else if(window.opera && window.print) { // Opera - automatically adds to sidebar if rel=sidebar in the tag
    		return true;
    	}
    	else if (browser.indexOf('konqueror')!=-1) { // Konqueror
    		alert('Please press CTRL+B to bookmark this page.');
    	}
    	else if (browser.indexOf('webkit')!=-1){ // safari
    		alert('To bookmark this page: PCs press CTRL+B - Macs press Command+D - iPhones and iPads press the share symbol (arrow) and then Bookmark - Android devices press the bookmark symbol (star) then Add Bookmark.');
    	} else {
    		alert('Your browser cannot add bookmarks using this link. Please bookmark this page manually.')
    	}
    }
    </SCRIPT>
    Here's the css for the button
    Code:
    .BackButton {
    	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    	box-shadow:inset 0px 1px 0px 0px #ffffff;
    	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    	background-color:#ededed;
    	-moz-border-radius:25px;
    	-webkit-border-radius:25px;
    	border-radius:25px;
    	border:1px solid #dcdcdc;
    	display:inline-block;
    	color:#545354;
    	font-family:Verdana;
    	font-size:13px;
    	font-weight:bold;
    	padding:6px 24px;
    	text-decoration:none;
    	text-shadow:1px 1px 0px #ffffff;
    }
    
    .BackButton:visited {
    	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    	box-shadow:inset 0px 1px 0px 0px #ffffff;
    	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    	background-color:#ededed;
    	-moz-border-radius:25px;
    	-webkit-border-radius:25px;
    	border-radius:25px;
    	border:1px solid #dcdcdc;
    	display:inline-block;
    	color:#545354;
    	font-family:Verdana;
    	font-size:13px;
    	font-weight:bold;
    	padding:6px 24px;
    	text-decoration:none;
    	text-shadow:1px 1px 0px #ffffff;
    }
    
    .BackButton:hover {
    	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    	background-color:#dfdfdf;
            color:#545354;
    	font-family:Verdana;
    	font-size:13px;
    	font-weight:bold;
    	padding:6px 24px;
    	text-decoration:none;
    	text-shadow:1px 1px 0px #ffffff;
    }.BackButton:active {
    	position:relative;
    	top:1px;
    }
    And here's the code for the button:
    Code:
    <table style="margin-left:auto; margin-right:auto; margin-top:0px;">
    <center>
    <tbody>
    <tr>
    <td width="260" height="10"><center><a href="javascript:bookmarkPage()" class="BackButton" style="width:650px; height:130px;">
    <p style="text-align: center; padding-top:20px; padding-bottom:25px;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 32px; font-weight: bold; color:3b3b3b3b;">Welcome to the Musicians' Hub!<br><br><span style="text-align:center; color:#0693C5; padding-top:10px; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-align: center; color: #0693C5;">Bookmark this page now—click here.<br><br></center></td>
    </tr>
    </tbody>
    </table>
    </span></span></p></a>

    All help will be appreciated.

  • #2
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    I don't know if this is possibly an issue with JavaScript, but here goes.
    First off, have you validated? This can fix many seemingly annoying errors.
    Secondly, you seem to have some browser specific code, but no platform specific code in relation to the platform you want it rendering on. Have you thought of making cross-platform code?
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • Users who have thanked Nerevarine for this post:

    Oliver Dewar (04-19-2013)

  • #3
    New Coder
    Join Date
    Apr 2013
    Posts
    15
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hi Loadoptic.

    Thanks for your answer... unfortunately I don't understand what you're saying and certainly don't have the ability to add functionality to this code myself.

    I'm hoping someone will be able to look at it and say something like "Well this part is a mess... the other browsers are obviously fixing it but the Android is not"

    I suspect the error is in the last box of code - the html/css to embed the button. When I was playing with it originally, all the browsers were double rendering, I messed around until only one button showed... except for Android.

    I think I may have frightened everyone off with posting ALL the code... perhaps have a look at the last box only?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Just tried your page on an Android tablet running Ice Cream Sandwich and the button displays only once.

    Is it possible that the page is cached on your handset, and still displaying an old version of the page - since the problem originally manifested on all browsers?

    If this isn't the issue, then although I can't see why js should result in the button being displayed twice, rule this out by disabling your js.

    If none of these, then your html may indeed be the problem - check the html using the W3c validator (see my sig) as L0adOpt1c suggests - currently you have <p> elements nested within <a> elements which is invalid and may result in unexpected display in some browsers.

    I'd have thought your html wants to be something nice and simple like:

    Code:
    <div class="BackButton">
    <h2>Welcome to the Musicians' Hub!</h2>
    <a onclick="bookmarkPage()" href="#">Bookmark this page now - click here</a>
    </div>
    You'll need to tweak your css as well. (It's really better not to use onclick() but we won't worry about that for now).
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    Oliver Dewar (04-19-2013)

  • #5
    New Coder
    Join Date
    Apr 2013
    Posts
    15
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks SB65 - you got it.

    I simplified the paragraphs and made it just one rather than two lines with different formatting and it's working on all devices now. Thanks!


  •  

    Tags for this Thread

    Posting Permissions

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