Develop Reference

Grey out form button on touch start

I have a input of type 'button' with a background and was wondering how I would grey out the background through javascript. The css for it looks like this:
background:url(../img/cameraPic.png) no-repeat center;
When someone touches it I want it to respond by greying out while it's being held down. The skeleton for such a function would look like this but I'm not sure how to change the color when it has background.
$("#myButton").bind('touchstart', function(e){
//...What to put here?
});
Does anybody have any ideas? Should I use a grayscale() css property or just make a new image and replace the background with the new image every time its being pressed?

Something like this? Example
$("button").bind('touchstart', function(e){
e.preventDefault();
$(this).css({
'background-color':'grey',
opacity:0.3
});
});
$("button").bind('touchend', function(e){
$(this).css({
'background-color':'transparent',
opacity:1
});
});

Disable scroll in a iframe

I have my html page with a iframe, and when I put the mouse on the iframe and I use the mouse scroll button it will scroll the iframe page and I don't want that to happen. But I don't want the scroll to be totaly disable in this iframe because I have a fresque and I must be abble to zoom in with the scroll
How could I do ?
I have try to do scrollTo(0, 0); but it does it on the real page and not on the iframe.

You can try to use the mousewheel event to cancel the scroll.
Example code:
window.onload=function(){
setTimeout(function(){ //just to be sure that the document exists
document.onmousewheel=function(event){
event.preventDefault();
//add here your code to zoom
};
},300);
};
Notice that IE8 will always "internally" use event.preventDefault(); and the scroll won't work if you want to use a flag to enable/disable the scroll.
You can read more information here: http://www.quirksmode.org/dom/events/scroll.html
This is my old solution:
The question isn't specific enough, but I think I understood it.
Here is a piece of jQuery to fix what I understood:
(function($){
$(function(){
$(window).click(function(event){
if(event.which==3) //middle button
{
event.preventDefault();
//remaining code for the zoom(?)
}
});
});
})(jQuery);
This should disable using the scroll wheel to scroll the page (doesn't work on touch).
You can include the code for the zooming(?) inside the if block.
Include this code inside the iframe!

Try using the scrolling="no" option, as in
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>

Assuming: "I want to disable the scroll of the page without disabeling the scroll (in the iframe)"
First, this CSS will turn off scrollbars on the page ...
<style type="text/css">
html, body {
overflow: hidden;
}
</style>
... and, this will disable scrolling anytime it is tried ...
$(window).scroll(function() {
scroll(0,0);
});
... although, this might be a better option ...
document.body.scroll = "no";
document.body.style.overflow = 'hidden';
document.height = window.innerHeight;

MooTools Tween Stutter/Hiccup

I am doing a rather simple Tween animation using MooTools. The opening animation is perfectly smooth. But then I added the closing animation (opposite of the opening animation), but it seems to stutter/hiccup at the end almost every time.
I tried the following with no success:
Removed all HTML content from the expanding DIV
Passing the Bounce settings directly to the Set function instead of using the variable
Commented the #content animation to be sure there is only 1 animation running
Commented the addClass and removeClass actions
I can't figure out what's causing the problem. Maybe someone else can have a look…
I put the test-case online here: http://dev.dvrs.eu/mootools/
window.addEvent('domready', function() {
// Set initial Div heights
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
// Set Div heights on Window resize
window.addEvent('resize', function() {
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
});
var bounce = {
transition: Fx.Transitions.Back.easeOut,
duration: 500
};
$$('.button.closeMenu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 0);
$('content').set('tween', bounce);
$('content').tween('margin-left', 90);
});
$$('.button.menu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 300);
$('content').set('tween', bounce);
$('content').tween('margin-left', 390);
});
});
Fiddle with example here

