<!DOCTYPE html>
<html>
<head>

<title>ARCHLine.XP <?=$title?></title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />


<link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
<link href="/public/js/photoswipe/examples/jquery-mobile.css" type="text/css" rel="stylesheet" />
<link href="/public/js/photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />


<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" src="/public/js/photoswipe/lib/klass.min.js"></script>
<?//<script type="text/javascript" src="/public/js/photoswipe/code.photoswipe-3.0.4.min.js"></script>?>

<script type="text/javascript">
/*$(document).ready(function(){
	var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
});*/

$(document).ready(function(){
	$('#egyid').bind('touchmove',function(e) {
		e.preventDefault();
		alert ("moved over" );
	});
	/*alert("betoltve");*/
});
</script>

</head>

<body>


<div data-role="page" id="Home" class="gallery-page">

	<div data-role="header">
		<h1>ARCHLine.XP Interior Design Gallery</h1>
	</div>

	<div data-role="content">
	
<div id="egyid" style="width: 200px; height: 50px; border: 1px solid black;">
	adsf
</div>
	
<ul id="Gallery">
	<li><a href="/public/img/gallery2012/00_Chelsea_Orangery_0_Aquarel.jpg"><img src="/public/img/gallery2012/thumbs/00_Chelsea_Orangery_0_Aquarel.jpg" alt="" /></a></li>
	<li><a href="/public/img/gallery2012/00_Chelsea_Orangery_1_Floorplan.jpg"><img src="/public/img/gallery2012/thumbs/00_Chelsea_Orangery_1_Floorplan.jpg" alt="" /></a></li>
	<li><a href="/public/img/gallery2012/00_Chelsea_Orangery_Daily_View1.jpg"><img src="/public/img/gallery2012/thumbs/00_Chelsea_Orangery_Daily_View1.jpg" alt="" /></a></li>
	<li><a href="/public/img/gallery2012/00_Chelsea_Orangery_Daily_View2.jpg"><img src="/public/img/gallery2012/thumbs/00_Chelsea_Orangery_Daily_View2.jpg" alt=""/></a></li>
	<li><a href="/public/img/gallery2012/00_Chelsea_Orangery_Daily_View3.jpg"><img src="/public/img/gallery2012/thumbs/00_Chelsea_Orangery_Daily_View3.jpg" alt=""/></a></li>
</ul>







<div id="welcome" class="section">
    <section>
        <div class="sectionContent">
            <h2><span>welcome</span></h2>
            <div class="figure">
            <figure>
                <p><img alt="Jim R. Wilson (jimbojw)" src="image/jim-r-wilson.jpg"></p>
                <figcaption><span class="caption">Jim R. Wilson (jimbojw)</span></figcaption>
            </figure>
            </div>
            <p><a title="github: jimbojw / mobile-events" href="http://github.com/jimbojw/mobile-events"><span>github: jimbojw / mobile-events</span></a></p>
        </div>
    </section>
    </div>
    <div id="wild-west" class="section">
    <section>
        <div class="sectionContent">
            <h2><span>wild west</span></h2>
            <p><span>version 2.0</span></p>
            <ul>
                <li><span>desktop with mouse</span></li>
                <li><span>iProducts</span></li>
                <li><span>android (1.x, 2.x)</span></li>
                <li><span>Firefox</span></li>
                <li><span>everything else</span></li>
            </ul>
            <p><a title="quirksmode: Touch table" href="http://www.quirksmode.org/mobile/tableTouch.html"><span>quirksmode: Touch table</span></a></p>
        </div>
    </section>
    </div>
    <div id="mouse-events" class="section">
    <section>
        <div class="sectionContent">
            <h2><span>mouse events</span></h2>
            <ul>
                <li><span>mousedown</span></li>
                <li><span>mouseup</span></li>
                <li><span>mouseclick</span></li>
                <li><span>mousemove</span></li>
                <li><span>mouseover</span></li>
                <li><span>mouseout</span></li>
            </ul>
            <p><a title="quirksmode: Mouse Events" href="http://www.quirksmode.org/js/events_mouse.html"><span>quirksmode: Mouse Events</span></a></p>
        </div>
    </section>
    </div>
    <div id="mouse-event-properties" class="section">
    <section>
        <div class="sectionContent">
            <h2><span>mouse event properties</span></h2>
            <ul>
                <li><span>event.type</span></li>
                <li><span>event.pageX</span></li>
                <li><span>event.pageY</span></li>
                <li><span>event.clientX</span></li>
                <li><span>event.clientY</span></li>
            </ul>
            <p><a title="quirksmode: Event properties - Mouse position" href="http://www.quirksmode.org/js/events_properties.html#position"><span>quirksmode: Event properties - Mouse position</span></a></p>
        </div>
    </section>
    </div>
    <div id="webkit-touch-events" class="section">
    <section>
        <div class="sectionContent">
            <h2><span>webkit touch events</span></h2>
            <ul>
                <li><span>touchstart</span></li>
                <li><span>touchmove</span></li>
                <li><span>touchend</span></li>
                <li><span>touchcancel</span></li>
            </ul>
            <p><a title="Safari Web Content Guide: Handling Multi-Touch Events" href="http://developer.apple.com/safari/library/documentation/appleapplications/reference/safariwebcontent/handlingevents/handlingevents.html#//apple_ref/doc/uid/TP40006511-SW22"><span>Safari Web Content Guide: Handling Multi-Touch Events</span></a></p>
        </div>
    </section>
    </div>
    <div id="webkit-event-properties" class="section">
    <section>
        <div class="sectionContent">
            <h2><span>webkit event properties</span></h2>
            <ul>
                <li><span>event.touches</span></li>
                <li><span>event.changedTouches</span></li>
                <li><span>event.targetTouches</span></li>
            </ul>
            <pre class="sh_javascript sh_sourceCode"><span class="sh_keyword">var</span> touch <span class="sh_symbol">=</span> event<span class="sh_symbol">.</span>changedTouches<span class="sh_symbol">[</span><span class="sh_number">0</span><span class="sh_symbol">];</span></pre>
            <ul>
                <li><span>touch.pageX</span></li>
                <li><span>touch.pageY</span></li>
            </ul>
        </div>
    </section>
    </div>
    <div id="webkit-gesture-events" class="section">
    <section>
        <div class="sectionContent">
            <h2><span>webkit gesture events</span></h2>
            <ul>
                <li><span>gesturestart</span></li>
                <li><span>gesturechange</span></li>
                <li><span>gestureend</span></li>
            </ul>
            <p><a title="Safari Web Content Guide: Handling Gesture Events" href="http://developer.apple.com/safari/library/documentation/appleapplications/reference/safariwebcontent/handlingevents/handlingevents.html#//apple_ref/doc/uid/TP40006511-SW23"><span>Safari Web Content Guide: Handling Gesture Events</span></a></p>
        </div>
    </section>
    </div>
    <div id="webkit-event-hacks" class="section">
    <section>
        <div class="sectionContent">
            <h2><span>webkit event hacks</span></h2>
            <ul>
                <li><span>event.touches.length</span></li>
                <li><span>event.preventDefault()</span></li>
            </ul>
        </div>
    </section>
    </div>
    <div id="mozilla-touch-events" class="section">
    <section>
        <div class="sectionContent">
            <h2><span>mozilla touch events</span></h2>
            <ul>
                <li><span>MozTouchDown</span></li>
                <li><span>MozTouchMove</span></li>
                <li><span>MozTouchRelease</span></li>
            </ul>
            <p><a title="hacks.mozilla.org: bringing multi-touch to Firefox and the web" href="http://hacks.mozilla.org/2009/08/multi-touch-firefox/"><span>hacks.mozilla.org: bringing multi-touch to Firefox and the web</span></a></p>
        </div>
    </section>
    </div>
    <div id="mozilla-event-properties" class="section">
    <section>
        <div class="sectionContent">
            <h2><span>mozilla event properties</span></h2>
            <ul>
                <li><span>event.streamId</span></li>
            </ul>
        </div>
    </section>
    </div>
    <div id="common-problems" class="section">
    <section>
        <div class="sectionContent">
            <h2><span>common problems</span></h2>
            <p><span>technical</span></p>
            <ul>
                <li><span>position</span></li>
                <li><span>gestures</span></li>
            </ul>
            <p><span>philosophical</span></p>
            <ul>
                <li><span>hover</span></li>
                <li><span>plurality</span></li>
            </ul>
        </div>
    </section>
    </div>
    <div class="section">
    <section>
        <div class="sectionContent">
<pre class="sh_javascript sh_sourceCode"><span class="sh_comment">/**</span>
<span class="sh_comment"> * find the position of an event</span>
<span class="sh_comment"> */</span>
<span class="sh_keyword">function</span> <span class="sh_function">position</span><span class="sh_symbol">(</span>event<span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
    
    <span class="sh_keyword">var</span> x<span class="sh_symbol">,</span> y<span class="sh_symbol">;</span>
    
    <span class="sh_comment">// magic</span>

    <span class="sh_keyword">return</span> <span class="sh_cbracket">{</span> x<span class="sh_symbol">:</span> x<span class="sh_symbol">,</span> y<span class="sh_symbol">:</span> y <span class="sh_cbracket">}</span><span class="sh_symbol">;</span>
<span class="sh_cbracket">}</span>
</pre>
        </div>
    </section>
    </div>
    <div class="section">
    <section>
        <div class="sectionContent">
<pre class="sh_javascript sh_sourceCode"><span class="sh_comment">// mouse position logic</span>
<span class="sh_keyword">if</span> <span class="sh_symbol">(</span>event<span class="sh_symbol">.</span>pageX <span class="sh_symbol">!==</span> <span class="sh_predef_var">undefined</span> 
    <span class="sh_symbol">&amp;&amp;</span> event<span class="sh_symbol">.</span>pageY <span class="sh_symbol">!==</span> <span class="sh_predef_var">undefined</span><span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
        x <span class="sh_symbol">=</span> event<span class="sh_symbol">.</span>pageX<span class="sh_symbol">;</span>
        y <span class="sh_symbol">=</span> event<span class="sh_symbol">.</span>pageY<span class="sh_symbol">;</span>
<span class="sh_cbracket">}</span> <span class="sh_keyword">else</span> <span class="sh_keyword">if</span> <span class="sh_symbol">(</span>event<span class="sh_symbol">.</span>clientX <span class="sh_symbol">!==</span> <span class="sh_predef_var">undefined</span>
    <span class="sh_symbol">&amp;&amp;</span> event<span class="sh_symbol">.</span>clientY <span class="sh_symbol">!==</span> <span class="sh_predef_var">undefined</span><span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
        x <span class="sh_symbol">=</span> event<span class="sh_symbol">.</span>clientX
            <span class="sh_symbol">+</span> document<span class="sh_symbol">.</span>body<span class="sh_symbol">.</span>scrollLeft
            <span class="sh_symbol">+</span> document<span class="sh_symbol">.</span>documentElement<span class="sh_symbol">.</span>scrollLeft<span class="sh_symbol">;</span>
        y <span class="sh_symbol">=</span> event<span class="sh_symbol">.</span>clientY 
            <span class="sh_symbol">+</span> document<span class="sh_symbol">.</span>body<span class="sh_symbol">.</span>scrollTop 
            <span class="sh_symbol">+</span> document<span class="sh_symbol">.</span>documentElement<span class="sh_symbol">.</span>scrollTop<span class="sh_symbol">;</span>
<span class="sh_cbracket">}</span>
</pre>
        </div>
    </section>
    </div>
    <div class="section">
    <section>
        <div class="sectionContent">
<pre class="sh_javascript sh_sourceCode"><span class="sh_keyword">var</span> touch<span class="sh_symbol">,</span> x<span class="sh_symbol">,</span> y<span class="sh_symbol">;</span>

