Skrollr not working on mobile devices - javascript

so this seems to be a common question, however none of the answers have provided me with any joy. I've fully read the Skrollr Documentation and can conclude I'm totally at a loss here.
My basic html markup:
<html>
<head>
<!-- Head Stuff -->
</head>
<body>
<div id="navbar">
<!-- This is a fixed position div -->
</div>
<div id="skrollr-body">
<!-- Rest of my site -->
</div>
<script src="skrollr.min.js"></script>
<script>
skrollr.init({
forceHeight: false
});
</script>
</body>
</html>
So you can see as the documentation states my fixed element is outside my other content.
I'm using Version 0.6.26 (2014-06-08) - downloaded from the GitHub page.
Mobile testing on iPad 2, iOS7 and Google Nexus 4, Android 4.4.4
Thanks in advance for any suggestions/help

I simply hadn't styled/set a height on the division skrollr-body. I fixed simply by adding:
#skrollr-body {
float: left;
width: 100%;
height: 100%;
}

According to this (about half way down under the section mobile support), to make it work on mobile devices you need a #skrollr-body on your page, which I did not see in your source.
Also, this github issue seems to address this problem.

Related

AOS (animate-on-scroll) elements invisible on static site

I'm making a site for a client and trying to implement AOS library to make it look more dynamic.
I've followed instructions from the GitHub :
Add to <head>
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
Add before </body>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init();
</script>
No luck. I've applied data-aos="fade-in" to a div in the Services section of this site (it should be obvious with the missing box) and it doesn't display at all for me.
Can anyone help?
Thank you,
Jack
I've looked at the site and I think it has something to do with this css:
html, body {
overflow: hidden;
overflow-y: scroll;
}
This also caused a double scrollbar for me, you should remove those two lines.

My JQuery function wont activate

I'm trying to get my background image to move with my mouse as it moves upon the #titleheader class objects. The page renders fine but the functionality doesn't activate. I'm working in Django. I've added the first (top of the page) #titleheader object from the base template which extends into a home template which contains the other #titleheader object. I've compiled both templates into what chrome would see when rendering the page below. I suspect suspect something is wrong in the line: $(this.target).css('background-position', event.pageX + 'px ' + event.pageY + 'px'); but I'm unable to figure out what to change in my code.
My index page is as follows:
<!doctype html>
<html>
<head>
<style> #landing-content {
background-size: 110%;
height: 110%;
width: 110%;
overflow: hidden;
background-repeat: no-repeat;
} </style>
<title>Home Page</title>
<link rel="stylesheet" href="/static/courses/css/layout.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".titleheader").mousemove(function(event){
$(this.target).css('background-position', event.pageX + 'px ' + event.pageY + 'px');
});
});
</script>
</head>
<body id="landing-content" background="/static/courses/images/back7.jpg">
<section class="site-container slider">
<article class="glass down">
<div class="titleheader" style="width:100%;height:80px;position:absolute;top:0;bottom:100%;left:0;right:0;background-color:rgba(229,240,247,0.7);border-width:1px;z-index:0;border-bottom-style:solid;border-color:#f0fafb;">
<a href="/" class="titleheaderimg">
<img src="/static/courses/images/tz_blue2.png" alt="G" class="titleheaderimg" style="z-index:100;opacity:1;align-self:center;position:relative;top:9%;left:1%;">
</a>
</div>
</article>
<div style="height:100px;">
<p>
</p>
</div>
<div class="centrediv" style="width:720px;position:absolute;top:26%;bottom:45%;left:0%;right:0;margin:auto;background-color:rgba(229,240,247,0.7);border-radius:20px;border-color:#f0fafb;border-width:1px;">
<h2 style="text-align:center;vertical-align:middle;opacity:1">Hi,<span><br><br></span>We are a <span>XYZ based team</span> that works with educators to improve their efficiency using state-of-the-art language processing technology.<span></span>
<br><span>Know more.</span></h2>
</div>
<div class="centrediv" style="position:absolute;top:86%;bottom:0;left:47%;right:0;margin:auto;">
<h3>Contact us.</h3>
</div>
</section>
</body>
</html>
UPDATE:
The code is updated now and there is no error in console, pycharm, chrome dev tools, or anywhere. Still the background doesn't move! Can someone help me with this issue please? Thanks!
According to the MDN on mouseevent.pageX,
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
You said you're using Chrome, and Chrome is listed as the only browser supporting the pageX and pageY accessors, but it might be worthwhile to consider another way. MouseEvent.clientX is supported on all modern browsers - could you get that to work?
Also, I've had trouble with the $(this) selector - I prefer to use a fully qualified element selector when the method will only be dealing with one element anyways. Might be worth trying.
Good luck!

