I'm new to JavaScript and I'm trying to get a slideshow working in my website. I'm following this tutorial: http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited
Unfortunately it doesn't go into a beginners level of detail as to how to get it installed. I know what I should do with the HTML and the CSS but I'm not sure where I should be putting the JavaScript. Does it go in a separate file or something? How do I get it to work?
Also I'm trying to do this within cakephp so if there's any specific cakey thing I can do that'd be awesome!
Copy all that JavaScript on your referenced page. Save to a new file slide.js or something like that.
Edit your HTML document to include a reference to the jQuery libraby, and that new JavaScript file you've just created:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://mysite.com/slide.js" />
You can put JavaScript in an external file with a .js extension, and include that in an HTML page using the script tag:
<script type="text/javascript" src="yourscript.js"></script>
Alternatively, you can write the script directly in the script element:
<script type="text/javascript">
//Your script here
</script>
Also note that as the tutorial you are following uses jQuery, you will need to download and include the jQuery library in your page.
The script tags can be placed anywhere in the document, but are usually found inside the head tag, or just before the closing body tag.
Welcome on SO Helen.
That script uses the jQuery library so you have to also include that. http://jquery.com/
JavaScript can best be placed in seperate file with the extension .js
Add the javascript files just before the </body> tag on your page like:
<script src="/js/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/js/jquery/jquery-slideshow2.js" type="text/javascript"></script>
Related
I'm building a website using a premium html template, part of the template is in Javascript. So in the template I have something like this - its in the 'master template' every page.
//Template JS
<script src="/js/core.min.js"></script>
<script src="/js/script.js"></script>
Also as part of this website I am using an ecommerce plugin and those files also need to be on the page, so something like this:
//Plgin JS
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/underscore.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/App_Plugins/Merchello/client/js/merchello.ui.min.js"></script>
<script src="~/App_Plugins/Merchello/client/js/merchello.ui.settings.js"></script>
<script src="~/App_Plugins/Merchello/client/js/fasttrack.js"></script>
The problem is the JS conflicts when they are all on the page together. is there a way to group the java script files in a way they they can only see whats in that group... like a namespace kind of concept?
Or will I just have to unpick it all?
Using script tags in the same html page no because browser creates only one global space which visible and shared between all scripts.
You can try to use some module bundlers like webpack, requirejs etc.
Or you can use iframe to create a page inside page and move the plugin html and scripts to the iframe.
I want to put a minified java script contents in tags directly in HTML page. i have html page like:
<html>
<head>
<script src="jquery.js"></script>
<script src="iemagic.js"></script>
<script src="shim.js"></script>
<script src="jszip.js"></script>
<script src="xlsx.js"></script>
</head>
</html>
I have minified all the javascript contents and put it in a single file called "all.js" and the html works fine, now it looks like :
<html>
<head>
<script src="all.js"></script>
</head>
</html>
I want to include all the content of "all.js" in to HTML directly in "script" tag. I tried with that but no luck, when i open html file in browser it show all the java script content which i have copied in "script" tag.
Is there any other way for this ?
Thank you all for helping me. i have found the solution for this. * added all the "js" files in different "script" tag tested working fine but some of the javascript lines was visible in the browswer. * The problem was "iemagic.js" was having the comments which are not proper and was creating the problem. * I have removed those commented lines and is working find now. without having any "js" file and only one HTML. Thank you All for your help and valuable time.
You can use gulp or jscompress
This is probably super simple answer, but I just can't figure this out.
Basically, I've got a php page only starting with opening <?php tag.
I've got a jquery script that I need to call on this page.
<script type="text/javascript">
$('input[name="_manage_item"]').click(function() {
$('input[name="_item"]')[this.checked ? "show" : "hide"]();
});
</script>
From what I researched, I need to load the script by placing
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
into the <head> tags of the page.
But my page doesn't have the html <head> or <body> tags. Where do I call the script then ?
I tried to place it in front of the opening <?php tag, but that broke the page.
What is the correct way of doing this ?
You can place your javascript outside the php tags at the bottom of you page. But when you use the php in a web page, you should add the html and head and body tags. A simple php page could look like this:
<html>
<head>
<!-- stylesheets and javascript -->
</head>
<body>
<?php
//You php-code
?>
<!-- scripts at the end of the page to let the side load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$('input[name="_manage_item"]').click(function() {
$('input[name="_item"]')[this.checked ? "show" : "hide"]();
});
</script>
</body>
</html>
Relying on your wordpress tag, I suggest you to read this article. There are described all details concerning javascript usage within wordpress. Probably the most common way is to use wp_register_script() function.
The safe and recommended method of adding JavaScript to a WordPress generated page, and WordPress Theme or Plugin, is by using wp_enqueue_script().
I would also advise you to merge your code to a distinct file, and load it straight after jquery library. It is a good practice, because in such a way browser can cache your script and would not download it on every page request. You should also wrap it into a $( document ).ready() function, to be sure that it will be executed only only when document is in ready state.
I am very new to web design and trying to build a responsive page using Bootstrap. Everything works except my linked JS. I am sure the path is right but neverthelast I tried to put my JS on server and indicated the full path through http:// but still not working. I even put all my scripts in the head section just in case but still not working. Start getting frustrated anyone please can help me guys :) The JS is in the 'scripts' folder which is in the same folder with my 'index.html'.
This is my html in the head section:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
And here is my external JS:
$(document).ready(function(){
$("#menu").slideUp("slow");
});
Your problem is loading in the jQuery. It's trying to load your first script from a relative path. Try replacing the first script with <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
If I have,
<script src="jquery.js" ></script>
Then any script after this will allows you to use jQuery($) variable. I need to mimic this behavior in javascript. What I need that add my script file,
<script src="myscript.js" ></script>
which will load jquery.js using javascript and any script after this tag will allow you to use jQuery($) variable. I have no control beside myscript.js file. So I need to make sure that jquery.js must be loaded before allowing the browser to run/execute/render next tags.
What you are trying to achieve is not possible. When loading scripts dynamically you need to use callbacks to ensure that those scripts are loaded and use them only inside those callbacks. You cannot have sequential <script> tags in which one of the scripts loads dynamically some other scripts such as jquery and have subsequent scripts use jQuery. Browsers load script tags sequentially and guarantee that they will be loaded in the same order, but once you start injecting dynamic scripts into the DOM the only way to ensure proper load is to use callbacks. Take a look at the following article for more details.
Splitting it up in two parts should work:
index.html:
<html>
<body>
<script src="myscript.js"></script>
</body>
</html>
myscript.js:
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>');
document.write('<script src="myprog.js"></script>');
myprog.js:
$(function(){
alert('jquery ready');
});