make an unordered list into a drop down menu - javascript

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.

Related

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.

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

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>

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">

How do I include jQuery code in my node.js web app?

so I've been working on a (fairly simple) RESTful app using node.js, and I've made it towards the very last bit, now the only bit missing is using jQuery to manipulate the html page so I can edit the content of the html - and it's driving me absolutely mad.
I took the try.jquery.com tutorial, and it was pretty smooth; I'd by no means call myself a master of jquery, but I have very little trouble writing the code for basic html manipulation, except I never really considered where the jquery code would go. I've tried a bunch of different stuff and only one (really inconvenient) way has worked, so I was wondering if I could get some clarification.
(Note: all the js files are in the root folder, and index.html is in root/public; and I'm basically just running app.js through npm/package.json)
I've tried including the jQuery code in the main app.js file:
app.js
//some imports/requires here
var $ = require('jquery');
//more imports/requires here
//error; document is undefined
$(document).ready($('h1').text('Im Here');
app.get('/', function (req, res) {
res.sendFile(__dirname+'/public/index.html');
});
index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<title>Inspiratorator</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script="../app.js"></script>
I've tried including the jQuery code in its own file (tried just letting the code sit in the js file, and tried exporting the code as a function and calling it from app.js - both did nothing):
jusQueryin.js
var $ = require('jQuery'); //tried with and without this
$(document).ready(function () {
$(' button ').on( 'click', $('h1').text("I'm here") );
console.log('kpa');
});
index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<title>Inspiratorator</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script="../jusQueryin.js"></script>
I've also tried (this worked, but I don't know how I would deal with the code in here from other .js file, if it is possible):
index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<title>Inspiratorator</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
$(document).ready(function () {
$(' button ').on( 'click', $('h1').text("I'm here") );
console.log('kpa');
});
</script>
I've also tried different variations(i.e. including the 2nd part of the ready function in a function (or not), using an onClick event inside the dom.ready function, etc..), but the only one that worked was the last approach
Ideally, I'd like to be able to use the jQuery code inside app.js, less ideally would be in its own file; or if I have to include it inside the html file for some reason, I would at least need to be able to communicate with the code in the script block so that I can give it info from the database and so on.
Remeber one thing jQuery needs a window object to work. The first functionality of jquery is as dom query, dom is within a window object. As a result you must load the jquery and attach it to a window object.
As a node app you will have a browser window as a view to your app. Try adding jquery to that window from a CDN, add your requires there, voila the containing scope(window) which contains jquery now as global passes it also to the newly required file.
Error: jQuery requires a window with a document
index.html
<script>
window.$ = window.jQuery = require('./node_modules/jquery');
</script>
<script>
var UI = require('./controllers/UI');
UI.init(window);
</script>
Now var UI, which is a module in my case, contains

Prepare jquery before jquery and page load

I have recently discovered the new trend of including all .js script at the end of the page.
From what i have read so far seems pretty ok and doable with an exception.
The way I am working is using a template like:
<html>
<head>
<!-- tags, css's -->
</head>
<body>
<!-- header -->
<div id="wrapper">
<?php
include('pages/'.$page.'.php');
?>
</div>
<!-- footer -->
<!-- include all .js -->
</body>
</html>
Now, if I want to use this example on my page http://www.bootply.com/71401 , I would have to add the folowing code under my jquery inclusion.
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
But that would mean I either use that in every page - even if I do not have use for it, either generate it with php in the $page.'php' file and echoing it in the template file, after the js inclusion.
I am sure though, better methods exist and I don't want to start off by using a maybe compromised one.
Thanks!
Please avoid using inline scripts as they are not good maintainable and prevent the browser from caching them. Swap your inline scripts in external files.
Fore example you could put all your JavaScript in one file an check the presence of a specific element before initialize the whole code. E.g.:
$(document).ready(function(){
if($('.thumbnail').length) {
// your thumbnail code
}
});
A better way to execute "page specific" JavaScript is to work with a modular library like requirejs. You can modularize your scripts depending on their functionality (like thumbnails.js, gallery.js etc.) and then load the necessary script(s) depending e.g. on the existence of an element:
if($('.thumbnail').length) {
require(['ThumbnailScript'], function(ThumbnailScript){
ThumbnailScript.init();
});
}
The best way you can go is create a separate file for this code.
Let's name it app.js. Now you can include it under the jQuery inclusion.
<script type="text/javascript" src="app.js"></script>
This will prevent code repeat.
One more thing, pull all the code in $(document).ready(). Here is an example. So your app.js file will look like this:
$(document).ready(function(){
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
})

Categories

Resources