I am working on a web base app for my school with different versions of CSS for handheld, tablet and desktop. I am using media queries for this. The app is almost done and it works correctly on almost all browsers and android. The app looks awesome on Iphone/Ipad however buttons do not work making the app useless in these devices.
This is what I have:
//Source code
<div id="signinbutton" class="blue_button">Sign In</div>
//desktop.CSS
.blue_button {
width: 130px;
height: auto;
padding: 8px;
margin: 0% auto 20% auto;
background-image:url(../../images/bluebar5.png);
color: #FFF;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14pt;
font-weight: bolder;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
cursor: default;
}
.blue_button:hover {
opacity: 0.7;
}
//Handheld.css (this overwrites css on desktop)
.blue_button {
width: 260px;
font-size: 18pt;
background-image:url(../../images/bluebar6.png);
}
I tried applying the style to #signinbutton without success.
You should use a <button> or <input type="button"> tag instead of a div. While the <div> button functionality may work in some browsers, it can be a bit of a hack compared to the traditional button tags
You can wrap your div around <a> like this. It's perfectly valid with html5 now.
<div id="signinbutton" class="blue_button">Sign In</div>
You just need to adjust
Reference:
https://css-tricks.com/snippets/jquery/make-entire-div-clickable/
Try adding to the style of the div {cursor:pointer}.
Related
I have a website (http://ukchina-trading.com/) with the following header:
HTML
<div class='leftImage'>
<img src='image/unionjack.png'>
</div>
<div class='title'>
<h1>J Plus Trading</h1>
<h2>Briding the gap between China and the UK</h2>
</div>
<div class='rightImage'>
<img src='image/chinawings.png'>
</div>
CSS
.title h1 {
font-family: 'Droid Serif', Georgia, Times, serif;
text-align: center;
font-size: 68px;
line-height: 65px;
padding-top: 60px;
margin-bottom: 80px;
}
.title h2 {
font-family: 'Droid Serif', Georgia, Times, serif;
text-align: center;
position:relative;
top:-88px;
left:3px;
font-size: 16px;
color: #FF3300;
}
.rightImage {
position:absolute;
right: 150px;
top: 2px;
}
.leftImage {
position:absolute;
left: 150px;
top: 2px;
}
When the website is view on a computer the header is fine, but when viewed on the iphone screen the images are pushed over the title, hiding it.
What is the best way to redo the header to stop this?
I'd suggest the best thing to do would be to bring the flags inside the 900px width of the website.
Keep them to the left and right of the "J Plus Trading" text but just use floats rather than absolute positioning.
your problem is the absolute positioning you are using, as this causes the images to be in the same position regardless of anything else on the page. instead of absolute try using float:left; and float:right on your left and right images, and this way the text will not be pushed over it. you may have to create extra containing divs with margins or padding so that the images are positioned how you want them
I have a css menu that works well in most desktop browsers, but I have had issues get my drop down menu to work on IPad and Iphone. Here is the site in question: http://bakersfield.kernhigh.org/
I am quite new to css and javascript, so any help would be great.
Thanks
Currently, iOS does not support :hover, so your navigation will not unfold in iOS as it does on a desktop.
Have you considered jQuery Mobile? I would only suggest that if you were developing a seperate mobile version, though.
Otherwise, you could use this jquery (you must also include jQuery then):
$('nav li').bind('touchstart', function(){
$(this).addClass('hover');
}).bind('touchend', function(){
$(this).removeClass('hover');
});
This will add a class (hover) upon the touch, and remove it upon removal of the finger.
You will of course have to edit this for your needs. I only say this because you say you are new to javascript and I don;t want to confuse you.
Drop down menus can suck, especially making them work with touch screen devices since you can't 'hover' on a touchscreen. This is how I do my drop down menus, it is pure CSS, and I have tested it on chrome, ff, ie7+, safari, iPhone and multiple Android (of course, you will want to tweak colors and sizing):
HTML
<div id="navigation">
<ul id="nav">
<li><a href="index.html>Home</a></li>
<li>Drop Down <!--Notice didn't close the li yet->
<ul>
<li>Drop Down Item</li>
<li...../li>
etc...
</ul>
</li>
<li>Another Drop Down</li>
<ul>
...
</ul
</li>
</ul>
</div>
CSS:
#nav {
display: block;
text-align: center;
font-size: 1em;
position: relative;
height: 3em;
width: 950px;
margin-right: auto;
margin-left: auto;
list-style-type: none;
}
#nav li {
float: left;
display: block;
width: 75px;
height: 3em;
position: relative;
}
#nav li a {
text-decoration: none;
display: block;
height: 1em;
padding-top: 1em;
padding-bottom: 1em;
}
#nav li a:hover {
color: #990000;
background-color: #999999;
}
#nav li ul {
width: 100%;
display: none;
z-index: 9999;
position: absolute;
}
#nav li ul li {
display: block;
clear: both;
width: 100%;
height: 100%;
background-color: #B5BDC8;
}
#nav li:hover ul {
display: block;
}
The idea behind all of this is to create a list, then inside that other lists to create the drop down elements....
Then, from there, display only the primary list items to begin with, then show the drop down menu on hover (or in the case of a mobile device on click by making the main list item a link to "#" thus creating and active/hover state)...
The only issue is that by using display:none it isn't screen reader friendly, however I always include site navigation at the bottom that is screen reader friendly, and SEO friendly as well.
You can see an example of this in action on this website I am working on here
In general, drop down menu's such as this usually aren't good practice to have for mobile sites. This is because you can't really hover over a navigation item with your finger, and pressing an item could prove difficult without zooming in on the menu.
A solution is having different CSS styles for your navigation when being viewed on a mobile device. Here is a great resource for helping you convert your navigation to be more mobile friendly:
http://css-tricks.com/convert-menu-to-dropdown/
I've styled an ordinary link to resemble a button in our Sencha Touch 2-based mobile application, and I'm having issues with most of the link not functioning in Safari on the iPhone.
The link is an ordinary <a> tag with an inner <span> element containing the label text. There is padding on the <a> element, which allows taps to be registered. It appears that the inner <span> is blocking taps from being registered in the parent anchor as a link tap, and its background is transparent.
Here's the markup:
<a href="http://test-site.xx/full-site-page?param=value" class="x-button-normal x-button btn-profile">
<span class="x-button-label">View profile on full site</span>
</a>
Testing this in Chrome doesn't present any problems, i.e. clicking the span causes the parent hyperlink to be followed. Both are Webkit-based browsers. One of our testers also tested this in Safari on a Macbook with no problems; I have also tested this in Chrome using a Wacom Bamboo tablet with no problems. This is only an issue on mobile devices (tested on both iPhone and Android 2.2) - which is what we're targeting.
Is there a CSS property I can set on the <span> element to allow taps to fall through to the parent hyperlink? Ideally I want to avoid having to set events through JavaScript. Any ideas as to why this isn't working as I'd expect?
Update: Here are the styles for the inner span as reported by Chrome's developer console:
-webkit-box-align: center;
-webkit-box-flex: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-drag: none;
-webkit-user-select: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
border-bottom-color: white;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: white;
border-left-style: none;
border-left-width: 0px;
border-right-color: white;
border-right-style: none;
border-right-width: 0px;
border-top-color: white;
border-top-style: none;
border-top-width: 0px;
box-shadow: none;
box-sizing: border-box;
color: white;
cursor: auto;
display: inline;
font-family: 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans', sans-serif;
font-size: 18px;
font-weight: bold;
height: auto;
line-height: 21px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
Many thanks.
Solved it, thanks to this post which mentions the following CSS property:
pointer-events: none;
Adding this to the style for the inner <span> (and inner floated <img> as alluded to in my second comment) allowed these to pass the tap through to the parent hyperlink.
The strange thing is that Sencha Touch 2 seemed to interfere with the DOM, not sure what it was in particular. Mocking up a similarly-styled button on a completely static HTML page (no JavaScript, let alone Sencha Touch 2) did not exhibit the original problem on a mobile device.
Another option in the simple case (single <span>, no floated images) was to refactor the styles to eliminate the need for an inner <span>, though this wasn't feasible for the more complicated case:
<a class="attachment" href="/someRepository/someDownload.pdf">
<img src="/images/fileExtension-pdf.png" alt="Attachment"/>
<span class="title">Title of download</span>
<span class="size">xxx kB</span>
</a>
I think this has to do with Sencha Touch's prevention of zooming. They have added in code to preventDefault most touchstart events (which kill the use of the link). There is an exception for anchors, but not for children of anchors (so tapping on an anchor itself works fine, but not tapping on a span within an anchor). I was able to monkey patch a quickfix in my application launch method:
Ext.Viewport.setPreventZooming(false); // unbind any existing handler
Ext.Viewport.doPreventZooming = Ext.Function.createInterceptor(Ext.Viewport.doPreventZooming, function(e){
return !Ext.fly(e.target).findParent('a');
});
Ext.Viewport.setPreventZooming(true);
The above code comes with no warranties (have not tested on Android and I suspect it to be fairly inefficient). I have also reported this as a bug: http://www.sencha.com/forum/showthread.php?215032-Links-are-prevented-when-tapping-on-children
I am working on FB Send button and implementing it on a new site. The problem is the flyout that FB display on the click of Send button is below the Send button. Can anyone let me know how can we set the "flyout" (dialog that appears on clicking the send button) can be customized to be displayed above the send button and not below it.
Thanks in advance!
I too wanted to add this button to the right of the page, had problems moving the iframe so that is was visible so instead decided to open the send button in a dialog window. http://developers.facebook.com/blog/post/514/
You will need to use the JS SDK to do this, and also provide a button or a link that will trigger the send dialog to open. Here is some example code to make a link look like a send button
HTML
<a class="fb-send-button"><i></i><span>Send</span></a>
CSS
.fb-send-button {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
color: #3b5998;
-moz-outline-style: none;
text-decoration: none;
background: #eceef5;
border: 1px solid #cad4e7;
display: inline-block;
padding: 4px 5px;
white-space: nowrap;
padding: 2px 5px;
font-family: 'trebuchet ms', sans-serif;
font-size: 11px;
}
.fb-send-button:hover {
border-color: #9dacce;
text-decoration: none;
color: #3b5998;
}
.fb-send-button span {
line-height: 14px;
line-height: 13px;
}
.fb-send-button i, .fb-send-button img {
float: left;
height: 14px;
margin-right: 3px;
width: 14px;
}
.fb-send-button i {
background-image: url(http://static.ak.fbcdn.net/rsrc.php/v1/z7/r/ql9vukDCc4R.png);
background-position: -1px -47px;
}
Javascript
FB.ui({
method: 'send',
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/reference/dialogs/'
});
You will need to already have the Javascript SDK loaded on your page, and will need to either put the above JS in the anchor tag in an on click attribute, or preferably adding it using your own Javascript.
The best solution I've tried so far is this:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -45px !important;
}
This temporary solution moves the pop-up box to a somewhat centered position under the Send button, which makes it accessible on the mobile.
This is how it looks like on an iPhone (notice it's still too a bit too wide for mobile):
http://s16.postimage.org/3xeep2uo5/foto_1.png
Same page viewed in a PC browser:
http://s16.postimage.org/nukby1dj9/xotc_browser.png
Notice the small arrow on top of the popup is now no longer aligned with the Send button (due to my css). Notice how it switches position to be on the left or right side of the popup, depending on where it's viewed (mobile or PC browser).
(I tried it on a Lumina 920 as well, but gave the same issue as iPhone)
This Facebook plugin doesn't allow you to specify a custom css file like some of the older ones do so it will be pretty tough to change the appearance aside from messing with the iFrame style/size. Your css changes won't apply to the iframe content Facebook renders because it is hosted on a different site so cross-domain restrictions will apply.
I had the same problem and used the following to solve this problem:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -290px !important;
}
Try to play with left, top, right, bottom values as you want it to be placed.
I'm having trouble to get the -webkit-tap-highlight-color property to apply to a div - I'm at a loss as to why it isn't. Copying all the styles that apply to it below. The desired outcome is a back button as shown here: http://building-iphone-apps.labs.oreilly.com/ch03.html#ch03_id35932102
.backButton {
font-weight: bold;
text-align: center;
line-height: 28px;
color: white;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
position: absolute;
top: 13px;
left: 6px;
font-size: 14px;
max-width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-width: 0 8px 0 14px;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-border-image: url(/static/images/backButton.png) 0 8 0 14;
}
.backButton.clicked {
-webkit-border-image: url(/static/images/back_button_clicked.png) 0 8 0 14;
}
.toolbar{
background-color: #e1f7ff;
-webkit-box-sizing:border-box;
border-bottom:1px solid #559D75;
padding:10px;
height:53px;
background-image:-webkit-gradient(linear,left top,left bottom,from(#e1f7ff),to(#a1d2ed));
position:relative;
z-index: 70; }
Applied here:
<div class='toolbar'>
<div class='backButton'>Back</div>
</div>
Viewing it in iPhone simulator (OS 4 enabled) and Safari - same problem with both (tap highlight still shows up).
Thanks in advance.
Try adding:
-webkit-user-select: none;
This is embarrassing. The image I had been using from an example back button online had the background color in it - it wasn't a problem with the CSS property.
I'm almost embarrassed enough not to post this answer, but I'm willing to swallow my pride in hopes of helping others. Let this be a lesson: if you use example images from Google images, etc., be sure the copy you download looks as you expect it to.
I wish I could reclaim the hours I spent trying to debug this, but maybe this will help someone else gain them back.
Lesson learned... thoroughly.