Automate on Scroll (aos) doesn't load in Wordpress - javascript

I am struggling with any task requiring the smallest bit of brain function. The task I'm currently struggling with is adding the AOS library to my site on Wordpress.
I added the following code to my full-width-page.php template in the Wordpress Editor:
<script> AOS.init(); </script>
In addition, I added the following code under Appearance > Theme Settings > Style > External JS field & External CSS field
<script src="uploads/aos-master/dist/aos.js"></script>
<link rel="stylesheet" type="text/css" href="uploads/aos-master/dist/aos.css">
After all of that, I put the data-aos attribute to html element that I want to animate, like so:
<div data-aos="fade-up";>
<h2>TEST TEST TEST</h2>
</div>
But then... nothing happens ;(
Please, if it's possible to set up, share with me what I'm doing wrong.

Are you sure aos stylesheet and javascript file loaded correctly? You can use Chrome's or Firefox's debugger on page (Chrome's Shortcut is Ctrl(or CMD)+Shift+i)
also you can change stylesheet and javascript file codes with code below;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.js"></script>

Related

Using external script on subPages?

I have a slight problem with using simple jQuery, css script (external) in my subpages. It works in index tho. It's supposed to slide menu pannel on left side of the page. Responsive menu basically.
Here is the js.
$("#res_menu").click(function(){
$("#left").css("left", "0px");
$("#left").css("top", "0px");
});
$("#res_menu_close").click(function(){
$("#left").css("left", "-999px");
$("#left").css("top", "-999px");
});
Simple script right ?
It's linked in the bottom of the page.
<script src="menu_res.js"></script>
jQuery script in header
<script
src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"></script>
Problem is it's not working on the subPages.
I have buttons in the other subPages too.
<a class="menu_button" id="res_menu" href="#"></a>
and
<a class="menu_button" id="res_menu_close" href="#"></a>
Im pretty new to the JS. Is there any way to tell if the script is even conncected ? Also it's a school project so nothing serious.
EDIT 1: There are no errors in the console.
be warned, I do not know what you mean, but i think you mean get the CSS sheet without coding it into HTML
<link rel="stylesheet" href="style.css">
This will import the CSS so all your ATR are in order for you to use.

How to set up some JavaScript into WordPress (API)

I have this code, and I cant get it to work in my WordPress, I have used the addons Insert Headers & Footers and also WP Coder... but I am not sure why it will not work, the page is just blank.
How can I get this to work? What should I place where in the WordPress site - plugins etc.?
I have tried to place this in the "WP CODER" under "HTML code":
But it does not work, the page is blank.
1) Add the following code to the <head> section of your website:
<link rel="stylesheet" type="text/css"href=”https://zellr.com/integration/kirpparikalle.css” />
2) Add the following code to the section of your page. Place it inside the element where you wish to see the login and registration forms.
<h1 id="kirpparikalle_title"></h1>
<br/>
<div id="kirpparikalle_container"></div>
<!-- Note: jQuery is requirement for the integration scripts.
If you already have jQuery included in your website, you can remove the next line. -->
<script type="text/javascript" ```src="https://zellr.com/integration/jquery.min.js"></script>
<script type="text/javascript" ```src=”https://zellr.com/integration/kirpparikalle_i18n.js"></script>
<script type="text/javascript">
$(function() {
KK_COMPANY = ' denlillelandsoldat ';
KK_CONFIG['redirect_url'] = 'http://denlillelandsoldat.dk/';
KK_LANGUAGE = 'da';
kk_show_default_login();
});
</script>
It should show some booking module on the page.
Try to copy this exact code and paste it where you want it to appear, you have odd characters in the code you've applied on your website. Also the js code might produce an error to made a little change to the wrapper
<link rel="stylesheet" type="text/css" href="https://zellr.com/integration/kirpparikalle.css" />
<div id="kirpparikalle_container"></div>
<!-- Note: jQuery is requirement for the integration scripts.
If you already have jQuery included in your website, you can remove the next line. -->
<script type="text/javascript" src="https://zellr.com/integration/jquery.min.js"></script>
<script type="text/javascript" src="https://zellr.com/integration/kirpparikalle_i18n.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
KK_COMPANY = ' denlillelandsoldat ';
KK_CONFIG['redirect_url'] = 'http://denlillelandsoldat.dk/';
KK_LANGUAGE = 'da';
kk_show_default_login();
})( jQuery );
</script>
Are you using block editor (gutenberg) or the classic editor?
In classic editor. Paste your codes inside text editor
Same concept in gutenberg tho.

Javascript(Jquery) executes in HTML header but not not when in an external JS file

