Skip to content

Instantly share code, notes, and snippets.

@mcicoria

mcicoria/click_issue.html

Created July 27, 2013 10:03
Show Gist options
  • Save mcicoria/6094454 to your computer and use it in GitHub Desktop.
Save mcicoria/6094454 to your computer and use it in GitHub Desktop.
Download ZIP
Joyride: Element click issue Put this in the /demo folder and give it a try.
Raw
click_issue.html
<!DOCTYPE html>
<!--
* Markup for jQuery Joyride Plugin 2.1
* www.ZURB.com/playground
* Copyright 2013, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
-->
<head>
<meta charset="utf-8" />
<title>Click Issue Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Attach our CSS -->
<link rel="stylesheet" href="../joyride-2.1.css">
<link rel="stylesheet" href="demo-style.css">
<link rel="stylesheet" href="mobile.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="twelve columns">
<h1>Click Issue on Joyride</h1>
<a href="http://www.zurb.com/playground/jquery_joyride_feature_tour_plugin" id="start">View Docs + Playground for Joyride</a>
<hr>
</div>
</div>
<br><br>
<div class="row">
<div class="six columns">
<h2 id="numero1" class="so-awesome"><a href="#clickme" class="click-me">Here's the Issue</a></h2>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div class="six columns">
<img id="numero5" src="430x200.gif">
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="twelve columns">
<h3 id="numero3"><a class="click-me" href="#clickme">Also here</a></h3>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="four columns">
<img src="280x120.gif">
</div>
<div class="eight columns">
<h3 id="numero2"><a class="click-me" href="#clickme">Issue here too</a></h3>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<div class="row" id="hidden">
<div class="four columns">
<img src="280x120.gif">
</div>
<div class="eight columns">
<h3 class="someclass">Something</h3>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<div class="row">
<div class="four columns">
<img src="280x120.gif">
</div>
<div class="eight columns">
<h3 class="someclass">Uses classes</h3>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="six columns">
<h3 style="text-align:right" id="numero4"><a href="#clickme" class="click-me">Oh noes!</a></h3>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div class="six columns">
<img src="430x200.gif">
</div>
</div>
<br><br><br><br>
</div>
<!-- Tip Content -->
<ol id="joyRideTipContent">
<li data-class="so-awesome" data-text="Next" class="custom">
<h2>The Issue</h2>
<p>Since the nub on the box has a border-top-width of 14px you cannot click on the link directly above the nub.</p>
</li>
<li data-id="numero2" data-button="Next" data-options="tipLocation:left;tipAnimation:fade">
<h2>On the left</h2>
<p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li>
<li data-id="numero3" data-button="Next" data-options="tipLocation:top">
<h2>On the top</h2>
<p>Can't click there either</p>
</li>
<li data-id="numero4" data-button="Next" data-options="tipLocation:right">
<h2>And on the right</h2>
<p>Also can't click here :(</p>
</li>
</ol>
<!-- Run the plugin -->
<script type="text/javascript" src="../jquery-1.10.1.js"></script>
<script type="text/javascript" src="../jquery.cookie.js"></script>
<script type="text/javascript" src="../modernizr.mq.js"></script>
<script type="text/javascript" src="../jquery.joyride-2.1.js"></script>
<script>
$(window).load(function() {
$('#joyRideTipContent').joyride({
autoStart : true,
modal:false,
expose: true
});
$(".click-me").on("click", function(){
alert("Yay you can haz click!");
return false;
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment