New to javascript, and I am attempting to make text appear below an image when the user mouses over it. For the HTML, I have created an empty sub tag with the id 'subtext' () below two images, and I am attempting to use a for loop, and if else statement to have a specific message occupy the subtext depending on which image is experiencing "mouseover".
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
</head>
<script>
document.addEventListener('DOMContentLoaded', function() {
let picture = document.querySelectorAll('.picture');
for (let i = 0; i <picture.length; i++) {
picture.addEventListener("mouseover", function () {
var text;
var pictureid = picture.getElementById();
if (pictureid === '#pic1') {
text = 'First response';
} else {
text = 'Second response';
}
document.getElementById('#subtext').innerHTML = text;
}
)};
});
</script>
<body>
<img src="IMG_1.jpg" width="300" height="400" class = picture id="pic1">
<img src="IMG_2.jpg" width="300" height="400" class = picture id ="pic2">
<sub id="subtext"></sub>
</body>
</html>
See here for error message - that I am missing a semicolon and have an unnecessary one at the same time
Your js code contains errors. Also, in the html structure, you did not wrap the class names in quotation marks. Like that:
class = picture
instead of for, I used the forEach() method in which I determined the current image:
picture.forEach(function (picture_current, index) {
picture_current.addEventListener("mouseover", function () {
...
document.addEventListener('DOMContentLoaded', function () {
let picture = document.querySelectorAll('.picture');
picture.forEach(function (picture_current, index) {
picture_current.addEventListener("mouseover", function () {
var text;
var pictureid = this.getAttribute('id');
if (pictureid === 'pic1') {
text = 'First response';
} else {
text = 'Second response';
}
document.querySelector('#subtext').innerHTML = text;
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<img src="IMG_1.jpg" width="300" height="400" class="picture" id="pic1">
<img src="IMG_2.jpg" width="300" height="400" class="picture" id ="pic2">
<sub id="subtext"></sub>
</body>
</html>
a couple of typos but biggest problem was querySelectorAll returns an array
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<img src="IMG_1.jpg" width="300" height="400" class = picture id="pic1">
<img src="IMG_2.jpg" width="300" height="400" class = picture id ="pic2">
<sub id="subtext"></sub>
<script>
document.addEventListener('DOMContentLoaded', function() {
let picture = document.querySelectorAll('.picture');
for (let i = 0; i <picture.length; i++) {
picture[i].addEventListener("mouseover", function () {
var text;
var pictureid = picture[i].id;
if (pictureid === 'pic1') {
text = 'First response';
} else {
text = 'Second response';
}
document.getElementById('subtext').innerHTML = text;
}
)};
});
</script>
</body>
</html>
Related
I made an IDE (with <textarea> and CodeMirror), which looks like this:
And on the left, there is a div containing the lines counter.
So what I'm trying to do is to get the last line number (12 in the picture above).
This is my code:
$(document).ready(function() {
$(document).keydown(function() {
let element = document.getElementsByClassName("CodeMirror-linenumber");
element = element.item(element.length - 1);
escape(element);
let num = "";
num = parseInt(element);
console.log(num);
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="array.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/xml/xml.min.js"></script>
</head>
<body>
<textarea id="editor"></textarea>
<script>
var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("editor"), {
mode: "xml",
htmlMode: true,
lineNumbers: true
});
</script>
</body>
</html>
The problem is that when I run it on Chrome, it gives me an output "NaN".
I know that this question is already asked, but I didn't find a satisfactory answer.
There is no reason for you to use escape(element). In fact, it is deprecated anyway. What you're doing is simply encoding the element into some kind of hexadecimal string, which you do not want.
What you want is to simply access the innerText property of the element, and use either parseInt(element.innerText) or even better, the unary plus operator, +element.innerText to get the line number:
$(document).ready(function() {
$(document).keydown(function() {
let element = document.getElementsByClassName("CodeMirror-linenumber");
element = element.item(element.length - 1);
console.log(+element.innerText);
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="array.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/xml/xml.min.js"></script>
</head>
<body>
<textarea id="editor"></textarea>
<script>
var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("editor"), {
mode: "xml",
htmlMode: true,
lineNumbers: true
});
</script>
</body>
</html>
I'm new to Javascript and I made several square boxes with a div and dots(svg) on top of them,
and I would like to number these divs by div id in a for loop by making an array.
How should I fix my code?
//Javascript
//create a 12 dotBoxes spread evenly across the window
function getGridAreaSize(){
$('#grid-area').width($(window).width() * .5);
}
function getBoxSize(){
var boxWidth = $('#grid-area').width() / 5;
return boxWidth;
};
function createBoxes(){
for (i = 0; i < 15; i++) {
// divsToAppend += '<div id="div' + (++i) + '" />';
// arrayDiv[i] = document.createElement('div');
// arrayDiv[i].id = 'dot' + i;
// arrayDiv[i].className = 'dotBox';
// document.getElementById('#grid').appendChild(arrayDiv[i].id);
// document.getElementById(arrayDiv[i].id).appendChild(dotarea);
// document.getElementById('#dotarea').appendChild(dot);
$('#grid').append("<div class='dotBox'><div class='dotarea'><div class='dot'></div></div></div>");
$('.dotBox').css('width',getBoxSize());
$('.dotBox').css('height',getBoxSize());
};
};
getGridAreaSize();
getBoxSize();
createBoxes();
//html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--FONTS-->
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Work+Sans:100,300,700' rel='stylesheet' type='text/css'>
<!--STYLESHEETS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="css/global.css" type="text/css" />
<!--SCRIPTS-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"> </script>-->
</head>
<body>
<svg id="canvas" width="100%" height="100%">
<line class="line original" x1="0" y1="0" x2="0" y2="0" />
</svg>
<div class="container-fluid">
<div class="splash">
<h1>Hello! My name is Soheum Hwang</h1>
<h2>Hover over each dot to see my work!</h2>
<br>
<p id="mobile-warning"> Sorry - this kind of functionality sucks on mobile! Please view it on a desktop for best results. </p>
</div>
</div>
<div id="grid-area">
<div id="grid">
<div id="popup">
<p>some text here</p>
</div>
</div>
</div>
<script src="scripts/dots.js"></script>
</body>
</html>
I want to have different texts hover on top of different boxes, so I tried to make an array of them which doesn't work..
append i too while appending it to div i.e
$('#grid').append("<div class='dotBox' id='box_"+i+"'><div class='dotarea'><div class='dot'></div></div></div>");
The problem probably lies on two events: onload, onclick (the event onload does work, but the onclick does not). How could I solve this problem in a best way to keep two of them running in the same code? Thanks for any suggestions.
const vacationPlaces = ['Praha','Vien','Munich'];
function backwards() {
for (let vacationSpotIndex = vacationPlaces.length - 1; vacationSpotIndex >= 0; vacationSpotIndex--) {
let showPlaces = vacationPlaces[vacationSpotIndex] + ", ";
let removeComma = showPlaces;
document.getElementById("resultMonthly").innerHTML += removeComma;
}
}
function forwards() {
for (let i = 0; i < vacationPlaces.length; i++) {
document.getElementById("resultDaily").innerHTML += vacationPlaces[i] + ", ";
}
}
function all() {
backwards();
forwards();
}
function click() {
document.getElementById("resultHourly").innerHTML = "hi";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Issue App</title>
<link rel="stylesheet" type="text/css" href="wageup.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body onload="all()">
<div class="container">
<h2>for loop</h2>
<div class="alert alert-success" role="alert" id="resultMonthly">
</div>
<div class="alert alert-info" role="alert" id="resultDaily">
</div>
<div onclick="click()" class="alert alert-warning" role="alert" id="resultHourly">
</div>
</div>
<!-- Scripts -->
<script src="http://chancejs.com/chance.min.js"></script>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="forloop.js"></script>
</body>
</html>
In the context of the onclick attribute, the function click is a native function. So your click handler is working, but it's calling the built-in click function, not your click function. You can fix that by renaming the function. For example, I named it showAlert:
const vacationPlaces = ['Praha','Vien','Munich'];
function backwards() {
for (let vacationSpotIndex = vacationPlaces.length - 1; vacationSpotIndex >= 0; vacationSpotIndex--) {
let showPlaces = vacationPlaces[vacationSpotIndex] + ", ";
let removeComma = showPlaces;
document.getElementById("resultMonthly").innerHTML += removeComma;
}
}
function forwards() {
for (let i = 0; i < vacationPlaces.length; i++) {
document.getElementById("resultDaily").innerHTML += vacationPlaces[i] + ", ";
}
}
function all() {
backwards();
forwards();
}
function showAlert() {
console.log('clicked')
document.getElementById("resultHourly").innerHTML = "hi";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Issue App</title>
<link rel="stylesheet" type="text/css" href="wageup.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"crossorigin="anonymous">
<!-- Scripts -->
<script src="http://chancejs.com/chance.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script type="text/javascript" src="forloop.js"></script> -->
</head>
<body onload="all()">
<div class="container">
<h2>for loop</h2>
<div class="alert alert-success" role="alert" id="resultMonthly"></div>
<div class="alert alert-info" role="alert" id="resultDaily"></div>
<div onclick="showAlert()" class="alert alert-warning" role="alert" id="resultHourly"></div>
</div>
</body>
</html>
When I use document.getElementById().textContent to set the "text content" to the value of a variable it doesn't work it doesn't to anything instead changing the text content to the value of the variable. It does work when I use
.textContent = "example";
but not
.textContent = example;
Here is my HTML
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" type="text/javascript" src="testScript.js"></script>
</head>
<body>
<p class="heading">Heading</p>
<p id="TextSpace"></p>
</body>
Here is my JS
//Get users name
var name = prompt("What is you name");
//put the name in the element "text space"
document.getElementById("TextSpace").textContent = name;
The prompt appears but after that nothing happens
Move the script
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="heading">Heading</p>
<p id="TextSpace"></p>
<script language="javascript" type="text/javascript" src="testScript.js"></script>
</body>
or add an onload handler
window.onload = function() {
var name = prompt("What is you name");
document.getElementById("TextSpace").textContent = name;
}
Right now the script is running before the elements in the DOM are available.
Note that textContent is not available in IE8 and below.
Instead of putting the script tag at the bottom, you can just put defer and it will work perfectly fine
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" type="text/javascript" src="testScript.js" defer></script>
</head>
<body>
<p class="heading">Heading</p>
<p id="TextSpace"></p>
</body>
I have almost finished a website, but I'm struggling with combining two different javascript files... If I exclude A, B works. If I exclude B, A works. So there seems no go-between.
I'm trying to combine a JQuery-form validation and a JCarousel. As you can see, I have to exclude the validation script in orde to get the Carousel working...
Isn't there a way to combine both these script? I already tried the $j-trick from JQuery documentation, but with no luck.
I have included the files in this order:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="includes/js/jquery-1.6.min.sliding.js"></script>
<script type="text/javascript" src="includes/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="includes/js/hover.js"></script>
<script type="text/javascript" src="includes/js/jquery.jcarousel.js"></script>
<!-- js links -->
<script type="text/javascript" src="includes/js/coda.js"></script>
<script type="text/javascript" src="includes/js/placeholder.js"></script>
<script language="javascript" src="includes/js/popup/modal.popup.js"></script>
<script type="text/javascript" src="includes/notify/js/jquery.noty.js"></script>
<!-- THIS MUST BE COMMENTED OTHERWISE THE CONTACT SLIDER DOENS'T WORK!!
MUST FIX!!!
<script type="text/javascript" src="includes/js/form/jquery.validationEngine-nl.js" charset="utf-8"></script>
<script type="text/javascript" src="includes/js/form/jquery.validationEngine.js" charset="utf-8"></script>
<script src="includes/lightbox/lightbox.js"></script>
-->
<script src="includes/lightbox/lightbox.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
I can see the problem but not what is causing it. I imagine you're outputting some javascript via PHP but it is coming out above the <html> tag.
If you goto view-source:http://www.YOURDOMAIN.be/new/index.php?page=&action=shout
The html looks like this:
<script>
$(document).ready(function(){noty({"text":"Uw shout is succesvol toegevoegd.",
"layout":"top","type":"success","animateOpen":{"height":"toggle"},
"animateClose":{"height":"toggle"},"speed":500,"timeout":5000,
"closeButton":true,"closeOnSelfClick":true,"closeOnSelfOver":false,"modal":false});});</script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1" />
<!-- favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- css links -->
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<link rel="stylesheet" type="text/css" href="styles/skin.css" />
<link rel="stylesheet" type="text/css" href="includes/js/form/css/validationEngine.jquery.css" />
<link rel="stylesheet" type="text/css" href="includes/lightbox/lightbox.css" />
<link rel="stylesheet" type="text/css" href="includes/notify/css/jquery.noty.css"/>
<link rel="stylesheet" type="text/css" href="includes/notify/css/noty_theme_default.css"/>
<link rel="stylesheet" type="text/css" href="includes/js/jquery-ui/development-bundle/themes/base/jquery.ui.all.css">
<link rel="stylesheet" type="text/css" href="includes/js/jquery-ui/development-bundle/demos/demos.css">
<link rel="stylesheet" type="text/css" href="includes/js/jquery-ui/development-bundle/jquery-ui-timepicker.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="includes/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="includes/js/hover.js"></script>
<script type="text/javascript" src="includes/js/jquery.jcarousel.js"></script>
<!-- js links -->
<script type="text/javascript" src="includes/js/coda.js"></script>
<script type="text/javascript" src="includes/js/placeholder.js"></script>
<script language="javascript" src="includes/js/popup/modal.popup.js"></script>
<script type="text/javascript" src="includes/notify/js/jquery.noty.js"></script>
<script type="text/javascript" src="includes/js/form/jquery.validationEngine-nl.js" charset="utf-8"></script>
<script type="text/javascript" src="includes/js/form/jquery.validationEngine.js" charset="utf-8"></script>
<script src="includes/lightbox/lightbox.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript">
function mycarousel_initCallback(carousel) {
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>
<script>
$(function(){
$('.leader_picture').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
});
</script>
<script language="javascript">
$(document).ready(function() {
//Change these values to style your modal popup
var align = 'center'; //Valid values; left, right, center
var top = 100; //Use an integer (in pixels)
var width = 500; //Use an integer (in pixels)
var padding = 10; //Use an integer (in pixels)
var backgroundColor = '#FFFFFF'; //Use any hex code
var source = 'includes/php/popup.php'; //Refer to any page on your server, external pages are not valid
var borderColor = '#333333'; //Use any hex code
var borderWeight = 4; //Use an integer (in pixels)
var borderRadius = 5; //Use an integer (in pixels)
var fadeOutTime = 300; //Use any integer, 0 = no fade
var disableColor = '#666666'; //Use any hex code
var disableOpacity = 40; //Valid range 0-100
var loadingImage = 'lib/release-0.0.1/loading.gif'; //Use relative path from this page
//This method initialises the modal popup
$(".modal").click(function() {
modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
});
//This method hides the popup when the escape key is pressed
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup(fadeOutTime);
}
});
});
</script>
</head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
is wrong
use this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
see the difference it is src.