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.
Related
I'm working on putting together a portfolio site. It's coming along nicely, but I've hit a real shag.
I'm using one page, and have made four divs thus far to break up my work. I'll have graphic design pieces coming in from one side or the other as the user scrolls.
Now, I found WOW.js which is supposed to do precisely what I want it to, ie. make a graphic of mine show up only when the user scrolls down to it. BUT for the life of me, I cannot get it to work, and it's supposed to be so simple, doge style. Such amaze!
The graphic in question is a heart, and animate.css has a great 'pulse' bit of CSS I want to use. WOW.js is supposed to be fabulously with animate.css. But I'm completely lost. My JS skills are still very basic, so please be patient.
As the WOW.js docs state, I've linked to it with:
<link rel="stylesheet" href="css/animate.css">
(my CSS folder is named public, but I can't see that making a difference...?)
This goes at the bottom of my index page:
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
I added the CSS class to an HTML element like so:
<div class="wow"> Content to Reveal Here </div >
Then you're supposed to add the animate.css style to the element:
<div class="wow pulse"> Content to Reveal Here </div >
But I'm missing something, because nothing is working. I've googled this and I'm not the only person who's had issues with WOW.js, but I've tried everything, and now I turn to you.
Under the customize settings on the docs, it suggests advanced settings:
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0 // default
}
)
wow.init();
I'm thinking since this isn't SO AMAZE at all, there's gotta be another way for me to do this, but still be able to use a CSS animation.
LAST question: how do I make the pulse animation continue? It pulses a few times, then stops, but I want it to continue over and over. Suggestions?
Just put this code in your index:
<script src="//cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js"></script>
<script>new WOW().init();</script>
no need to call for
<script src="wow.js"></script>
couple things are happening here:
</div > is not a proper closing for an html tag.
if WOW is not defined then you most likely didn't include wow.js - make sure you have the right file (see what is inside) and the correct path. When you get stuck - Get rid of ALL console errors and make a minimum, bare bone solution that should work - it is less confusing and easier to find what is causing troubles.
as for repeating pulse animation - just don't. In the old days there were those <blink> and <marquee> tags and they are gone for a reason - you shouldn't use it. Same goes for Comic Sans unless your site is about doge.
now, the following example worked for me:
<html>
<head>
<link rel="stylesheet" href="animate.css">
</head>
<body>
<script src="wow.js"></script>
<script>
new WOW().init();
</script>
<img src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" /><br>
<div class="wow bounceInUp">
<img src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" />
</div>
<div class="wow pulse">
<img src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" />
</div>
</body>
</html>
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.
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 *)
I've added a flash gallery to my site and the required script is causing the background image to shift.
You can see the page here: http://www.arbitersoflight.net/media/screens.html
The script in question is the "swfobject.js". I've determined this by adding/removing the
<script type="text/javascript" src="/scripts/flashgallery/swfobject.js"></script>
line to my site (which is required to run the gallery). Obviously, due to the layout of my site, I cannot having the background being moved...so this is very annoying. Unfortunately I know next to nothing about coding so I lack the skills to find the problem myself. I would really appreciate any help you guys can give me here.
I'm not sure why this is happening, but if you add the following CSS to the following tags it will fix it:
#header { position:relative; top:15px; }
.scroll-pane { position:relative; top:-15px; }
EDIT:
Another reason this might be happening is from white-space in this script tag:
<script type="text/javascript" id="sourcecode">
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
A possible way to fix this would be to save that code to a file and include it as:
<script type="text/javascript" src="/scripts/jscrollpane/jquery.jscrollpane.init.js"></script>
So I was thinking a simple way to deal with javascript being disabled by the browser would be the following:
<head>
<title>JavaScript Test</title>
<noscript>
<meta http-equiv="Refresh"
content="1;url=nojs.html" />
</noscript>
</head>
And having the nojs.html have something like:
<p>Return to test after enabling javascrpt.</p>
At the crash page.
This isn't my preferred method, but it's nice and simple until something more graceful can be worked out for users without javascript.
However, it is not valid to put a <noscript> element in the head section. The preliminary tests worked anyway, of course, but I'm superstitious when it comes to my code being valid, plus I'd hate for this to actually fail a field test.
So is there a valid way to do this? Perhaps wrapping the noscript in another element, like an object tag? Or some even simpler way I'm not thinking of?
I am not sure why you need to redirect to another page instead of just showing a message. I use JS and a little CSS to handle these situations for me. Something like this:
<head>
....
<script type="text/javascript"> document.documentElement.className += " js"</script>
<link rel="stylesheet" type='text/css' href="css/layout.css" media="all" />
</head>
<body>
<div id="noscript">Please enable JavaScript, then refresh this page. JavaScript is required on this site</div>
<div id="wrapper">
...
</div>
</body>
Then in layout.css:
#wrapper { display: none } /* Hide if JS disabled */
.js #wrapper { display: block } /* Show if JS enabled */
.js #noscript { display: none } /* Hide if JS enabled */
By doing it this way, the class is applied to the html element before the page is rendered so you won't get a flicker as the non-JS content is swapped out for the JS content.
Doug's solution is pretty good, but it has a few drawbacks:
It is not valid to have a class attribute on the html element. Instead, use the body.
It requires that you know what display type to set the element to (i.e. ".js #wrapper { display: block }").
A simpler, more valid and flexible solution using the same approach could be:
<html>
<head>
<!-- put this in a separate stylesheet -->
<style type="text/css">
.jsOff .jsOnly{
display:none;
}
</style>
</head>
<body class="jsOff">
<script type="text/javascript">
document.body.className = document.body.className.replace('jsOff ','');
</script>
<noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>
<p class="jsOnly">I am only shown if JS is enabled</p>
</body>
</html>
With this, it's valid html (no class attribute on the html element). It is simpler (less CSS). It's flexible. Just add the "jsOnly" class to any element that you want to only display when JS is enabled.
The <noscript> tag cannot be in the <head>, it must be in the <body>
The common practice is to show a message instead of redirecting, as there is no way to redirect only if javascript is disabled.
You could do it the other way around, have the first page be nojs.html, and on that page use javascript to redirect to the main content.
If you truly want a valid way to do it, make your main page the nojs.htm page and use JS to hide all content before it's shown to the user and immediately redirect to the real main page using javascript.
I like Doug's solution. However, if you need to redirect, I would remember that while there is a spec and a standard, the world of web browsers is a dirty, imperfect world. Whether or not something is allowed by the spec is not as important as whether or not it works in the set of browsers you care about.
Just look at the source code of any major site... Most of them won't validate I'd bet :)
What about:
noscript{
z-index:100;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
min-height:1024px; background:#FFF;
}
And:
<noscript>
<p>Please enable Javascript on your browser.</p></noscript>