I am receiving the error '$ is undefined' from the first selector of js file.
I have added JQuery reference as a local file or google CDN. Also I have tried to put it at the beginning and end of the HTML file.Have also checked the network part of the console to check if the JQuery is loading correctly.but seems it does not recognize the $. Have also tried to putthe whole JS file in $(document).ready(function () )
The function works correctly but I am still receiving the error.
I have tried that with different browsers and different systems.
$(document).ready(function () {
var currentIndex = 0;
var itemAmt;
function cycleItems() {
var item = $('.imageContainer div').eq(currentIndex);
$('.imageContainer div').hide();
item.css('display', 'inline-block');
}
var autoSlide = setInterval(function () {
currentIndex += 1;
if (currentIndex > $('.imageContainer div').length - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
$('.next').click(function () {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > $('.imageContainer div').length - 1) {
currentIndex = 0;
}
cycleItems();
});
$('.prev').click(function () {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = $('.imageContainer div').length - 1;
}
cycleItems();
});
});
.imageContainer {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.imageContainer div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.imageContainer img {
width: 100%;
height: auto;
}
.next {
right: 5px;
position: absolute;
}
.prev {
left: 5px;
position: absolute;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link href="HomeStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../HomePage/Slider.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-latest.js"></script>
<title>Home!</title>
</head>
<body>
<div id="gallery">
<section class="slider">
<button class="next">Next</button>
<button class="prev">Previous</button>
<div class="imageContainer">
<div style="display: inline-block;">
<img src="http://placeimg.com/400/200/people" />
</div>
<div>
<img src="http://placeimg.com/400/200/animals" />
</div>
<div>
<img src="http://placeimg.com/400/200/people" />
</div>
<div>
<img src="http://placeimg.com/400/200/tech" />
</div>
</div>
</section>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-latest.js"></script>
</body>
</html>
How can I make it working error free?
Javascript files load in the order that they are added to the page. The first javascript file you've added is ../Homepage/slider.js and I'm guessing that it uses jQuery to do whatever it does. This means it's referencing $ at some point. But wait: jQuery hasn't been loaded yet! This causes the error you saw, because the browser might have started downloading jQuery already, but won't execute it until any preceding scripts are finished.
If you move jQuery to the top (and you probably only need to include it once, rather than 4 times at the top and 4 times at the bottom), this should fix your problem.
Better yet, move all of your script declarations to the bottom of the page, which means they won't block the rest of the page from rendering.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
...
</head>
<body>
...
<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
<script type="text/javascript" src="../HomePage/Slider.js"></script>
</body>
</html>
You could also use something like requireJS to ensure the load order of scripts, but that is an advanced topic well beyond the scope of what you're doing here.
You must add the jquery library only once. Since your jquery code is inside $(document).ready(function(){ and }), you can can add it anywhere on your html code, but before any library which use jquery (maybe your slider.js does)
jquery should be included before all other scripts depending on it...
I suppose this is the issue causing $ is undefined error...
Related
I am using CardService in my Google Scripts Adds-On. I am trying to setContent as HTML for that I am reading it from Index.html. But while rendering it's printing CSS and Javascript as text rather then using it in Html content.
function buildPage() {
var html = HtmlService.createHtmlOutputFromFile('Index').getContent();
var card = CardService.newCardBuilder();
card.setHeader(CardService.newCardHeader().setTitle('How do you feel ...'));
var section = CardService.newCardSection()
.setHeader("<h4>What do you want? </h4>");
section.addWidget(CardService.newKeyValue()
.setTopLabel('choose one')
.setContent(html)
);
This is my Index.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
#things {
position: absolute;
top: 50%;
left: 50%;
color: green;
margin-right: -50%;
text-align: center;
}
</style>
</head>
<body>
<p>List of things:</p>
<ul id="things">
<li>Loading...</li>
</ul>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showThings)
.getLotsOfThings();
});
function showThings(things) {
var list = $('#things');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<li>' + things[i] + '</li>');
}
}
</script>
</body>
</html>
GMail Add-Ons only support very basic html style.
See https://developers.google.com/gmail/add-ons/concepts/widgets#text_formatting
setContent() takes text and supports basic html formatting. I think it'll not support full html tags like styles, script etc
Reference
https://developers.google.com/apps-script/reference/card-service/key-value#setcontenttext
I'm trying to use javascript to toggle the size of a div. In order to understand the basic idea of how to do this I tried replicating this example: Toggling Div (JSFiddle)
But for some reason it is not working, despite me having copied it from the working JSFiddle. Why is that? Here is my replicate:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">#topbar {
background: orange;
color: white;
height: 10px;
text-align:center;
}</style>
<script type="text/javascript">
$("#topbar").click((function() {
var i = 0;
return function() {
$(this).animate({
height: (++i % 2) ? 40 : 10
}, 200);
}
})());
</script>
</head>
<body>
<div id='topbar'>toggle me</div>
</body>
</html>
Wow! You haven't added jQuery at all! Add this in your <head> before you call the script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You must have got this error in the console:
Reference Error: $ not defined.
You are using this not in context. When you put it inside a function, then it gets screwed up. Do it this way:
$(function () {
$("#topbar").click(function () {
var i = 0;
$(this).animate({
height: (++i % 2) ? 40 : 10
}, 200);
return false;
});
});
The this you used, will be taking your inner function as its context. And since your <div> comes after the <script>, please enclose it inside the $(function () {}).
I am new to jquery. I have a simple project. Two pictures stacked on top of each other. I want the page to show the second picture first (so the page needs to start at a certain scroll point) and then the user can scroll up to the first picture. So the code would go something like that
html:
!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="mainPage" width="100%">
<img id="top" src="pic1.jpg" width="100%">
<img id="bottom" src="pic2.jpg" width="100%">
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
JavaScript
window.onload = function() {
scroll(0, 2300);
}
This works when I first load the page, but it doesn't work if I refresh the page (I assume because of something to do with cache?). How can I make the onload function work also when the page is refreshed? Thanks for your time.
If you are using jq why don't you use this type of function on $(document).ready()
$(document).ready(function(){
$(window).scrollTop( 3000 );
});
$(window).unload(function(){
$(window).scrollTop( 3000 );
})
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mainPage" width="100%">
<img id="top" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
<img id="bottom" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
</div>
load is page load moment and beforeunload is refresh page moment
$(window).on("load",function() {
scroll(0, 2300);
});
$(window).on("beforeunload",function() {
scroll(0, 2300);
});
So if it's working first time, your code is ok. But seems you have to force to delete page cache.
Try this options:
Add this meta tags to your head and give it a try.
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Expires" content="-1">
If you want to control by js the delete of the cache, you can try making a simple js function:
deleteCache(){
window.location = window.location.href+'?eraseCache=true';
}
I'm new to html, just started doing it at school, and I'm trying to make this website just to test a few things. For some reason, it only works on JSFiddle. I am just trying to make the button glow on click. Here is the code:
<!DOCTYPE html>
<head>
<style media="screen" type="text/css">
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
div#info_box {
height: 221px;
width: 221px;
}
</style>
<title>Test</title>
</head>
<body background="http://fc07.deviantart.net/fs70/f/2014/113/f/b/rain_by_matt74997-d7fn2e1.gif">
<div id="trigger">
<img src="http://i.imgur.com/8QLgeGP.png" onmouseover="this.src='http://i.imgur.com/BmjwX9A.png'" onmouseout="this.src='http://i.imgur.com/8QLgeGP.png'" />
</div>
<div id="info_box" style="display:none">
<img src="http://i.imgur.com/b3Holdt.png" alt="glow" height="221" width="221">
<span class="custom info">
</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('div#trigger').click(function() {
//Get info_box
var info = $('div#info_box');
//Fade the box in during 1 sec, show it for 5, and let it fade out again
info.fadeIn(1000).delay(10).fadeOut(1000);
});
});
</script>
I tried using google chrome, internet explorer, looking through other answers, but I'm still not sure how to get it to work.
Google chrome says Uncaught Reference Error: $ is not defined
but I'm not sure what to do with that.
If more information could help please ask which and I'll put it up.
Please include Jquery to the top of the scripts as many plugin use it.
http://jquery.com/download/
Add this link to <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
You need jquery reference when using $
I am trying to build a jquery slideshow for a website, I have only worked with jquery and javascript briefly (not really a web developer fan, I think its great and all but not my thing) I was following a tutorial to learn how to tie the code together and thought I had it put together. It is suppose to fade in and out according to the stack and all I am getting is a flicker.
<!DOCTYPE html>
<html>
<head>
<title>Slideshow Tester</title>
<style type="text/css">
#slideshow{
width: 500px;
height: 500px;
margin: 0 auto;
position: relative:
}
.slide{
width: 500px;
height: 500px;
position: absolute;
left: 0;
top: 0;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
/*global $, jQuery, console, window*/
(function ($){
"use strict";
var slideshow = (function (){
var counter = 0;
i,
j,
slides = $("#slideshow .slide"),
slidesLen = slides.length - 1;
for(i = 0, j = 9999; i & lt; slides.length; i +=j, j -= 1){
$(slides[i]).css("z-index", j);
}
return{
startSlideshow: function(){
window.setInterval(function(){
if (counter === 0){
slides.eq(counter).fadeOut();
counter += 1;
}
else if(counter === slidesLen){
counter = 0;
slides.eq().fadeIn(function(){
slides.fadeIn();
});
}
else{
slides.eq().fadeOut();
counter+=1;
}
}, 2000);
}
};
}());
slideshow.startSlideshow();
}(jQuery));
</script>
</head>
<body>
<div class = "slider">
<div id = "slideshow">
<img class = "slide" src="img\DSC_0788.jpg" />
<img class = "slide" src="img\facebook.jpg" />
<img class = "slide" src="img\DSC_0788.jpg" />
<img class = "slide" src="img\facebookGrey.jpg" />
<img class = "slide" src="img\DSC_0788.jpg" />
</div>
</div>
</body>
</html>
Anybody got any ideas?
You can not have JavaScript code inside of a script tag with an external source.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
/*global $, jQuery, console, window*/
needs to be
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
/*global $, jQuery, console, window*/
Try Following
close script properly...
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
/*global $, jQuery, console, window*/
(function ($){
"use strict";
..........
</script>
And Put Both script just above
<div class = "slider">
but below
<body>
part instead of head section. And Keep style css as it is in head section. Also Check if there is any other version of external jquery scrip ...along with this 1.4.2 version...if it is...use noconflict()