Run Skrollr In IFrame

I am attempting to run some very simple Skrollr animations in an IFrame. When I populate the IFrame with the simple HTML Skrollr outputs the error to the console (in FireFox):
'Not well formed'
I have confirmed that the IFrame contents are correct and run just fine if they are not in an iframe and in a standard webpage. And I've confirmed that the Skrollr javascript file/s are loading successfully. All CSS, JS and images are all on the same domain as the parent webpage so there's no cross-domain occurring. The problem exhibits itself when the content is placed in an IFrame. Which makes me think this is a Cross-Scripting issue or that Skrollr is coded to detect cross-domain/cross-scripting?
Any idea's whats going wrong and how I can overcome this? I can provide a simple example if you wish. Hoping to grab Prinzhorn's attention, yes I know Skrollr's not currently maintained and that IFrame's are not officially supported but if I have an idea of whats going wrong or what the problem is I can fork Skrollr and add this functionality.
Edit: Heres a simple JSFiddle example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tasks</title>
<style>
#main-container {
width : 1200px;
height : 1000px;
background-color : #eee;
}
iframe {
width: 100%;
height: 100%;
overflow: scroll;
}
</style>
</head>
<body>
<div class="container text-center">
<button id="load-btn">Load Iframe</button>
<br/>
<div id="main-container" class="text-center">
<iframe id="mf-preview" frameborder="0"></iframe>
</div>
</div>
<!-- Javascript files -->
<script src="js/custom.js"></script>
</body>
</html>
everything is working brother
when the size of your iframe is more then 1000px then it will show the scroll bar
Like example :
<iframe id="mf-preview" src="http://onhax.net" frameborder="0"></iframe>
I have add the source of iframe which is larger then 1200px
and after add this like it will show the scroll bar
check it in JSFiddle

How to handle conflicting libraries? - mathquill vs bootstrap

I'm having a sort of conflict between two libraries I'm using, Bootstrap and Mathquill. I'm using bootstrap for the layout, structure, and overall UI of the website, and Mathquill for interactive LaTeX rendering- basically, letting the user type in math in a nice, "textbook style" format.
My problem is that bootstrap seems to conflict with Mathquill, in the rendering of the math. Here is the structure of my page:
HTML
<div id="container">
<span id="input" class="mathquill-editable"></span>
</div>
CSS
#container {
padding: 5px;
width: 80%;
}
#input {
width: 100%;
padding: 15px;
margin: 5px;
}
Without Bootstrap running, the math renders perfectly. Here is a fiddle, and below is a screenshot:
With Bootstrap, I have the same code, except that I add the classes panel and panel-default to div#container. User inputted math, doesn't render well, because the spacing seems to be wrong, and it doesn't respect the boundaries of span#input. Here is a fiddle, and below is a screenshot:
I think the problem here is the bootstrap causes MathQuill's math spans (inside of span#input) to have more padding, thus the problems with MathQuill. Is there a way to let bootstrap ignore the area inside span#input?
Obviously, I could just copy the styling I need from bootstrap and just apply it to the areas I need the styling for, but this would be a hassle considering that I'm using it quite extensively.
Any thoughts?
This can be corrected by modifying the mathquill-rendered-math class in mathquill.css file.
just add the following.
.mathquill-rendered-math * {
box-sizing: content-box;
top: auto;}
You could use a iframe for applying the mathematical stylesheet only. I don't think it will cost too much speed to load if you're using MathQuill extensively.
I would do something like this:
<html>
<head>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<iframe src="math.php#f=2*2"></iframe>
<iframe src="math.php#f=3*5"></iframe>
</body>
</html>
And then let math.php output something like this:
<html>
<head>
<link href="mathquill.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
// Generate content dynamically with JavaScript from parameter `f` so the this page can be cached.
</script>
</body>
</html>
Another approach would be creating your own custom bootstrap stylesheet. You can download the LESS sourcecode on its website.
Thanks #Tim for the great answer, but I found a better solution here. I will wrap the rules in my own class bootstrap-enabled, so that bootstrap's styles only apply where I want them to.
What I've done to solve this is find the areas where they conflict and use my custom CSS to override Bootstrap for those elements.
For instance, the powers look bad/go beyond the border because of
sup {
top: -0.5em;
}
in Bootstrap. I've reset this to 0 for mathquill elements in my CSS.
You correctly point out that Bootstrap is fiddling with padding, which makes the denominator wrap around. Specifically Bootstrap uses "border-box" rather than the default "content-box" for box-sizing. Setting:
.denominator {
box-sizing: content-box;
}
fixes this.
This fixes the two problems in your example. I'll update this post as I find more conflicts (and their sources).
I just solved mathquill + bootstrap conflict by adding css-resetter from this answer into beginning of mathquill.css (change .reset-this to .mathquill-rendered-math *)

