I'm trying to implement Coin Slider (http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/) on my website. However, I can't get it to work. Firefox error console brings up '$ is not defined'.
I only really know HTML and CSS and thought this would just be a case of copying and pasting code. If it's something simple to fix that would be great, but I may have bitten off more than I can chew!
Thanks for any help.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="../style.css" />
<style type="text/css">
</style>
</head>
<body>
<div id="wrapper">
<!-- Begin Content -->
<div id="content">
<div id='coin-slider'>
<a href="" target="">
<img src='../portfoliopages/Funpets/splashpresliced.jpg' >
<span>
Description for img01
</span>
</a>
<a href="" target="">
<img src='../portfoliopages/Funpets/eggprespliced.jpg' >
<span>
Description for imgN
</span>
</a>
<a href="" target="">
<img src='../portfoliopages/Funpets/baby.jpg' >
<span>
Description for img01
</span>
</a>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 550,
height: 220,
spw: 7,
sph: 5,
delay: 3000,
sDelay: 30,
opacity: 0.7,
titleSpeed: 500,
effect: '',
navigation: true,
links : true,
hoverPause: true });
});
</script
</div>
</div>
<!-- End Content -->
</div>
</div>
<!-- Begin Footer --></div> </div>
<!-- End Footer -->
</body>
</html>
That means the jQuery variable $ is not defined. I guess you just copypasted without downloading jQuery.
This particular piece of code requires you to have downloaded jQuery, named the file jquery-1.4.2.js and locatde it in the same place as this file. You should get the coin-slider.min.js there as well. You can probably find it attached to the tutorial.
The error $ is not defined is typical when the page cannot find jQuery or jQuery is being referenced before it's loaded. In your instance jQuery is being loaded first so I'd assume your path to jQuery is wrong. Double check the path to jquery and that you can browse to the jquery JS file jquery-1.4.2.js
Make sure you have no 404 errors while loading the page. Enable FireBug in firefox and go the the Net setting, reload the page and check your http responses (Or any other Debugger/Inspect tool)
You can try replacing your script source to full URLs to test if your code is working :
For Jquery : http://workshop.rs/projects/coin-slider/jquery-1.4.2.min.js
For Coin Slider : http://workshop.rs/projects/coin-slider/coin-slider.min.js
I got the full urls from the Coin Slider example/demo page. You can open the links and download it to your local machine.
Related
Alright, I thought I implemented this correctly, but I guess I must've goofed somewhere.
Here's my code:
Jquery here:
jQuery(document).ready(function( $ ){
$(function() {
$( ".cta-nav-hover" ).tooltip({
show: null,
position: {
my: "right+40 bottom",
at: "left bottom"
},
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top - 10 }, 75 );
}
});
});
$(function() {
$(".fancybox").fancybox();
});
});
Then The HTML:
<div id="cta-nav-wrapper">
<ul id="cta-nav">
<li class="bio">
<span></span>
</li>
</ul>
</div>
I thought that this would work, but when I click the link, it just brings me to the placeholder image instead of making a popup. What did I do wrong? It looks as though i have the files lined up properly, or at least when i inspect them through firebug it goes to the proper js.
Here's what I called in the head:
<!-- Add fancyBox -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/content/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.pack.js"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.js"></script>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="/wp-content/themes/hustle-child/includes/js/magnific-popup.js"></script>
I also tried another plugin called Magnific Popup but it's also unresponsive. I'm thinking it has something to do with my wordpress theme's set up.
This href="http://placehold.it/350x125" doesn't say to fancybox that you are opening an image so you either :
1). add the fancybox.image special class to your link like
<a class="cta-nav-hover fancybox fancybox.image" href="http://placehold.it/350x125" title="Bio"><span></span></a>
2). add the (HTML5) data-fancybox-type attribute to your link like
<a data-fancybox-type="image" href="http://placehold.it/350x125" title="Bio" class="cta-nav-hover fancybox"><span></span></a>
3). add the type option to your fancybox script like
$(".fancybox").fancybox({
type: "image"
});
whatever you think works better for your case.
NOTE: numbers 1). and 2). above work for fancybox v2.x only. Number 3). works for either v1.3.4 and v2.x
EDIT : included a JSFIDDLE with your code and jQuery v1.8.3.
There are two links :
one using "fancybox.image" class : working
other without : not working
I can't narrow down my problem with a simple logo parade. I'm working on this at promasterautomotive.com so you can see the context of the problem. The logo parade is at the very bottom, the faded logos.
I opened the console in Chrome (ctrl+shift+j) but I'm not seeing any errors.
Here is my javascript. I pulled it directly from an example.
$(function() {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
// Logo parade event handlers
$("#logoParade").bind("mouseover", function() {
$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
$(this).smoothDivScroll("startAutoScrolling");
});
});
Here's my HTML. Again, modified from an example. Once I get it working I'll tailor it as necessary.
<div id="logoParade">
<img src="images/logos/wiseco.png" class="logos">
<img src="images/logos/bullydog.png" class="logos">
<img src="images/logos/vortek.png" class="logos">
<img src="images/logos/sinister.png" class="logos">
<img src="images/logos/schaeffers.png" class="logos">
<img src="images/logos/arp.png" class="logos">
<img src="images/logos/bpd.png" class="logos">
<img src="images/logos/sct.png" class="logos">
</div>
Anyone else see something that I'm overlooking?
You are missing several files on your site that the plugin depends on
This jsfiddle should work (looks like you moved or deleted the images though ...actually ..the whole site...)
http://jsfiddle.net/DelightedDoD/68sv070h/
Here are the requisite files (download your own copies of course);
<link rel="Stylesheet" type="text/css" href="http://smoothdivscroll.com/css/smoothDivScroll.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://smoothdivscroll.com/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="http://smoothdivscroll.com/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="http://smoothdivscroll.com/js/jquery.kinetic.min.js" type="text/javascript"></script>
<script src="http://smoothdivscroll.com/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
Note the following from the plugin's docs:
LOAD JAVASCRIPT LATE - JUST BEFORE CLOSING THE BODY TAG.
That way the browser will have loaded the images and will
know the width of the images. No need to specify the width
in the CSS or inline.
In my Dynamic Web Project (Eclipse), developed with the Spring MVC framework, I have the JSP page below, placed in the folder WEB-INF/jsp/ :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HorarioLivre</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" href="css/style-main.css">
<link rel="stylesheet" href="css/style-popup.css">
</head>
<body>
<header>
<div class="container">
<h1>HorarioLivre</h1>
<nav>
<ul>
<li>Eventos</li>
<li>Cadastrar Horarios</li>
<li>Listar Horarios</li>
<li>Usuarios</li>
<li>${usuario.nome}
<ul>
<li>Perfil</li>
<li>Configurações</li>
<li>Logout</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<div id="results">
Fechar
<div id="content"></div>
</div>
</body>
</html>
My problem is that apparently the application don't be reading the js/index.js file, placed in folder WebContent/js (the css files, placed in WebContent/css, are read normally). When I put some javascript / jquery code directly in the JSP page (like the code displayed in the question Browser doesn't recognize javascript / jquery code), they are executed without any problems.
Someone can find the problem with this page?
Update 1
$(document).ready(function(){
setupPopup();
});
function setupPopup() {
$('a').click(function() {
$('#content').load($(this).attr('href'));
$('#container').append('<div id="cover">');
$('#results').fadeIn(500);
popupPosition();
});
$('#close').click(function() {
$('#results').fadeOut(100);
$('#cover').remove();
});
$(window).bind('resize', popupPosition);
}
function popupPosition() {
if(!$("#results").is(':visible')){ return; }
$("#results").css({
left: ($(window).width() - $('#results').width()) / 2,
top: ($(window).width() - $('#results').width()) / 7,
position:'absolute'
});
$('#results').draggable();
}
FINAL UPDATE
In the end, I choose don't use jquery, and replace the code from the header by this:
<script>
function handleClick(url){
document.getElementById("results").style.display = 'block';
document.getElementById("content").innerHTML='<object type="text/html" data="'+url+'" ></object>';
}
function cleanDiv() {
document.getElementById("results").style.display = 'none';
document.getElementById("content").innerHTML=' ';
}
</script>
each link has this format:
Eventos
and the html code for my popup window get this form:
<section class="about" id="results" style="left: 183px; top: 111px;" onMouseDown="dragStart(event, 'results');">
<div align="right">X</div>
<div id="content" align="center"></div>
</section>
With the parte style="left: 183px; top: 111px;" onMouseDown="dragStart(event, 'results');" being responsible for move the popup across the screen (See the question how to drag and drop a <div> across the page)
I'm not entirely sure, but I think i've seen this done before:
remove http: and https: from your js sources. So it should look like this:
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
This might not work, it was just a thought I had.
It's not the best solution, but you can try load script dynamically with jQuery.load or something like
<script>document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
Try <script src="/js/index.js"></script> instead.
edit: This Absolute path & Relative Path explains the relative and absolute path in more detail.
I would suggest viewing the source code once your run your JSP in browser (right click - view page source or something similar, depending on your browser). You should see what URL for the JS the page is trying to load and should be able to correct it accordingly.
Also, perhaps it's just your context path missing from the URL. In that case, I'd use <c:url> tags when generating the URL.
My site was working extremely fine with jQuery Ui and all but suddenly I changed a color and it stopped! Any hints why this happened? I tried writing the JavaScript in the HTML file itself as well as linking as a separate .js file. Both did not seem to work.
MY HTML :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spree 2014 | BITS - Pilani, K. K. Birla Goa Campus Sports Festival</title>
<link rel="stylesheet" type="text/css" href="teaser.css" />
<LINK REL="SHORTCUT ICON" HREF="http://s9.postimg.org/jtx29pdbf/bits.png" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript" src="teaser.js"></script>
</head>
<body>
<div id="sidebar">
<img src = "images/arrow.png" alt = "Click to open" id = "arrow">
</div>
<div id ="gallery" class = "hidden"><div class="text">Gallery</div></div>
<div id = "lookback" class = "hidden"><div class="text">Lookback</div></div>
<div id = "timer" class = "hidden"><div class="text">Timer</div></div>
<div id="social">
<img src="images/fb.png" alt = "Contact us on Facebook" id = "fb">
<img src="images/twitter.png" alt = "Stay tuned on twitter" id = "twitter">
</div>
<div id="tabs">
<ul>
<li>About</li>
<li>Sponsors</li>
<li>Contact</li>
<li>Subscribe</li>
</ul>
</div>
<div>
<div id="logo">
<img src="images/spreelogo.png" alt="Spree Pure Sport | Run | Rise | Reach"></img>
</div>
<div id="bits">
<img src="images/bits.png" alt="Spree Pure Sport | Run | Rise | Reach"></img>
</div>
<div id="man">
<img src="images/runningman.png" alt="Spree Pure Sport | Run | Rise | Reach"></img>
</div>
</body>
MY JS FILE:
$(document).ready(function(){
$("#bits").hide();
$("#lookback").hide();
$("#timer").hide();
$("#arrow").click(function(){
$("#sidebar").hide();
$("#gallery").show( "fold", 2000 );
$("#lookback").show( "fold", 2000 );
$("#timer").show( "fold", 2000 );
});
});
Problems like this can generally be easily solved using developer tools in the browser. My favorite is Firebug in Firefox, but each of the modern browsers has the capabilities you need.
This is likely caused by either a file not being found, or a JavaScript error. Enable debugging and load your page. Look at the network record for a 404, and at the console for a JS error. You can also examine your HTML to see if the DOM model is as you expect it to be. You can set a break point in your script to see if the code is being reached -- if not work your way backwards up the call stack to see where the logic is wrong, and step through the code.
If you can practice these skills, you can solve the vast majority of your bugs without needing help from others.
Your script tag importing jquery is missing an "http:" before the URL. That would break your Jquery-ui.
Change it to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The code seems fine.
Check your links properly; also if they are accessible from your browser.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript" src="teaser.js"></script>
I've been trying to use coin slider to add it to my web page but I've not been able to see any of the images that I've been trying to add, the problem is that it only shows the description messages, the images appear blank... I would really appreciate your help on this, thank you
This is the code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Altius Coaching</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="css/coin-slider.min.js"></script>
<link rel="stylesheet" href="css/coin-slider-styles.css" type="text/css" />
</head>
<body>
<div id="coin-slider">
<a>
<img src='ALTIUS COACHING.jpg' >
<span>
Description for img01
</span>
</a>
<a>
<img src='ALTIUS MEDICAL.jpg' >
<span>
Description for imgN
</span>
</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 560, height:300, navigation: true, delay: 5000 });
});
</script>
</body>
</html>
does "ALTIUS COACHING.jpg" exist on the server? Is it the correct cAsE depending on the server? If all else fails, try removing the space from your html and the filename (or changing it to %20) and try again. According to your source, "ALTIUS COACHING.jpg" exists in the same folder as the html file we're viewing, is this correct?
Can you show us the broken page "live" somewhere?