This may be a really dumb question but I'm having trouble including a jquery plugin in my code.
The plugin I'm referring to is: http://davidlynch.org/projects/maphilight/docs/
I want to mimic something very similar to the following:
http://jsfiddle.net/keith/PVpgK/
But when I copy the code over, I keep getting error messages saying "maphilight is not a function"
How do I use a jquery plugin in my code? Thank you
$(function() {
//using the jquery map highlight plugin:
//http://davidlynch.org/js/maphilight/docs/
//initialize highlight
$('.map').maphilight({strokeColor:'808080',strokeWidth:0,fillColor:'00cd27'});
//hover effect
$('#maplink1').mouseover(function(e) {
$('#map1').mouseover();
}).mouseout(function(e) {
$('#map1').mouseout();
}).click(function(e) { e.preventDefault(); });
// initialize tabbing
$(".tabs area:eq(0)").each(function(){
$(this).addClass("current");
});
$(".tab-content").each(function(){
$(this).children(":not(:first)").hide();
});
//map clicks
$(".tabs area").click(function(){
//This block is what creates highlighting by trigger the "alwaysOn",
var data = $(this).data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
//there is also "neverOn" in the docs, but not sure how to get it to work
if ($(this).hasClass("current") == false)
{
var thisTarget = $(this).attr("href");
$(this).parents(".tabs").find('area.current').removeClass('current');
$(this).addClass('current');
$(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() {
$(thisTarget).fadeIn("fast");
});
}
return false;
});
});
You need to include the link to jquery in your html header.
1) Download jquery from jQuery.com
2) Link to downloaded file in your header
Like so:
<head>
...
<script src="/path/to/jquery-1.11.3.min.js"></script>
...
</head>
As the previous answer. But put them in the bottom of the body tag.
<html>
<head>
</head>
<body>
<script src="../path/to/jquery-1.11.3.min.js"></script>
<script src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>
</body>
</html>
you need to add the following to the header of your html code
<script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js">
</script>
Related
I've wanted to attach click event to an object not yet added to the DOM like here.
I've used a code from the answer but nothing happens when I click anything.
Here's my HTML:
<html>
<head>
<script src="resources/js/components/jquery/jquery-3.1.1.min.js"></script>
<script src="file.js"></script>
</head>
<body>
asl;kdfjl
<div id="my-button">sdgdf</div>
</body>
</html>
JavaScripts are in those location and I can see them in Sources tab in Chrome.
My file.js has content exactly copy-pasted from jsfiddle:
$('body').on('click','a',function(e){
e.preventDefault();
createMyButton();
});
createMyButton = function(data) {
$('a').after('<div id="my-button">test</div>');
};
$('body').on('click','#my-button',function (e) {
alert("yeahhhh!!! but this doesn't work for me :(");
});
As your code is in the head tag, you need to use a DOM ready wrapper to ensure your code executes after the DOM has rendered elements.
The jsfiddle doesn't have it because the fiddle is set to run the code onload already.
$(function(){
$('body').on('click','a',function(e){
e.preventDefault();
createMyButton();
});
createMyButton = function(data) {
$('a').after('<div id="my-button">test</div>');
};
$('body').on('click','#my-button',function (e) {
alert("yeahhhh!!! but this doesn't work for me :(");
});
});
Your code working with snippet .Better use with document.ready.Post you js after document.ready .And change the selector document instead of body
$(document).ready(function() {
$(document).on('click', 'a', function(e) {
e.preventDefault();
createMyButton();
});
createMyButton = function(data) {
$('a').after('<div id="my-button">test</div>');
};
$(document).on('click', '#my-button', function(e) {
alert("yeahhhh!!! but this doesn't work for me :(");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
asl;kdfjl
<div id="my-button">sdgdf</div>
I have a file, header.html, with my navigation menu. I have the following code:
<head>
<script>
$(function(){
$("#header").load("header.html");
console.log("loaded");
});
</script>
</head>
<body>
<div id="header"></div>
...
</body>
And then I have the following code to add the class "active" to the current tab:
function selectActive()
{
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
$(".inactive").each(function(){
if($($(this).children("a")[0]).attr("href") == pgurl || $($(this).children("a")[0]).attr("href") == '' )
{
$(this).addClass("active");
}
});
};
I've tried to run selectActive() several ways, including $(window).load and $(window).ready and neither seems to work. There is a function call to selectActive(), but neither makes the change. (I've tried selectActive() from the console and it works as expected).
So you just need that function to run on load? use $(document).ready() as mentioned in comments. :)
$(document).ready(function selectActive() {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$(".inactive").foreach(function () {
if ($(this).children("a")[0].attr("href") === pgurl ||
$(this).children("a")[0].attr("href") === '')
{
$(this).addClass("active");
}
});
});
If you have already tried this with no success, make sure you are referencing JQuery somewhere, as that is required for this to work.
sorry but i am newbie!!!
i am new to jQuery and i have a problem with jQuery $(this)
i have create a really simple jquery function in jsfiddle and it work but it's not work on website
i have use jquery 1.10.1 in jsfiddle and my code too!
you can see code here :
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(".resumeActu").on('click', function(){
var id = $(this).data('id');
alert("id is = "+id);
});
</script>
</head>
<body>
<div class="resumeActu" data-id="3">click me</div>
</body>
</html>
and this is my code in jsfiddle too: demo
i cant understand why my code work on jsfiddle but it's not work in my page
In your website you need to place your code in a document ready handler. This is not required in jsFiddle as it automatically does it for you.
<script type="text/javascript">
$(function() {
$(".resumeActu").on('click', function(){
var id = $(this).data('id');
alert("id is = "+id);
});
});
</script>
The reason your current code does not work is because it is trying to attach the click handler to the .resumeActu element before it exists in the DOM.
try this
$(document).ready(function () {
$(".resumeActu").on('click', function () {
var id = $(this).data('id');
alert("id is = " + id);
});
});
Load this function after document is ready
I am trying to make jquery trigger an event when an anchor link has the same URL as the current page. Eventually this will add a class to the anchor link and let me style it differently with CSS but for now I just want it to show an alert box. Code below doesn't seem to work:
<script type="text/javascript">
$(document).ready(function() {
var buildurl = window.location.href;
if($('a').attr('href') = buildurl){
alert("Done");
}
});
</script>
Can anybody shine a light on why this isn't working? Or a best practice for similar using JQuery?
Link is: http://www.otahboy.com/shop/index.php?route=information/information&information_id=4
Cheers,
Jack
<script type="text/javascript">
$(document).ready(function() {
var buildurl = window.location.href;
if($('a').attr('href') == buildurl){
alert("Done");
}
});
</script>
use equality operator ==
if($('a').attr('href') == buildurl){
alert("Done");
$('a').attr("color","Red");
}
You have an assignment in your if condition. You need to add one = to it.
<script type="text/javascript">
$(document).ready(function() {
var buildurl = window.location.href;
if($('a').attr('href') == buildurl){
alert("Done");
}
});
</script>
I'm trying to use JQuery to have a method fire when the following code gets clicked:
<div class="content_sub_list">
<img src="/imgs/close-icon.jpg" class="exit_sub_list"/>
hello
</div>
It is not doing anything and my JQuery code looks like this:
$(document).ready(
function()
{
$('#my_accnt').click(
function()
{
$('.content_sub_list').css("display", "block");
$('.content_sub_list').css("margin-left", "4px");
$('.content_sub_list').html('<div class="sub_list_header">My A<img src="/imgs/close-icon.jpg" class="exit_sub_list"/></div><BR />text');
});
$('#my_queue').click(
function()
{
$('.content_sub_list').css("display", "block");
$('.content_sub_list').css("margin-left", "165px");
$('.content_sub_list').html('<div class="sub_list_header">My Q<img src="/imgs/close-icon.jpg" class="exit_sub_list"/></div><BR />text');
});
$('.exit_sub_list').click(
function()
{
alert("hi");
$('.content_sub_list').css("display", "none");
});
});
My header looks like this:
<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/mContentBar.js" type="text/javascript"></script>
Other functions work in it except this one? for some reason.
So what am I doing wrong, or how i can get this to work? Thanks
This is working for me. Make sure you have jQuery loaded properly. You can either place jquery.js after your html or wrap your jquery code with a document.ready function.
like
(function() {
$('.exit_sub_list').click(
function() {
alert("hi");
});
});
Check working example at http://jsfiddle.net/p6Q2d/