I am building a website in which a div needs to slide in from the left to the right when it is scrolled into view. I am using the AOS library to animate it, but it is not working unless I scroll the element into view, and then refresh the tab.
Here's my HTML's head:
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
And my body content:
<div class="aos-item top" data-aos="slide-right">
<h3><em>Header Here</em></h3>
<p>
<big>
Content Here.
</big>
</p>
</div>
<script>
AOS.init();
</script>
Is there something wrong with my code? Or is it the library? If it is the library, are there any good alternatives?
Related
I try to load a sticky navigation bar header on various static html pages.
I use this jquery script to do so:
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
and this to load it where I want
<header id="header" class="header-transparent header-transparent-light-bottom-border header-transparent-light-bottom-border-1 header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}">
</header>
Everything works fine except for the sticky part of the navigation bar. For a reason unknown to me it decides to act as a non-sticky navigation bar and scroll with the content of the page.
Please make sure your CSS is loading properly & is not overridden. Check browser console to see Javascript errors & also check the style you added is being implemented or not.
Another workaround, Please try adding inline-style:
<div class="header" style="position: fixed; top: 0;" >
<h2>My Header</h2>
</div>
I am loading a large image for the background of my website, so instead of having it messy I decided to add a nice little preloader with CSS and Jquery.
Right inside the <body> tag I have:
<!-- CSS Spinner -->
<div class="spinner-wrapper">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
<em class="spinner-text">One moment</em>
</div>
</div>
Then, before the closing </body> tag I have this script:
<!-- Spinner -->
<script>
$(document).ready(function() {
$(window).load(function() {
preloaderFadeOutTime = 500;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
});
</script>
When I open the index.html file directly, it works perfectly, but when I was trying to load it on my website (link) it just shows the preloader forever.
Interestingly, I've found that if I open the network panel in the developer console, most of the time the preloader works as it is supposed to.
Does anyone know what the heck is going on here?
Try to import your jQuery inside the head tag.
Adding this attribute (data-cfasync="false") within JS will not work to exclude the script from Rocket Loader. Rocket Loader ignore individual scripts by adding the data-cfasync="false" attribute to the relevant script tag, for example:
<script data-cfasync="false" src="/javascript.js"></script>
I'm trying to start with jQuery Mobile but I'm stuck when I'm trying to create a left panel with an overlay slide. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>- test-</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<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.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="panel" id="testPanel" data-theme="e" data-position="left" data-display="overlay">
<h3>Default panel options</h3>
<p>This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is <em>before</em> the header, content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
</div>
<div data-role="header">
<h1>test</h1>
Contact
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
<h4>Copyright 2013 - All Rights Reserved -</h4>
</div>
</div>
</body>
</html>
It doesn't work, when I'm clicking on my link button I have this message "Error loading page" and the content of my panel is already shown in the page. Thanks for your help!
Seems like you're using outdated versions of both jQuery and jQuery Mobile frameworks. I would suggest updating to the latest release versions.
Here's a working demo with your same markup using jQuery 1.9.1 and jQuery Mobile 1.3.1
Sliding panels were introduced in JQM 1.3 version. So it won't work for other versions. USe jQuery 1.7.2- 1.9.1 for JQM 1.3
See the blog post for more details : http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/
If this is not your index page then you are most probably navigate to it through an <a href="yourpage.html>Page</a> in this case jquery uses Ajax request to navigate from one page to another the ajax request does not load the whole content of your page , it only loads the content of the <body> tag i.e any scripts that you are writing inside the <head> tag will not be loaded thus the page will not work properly and you will face error
to solve this you need to use data-ajax="false" inside the <a> attribute to prevent jquery mobile to use Ajax call to load your page.
if it is your index page then please past the js code so we can check it
in all cases check these link
for loading jqm pages and this link problem of ajax call in jqm
I am using JQuery Mobile to develop my mobile website. Currently, I have to set the 'data-theme' property several times throughout my HTML document to be able to incorporate a particular theme. Is it possible to set the 'data-theme' property once, maybe in a javascript function, or something to that effect? The solution would need the theme to style all my elements. I attempted to solve the issue using CSS style-sheets, but it failed to work as a solution.
My Webpage's HTML:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.mobile-1.0/demos/jquery.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="CodeGeneral.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.css">
<link rel="stylesheet" href="StyleMaincss.css">
<title>Home</title>
</head>
<body onload="GenerateData();" data-role = "page" >
<div data-role="header" class="HeaderBar">
<img src="Logos v2/Header.png" alt="" class="HeaderImage">
</div>
//Content on page
<div data-role="footer" class="NavBar" data-position="fixed">
<div data-role="navbar">
//Navigation button creation
</div>
</div>
</body>
My javascript:
$(document).delegate("[data-role='page']", 'pagebeforecreate',
function () {
$(this).attr('data-theme', 'a')
}
);
function GenerateData() {
//Things carried out during loading
}
This is from the jQuery Mobile Docs:
The data-theme attribute can be applied to the header and footer
containers to apply any of the lettered theme color swatches. While
the data-theme attribute could be added to the content container, we
recommend adding it instead to div or container that has been assigned
the data-role="page" attribute to ensure that the background color is
applied to the full page. When this is done, all widgets on the page
will also inherit the theme specified in the page container. However,
headers and footers will default to theme "a". If you want to have a
page with, for example, only theme "b" for all its elements, including
its header and footer, you will need to specify data-theme="b" to the
page div as well as the header and footer divs.
Source: http://jquerymobile.com/demos/1.0/docs/pages/pages-themes.html
So basically if you add data-theme="a" to the data-role="page" tags then everything should inherit the a theme. You can test that by messing with the "theme swatch change" links at the top of the link above.
UPDATE
To programmatically change the theme of a page add this code to your site:
$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
$(this).removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e').addClass('ui-body-a').attr('data-theme', 'a');
});
But this creates overhead for the user's browser while rendering the website so I suggest altering the hard-coded data-theme attributes on the data-role="page" tags.
UPDATE
You can also do this inside the mobileinit event handler by changing the page prototype:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind('mobileinit', function () {
$.mobile.page.prototype.options.theme = "a";
});
</script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
This will make any page without a set data-theme attribute default to the a theme.
Here is a demo: http://jsfiddle.net/tEbD5/3/
I'm using this plugin to show lightbox on a website
http://www.zurb.com/playground/reveal-modal-plugin
I want to load some modal automatically when the page load.
I try using this but didn't work:
ON HEAD
<!-- REVEAL LIGHTBOX -->
<script type="text/javascript" src="jquery.reveal.js"></script>
<link rel="stylesheet" href="reveal.css">
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#flyer').reveal();
});
</script>
<!-- REVEAL LIGHTBOX -->
ON BODY
<div id="flyer" class="reveal-modal large">
<h1>Ahora tenemos flyer y todo</h1>
<div id="flyer-img"></div>
<a class="close-reveal-modal">×</a>
</div>
What I'm doing wrong?
This is the page that I'm working
www.cosaslindas.com/beta
Many thanks.
Try adding this after the $('#flier').reveal();
$('#flier').trigger('click');
This issue on Github explains how to do it. It's not a feature of Reveal, but it looks like it can be used to work. You need to have an element (in your case, #flyer have the attribute "data-reveal-onready").
Ive been looking to the modal plugin and i think the reveal function will only bind to a tags with the data-reveal-id attribute.
Not sure if this will work but i'd say give it a try!
add to you html:
<a id="triggerflyermodal" href="#" data-reveal-id="flyer" style="display:none">This is hidden</a>
And change the call to this:
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#triggerflyermodal').click();
});
</script>
EDIT:
Your loading jQuery library twice!
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
And
<script src="js/jquery.min.js" type="text/javascript"></script>
Trying removing the last one.
Edit2:
I just tested this in jsfiddle. If you remove the 2nd jquery library from your header your script should run fine!