I'm pretty new to JavaScript, I am trying to execute my external JS to html, what im trying to do is to see if the mouseover responds when my mouse hovers one img.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GWW- A Global Warming Warning...</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="gridContainer clearfix">
<div class="world">
<img src="poluicao/poluicao0001.png" alt="Mundo">
<div class="botao1">
<img src="poluicao/offbuton.png" alt="but1">
</div>
<div class="botao2">
<!--<a href="#" >//-->
<img id="readybotao" src="degelo/offbutton.gif" alt="but2">
<!-- </a> //-->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="javascript.js"</script>
</body>
</html>
And this is my JS file:
function buttonon() {
alert("If it showed up it worked!");
}
document.getElementById('readybotao').addEventListener("onmousover",buttonon());
What am I doing wrong?
change external javascript like this :
var ele = document.getElementById("readybotao");
ele.addEventListener("mouseover",buttonon);
function buttonon() {
alert("If it showed up it worked!");
}
and close tag script :
<script src="javascript.js"></script>
you have >missing on the line <script src="javascript.js"</script>
Related
I am trying to make a basic rectangle inside of my webpage using svg.js. I have the library installed via npm and i have refrenced the source file in a script tag, but my SVG drawing will not show up.
The console provides the error, "Uncaught ReferenceError: SVG is not defined",
Here is a snippet of my project
var draw = SVG('drawing').size(300, 300);
var rect = draw.rect(100, 100).attr({
fill: '#f06'
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="main.css">
<title>Breathe</title>
</head>
<body>
<div class="container">
<div class="header-container">
<div class="title-container">
<div>Title</div>
<div></div>
<div></div>
</div>
</div>
<div class="main-container">
<div id="drawing"></div>
</div>
<div class="footer-container">
</div>
</div>
<script src="main.js" type="text/javascript"></script>
<script src="node_modules\svg.js\dist\svg.js"></script>
</body>
</html>
You loaded the main.js file first and then svg.js. Try reversing the order.
<script src="node_modules\svg.js\dist\svg.js"></script>
<script src="main.js" type="text/javascript"></script>
try this code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Owl Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</script>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
I'm trying to use owl carousel in my new project but it seems the owl carousel isn't working, i have tried with the above code dont know where im going wrong please can any one help me so that it will help me to fix the issue, since im new to this field im unable to solve the issue,please can any one help me out in this
remove <script src="jquery.min.js"></script> from last
and initialize Carousel like below
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel({
});
});
or try this code
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel({});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Owl Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
</body>
</html>
I can't get this basic code to work for fancybox3. Is it not loading the js library?
Original site is here: http://fancyapps.com/fancybox/3/
<!doctype html>
<html><head>
<meta charset="UTF-8">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
</head>
<body>
<a data-fancybox="gallery" href="big_1.jpg">
<img src="small_1.jpg">
</a>
</body>
</html>
Put the scripts before the closing body tag.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
</head>
<body>
<a data-fancybox="gallery" href="https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg">
<img src="https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg">
</a>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
</body>
</html>
worked great by adding:
<link rel="stylesheet prefetch" href="jquery.fancybox.min.css">
With adding script above body close tag as recommend by others
Thanks guys.
PHP Version 7.0
JQuery Version 3.1.0
You can see that the everything above the code is simply copied and pasted every five seconds rather than refreshing.
The intention is to refresh the include every five seconds.
Website: http://ssmsportal.cf/pages/incomingCalls.php
Code:
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>ServerSide Moderation Services</title>
<link rel="stylesheet" href="../styles/tablesStyles.css" type="text/css" />
<link rel="stylesheet" href="../styles/incomingCallsStyle.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<script src="../scripts/general.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Whats Up?</title>
</head>
<body class="body">
<?php include '../includes/header.php'; ?>
<div class="mainContent">
<div class="logRegArea">
<article class="callsContent" style='padding-left: 0px; padding-right: 0px;'>
<header>
<h2 class="loginArea" style="text-align:center">Incoming Calls:</h2>
</header>
<content>
<div id="login">
<?php include '../includes/incomingCalls.php'; ?>
</div>
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
$('#login').load('../includes/incomingCalls.php')
}, 5000);
});
</script>
</content>
</article>
</div>
</div>
<footer class="mainFooter">
<p>This website was developed by ROBLOX user: wattleman</p>
</footer>
</body>
</html>
That's the normal behavior of the load function.
You should instead try:
$.get("../includes/incomingCalls.php", function(data) {
$("#login").html(data);
});
I am trying to implement galleria.js in my webpage. I have followed the documentation and have created index.html accordingly. All I am getting is the compilation of the images one after another, but not the galleria view.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>my photo</title>
</head>
<body>
<div class="gallery">
<img src="galleria/im/out1.jpg">
<img src="galleria/im/out2.jpg">
<img src="galleria/im/out3.jpg">
</div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<script src="galleria/themes/classic/galleria.classic.min.js"></script>
<script>
$(document).ready(function() {
$('#gallery').galleria({
transition: 'fadeslide',
width:800,
height:600
});
});
</script>
</body>
</html>
I checked the docs of galleria.js but I think the issue is basically the selector in your code. You are getting an element with id "gallery" and you dont have any element with that id,just an element with that class :)
$('#gallery').galleria({
ans I think it should be
$('.gallery').galleria({
After several attempts the following works fine with me. I have missed to put https:// before the jquery address.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>my photo</title>
</head>
<body>
<div id="gallery">
<img src="galleria/im/out.jpg">
<img src="galleria/im/out1.jpg">
<img src="galleria/im/out3.jpg">
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<script src="galleria/themes/classic/galleria.classic.min.js"></script>
<script>
$(document).ready(function() {
$('#gallery').galleria({
transition: 'fadeslide',
width:1450,
height:740
});
});
</script>
</body>
</html>