I am trying to incorporate a full HTML page within the existing one using basic web technologies on an iPad web app, without utilizing frameworks like Sencha. The objective is to load an article page, complete with its own JavaScript and CSS, into a new div and smoothly transition it (sliding effect), but I'm encountering issues.
When attempting to use the jQuery load function, the CSS/JS files are not loading correctly and the functionality only works in Chrome, not on iPads. Is there a more effective approach to achieving this?
CSS:
#content-container {
}
#article-container {
position: absolute;
left: @defaultWidth;
width: 100%;
height: 100%;
background-color: @darkGreyColour;
-webkit-transition: left 1s ease-in;
}
#content-container.animate {
left: -100%;
}
#article-container.animate {
left: 0;
}
JS
function animateTransition(event) {
$('#article-container').load('/ #main', function() {
console.log("Animating...");
$('#content-container').addClass('animate');
$('#article-container').addClass('animate');
});
}