How to get jquery to work on WAMPserver? - html

I am a jquery beginner and i have set up a wamp server to practice with html and jquery but i cant seem to get jquery to work. I have written a simple jquery code to test it.
This is my html code:
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id= "wrapper">
<div class="intro"><BUTTON type="button">Who am I?</BUTTON></div>
<div class="contact"><BUTTON type="button">What am I?</BUTTON></div>
<div class="exp"><BUTTON type="button">Experience</BUTTON></div>
<div/>
</body>
</html>
jquery.js code:
$(document).ready(function(){
$('.intro').onClick(function(){
$(this).fadeOut('slow', 300);
});
});
I am not sure if linking my jquery page correctly is the problem or the wamp server.

First WAMPServer has little to do with jQuery code other than serving it to the browser, so its not a WAMPServer issue.
A couple of thing are wrong with the jquery code.
First there is no onClick function, you should be using click so
$('.intro').onClick(function(){
should become
$('.intro').click(function(){
Secondly this duration can be either "slow" denoting 600 milliseconds or a number of milliseconds. You have used both and thats not valid. In fact parameter 2 should be a callback function that will be run when the fade is completed. So
$(this).fadeOut('slow', 300);
becomes
$(this).fadeOut('slow', function(){
// fade complete,
// you dont have to do anything in here if you dont want to
});
In fact you dont even have to use the second parameter if you are not going to do anything after the fade is complete. So it could be written as
$(this).fadeOut('slow');
So your script slightly recoded with all that in mind would be
$(document).ready(function(){
$('.intro').click(function(){
$(this).fadeOut('slow', function(){
// done
});
});
});
Or probably a better solution if you dont want to do anything when the fade is complete is
$(document).ready(function(){
$('.intro').click(function(){
$(this).fadeOut('slow');
});
});
And that should work as you expected.
Basically you need to look closer at the JQuery manual here

Related

How Can I link several HTML files into a singular file

Im looking to figure out how to compile a couple of html pages into one page. like if i made a triangle in one html page, how would i link it with another html page that has a rectangle for example so that they both show up in one page. of course im not trying to figure out how to do this specifically but i want to generally know how to do it.
With jquery you can do it like so:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$("#includeContent").load("fileName.html");
});
</script>
</head>
<body>
<div id="includeContent"></div>
</body>
</html>
source: https://www.codegrepper.com/profile/abutahir

Use Nivo graph lib in a single HTML page (React)

I have a single HTML page with React (build manually without ANY tools, just a text editor).
This page is working correctly. Now, I would like to add a PIE Chart with NIVO lib.
When I add the script (CDN) I got the following error in console:
exports is not defined
I can solve this by creating a fake exports var = {} (is that a good solution ?)
But then I have a new error:
require is not defined
Do that means the CDN link from NIVO is incorrect ? How to solve this ?
Alternative: I am open to use another lib working with React. But I want to only use CDN links and a text editor to achieve that.
Full HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Batch stats</title>
<script>let exports = {};</script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react#16.7.0/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#nivo/pie#0.61.1/dist/nivo-pie.cjs.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Page(props) {
return (
<div>
<h1>Hello World</h1>
<div>How to add a PIEChart ?</div>
</div>
);
}
ReactDOM.render(<Page version="v3"/>, document.getElementById('root'));
</script>
</body>
</html>
Thanks
Nivo do not support it.
you should use the UMD build, however, you'll need a bunch of extra
dependencies, including D3 packages which are using modern JS
features.
https://github.com/plouc/nivo/issues/959

JQuery UI in Google Apps Script HTML Service very slow

I'm giving Google Apps script HTML services a try with JQuery UI.
I created a simple test case with a date field but the responsiveness of the datepicker widget is very low. It takes at least 3 seconds for the datepicker to show up. Navigating to the next month also takes 3s.
Is there anything I can do to improve the performance of JQuery UI?
Here's the HTML file:
<html>
<head>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#date').datepicker();
});
</script>
</head>
<body>
<input type="text" name="date" id="date">
</body>
</html>
And the call from GS:
function doGet() {
return HtmlService.createTemplateFromFile('test').evaluate();
}
The console log shows:
Node not editable; no action performed. es53-taming-frame.opt.js:419
ode not editable; no action performed. es53-taming-frame.opt.js:419
bad value `fixed` for CSS property position es53-taming-frame.opt.js:419
https://ssl.gstatic.com/caja/4969/es53-taming-frame.opt.js?debug=1
This is a known issue and we are working on speeding it up.

Loading content using AJAX and jQuery

I am a newbie to jQuery and was trying to load content dynamically using AJAX and jQuery using the following code but its not working.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$(".text").load("http://api.jquery.com/get/");
});
});
</script>
<title>AJAX with jQuery</title>
</head>
<body>
<div class="text">Sushil</div>
<button>Load Text</button>
</body>
</html>
You are violating the same origin policy. Just open your console and see the error message when you click the button. Things will become clearer to you. If not please get back
I ran your code and I got this error:
XMLHttpRequest cannot load http://api.jquery.com/get/. Origin null is not allowed by Access-Control-Allow-Origin.
I googled it and I got this: Origin null is not allowed by Access-Control-Allow-Origin

displaying <div> in transparent popUp

i need to display the section as PopUp while onload(). but i don't know how to call this javascript function(function($)). name has confused me. also if any other way to call this div section as popup .please sugesst. Thanks
<html>
<head>
<script>
// function name is function($)
function($){
}
</script>
</head>
<body>
<div>
<!-- body of the popUp -->
</div>
</body>
</html>
The $ function is probably the one defined in jQuery, so you will need to include the jQuery JavaScript library if you want to use it for showing a pop up.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Including just this library will define the $ function and you can then use jQuery functions in your JavaScript code. However this will not create a pop-up. There are many jQuery plugins that can be used to create a pop-up.
jQuery dialog?
http://jqueryui.com/demos/dialog/
Loads of examples on there