I know this stuff has been asked before...but I am a bit confused about this still. I have my index.html file and I have a script tag linking to my external JS file. If I only have that script tag the JS does nothing, but if I copy the JS and paste it into it's own script tag in the HTML header it works just fine. There's gotta be something I'm missing with Jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.0.js"></script>
<link rel="stylesheet" href="FinalProjectCss.css">
<title>Dustin Naylor - Final Project</title>
<script src="FinalProjectJS.js"></script>
<script>
$(document).ready(function(){
$(".section").click(function(){
if($(this).next().is(":hidden")) {
$(this).next().slideDown("fast");
} else{
$(this).next().hide();
}
});
});
</script>
</head>
<body>
<span class="section">Click Me</span>
<div class = "hiddenDiv">
Oh hey there.
</div>
</body>
</html>
So the code in the last script tag that is Jquery stuff is exactly copied into a separate JS file named FinalProjectJS.js. In the current state this code is in it works as desired, but when I remove that chunk of code from the html file it doesn't work....Sorry for my nubishness, I'm rather new and any help would be great! thanks!
Can you write the contents of your jquery file: FinalProjectJS.js? The syntax for calling the external file seems to be correct. So I'm thinking it might be something about the path or the jquery external file contents itself. Make sure you don't include <script> tags on that file. Here's a sample.
Another thing, last time I've worked with jquery, I can't directly see it take effect when both my files are stored locally. It had to be stored in a server first, then accessed by my PC. Only then did my jquery took effect. A dev I worked with added some text to my Google Chrome's properties (target) so that even if my file is not stored in a server, I can see jquery take effect even if both my HTML and jquery files are stored locally.
...sorry, I'm not allowed to comment yet to clarify your post.
You must add the jQuery script tag before FinalProjectJS.js for the jQuery snippet to work.
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous">

make an unordered list into a drop down menu

If I have this code showing on Wordpress, what is the easiest way to turn this into a jump menu?
<ul class='toc-odd level-1'>
<li>It's finally here</li>
<li>Improvements</li>
<li>Handling</li>
</ul>
Can i use jquery like it showed in this thread: How to convert unordered list into nicely styled <select> dropdown using jquery?
and if so, where would i place the code examples shown in said post?
For starters, if you're new to jQuery, you might have noticed that you can create inline jQuery using script tags inside of your HTML web page, or you can create a separate .js file that is linked to your HTML file (preferred) using either a CDN (check it out here) or manually providing the script doc files yourself. I prefer using Google's CDN because they have plenty of servers that are most likely closer to the client, and the client only has to load the scripts once through the CDN.
In your HTML, provide the script tags, and then start working with JavaScript and jQuery!
<head>
<title>your webpage</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
//BELOW IS YOUR OWN SCRIPT FILE REFERENCE!
<script src="Scripts/Jscript1.js" type="text/javascript" ></script>
Also, if you would like the jQuery IntelliSense to work in the script file, all you have to do is add a reference link in the script file you are using!
/// <reference path="jquery-1.7.1-vsdoc.js" />
$(document).ready(function () {
$('.toc-odd level-1').hover(
function () {
//show its submenu
$('ul', this).slideDown(100);
},
function () {
//hide its submenu
$('ul', this).slideUp(100);
}
);
});
The above jQuery example is just 1 way out of millions that you could implement to render your code. If you have interest in learning a fast and concise library, then check out the learn jQuery in 30 days.

Greybox + Flowplayer problems

Hey all I am having a huge problem here evenafter following every step of the tutorial given here to put in a video on a popup greybox ..
The tutorial
now, the only change i have made is i have a folder inside the folder graybox called graybox which holds the JS and css files.
so my script code reads like this ..
<script>var GB_ROOT_DIR = "/greybox/";</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
there is a folder called video which has a video called video.flv.
now I have linked a text to open as shown in the tutorial .. the code is
<a title="Noodle Demo" href="player.html?filename=videos/noodle.flv">Demo</a>
when i click on the link on the web page the window opens up right but the window reads page not found .. I have the required player.html too and that is a copy paste from the tutorial, i;ve changed all the required version numbers of flowplayer etc. Please help me.
Use the rel tag. :)
<a rel="gb_page_center[560, 450]" href="player.html?filename=videos/noodle.flv">
God bless tutorials. For better centering you can get the middle of the site by jQuery for example.
<a rel="gb_page_center[560, 450]" id="player" href="player.html?filename=videos/noodle.flv">
<script type="text=javascript">
$(document).ready(function(){
cenx = $(window).width();
ceny = $(window).height();
$("#player").attr("rel", "gb_page_center["+cenx/2+", "+ceny/2+"]");
});
</script>
But it requires jquery from jquery website.

Categories

Resources