jQuery Mobile Beta: can no longer use $('[data-role=header]')?

I used to be able to get hold of
$('[data-role=header]').first().height()
in alpha with jQuery 1.5.2, but no longer can in beta with jQuery 1.6.1. Has something changed?
Full code - this writes 0 to console.log...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
console.log($('[data-role=header]').first().height());
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
//lots of code
</div>
</div>
</body>
</html>
However, change this to jQuery 1.5.2 and jQuery Mobile alpha:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
and it writes the non-zero height of the header div.
Incidentally, it is also non-zero with jQuery 1.6.1 but without jQuery Mobile. So it's something to do with the jQuery Mobile rendering.
Can't see anything in the release notes to suggest what might have happened, but I'm no jQuery expert.
The change that is causing the difference is "Responsive design helper classes: Now deprecated"
We include a set of responsive design helper classes designed to make it easy to build a responsive design that adapts the layout for various screen widths. At the time, we went with a system of dynamically appended min- and max-width classes on the body that are updated on load, resize and orientation change events as a workaround for the limitation that Internet Explorer doesn’t support media queries.
Basically, the page is getting min-height set to the current page height in the beta which is overriding the .landscape { min-height: 300px; } in the alpha.
It looks like you need to use CSS Media Queries if you want a page layout that changes or you could just add CSS style="height:43px" on the the header if you need a fixed height.
Seems like the page is not ready when you query the height(). There is no document.ready for jQuery.mobile. It doesn't explain why there is a difference between alpha and beta, but I guess a code path changed that exposed the issue.
Wrapping the query in a different event, returns the height as expected.
$("div:jqmData(role='page')").live('pageshow',function(){
console.log($('[data-role=header]').first().height());
});
I found this by examining the offsetHeight of the DOM element in the Chrome console which was non-zero but, as you reported, the height() was always reporting 0. I then created an link when clicked output the height and it was non-zero. I then realised that the height() was being called before the page was fully ready.
Relevant - jQuery mobile $(document).ready equivalent
Looks like they did change some of the syntax, Docs:
http://jquerymobile.com/demos/1.0b1/docs/api/methods.html
When finding elements by their jQuery
Mobile data attribute, please use the
custom selector :jqmData(), as it
automatically incorporates namespaced
data attributes into the lookup when
they are in use. For example, instead
of calling $("div[data-role='page']"),
you should use
$("div:jqmData(role='page')"), which
internally maps to $("div[data-"+
$.mobile.ns +"role='page']") without
forcing you to concatenate a namespace
into your selectors manually.
Try this:
$("div:jqmData(role='header')").first().height()

Categories