Skip to content

Instantly share code, notes, and snippets.

@timlindvall

timlindvall/test.html

Created February 7, 2015 02:35
Show Gist options
  • Save timlindvall/a44c44c4a08553a64ab0 to your computer and use it in GitHub Desktop.
Save timlindvall/a44c44c4a08553a64ab0 to your computer and use it in GitHub Desktop.
Download ZIP
Sample code to try and reproduce Issue #135
Raw
test.html
<html>
<head>
<title>Test for issue 135</title>
<link href="../dist/css/hopscotch.min.css" rel="stylesheet"></link>
<link href="teststyles.css" rel="stylesheet"></link>
</head>
<body>
<div id="header">
<h1>Test Issue 135 - Negative margin</h1>
<ul class="nav">
<li>Home</li>
<li id="target-nav-item">Some other page</li>
<li>Yet another page</li>
<li>Yep, a page</li>
</ul>
</div>
<div id="content">
<h2>Test header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec mi sed elit sodales hendrerit in vel justo. Pellentesque egestas metus eu lectus gravida sodales. Donec magna nunc, varius non consequat non, volutpat ac magna. Nam luctus ipsum non ante pellentesque eleifend. Mauris fermentum metus ut rhoncus porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer quis enim augue.</p>
<p>Nullam fermentum quis orci id posuere. Praesent ornare porta mauris, id lobortis odio. Ut ornare sollicitudin purus, et aliquam mi mattis feugiat. Nulla volutpat neque eu nisi porta, eget commodo sem sodales. Duis sit amet tortor varius, elementum ex id, tincidunt nulla. Sed at libero ut neque blandit suscipit. Donec mauris dolor, condimentum at posuere id, egestas a eros. Curabitur sapien eros, accumsan luctus sollicitudin a, congue id ante. Maecenas tempor mi arcu, vitae commodo mi imperdiet ut. Proin maximus lacus in arcu eleifend tristique.</p>
<p>Pellentesque non sem vitae velit malesuada malesuada. Etiam sagittis consequat lorem, ultrices gravida lorem condimentum vel. Proin quis hendrerit libero. Maecenas lacinia velit vitae nisi accumsan, a blandit ante pulvinar. In eu laoreet dui. Proin auctor scelerisque metus in viverra. Etiam eget augue a elit aliquam dignissim nec non est. Donec id tellus aliquet, commodo ante eu, accumsan dolor. Nulla pretium, nisi eu varius ullamcorper, nulla dui ultricies odio, sit amet pulvinar dui urna sed arcu. Nullam sed efficitur metus. Integer id efficitur justo, a scelerisque massa. In eu augue hendrerit, volutpat magna non, faucibus turpis. Cras rhoncus faucibus augue, vitae suscipit eros hendrerit vel. Morbi purus nibh, dapibus eget commodo ut, facilisis nec arcu. Phasellus ut est sed felis dictum volutpat quis et neque. Proin tempus cursus lectus non mattis.</p>
<h2 id="target-header">It's another test header</h2>
<p>Phasellus a justo ac libero feugiat rutrum. In aliquam ipsum diam, ut sodales dui interdum nec. Phasellus tristique orci ac sapien tincidunt tristique. Morbi elementum diam eget laoreet porttitor. Donec id nisl sagittis, vehicula nunc non, facilisis dui. Fusce ut faucibus mi. Etiam sollicitudin tortor nisi, id eleifend dolor euismod eu. Donec bibendum felis nec hendrerit maximus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Nullam tellus ante, euismod eget mattis non, placerat ac erat. Maecenas ac diam dolor. Nullam quis mi finibus, laoreet sem sit amet, cursus lectus. Sed urna felis, malesuada eget hendrerit quis, varius a nisl. Donec id risus ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed rhoncus aliquam sem vel scelerisque. Ut sed eros ut purus laoreet commodo pretium et sem. Suspendisse leo lectus, aliquam in luctus vitae, auctor vitae ipsum. Donec eget tempus erat. Nulla et imperdiet leo, sit amet cursus tellus. Quisque ligula tortor, sollicitudin eget commodo eu, pulvinar sed sem. Phasellus porta nibh non cursus luctus.</p>
<h2>Test header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec mi sed elit sodales hendrerit in vel justo. Pellentesque egestas metus eu lectus gravida sodales. Donec magna nunc, varius non consequat non, volutpat ac magna. Nam luctus ipsum non ante pellentesque eleifend. Mauris fermentum metus ut rhoncus porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer quis enim augue.</p>
<p>Nullam fermentum quis orci id posuere. Praesent ornare porta mauris, id lobortis odio. Ut ornare sollicitudin purus, et aliquam mi mattis feugiat. Nulla volutpat neque eu nisi porta, eget commodo sem sodales. Duis sit amet tortor varius, elementum ex id, tincidunt nulla. Sed at libero ut neque blandit suscipit. Donec mauris dolor, condimentum at posuere id, egestas a eros. Curabitur sapien eros, accumsan luctus sollicitudin a, congue id ante. Maecenas tempor mi arcu, vitae commodo mi imperdiet ut. Proin maximus lacus in arcu eleifend tristique.</p>
<p>Pellentesque non sem vitae velit malesuada malesuada. Etiam sagittis consequat lorem, ultrices gravida lorem condimentum vel. Proin quis hendrerit libero. Maecenas lacinia velit vitae nisi accumsan, a blandit ante pulvinar. In eu laoreet dui. Proin auctor scelerisque metus in viverra. Etiam eget augue a elit aliquam dignissim nec non est. Donec id tellus aliquet, commodo ante eu, accumsan dolor. Nulla pretium, nisi eu varius ullamcorper, nulla dui ultricies odio, sit amet pulvinar dui urna sed arcu. Nullam sed efficitur metus. Integer id efficitur justo, a scelerisque massa. In eu augue hendrerit, volutpat magna non, faucibus turpis. Cras rhoncus faucibus augue, vitae suscipit eros hendrerit vel. Morbi purus nibh, dapibus eget commodo ut, facilisis nec arcu. Phasellus ut est sed felis dictum volutpat quis et neque. Proin tempus cursus lectus non mattis.</p>
<h2>It's another test header</h2>
<p>Phasellus a justo ac libero feugiat rutrum. In aliquam ipsum diam, ut sodales dui interdum nec. Phasellus tristique orci ac sapien tincidunt tristique. Morbi elementum diam eget laoreet porttitor. Donec id nisl sagittis, vehicula nunc non, facilisis dui. Fusce ut faucibus mi. Etiam sollicitudin tortor nisi, id eleifend dolor euismod eu. Donec bibendum felis nec hendrerit maximus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Nullam tellus ante, euismod eget mattis non, placerat ac erat. Maecenas ac diam dolor. Nullam quis mi finibus, laoreet sem sit amet, cursus lectus. Sed urna felis, malesuada eget hendrerit quis, varius a nisl. Donec id risus ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed rhoncus aliquam sem vel scelerisque. Ut sed eros ut purus laoreet commodo pretium et sem. Suspendisse leo lectus, aliquam in luctus vitae, auctor vitae ipsum. Donec eget tempus erat. Nulla et imperdiet leo, sit amet cursus tellus. Quisque ligula tortor, sollicitudin eget commodo eu, pulvinar sed sem. Phasellus porta nibh non cursus luctus.</p>
<div id="its-a-box">
<button>I'm a button in a box!</button>
</div>
</div>
<script src="../demo/js/jquery-1.10.2.js"></script>
<script src="../dist/js/hopscotch.js"></script>
<script src="testjs.js"></script>
</body>
</html>
Raw
testjs.js
$(document).ready(function(){
var testTour = {
id: 'test_tour',
steps:[
{
target: '#header h1',
placement: 'bottom',
title: 'This is a test tour',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec mi sed elit sodales hendrerit in vel justo. Pellentesque egestas metus eu lectus gravida sodales.'
},
{
target: '#header',
placement: 'bottom',
title: 'This is a test tour',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec mi sed elit sodales hendrerit in vel justo. Pellentesque egestas metus eu lectus gravida sodales.'
},
{
target: '#target-nav-item',
placement: 'bottom',
title: 'This is a test tour',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec mi sed elit sodales hendrerit in vel justo. Pellentesque egestas metus eu lectus gravida sodales.'
},
{
target: '#target-nav-item',
placement: 'right',
title: 'This is a test tour',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec mi sed elit sodales hendrerit in vel justo. Pellentesque egestas metus eu lectus gravida sodales.'
},
{
target: '#target-header',
placement: 'right',
title: 'This is a test tour',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec mi sed elit sodales hendrerit in vel justo. Pellentesque egestas metus eu lectus gravida sodales.'
},
{
target: '#target-header',
placement: 'top',
title: 'This is a test tour',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec mi sed elit sodales hendrerit in vel justo. Pellentesque egestas metus eu lectus gravida sodales.'
},
{
target: '#target-header',
placement: 'left',
title: 'This is a test tour',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec mi sed elit sodales hendrerit in vel justo. Pellentesque egestas metus eu lectus gravida sodales.'
},
{
target: '#target-header',
placement: 'bottom',
title: 'This is a test tour',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec mi sed elit sodales hendrerit in vel justo. Pellentesque egestas metus eu lectus gravida sodales.'
},
{
target: '#its-a-box button',
placement: 'top',
title: 'This is a test tour',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec mi sed elit sodales hendrerit in vel justo. Pellentesque egestas metus eu lectus gravida sodales.'
},
{
target: '#content',
placement: 'left',
title: 'This is a test tour',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec mi sed elit sodales hendrerit in vel justo. Pellentesque egestas metus eu lectus gravida sodales.'
}
]
};
hopscotch.startTour(testTour);
});
Raw
teststyles.css
*{
padding: 0;
margin: 0;
font-family: Helvetica, sans-serif;
}
#header{
background-color: #00F;
color: #FFF;
padding: 30px;
margin-bottom: -90px;
}
h1{
margin-bottom: 20px;
}
#content{
width: 1000px;
margin: 0 auto;
/*margin-top: -90px;*/
border: 1px solid #F00;
}
h2,p{
padding-bottom: 10px;
}
h2{
padding-top: 30px;
}
#target-header{
border: 1px solid #0F0;
}
#its-a-box{
width: 600px;
height: 150px;
background-color: #090;
margin: 50px 0 300px 0;
}
#its-a-box button{
width: 200px;
height: 50px;
margin-top: 50px;
margin-left: 50px;
}
.nav{
list-style-type: none;
}
.nav li{
display: inline-block;
font-size: 20px;
background-color: #C3F;
margin-right: 20px;
padding: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment