Should be a really quick one for you pro's:
I'm learning to use JS, in particular a plugin called (embarassingly) 'Easy Image'.
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
Here's my code:
http://jsfiddle.net/tomperkins/LnES6/
JS files are from here:
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
And obviously jQuery (1.5)
I've stripped it down to the basics and can't figure out why it's not working.
Any tips are much appreciated!
Thanks in advance,
Tom
jquery.js and easySlider.js gets an Server error 500 when the browser tries to load them from
http://customstudiodevelopment.co.uk/jquery-test/
Verify that the files are there and that they can be loaded
http://customstudiodevelopment.co.uk/js/jquery.js
http://customstudiodevelopment.co.uk/js/easySlider.js
Unless both these urls load the right JS files your code will not work ...
As a general tip, get FireBug addon to firefox, with the Net panel I found this error in less than 30 seconds ;)
In menu on the left you have to set your framework to JQuery and in Add resources box add 'Easy Image' script. Then comment out first two <script> tags (you will need them on your site but not on jsFiddle). Also change src attributes in <img> tags to absolute path because there is no images folder nor any images on jsFiddle site.
Edit
This is what you get with <script> tags on your site:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
2<html><head>
3<title>500 Internal Server Error</title>
4</head><body>
5<h1>Internal Server Error</h1>
6<p>The server encountered an internal error
Script doesn't work because there are no scripts on your site (both links are dead).
This is working:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<base href="http://customstudiodevelopment.co.uk"/>
<script type="text/javascript" src="/jquery-test/js/jquery.js"></script>
<script type="text/javascript" src="/jquery-test/js/easySlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider();
});
</script>
<meta charset="utf-8">
<title>jQuery Gallery Test</title>
<link href="/jquery-test/css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="slider">
<ul>
<li><img src="/jquery-test/images/Website-Strip_Future.png"></li>
<li><img src="/jquery-test/images/SR-Toomer_small.png"></li>
</ul>
</div>
<!-- /end #slider -->
</body>
</html>
Note, I put the base element in there to test on my desktop. It's not required for it to work on your server, but if it's on your desktop computer, it should work (so you can copy the html into a Notepad file and save with filetype .html and run it locally to test).
It appears as if your file includes (js/css/image) are not pointing to where you want them to be.
Use Firebug to test these types of things. When you open the console, you can inspect the scripts included, including open each included file. In this way, you can doublecheck to make sure the browser is able to get to your included files.
http://getfirebug.com/
http://getfirebug.com/wiki/index.php/Script_Panel
http://getfirebug.com/wiki/index.php/File:Script_Panel.png <<< see del-linkrolls.js close to top, right; that's where you select which file to inspect
When I loaded the page I got an ".ready() is not a function" which would mean you are not loading jQuery. Then again I've never fooled around with jsfiddle
Related
When I open live preview in brackets the page comes up but never finishes loading. Live preview has worked fine while working on HTML and CSS files, but now that I'm incorporating Javascript I am having this issue.
I have re-installed the program twice with no success, restarted my computer, tried running live preview while all extensions were disabled, and have searched through numerous pages on google on how to fix this issue with no solution.
Also it seems that adding the "script" tag (sourced to my javascript file) is causing the issue. When I run live preview without the tag it loads fine.
This has been an issue for some time so any guidance would be GREATLY appreciated. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Section 2: JavaScript Language Basics</title>
</head>
<body>
<h1>Section 2: JavaScript Language Basics</h1>
<script src="script.js"></script>
</body>
</html>
I've emptied the Javascript file in an attempt to identify the problem. As stated earlier this code alone would have live preview loading non-stop.
Please let me know if anymore information is needed. Thanks again!
I think it has to something with the directory like which folders you placed it in for example if the .js file is at the same place as the index.html then what you've done should work.
if not it's in, for example, a folder called "js" then use something like
<script src="../js/script.js"></script>
play around with
../
or
./
because I can't tell without seeing your file structure I can't really know what's happening.
Hi I'm trying to use this plugin for upload multiple images with vue.js. Here is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-upload-multiple-image</title>
</head>
<body>
<div id="my-strictly-unique-vue-upload-multiple-image" style="display: flex; justify-content: center;">
<vue-upload-multiple-image
#upload-success="uploadImageSuccess"
#before-remove="beforeRemove"
#edit-image="editImage"
#data-change="dataChange"
:data-images="images"
></vue-upload-multiple-image>
</div>
<script src="./dist/vue-upload-multiple-image.js"></script>
</body>
</html>
Unfortunately this code neither gives error nor output. But when I use this cdn it works.
<script src="https://unpkg.com/vue-upload-multiple-image#1.0.2/dist/vue-upload-multiple-image.js"></script>
Is there a way to use it without the cdn?. Js file is there and I downloaded it from cdn.
Thanks
The origin of the script should not normally change anything.
Do you use the same version of the plugin? To be sure, you can copy the content of the https://unpkg.com/vue-upload-multiple-image#1.0.2/dist/vue-upload-multiple-image.js into your file (right click, save as...).
Is it added to the page? Do you have a plugin like Adblock and does it inform you that it has blocked content? Open your network console and check that the file is downloaded correctly without error (you will see a line with the filename). Did you see the JS code from the network console when you click on the line (to prevent bad serveur configuration)?.
To be sure, you can add something at the end of the script file :
let myTestVar = "JESuisLA";
And verify you can access to myTestVar on the console.
I have a problem with loading JavaScript in Google Chrome.
I've created the separate js file with a simple alert message and then linked it before the end of the body tag.
Google Chrome shows the alert box first then when I click 'ok' the content is loaded.
In other browsers it works fine, I mean the alert box shows at the same time as the content of the web page.
In short, Google Chrome loads the javascript first even when I put the script tag before the end of the body tag.
alert("Hello World!");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Write Your First Program</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="text-vertical-center">
<h1>Write Your First Program</h1>
<h3>JavaScript Essentials</h3>
<br>
</div>
</header>
<script src="js/scripts.js"></script>
</body>
</html>
Do you have any idea how to fix this problem?
Thanks a lot
Your problem is that your script have the tag async, which let it execute whitout taking care of the web page loading state. Remove the async tag, or replace it with defer, which execute the script after the page loading.
In order to prevent any problem with script and html/css loading times conflict, you should encapsulate your Javascript's scripts with window.onload = function() { //code here }. This will guarantee that your whole page is loaded before executing your code.
That is a problem with Chrome. The developers of chrome for some reason have still not corrected that. If you have alert or a prompt pop-up, which is the first thing that user has to interact with in your website, chrome will not load HTML until after the pop-up has been closed.
Try including jquery cdn just above your script tag in body.
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous">
</script>
This will work fine!!
I also had this problem and realized that my Google chrome was just loading the cached version of page(the one before putting my script tag near bottom).
Closing the window and reopening the page worked fine.
async and defer boolean attributes are only helpful when the script is inserted in the head portion of the page. They are useless if you put the script in the body footer like we saw above.
(Refer following article: https://flaviocopes.com/javascript-async-defer/).
I am also facing similar issue and using window.onload = funcRef; with cleared cache also does not work on my google chrome. I have tried all of this with disabling all my browser extensions but in vain.
I was finally able to, not solve, but agree upon a way around - which was - to include a
jQuery CDN
before my javascript script in the body. Hope this helps.
I have several HTML pages running Javascript and JQuery Mobile, and I want to link to them from another HTML page. My link is setup as:
Hours
and the linking page and the pages being linked to are in the same directory. However, when I access the page through this link, the JQuery Mobile theme is loaded, but any additional CSS changes or any Javascript code doesn't execute. I have several methods set to run on startup, but none execute, not even a simple alert.
When I attempt to access the page directly, everything applies properly and my code executes, but when I try to access it through my HTML link, none of it works. Is there something I am forgetting?
Thanks!
Edit: None of the code is working for any link I link to. Even a simple:
$(document).ready(function(){
alert("Hello world");
});
does not work. I have this added into the other HTML page as:
<head>
<meta charset="utf-8">
<title>Hours</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" rel="stylesheet">
<script type='text/javascript' src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
alert("Hello world");
});
</script>
<style type="text/css">
* {
font-family: "Celeste Mobi Pro", Celeste, serif;
}
</style>
</head>
Neither the CSS font change nor the startup alert works. I've tried this on other HTML pages, so I think it might be the server I'm hosting it on, but I'm not sure.
Second Edit: I just tested it locally, and it works. I'm fairly certain it's the server right now, is there anything I should check?
Third Edit: I've been using the Chrome console to look at the javascript source on the pages being linked to. I have all scripts added through script tags in the head, but for some reason, none of those appear. Rather, the contents of the script tags are those from the page linking to them (and yes, I'm making sure that I'm checking the for the new page, not the old page). When I refresh the page, however, it updates and it seems to work.
According to every data that you provide us, what you are telling us should work. There's no flaw in it.
The only possible error that you may encounter may be that you are using two differents hours.html, and accessing the wrong one through your link.
thanks for this website ;)
I am developing an iPhone app using phonegap and jquery mobile.
On my first page I make a redirection to the login.html page.
I only put this in my index_bis.js file : window.location.href ='login.html';
The redirection works, but there is no style on my page. The style works when I don't redirect! :(
An idea ? Thanks a lot!
This is part of my index.html :
<head>
<title>...</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.css" />
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.0.js"></script>
<script src="js/login.js"></script>
<script src="js/index_bis.js"></script>
</body>
When you do window.location, the current page is replaced with the called page and so all ur styles references are lost.
You should be looking at a single page application architecture using JQM. The first html page loads and all other pages are loaded asynchronously using ajax added to the DOM. Please carefully read this documentation and you will get an idea.
Multi-page link is how you need to link pages.
if you wanna navigate programmatically, you need to use the $.mobile.changePage() method
Maybe stupid question, but do you have in the login.html thae same style and libraries included?
And have they correct paths?
Just try to point to possible problems :)