css :hover, touch-screen and single page applications - javascript

I'm making a single-page application with HTML, CSS and Javascript (no jQuery or similar). This application is made of many UI pages that can change via Javascript. The user experience is fine using the mouse on computers, but not so nice with touchscreens (mobile, etc.).
There are many buttons with a CSS hover graphic effect. If I change page tapping one button on a touch screen, the pointer stays there triggering the CSS hover of next elements appearing in the same position when the page is "changed". This effect is very annoying, but I can't figure out how to fix it.
The code is very simple:
CSS
button {
background-color: #XXXXXX;
}
button:hover {
background-color: #ZZZZZZ;
}
HTML
<button onclick="changepage()"></button>

You can use modernizr with Touch Events detection, than use
html.no-touch button:hover {
background-color: #ZZZZZZ;
}
Without modernizr you can add this simple code to append no-touch/touch class to html tag
<script type="text/javascript">
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Windows Phone/i.test(navigator.userAgent)) {
document.getElementsByTagName('html')[0].className += ' touch';
}else{
document.getElementsByTagName('html')[0].className += ' no-touch';
}
</script>

Thank you anyway! Finally I made a very simple script that works perfectly...it is good even for touch computers that have a mouse too (like mine), and of course for mobile phones. There is no need to detect devices! The solution is to add a very small div under the cursor pointer after the page changes, by calling the function refresh_hover(). This div 1px x 1px is removed as soon as the user clicks on it or the cursor goes out from it. In this way the hover effect is removed when the content changes behind the pointer, but then restored when the user does something! You will probably think that is very stupid, but is simple and works very well!
Here it is:
function refresh_hover(){
if(!event){
return false;
}
var x = event.clientX;
var y = event.clientY;
var div = document.getElementById('mouse_div');
if(!div){
document.body.innerHTML=document.body.innerHTML
+'<div style="position: fixed; z-index: 1000; height: 1px; width: 1px; display: block;" id="mouse_div" onmouseout="this.style.display=\'none\'" onclick="this.style.display=\'none\'"></div>';
div = document.getElementById('mouse_div');
}
div.style.display='block';
div.style.top=y+'px';
div.style.left=x+'px'
}

Related

Rotate icon and toggle content onclick at the same time

I'm trying to rotate a icon when i click on a link next to the icon.
The idea is when I click on the link, the icon rotate and the content slide down. I have manage to make the content slide down but I can't get the icon to rotate in the same script.
This is the script:
<script>
$(function(){
$(".change_delivery_address").click(function(){
$(".spm").slideToggle();
});
});
This is de html:
<div class="change_delivery_address"><h6>Choose another delivery address<img src="images/layout- img/menu-icons/arrow_carrot-right.png"></h6>
</div>
The CSS:
.change_delivery_address h6{
cursor: pointer;
color: #3274f4;
margin-top: 20px;
padding-top: 5px;
padding-left: 20px;
}
.change_delivery_address h6:active{
background: none;
}
.spm {
display: none;
}
Hope you someone can help me out with this thanks.
It looks as though your problem is that you haven't included any rotation in your click function.
include JQueryRotate, a small library that allows rotation, by adding
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js">
and then your script should look like this. Because I'm assuming that you want it to rotate and then rotate back, I'm adding a boolean to check which way it's rotated and act accordingly because there's no rotateToggle:
var rotated = false;
$(".change_delivery_address").click(function(){
$(".spm").slideToggle();
if(rotated) {
rotateAngle = -90;
}
else {
rotateAngle = 90;
}
$("img[src='images/layout-img/menu-icons/arrow_carrot-right.png']").rotate(rotateAngle)
});
Besides the additional jQuery library you can also apply a CSS class to the image to rotate the image as well. You would use the transform property described here http://www.w3schools.com/cssref/css3_pr_transform.asp. Additionally you can also apply a transition through CSS as well to animate the icon turning. The benefit here is no additional plugins but this is supported only in HTML5 supporting browsers, so if you will run into problems in IE8.
I don't know what will work best for you but I wanted to throw out an additional option.

Interactive HTML webpage

EDIT: Thanks for a lot of great examples on how to solve these. I cant decide between who to accept yet, but I will go though all examples and see which I like the most. Great feedback guys! =D
I normally do these kind of things in flash, but this time it has to be compatible with mac, iPads and all those units too.
So, what do I need help with?
I've got a picture, with some "hotspots" on. I want to be able to click any of those hotspots to show some information.
This should be fairly basic and easy to achieve, but since I've never done this in html before I have to ask you guys =)
So, what would be the best way to do this? It have to be compatible with any browser and device, and it doesnt need to be very advanced. If it's possible to add effects to the box (sliding out, fading in, or anything like that) then thats a nice bonus, but not something I need.
Any help would be great!
BREAKDOWN:
I have a background image with some "hotspots" (numbers 1 and 2 in my example). The users should be able to either hover the mouse over any of these or click it to get more information, as seen in picture #2
This is that happens when you hover/click any of these hotspots.
Text and image is displayed inside a nice little info box.
If the user clicks "more information" it will open up even further to display more information if available. Like in this img:
I don't think the Javascript approach is really necessary here. I created a little CSS-only mock-up for you on JSBin.
Basically the point is that you enclose the image in a relatively positioned div, then absolute position the hotspots inside the same div. Inside the hotspots divs you will have the more info elements, showing only on :hover of their parents.
This makes it simple, and far more accessible.
Update: cropping the image equally from both sides
If you want to keep the image centered and still not use any javascript, you could set the required image as a background-image of the container, and setting its background-position parameters to center center.
You would have to make sure that the width of this div is set to the width of your image, and the max-width to 100%, so that when the window gets resized below the image width it stays at the center.
Now, a problem that I encountered here is how to make the hotspots stay center relatively to the image. I solved it this way:
I created a wrapper div for the hotspots with these characteristics:
margin: 0 auto;
position: relative;
width: 0px;
This basically makes sure that the wrapper div finds the center of our image. Then, you would position the hotspots relatively to the top-center position of the image, instead of the top-left as a starting point.
Then you have what you are looking for.
Working demo
Here's another approach, and in my opinion far superior to using a map or excessive JS. Place <div> elements on top of the element with the background-image and have HTML and CSS do the heavy lifting for you.
See it on JSFiddle
HTML
The HTML should seem pretty each enough to understand, we create <div>s with the class hotspot and rely on certain things being present. Namely .text (to show digit), .hover-popup (to show on hover) and .click-popup (which is inside .hover-popup and is shown when clicked).
<div id="hotspot1" class="hotspot">
<div class="text">1</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
<div id="hotspot2" class="hotspot">
<div class="text">2</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
CSS
This is where most of the magic happens, see the comments for further explanation.
/* These two position each hotspot */
#hotspot1 {
left:15%; /* we could use px or position right or bottom also */
top:20%;
}
#hotspot2 {
left:35%;
top:25%;
}
/* General styles on the hotspot */
.hotspot {
border-radius:50%;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background-color:#CCC;
position:absolute;
}
.hotspot .text {
width:40px;
height:40px;
}
/* Show the pointer on hover to signify a click event */
.hotspot .text:hover {
cursor:pointer;
}
/* hide them by default and bring them to the front */
.hover-popup,
.click-popup {
display:none;
z-index:1;
}
/* show when clicked */
.hotspot.clicked .click-popup {
display:block;
}
/* show and position when clicked */
.hotspot:hover .hover-popup {
display:block;
position:absolute;
left:100%;
top:0;
width:300px;
background-color:#BBB;
border:1px solid #000;
}
JavaScript (with jQuery)
Unfortunately you're going to have to use some JavaScript for the clicking part as CSS doesn't have a 'clicked' state (outside of hacks with checkboxes). I'm using jQuery because it's dead easy to do what I want.
$(document).ready(function () {
$('.hotspot').click(function () {
$(this).toggleClass('clicked');
});
});
Creating the arrow
Over at css-tricks you can find a tutorial for attaching an arrow to a element using the :before and/or :after pseudo-elements. You can even 'simulate' a border around them by placing the :after element on top of the :before. But yea, lots of resources on how to do this.
You should be able to use the onclick or OnMouseOver event in the map area (define the href as "").
An example using OnMouseOver is here: http://www.omegagrafix.com/mouseover/mousimap.html
Give a class for that image in html (Ex: imgclass). And in javascript(using jquery), build that hover box in html format and bind it to 'mouseover' event of that image.
For example:
function bindhtmltoimage() {
myimg = $('body').find('.imgclass');
divSlot.each(function (index) {
$(this).bind('mouseover', function () {
try {
//position the hover box on image. you can customize the y and x axis to place it left or right.
var x = $(this).offset().left;
var y = $(this).offset().top;
var position = $(window).height() - ($("#divHover").height() + y);
var widthposition = $(window).width() - ($("#divHover").width() + x);
if (position < 0 || widthposition < 0) {
if (position < 0) {
$("#divHover").css({
position: 'absolute',
left: x + 20,
top: y - $("#divHover").height() - 20
});
}
if (widthposition < 0) {
$("#divHover").css({
position: 'absolute',
left: x - $("#divHover").width(),
top: y + 20
});
}
}
//build your html string for that hover box and apply to it.
$('#divHover').html("your Html content for that box goes here");
$('#divHover').show();
//if you want the box dynamically generated. create the html content and append to the dom.
}
catch (e) {
alert(e)
}
});
});
}
it will work fine in desktop and mobile. if you face any problem in touch devices, bind the function to click event instead of 'mouseover'.
Also, for map approach, i strongly recommend SVG instead of images.

Mouse/Keybord events full screen html5 video (javascript/jquery)

Is it possible to set onmouseup, onmousedown, onclick etc. functions on a video element that is fullscreen, using webkitRequestFullScreen? I register them for the element when I create it, but I do not appear to get the events when the video is full screen.
Also, is it possible to stop the video progress bar appearing when in full screen mode whenever I move the mouse?
Any answers welcome, either using jquery or javascript, or similar.
I couldn't find a way to listen to mouse events on fullscreen as well,
but I've found a workaround:
Instead of putting the video on fullscreen, I simply change the video CSS to:
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999;
Video then behaves like it's on fullscreen, and everything works as usual.
Finally found a way to do it in Chrome: wrap your video element with div and call webkitRequestFullScreen() for that div rather then for video + some additional magic will be required.
HTML code snippet:
<div id="video-container" style="background-color: #000000;" onclick=divClicked()>
<video id="myvideo">Video not supported!</video>
</div>
JavaScript code snippet:
function doFullscreen() {
var container = document.getElementById("video-container");
if (container.requestFullscreen) {
container.requestFullscreen();
} else if (container.mozRequestFullScreen) {
container.mozRequestFullScreen();
} else if (container.webkitRequestFullscreen) {
container.webkitRequestFullscreen();
}
var video = document.getElementById("myvideo");
// have to resize the video to fill the whole screen
video.width=window.screen.availWidth;
video.height=window.screen.availHeight;
}
Such approach allows handling mouse/etc. events in div element - see onclick declaration at HTML example above.
Also note that such approach doesn't force video controls to appear either on fullscreen or in windowed mode.
For the second question regarding the progress bar you can add the following to your CSS:
video::-webkit-media-controls-enclosure {
display:none;
}
But note once again that it is not needed when using the approach above.

IE6 onscroll glitch

I have a <div> with some content. I gave this div an id attribute, oDIV, and bound a function to the onscroll event via this small script:
window.onload = {
document.getElementById("oDiv").onscroll = function() {
document.getElementById("tooltip").className = "sTooltip";
this.onscroll = null;
};
}
I added some simple CSS to the div, so that a vertical scroll bar would appear. Content stretches down quite a bit and there's a lot to scroll.
#oDiv {
border: 1px solid black;
float: left;
height: 300px;
overflow: auto;
overflow-x: hidden;
padding: 0;
padding-right: 40px;
clear: left;
}
Anyways, if the user tries to scroll I want a tooltip to appear to remind the user that there's a filter option to hide some of the stuff they have to scroll, through.
In Firefox and more current browsers it worked just fine.
The problem I have, is I have to support IE6, and this approach does work in IE6 but there's a slight issue. If you "grab" the scroll bar by left clicking and holding and continue to drag when the event is fired the scroll bar is prematurely released. Forcing the user to again click on the drag bar. It's a minor issue, but I want to know why?
I only intend to fire this event once ever, only when scrolling has initiated.
If a library or framework has solved this odd behavior, could you please show their source to which they address this?
Also, I think timing libraries etc. al for determining the "point at which they stopped scrolling" is way overkill for this.
It could be because IE is pausing to render the "tooltip". Instead of using display:none on your tooltip try to use visibility:hidden and then toggle to visibility:visible.

implementation of asp.net buttons behaviour (e.g. left mouse holding on it causes a little moving it's text)

i have a button in asp.net like below :
<asp:Button ID="btnSaveInrpvEdit" CssClass="btnSaveInrpvEdit" runat="server"
Text="" ValidationGroup="B" onclick="btnSaveInrpvEdit_Click" />
and it's css :
.btnSaveInrpvEdit
{
background: url(/Images/Admin/btnSave.png) no-repeat left top;
width: 155px;
height: 63px;
border: 0px;
outline: none;
}
.btnSaveInrpvEdit:hover,.btnSaveInrpvEdit:active
{
background: url(/Images/Admin/btnSave_Hover.png) no-repeat left 1px;
cursor: pointer;
outline: none;
}
so every thing is ok about it's hovering...
at this time i want to implement this button behaviour about left mouse HOLDING and RELEASING on it!
if you attention to regular buttons in asp.net u will see when left mouse is clicked and holded on that button , so it seems it's text has been moved a bit...
also when we release left mouse, that button goes back to normal mode!
how can i do this job with css and javascript?
thanks in advance
First, note that the text moving (and if the text moves) in the pressed button has nothing to do with the <asp:Button (or the input element it renders) directly. The button styles and visual behaviour depend to a small part on the browser and to a large part on the windows version and theme the client uses. Manually moving the background image could look very weird on themes that don't actually move the text.
That said, you can emulate the behaviour relatively easy with JavaScript respectively jQuery in particular.
Something like this should work:
CSS (I used normal style here because pressing usually removes the hover style)
.btnSaveInrpvEdit.mousedown
{
background: url(/Images/Admin/btnSave.png) no-repeat 1px 1px;
}
JS + jQuery
$("#btnSaveInrpvEdit").mousedown(function () { $(this).addClass("mousedown"); });
$("#btnSaveInrpvEdit").mouseup(function () { $(this).removeClass("mousedown"); });
You probably also have to handle the user pressing the button but then holding and dragging the cursor away from the button, which causes the button to un-press visually but will also return to the pressed state if you move the mouse back over the button. This is a bit more tricky but I'm sure you got the gist of it and can work something out ;)
As a quick fix to at least prevent the button background staying offset forever you can add
$("#btnSaveInrpvEdit").mouseleave(function () { $(this).removeClass("mousedown"); });

Categories

Resources