The transition you are using goes over the values defined as final value in the .set(property, value);. So when opening the final width is 300px but the transition/effect goes over that and than soft back to the final value.
This works great when opening because width can be 310px or more and then return to 300px, but when with has a transition under the with 0px, it doesn't work so good. It actually works ok if the final width is 10px (check here), but that's not the effect you want.
So my suggestion is to fix it with CSS, or change the transition when closing the sidebar, or use another effect altogether.
Option 1: fiddle - same transition opening, no easeout closing
Option 2: fiddle - same effect as you have but played with CSS and hidded 10px of the sidemenu under the sidebar. (z-index:3; on #sideBar and left:80px;width: 10px; on #sideMenu. Also 10px as the final value for the tween.)
To check different transitions at Mootools demo's look here.

Stuttering on mouseout of moved image element

Basically, when hovering over an image, I'd like to move the image slightly and then on mouseout, return the image to the original location. I've got a version of the code that works to accomplish this task but there is a bit of a "stuttering" effect if the user was to move the mouse from the image into the area where the image was located originally.
-----
| |
----- |img|
| | | |
|img| ==> -----
| | xxxxx
----- xxxxx
In the diagram above, when the mouse hovers over the image, it gets nudged up 2 units. On mouseout, the image returns to the original position. My code, as below, works but when the mouse gets moved into the previously vacated area (e.g., the x's), the code thinks that it's hovering over the image again and then moves the image back up 2 units. This creates a sort of stuttering effect when hovering the mouse over the area marked by x above.
I've tried different approaches (e.g., using animate(), adding/removing a wrapper div, using setTimeout(), etc) but they all produce the same undesired effect. I considered constantly monitoring the mouse position on the page and remembering the position of the image, but that seems excessive, esp since there could be anywhere between 1 and n images.
$(document).ready(function() {
$('.hoverImage').hover(
function(){
$(this).offset({'top':$(this).offset().top-2});
},
function(){
$(this).offset({'top':$(this).offset().top+2});
}
);
});
Here is a jsfiddle demo-ing the issue: http://jsfiddle.net/Ut8eK/
Any tips would be much appreciated. Thanks in advance!
Update
Awesome. I ended up using a bit of both answers:
$(document).ready(function() {
$('.hoverImage').wrap('<div class="hoverImageWrapper" style="display: inline-block;">');
$('.hoverImageWrapper').hover(
function(){
$('.hoverImage',this).offset({'top':$(this).offset().top-10});
},
function(){
$('.hoverImage',this).offset({'top':$(this).offset().top});
}
);
});
Here's a jsfiddle of the above: http://jsfiddle.net/rf5mE/
This works great for my needs, since adding the functionality will be super easy just by adding class="hoverImage" to the appropriate images.
I accepted #Matyas as the answer only because his answer came through first (by about 4 seconds!).
Thanks y'all!

You should put your images in a wrapper, and listen to the hover in the wrapper, which doesn't change its position. This way you should get a constant effect
EDIT:
The problem is that the image moves lower on mouseout than the size of the div (original size of the image) Solution: add a 10px bottom padding to the div, in the case the image moves 10px lower, to still have a div in its background if it's hovered. (updated link)
TY Huangism for the notification
Update example:
HTML
<br />
<div>< img src="http://placekitten.com/120/100" class="hoverImage" /></div>
<div>< img src="http://placekitten.com/100/100" class="hoverImage" /></div>
<div>< img src="http://placekitten.com/110/100" class="hoverImage" /></div>
JS
$(document).ready(function() {
$('div').hover(
function(){
//search for the image inside the wrapper (reffered to by this)
$('.hoverImage', this).offset({'top':$(this).offset().top-10});
},
function(){
$('.hoverImage', this).offset({'top':$(this).offset().top+10});
}
);
});
CSS:
div{
display: inline-block;
}
div:hover{
padding-bottom: 10px;
}

Put a wrapper on it and target the wrapper to move the image
http://jsfiddle.net/Ut8eK/4/
HTML
<div class="hoverImage"><img src="http://placekitten.com/120/100" /></div>
JS
$(document).ready(function() {
$('.hoverImage').hover(
function(){
var $img = $(this).find('img');
$img.offset({'top':$img.offset().top-10});
},
function(){
var $img = $(this).find('img');
$img.offset({'top':$img.offset().top+10});
}
);
});
for multiple divs you do need the inline-block css

iScroll doesn't show the scrollbar but lets me drag the content

This is how I call it
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
/**/
$(document).ready(function() {
//Created an array for adding n iScroll objects
var myScroll = new Array();
$('.content').each(function(){
if($(this).attr('id')==null){
$(this).attr('id') = $(this).attr('class');
}
id = $(this).attr('id');
console.log(id);
$(this).html('<div class="scroller">'+$(this).html()+'</div>');
myScroll.push(new iScroll(id));
});
});
I modified it a little bit so you can use it with a class and not only id.
It seems to work (to be enabled) because I can drag the container and its content (but it wont keep position, it will restore on mouse release)
If you want to see it happening please visit http://toniweb.us/grano and click on any item in the menu, the new shown has the effect.
Any idea why it is working but not as expected?
The reason I want to do this is because the container has several subcontainers that will be hidden or shown depending on the content selection.
CSS:
#nvl1{
padding:0px 25px;
z-index:10;
position:absolute;
left:0px;
background:url("../img/fondoNivel2.jpg") no-repeat scroll right 0 #79797B ;
height:100%;
}
#nvl1 .content{
width:650px;
z-index:11;
display:none;
color:#6666b6b;
position:relative;
line-height:30px;
}

I had a look at your code on: http://toniweb.us/grano
I think what you would like to do is use iScroll on your class with "scrolling". That is not what you are doing in the following code but instead you are actually setting iScroll to use the parent of your scroller DIV:
id = $(this).attr('id');
$(this).html('<div class="scroller">'+$(this).html()+'</div>');
myScroll.push(new iScroll(id));
For reference: iScroll uses an ID rather than a class
The effect this is having is that it is causing the "snap" effect on the immediately following block level element - your scroller DIV.
Consider this example where there is a DIV (id="scroller") containing an OL which contains a number of (block level) LIs:
http://cubiq.org/dropbox/iscroll4/examples/simple/
Long story short, give your DIV with the scroller class an id and create your iScroll from that instead.

if you set the style on the div tag you put the scroller on to (example)
style="position:relative;overflow: hidden;height:350px;
i think it's setting the height explicitly that should solve the dragging problem

Don't you just want:
.content {overflow-y:scroll;}
Is that not what you're saying mate?

The elements within the scroll div can't be floating. If they are floating and not cleared the flow of the page will mean your scrolling div is not the correct height. Try avoiding any floats within your scrolling and div and see how that goes. This was the problem for me.
I also found Matthews answer to be helpful as I was also calling iscroll on the wrong div. I think the confusing thing about the iScroll example is that it's easy to assume iScroll is called on the div with the ID scroller, but it's called on the wrapper div. The div with the ID scroller doesn't actually need an ID and I think for the examples sake this would be clearer without that. e.g.
<div id="wrapper">
<div>
<p>Whatever you want here</p>
<ul>
<li>1</li>
</ul>
</div>
</div>
...
myScroll = new iScroll('wrapper');