<span class="sh_keyword">if</span> <span class="sh_symbol">(</span>event<span class="sh_symbol">.</span>touches
    <span class="sh_symbol">&amp;&amp;</span> event<span class="sh_symbol">.</span>touches<span class="sh_symbol">.</span>length<span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
        touch <span class="sh_symbol">=</span> event<span class="sh_symbol">.</span>touches<span class="sh_symbol">[</span><span class="sh_number">0</span><span class="sh_symbol">];</span>
        x <span class="sh_symbol">=</span> touch<span class="sh_symbol">.</span>pageX<span class="sh_symbol">;</span>
        y <span class="sh_symbol">=</span> touch<span class="sh_symbol">.</span>pageY<span class="sh_symbol">;</span>
<span class="sh_cbracket">}</span> <span class="sh_keyword">else</span> <span class="sh_keyword">if</span> <span class="sh_symbol">(</span>event<span class="sh_symbol">.</span>changedTouches
    <span class="sh_symbol">&amp;&amp;</span> event<span class="sh_symbol">.</span>changedTouches<span class="sh_symbol">.</span>length<span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
        touch <span class="sh_symbol">=</span> event<span class="sh_symbol">.</span>changedTouches<span class="sh_symbol">[</span><span class="sh_number">0</span><span class="sh_symbol">];</span>
        x <span class="sh_symbol">=</span> touch<span class="sh_symbol">.</span>pageX<span class="sh_symbol">;</span>
        y <span class="sh_symbol">=</span> touch<span class="sh_symbol">.</span>pageY<span class="sh_symbol">;</span>
<span class="sh_cbracket">}</span> <span class="sh_keyword">else</span> <span class="sh_keyword">if</span> <span class="sh_symbol">(</span>event<span class="sh_symbol">.</span>pageX <span class="sh_symbol">...</span>
</pre>
        </div>
    </section>
    </div>
    <div id="cross-environment-hacking" class="section">
    <section>
        <div class="sectionContent">
            <h2><span>cross environment hacking</span></h2>
            <ul>
                <li><span>multiply attached handlers</span></li>
                <li><span>event detection</span></li>
            </ul>
        </div>
    </section>
    </div>
    <div class="section">
    <section>
        <div class="sectionContent">
<pre class="sh_javascript sh_sourceCode"><span class="sh_keyword">var</span> trigger <span class="sh_symbol">=</span> <span class="sh_keyword">null</span><span class="sh_symbol">;</span>

<span class="sh_keyword">function</span> <span class="sh_function">contact</span><span class="sh_symbol">(</span>event<span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
    
    <span class="sh_comment">// detect trigger type</span>
    <span class="sh_keyword">if</span> <span class="sh_symbol">(!</span>trigger<span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
        trigger <span class="sh_symbol">=</span> event<span class="sh_symbol">.</span>type<span class="sh_symbol">;</span>
    <span class="sh_cbracket">}</span>
    
    <span class="sh_comment">// only interact with triggered events</span>
    <span class="sh_keyword">if</span> <span class="sh_symbol">(</span>trigger <span class="sh_symbol">===</span> event<span class="sh_symbol">.</span>type<span class="sh_symbol">)</span> <span class="sh_cbracket">{</span>
        <span class="sh_comment">// ... handle</span>
    <span class="sh_cbracket">}</span>
    
<span class="sh_cbracket">}</span>
</pre>
        </div>
    </section>
    </div>
    <div class="section">
    <section>
        <div class="sectionContent">
<pre class="sh_javascript sh_sourceCode"><span class="sh_comment">// bind handlers</span>
<span class="sh_function">addEvent</span><span class="sh_symbol">(</span>$wrapper<span class="sh_symbol">[</span><span class="sh_number">0</span><span class="sh_symbol">])</span>
    <span class="sh_symbol">(</span><span class="sh_string">'mousedown'</span><span class="sh_symbol">,</span> contact<span class="sh_symbol">)</span>
    <span class="sh_symbol">(</span><span class="sh_string">'touchstart'</span><span class="sh_symbol">,</span> contact<span class="sh_symbol">)</span>
    <span class="sh_symbol">(</span><span class="sh_string">'MozTouchDown'</span><span class="sh_symbol">,</span> contact<span class="sh_symbol">)</span>
    <span class="sh_symbol">(</span><span class="sh_string">'mousemove'</span><span class="sh_symbol">,</span> move<span class="sh_symbol">)</span>
    <span class="sh_symbol">(</span><span class="sh_string">'touchmove'</span><span class="sh_symbol">,</span> move<span class="sh_symbol">)</span>
    <span class="sh_symbol">(</span><span class="sh_string">'MozTouchMove'</span><span class="sh_symbol">,</span> move<span class="sh_symbol">);</span>
<span class="sh_function">addEvent</span><span class="sh_symbol">(</span>document<span class="sh_symbol">)</span>
    <span class="sh_symbol">(</span><span class="sh_string">'mouseup'</span><span class="sh_symbol">,</span> release<span class="sh_symbol">)</span>
    <span class="sh_symbol">(</span><span class="sh_string">'touchend'</span><span class="sh_symbol">,</span> release<span class="sh_symbol">)</span>
    <span class="sh_symbol">(</span><span class="sh_string">'MozTouchRelease'</span><span class="sh_symbol">,</span> release<span class="sh_symbol">);</span>
</pre>
        </div>
    </section>
    </div>
    <div id="thanks" class="section">
    <section>
        <div class="sectionContent">
            <h2><span>thanks!</span></h2>
            <p><a title="github: jimbojw / mobile-events" href="http://github.com/jimbojw/mobile-events"><span>github: jimbojw / mobile-events</span></a></p>
        </div>
    </section>
    </div>









</div>
	
	<div data-role="footer">
		<h4>&copy; 2011 Code Computerlove</h4>
	</div>
	
</div>


</body>
</html>