Trying to make a mobile webapp. Three of the pages namely article1,2,3 should transition from one another on swipe. Within each article page there should be links to other page that show up with a flip transition. I have managed to sort of make it work however the code I am using is causing the app to be able to swipe through all of my 'pages' while I wish to target only the 'article' pages for the swipe feature. I think mainly the JQ needs to be changed to go directly to specific pages, is this possible? The JQ i currently uses var nextpage = $.mobile.activePage.next('[data-role="page"]'); if i gave all article pages an id of 'article' how would i get it to target data-role="page" while also specifying pages with an ID of article only?
Article Page Example (to swipe to article 2 and 3):
<div data-role="page" id="article1">
<div data-role="content">
<div style="width:50px; height: 50px; background-color:blue;"></div>
<div style="width:50px; height: 50px; background-color:blue; float: right;"></div>
</div>
Example page (link lies within one of the article pages and flips):
<div data-role="page" id="pagethree">
<div data-role="header">
<h1>Welcome To pagethree</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the link to go back. <b>Note</b>: fade is default.</p>
Go back to Page One
</div>
JQ:
<script>
$(document).on('swipeleft', '.ui-page', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var nextpage = $.mobile.activePage.next('[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
}
event.handled = true;
}
return false;
});
$(document).on('swiperight', '.ui-page', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var prevpage = $(this).prev('[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
}
event.handled = true;
}
return false;
});
</script>
I am an idiot. I simply replaced var nextpage = $.mobile.activePage.next('[data-role="page"]'); with var nextpage = $.mobile.activePage.next('#article');
Related
I've tried to search around but found no relatable topics I could understand.
I'm not very familiar with Javascript or coding in general.
I am using Jquery Mobile 1.4.5 and this is my issue:
I cannot get external panels to work properly. The panel displays just fine on my first page, but when I change page it won't show up as intended. My plan is to have the panels work in the same manner as they do on the Jquery mobile demo page.
Link: Jquery Mobile Demo
Here you can see the panel is always showing no matter what page they are on, I found out they don't use external panels on that site but it should still be possible.
How my site works at the moment:
Panel work just fine when loading first page (#page_home)
When entering new page (#page_kodi or #page_download) it does not show up automatically as intended.
When I enter #page_kodi or #page_download and manually bring it up it stays up as intended
This is the odd part: When I go from (with panel open) #page_download to #page_kodi to #page_home (main page) it works.
when I go from #page_home to another page it does not work.
Here is my JS code for panels, I'm sure there is a better way to write this, and maybe some of it is not needed.
Javascript:
<script>
<!-- Creates the panels & navbars/Tabs -->
$(document).on("pagecreate", function() {
$("body > [data-role='panel']").panel();
$("body > [data-role='panel'] [data-role='listview']").listview();
});
$(document).on("pageshow", function() {
$("body > [data-role='header']").toolbar();
$("body > [data-role='header'] [data-role='navbar']").navbar();
});
</script>
<script>
$(document).on("pagebeforeshow", function( event, data ) {
$('#leftpanel').panel("open");
})
</script>
<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$(document).on("pagebeforecreate", "#page_home", function () {
$( "#leftpanel" ).panel({ dismissible: true });
$( "#leftpanel").panel("close");
});
}
</script>
<script>
$(document).on("pagecreate", "#page_home", function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
setTimeout(function(){
$('#leftpanel').panel("close");
}, 500);
}
});
</script>
<script>
$(document).on("pagebeforecreate", "#page_home", function () {
$( "#leftpanel" ).panel({ dismissible: false });
});
</script>
<script>
$(document).on("pagebeforecreate", "#page_download", function () {
$( ".leftpanel" ).panel( "option", "dismissible", false );
$('#leftpanel').panel("open");
});
</script>
<script>
$(document).on("pagebeforecreate", "#page_kodi", function () {
$( "#leftpanel" ).panel( "option", "dismissible", false );
$('#leftpanel').panel("open");
});
</script>
<script>
/* Left & Right swipe gestures to open panels*/
$(document).on("pagecreate", function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$(document).on("swipeleft swiperight", function(e) {
if ($(".ui-page-active").jqmData("panel") !== "open") {
if (e.type === "swipeleft") {
$("#rightpanel").panel("open");
} else if (e.type === "swiperight") {
$("#leftpanel").panel("open");
}
}
});
}
});
</script>
I have placed all these in my HTML file.
HTML Panel:
<div style="margin-top: 0px; background-color: #212120;" class="customlist panel-open" data-role="panel" data-position="left" data-dismissible="" data-display="overlay" data-theme="none" id="leftpanel">
<ul data-role="listview" data-inset="false">
MY CONTENT HERE
</ul>
</div>
data-dismissible="" I have put it this way because that's what works when you set it manually with JS, or so i've read. It did not work if I set it to false or true.
Basically what I'm trying to do here is always have the panel OPEN on bigger screens and closed with option to open it with swipe on smaller screens. This works as of now. The trouble I am having is when changing pages the panel does not act as intended and closes when I am going from my front page to another, but not if I go from another to my front page.
PS: I've also put the panel between two of my pages like this:
page_home
-- panel
-- some popup
page_download
page_kodi
Thanks in advance for all the help you can give and sorry for the wall of text.
Assuming you are using a single-page model, here is a simple stub for a JQM project with a Panel which can stay open among different pages. The default behavior is parametrized by overriding the _bindPageEvents function of the mobile.panel widget, so you can dinamcally set a flag for that.
You can set the stayAlwaysOpen flag as you like, by spoofing the useragent string or (maybe better) by checking the viewport width, up to you. You could also check a CSS breakpoint for that purpose.
To keep header navigation and make the panel somewhat more pleasant, i used also the function scalePanelToContent from: jQuery mobile panel between header and footer (credits: Omar).
var stayAlwaysOpen = true;
$.widget("mobile.panel", $.mobile.panel, {
_bindPageEvents: function() {
var self = this;
this.document
// Close the panel if another panel on the page opens
.on("panelbeforeopen", function(e) {
if (self._open && e.target !== self.element[0]) {
self.close();
}
})
// On escape, close? might need to have a target check too...
.on("keyup.panel", function(e) {
if (e.keyCode === 27 && self._open) {
self.close();
}
});
if (!this._parentPage && this.options.display !== "overlay") {
this._on(this.document, {
"pageshow": function() {
this._openedPage = null;
this._getWrapper();
}
});
}
// Clean up open panels after page hide
if(stayAlwaysOpen) return;
if (self._parentPage) {
this.document.on("pagehide", ":jqmData(role='page')", function() {
if (self._open) {
self.close( true );
}
});
} else {
this.document.on("pagebeforehide", function() {
if (self._open) {
self.close( true );
}
});
}
}
});
function scalePanelToContent() {
var screenH = $.mobile.getScreenHeight();
var headerH = $(".ui-header").outerHeight() - 1;
var footerH = $(".ui-footer").outerHeight() - 1;
var panelH = screenH - headerH - footerH;
$(".ui-panel").css({
"top": headerH,
"bottom": footerH,
"min-height": panelH
});
}
$(document).ready(function() {
$("[data-role='header'], [data-role='footer']").toolbar({
theme: "a",
position: "fixed",
tapToggle: false
});
$("#nav-panel").panel({
theme: "b",
display: "overlay",
position: "left",
positionFixed: true,
swipeClose: false,
dismissible: false
}).enhanceWithin();
$("#nav-panel").on("panelbeforeopen", function(event, ui) {
scalePanelToContent();
$(".ui-content").animate({
"margin-left": "17em"
}, 300, "swing");
});
$("#nav-panel").on("panelbeforeclose", function(event, ui) {
$(".ui-content").removeClass("panel-shrink").animate({
"margin-left": "0"
}, 300, "swing", function() {
$(this).removeAttr("style");
});
});
scalePanelToContent();
});
$(window).on("resize", function() {
scalePanelToContent();
});
$(document).on("pagecontainerbeforeshow", function(e, ui) {
var isPanelOpen = $("#nav-panel").hasClass("ui-panel-open");
$(".ui-content").toggleClass("panel-shrink", isPanelOpen);
});
.panel-shrink {
margin-left: 17em !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="header">
Menu
<h2>Header</h2>
</div>
<div data-role="footer">
<h2>Footer</h2>
</div>
<div data-role="page" id="page-1">
<div data-role="content">
<form>
<fieldset data-role="controlgroup">
<legend>Vertical:</legend>
<input name="checkbox-v-2a" id="checkbox-v-2a" type="checkbox">
<label for="checkbox-v-2a">One</label>
<input name="checkbox-v-2b" id="checkbox-v-2b" type="checkbox">
<label for="checkbox-v-2b">Two</label>
<input name="checkbox-v-2c" id="checkbox-v-2c" type="checkbox">
<label for="checkbox-v-2c">Three</label>
</fieldset>
</form>
</div>
</div>
<div data-role="page" id="page-2">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>
<div data-role="page" id="page-3">
<div data-role="content">
Page 3
</div>
</div>
<div data-role="panel" id="nav-panel">
<ul data-role="listview">
<li>Link #1
</li>
<li>Link #2
</li>
<li>Link #3
</li>
</ul>
</div>
</body>
</html>
Just a last hint:
You can use the same stayAlwaysOpen flag inside your swipe events so that the panel will keep the same behavior in mobile devices and in desktop browsers also for smaller window sizes.
I have a section I am wanting to be hidden on page load and only show if a tab is selected or if a person is coming from a link.
I have figured out what is causing my issue. It is that I am showing the section - service-display-box when someone comes from the link.
//Showing Service Section from Link
$(function(){
//get the section name from hash
var sectionName = window.location.hash.slice(1);
//then show the section
$('#service-display-box').show();
$(window.location.hash).show().scroll().siblings().hide();
})
I thought of a way to get the page to load without showing the section, but now the section does not appear when coming from a link.
This is what I did:
//Showing Service Section from Link
$(function(){
//get the section name from hash
var sectionName = window.location.hash.slice(1);
if (sectionName > 1) { //added
//then show the section
$('#service-display-box').show();
$(window.location.hash).show().scroll().siblings().hide();
} else { //added
$('#service-display-box').hide(); //added
} //added
})
How do I make this show only if someone comes from a link instead of on normal page load?
Click on any of the links and when you get to the new page you will see that the service-display-box does not display what-so-ever (this is due to my updated code from above - with the if statement). I am wanting to show the section when coming from the specific links otherwise I want the section to remain hidden unless one of the tabs is selected.
Please let me know if you have any questions.
<div id="service-display-box">
<div id="service-display-box-container">
<div class="service-item-box" id="service1">
<div class="service-item-title">DEMOLITION</div>
</div>
<div class="service-item-box" id="service2">
<div class="service-item-title">ENVIRONMENTAL SOLUTIONS</div>
</div>
<div class="service-item-box" id="service3">
<div class="service-item-title">CONCRETE CRUSHING</div>
</div>
<div class="service-item-box" id="service4">
<div class="service-item-title">ASSET RECOVERY</div>
</div>
<div class="service-item-box" id="service5">
<div class="service-item-title">SCRAP METAL RECYCLING</div>
</div>
<div class="service-item-box" id="service6">
<div class="service-item-title">FOUNDATION REMOVAL</div>
</div>
<div id="service-top">Back to all services</div>
</div>
</div>
#service-display-box {
margin: 50px 0;
display: none;
}
//For tabs to stay active
$('.service-tab-block').click(function() {
$('.service-tab-block').css({"background":"purple" , "color" : "#000"});
$(this).css({"background":"#000", "color":"#FFF"});
//To get the service display box to show
var item_number = $(this).attr('id').replace('service_tab', '');
$('#service-display-box').show();
$('html, body').animate({
scrollTop: $("#service-display-box").offset().top
}, 1500);
$('#service'+item_number).show().siblings().hide();
$('#service-top').show();
});
//To go back up to Service options
$("#service-top").click(function() {
$('html, body').animate({
scrollTop: $("#service-tabs").offset().top
}, 1000);
});
//Showing Service Section from Link
$(function(){
//get the section name from hash
var sectionName = window.location.hash.slice(1);
//then show the section
$('#service-display-box').show();
$(window.location.hash).show().scroll().siblings().hide();
})
hello i have jquery tabs and want to access them from url using # but know know how can I full fill with it
requirement is mywebsite.com/#show_page1 will show the page 1 content
and if access from mywebsite.com/#show_page2 will show the page 2 content
here is the my js code
$(window).load(function(){
$(document).ready(function(){
$("#nav_tabbed a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$("#menu_container div").hide();
$("#menu_container #show_"+id[1]).fadeIn();
// remove classes from all
$("a").removeAttr("style");
// add class to the one we clicked
$(this).css("background-color","#1aaede");
// stop the page from jumping to the top
return false;
});
$("#menu_container #show_page1").show();
});
});
and html i have is
<div id="nav_tabbed">
<a id="show_page1" style="background-color:#1aaede;">Page 1</a> <a id="show_page2">Page 2</a>
</div>
<div id="menu_container">
<div id="show_page1">
<!-- content here -->
</div>
<div id="show_page2">
<!-- content here -->
</div>
</div>
location.hash; will give you the hash value added in the addressbar and you can use it the way you need to. My suggestion is added below.
What seems to me you want to hightlight your link with the hash located in the browser's addressbar and respective div you want to show. If this is what you want to implement then you can try this with slight changes in the markup and js:
CSS:
.active {
color:red;
}
#menu_container div {
display:none;
}
HTML:
<div id="nav_tabbed">
<a href="#show_page1" class='active'>Page 1</a> <!--This lets you add hash in the addressbar-->
Page 2
</div>
<div id="menu_container">
<div id="show_page1" style='display:block;'>Page 1</div>
<div id="show_page2">Page 2</div>
</div>
JS:
$(function () {
// below works for hash added in the browser.
var hash = location.hash;
if(hash.length){
$('#nav_tabbed a').removeClass('active');
$('#menu_container div').hide();
$('#nav_tabbed a[href*="' + hash + '"]').addClass('active');
$('#menu_container div[id*="' + hash.slice(1) + '"]').show();
}
$(document).scrollTop(0);
// below works for click of the anchors
$('#nav_tabbed a').click(function(e){
e.preventDefault();
$(this).addClass('active').siblings('a').removeClass('active');
$('#menu_container div').hide();
$('#menu_container div[id*="'+this.getAttribute('href').slice(1)+'"]').show();
});
});
A sample fiddle.
your posts shows a little confusion on the topic.
so first for explanation:
there are two meanings of a #
in a url, the # is a reference to the location hash.
in jquery, the # is a reference to an element id.
you want to use the hash change in this case.
first of all... why do you wrap the window.load around the dom.ready event?
as far, as i understood, jquery's dom ready fires when the dom is ready, jquerys window.load fires, after all images, iframes, plugins etc. have been loaded. so a dom.ready inside a window.load is kind of unnecessary ...
next: ID's have to be unique - you can't give your anchor the same id as the assigned div!
so let's get down to business - the html:
<div id="nav_tabbed">
Page 1
Page 2
</div>
<div id="menuContainer">
<div id="page1" class="contentTab activeTab">123</div>
<div id="page2" class="contentTab">456</div>
</div>
we use activeLink and activeTab classes to determine which tab is currently open
the css just sets the background of the activeLink:
.activeLink {
background-color:#1aaede;
}
the js:
$(window).load(function(){
$(".contentTab:gt(0)").hide(); //on initial load, we hide all content tabs, despite the first one
$("#nav_tabbed a").click(function () { //the click handler for the navigation only toggles the class to change the background color
$(".activeLink").removeClass("activeLink");
$(this).addClass("activeLink");
})
if(location.hash) //here we check, if there already is a location hash set onload and then change to the desired tab
{
$(".activeTab").hide();
$(location.hash).show().addClass("activeTab");
}
});
//our hashchange event handles the loading of the desired tabs:
window.onhashchange = function () {
if(location.hash!=null) //this checks, wether the hashchange event has been fired, due to a deletion of the hash via url
{
$(".activeTab").hide().removeClass("activeTab"); //hide the current tab
$(location.hash).show().addClass("activeTab"); //show the clicked tab
}else //and per default show the first tab
{
$(".activeTab").hide().removeClass("activeTab"); //hide the current tab
$(".contentTab:first").show().addClass("activeTab"); //show the clicked tab
}
};
http://jsfiddle.net/ex46ndg1/3/
I am creating a page with 5 divs. I am using the following JavaScript code to smoothly move between them horizontaly :
$(function () {
$('ul.nav a').bind('click', function (event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
The Divs are something like this:
<div class="section white" id="section5">
<h2>Technologies</h2>
<p>
text
</p>
<ul class="nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
I want to start with div # 3 on page load. The only solution that worked is the onload function:
window.onload = window.location.hash = 'section3';
but unfortunately when I load the page the url address is
http://localhost:51551/trial1/MainPage.aspx#section3
even when I click on another page anchors (div) and go there the URL is stuck to MainPage.aspx#section3.
I tried the solutions here: jQuery: how to scroll to certain anchor/div on page load?
But I think because I am already using Javascript to navigate the divs, its not working. I want to Either:
Remove the address #section3 part and keep using the onload
function
Even better navigate to section3 at start and have
the url change when I change the section
I am using Visual Studio 2010 Express, with ASP.NET, JS and C#. on Windows 8.1
First the following important distinction:
jQuery's #section1 selector looks for an HTML element with ID "section1", i.e. <div id="section1"></div>
The a href's #section1 URL hash looks for an anchor with name "section1", i.e. <a name="section1"></a>
This is a major difference that you need to check and understand. So you would normally need:
<a name="section1"></a>
<div id="section1">... your content here ...</div>
But since you are scrolling horizontally, I am going to do this without the <a name=...></a> part and deal with the hash in the window load handler, as I will explain further down.
Next is, I would avoid naming a JavaScript variable "event" as that looks an awful lot like a keyword, so try renaming it to ev.
If you want the click handler (the function you bind to the click event) to not follow the link clicked on, that function should return false:
$('ul.nav a').click(function (ev) {
var anchor = $(this);
$('.viewport').stop().animate({
scrollLeft: $($(anchor).attr('href')).offset().left
}, 1500,'easeInOutExpo');
// Add the section ID to the URL
window.location.hash = $(anchor).attr('href').substring(1);
ev.preventDefault();
return false;
});
Then, I'd suggest you to move the <ul class="nav">...</ul> outside of the section divs, so you don't have to repeat it inside your divs. Because you seem to be scrolling left/right, I assume you are floating your section divs next to each other in a wide container:
<div class="viewport">
<div class="container clearfix">
<div class="section" id="section1">
<h2>Technologies</h2>
<p>Text</p>
</div>
<div class="section" id="section2">
... content ...
</div>
<div class="section" id="section3">
... content ...
</div>
</div>
</div>
<ul class="nav">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Using the following CSS (as an example for 3 600px divs floated next to each other inside a 1800px container, wrapped by a 600px viewport):
.viewport {
width: 600px;
overflow: hidden;
overflow-x: scroll;
}
.container {
width: 1800px;
}
.section {
float: left;
width: 600px;
}
For the clearfix class, refer to Bootstrap's clearfix.
Because you are scrolling horizontally, I think the <a name=...></a> things won't work, so I'd do an onload check for the hash, and scroll there when accessing the page with a preset hash. This has been done in the window load handler in the next snippet, together with starting in section 3 when there is no hash specified:
As for starting in section 3 on load, have this in your $(window).load() handler, for example:
$(window).load(function() {
var startSection = window.location.hash;
if (startSection == "") startSection = '#section3';
$('.viewport').scrollLeft($(startSection).offset().left);
window.location.hash = startSection;
});
Disclaimer: untested code! :) But please try these, and it should get you pretty close to what you are trying to achieve.
Hope this helps!
Why don't you scroll to that div on window load? And change bind with on, as of jQuery 1.7 .on() is the preferred method for attaching event handlers to a document
So your code should be something like this
$(document).ready( function(){
$('ul.nav a ').on('click ', function (event) {
var $anchor = $(this);
$('html, body ').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500, 'easeInOutExpo ');
event.preventDefault();
});
});
$(window).on('load', function () {
$('html, body').stop().animate({
scrollLeft: $('#section3').offset().left
}, 1500, 'easeInOutExpo ');
});
Please take a look at this FIDDLE that shows and hides the text in a container on click . What I'm trying to do is that when I click open the first hidden text and then scroll down to click open another one, I want it to scroll back to the sibling image of that opened text to keep it in view. How can I find the sibling element and scroll to it on click?
This one is not valid.
$('.slider2').click(function(e) {
var imageposition = $(this).closest('.imageclass');
$(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
});
HTML:
<div class="container" style="border:2px solid #222;">
<img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
<div class="slider2">Hi</div>
<div class="internal" style="display: block;">Text<p></p></div>
</div>
<div class="container" style="border:2px solid #222;">
<img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
<div class="slider2">Hi</div>
<div class="internal" style="display: block;">Text<p></p></div>
</div>
..............
JS:
$('.slider2').click(function(e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
var imageposition = $(this).closest('.imageclass');
$(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
});
$('.internal').hide();
You've at least a couple of problems here
$(this).closest('.imageclass') doesn't select the image that is previous sibling of <a>
even if you get your desired image, the moment your scrolling code runs, the image has not placed itself to its final position.
using $(document.body) to scroll the window (I'm doubtful about it myself)
Below code selects the right image element, gets the scrolltop at right moment, and scrolls the html, body using working syntax.
$(function () {
$('.slider2').click(function (e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
$('.internal').slideUp('normal');
var imageposition = $('.imageclass', $(this).closest('.container'));
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal', function () {
$('html, body').animate({scrollTop: $(imageposition).offset().top})
});
}
});
$('.internal').hide();
});
There's a bit of a problem with how your scrolling function works because the position of the active .container alters in relation to other containers(when active and inactive state).
Also, you should not be looking for the closest position but for its parent element.
Please take a look at my code: CSS
.slider2 {
margin:40px;
}
.internal p {
padding:5px;
}
.internal h3 {
text-align:center;
}
.container {
position: relative;
}
You might need to look for a way, to detect the height of an inactive container since I made mine as a static value.
JS:
$('.slider2').click(function (e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
var containerHeight = 205;
var containerIndex = $(this).offsetParent().index();
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
var scrollPosition = containerHeight * containerIndex;
$('body').animate({
scrollTop: scrollPosition
}, 'fast');
});
$('.internal').hide();