I am working on a little project. To keep my files clean, I split them up into separate HTML files and I load them via Jquery. This always worked, but now when adding responsiveness. It won't work! When I put the code directly in the HTML, it works! Can someone help me?
PS: The file gets loaded in HTML because I can see the navbar, I just can't click the button to open the menu.
Here is my code:
navresponsive.html
<img src="images/close.png" alt="close icon" class="closeIcon">
Thuispagina
Mijn Verhaal ;)
Mijn foto's
Mijn despacito 2 cover
story.html
<!DOCTYPE html>
<html>
<head>
<title>Page!</title>
<link rel="icon" href="./assets/pictures/salcosecond.ico">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="navResponsive" id="navResponsive">
</div>
<div class="nav" id="nav">
</div>
</html>
main.js
$(document).ready(() => {
// Navigation bar
$('#header').load('files/header.html');
$('#nav').load('files/nav.html');
$('#navResponsive').load('files/navresponsive.html');
// Responsive nav
$(".open").click(function(){
$(this).css("display", "none");
$(".navResponsive").css("width", "100%");
});
$(".close").click(function(){
$(".navResponsive").css("width", "0");
$(".open").css("display", "block");
});
});
Since the contents are dynamically loaded, events will be attached way before your page is loaded into DOM wherein either you've to follow event delegation or work with promises.
Event Delegation
Change click event as below:
$(document).on('click',".open", function(){
$(this).css("display", "none");
$(".navResponsive").css("width", "100%");
});
$(document).on('click',".close", function(){
$(".navResponsive").css("width", "0");
$(".open").css("display", "block");
});
Promises
var promises = [];
promise.push($('#header').load('files/header.html'));
promise.push($('#nav').load('files/nav.html'));
promise.push($('#navResponsive').load('files/navresponsive.html'));
Promise.all(promise).then(function(){
$(".open").click(function(){
$(this).css("display", "none");
$(".navResponsive").css("width", "100%");
});
$(".close").click(function(){
$(".navResponsive").css("width", "0");
$(".open").css("display", "block");
});
});
Rename navresponsive.html to navresponsive.php
Rename story.html to story.php, and edit:
<!DOCTYPE html>
<html>
<head>
<title>Page!</title>
<link rel="icon" href="./assets/pictures/salcosecond.ico">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="navResponsive" id="navResponsive">
<?php include('navresponsive.php'); ?>
</div>
<div class="nav" id="nav">
</div>
</html>
Forgot the jQuery method. :)
Related
I'm trying to bind a function when someone check the checkbox.
I've this jsfiddle it works fine, but I've the same code and it's not working.
I've used CDNs for JQuery and Bootstrap, hope that there is no issue with that.
In the code below even is not binding perfectly and I didn't see any alert, although the same code works perfectly fine in the fiddle mentioned.
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap FILES -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- font awesome for the icons -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-center">
<input type="checkbox" id='mark' name='mark'>
</div>
</div>
</div>
</div>
<script>
$(document).on('click', 'input[name="mark"]', function() {
// when the checkbox is checked then do the following
alert('thanks for checkcing me');
});
</script>
</body>
</html>
what is wrong with this code? if not, then why I'm not getting any kind of alert when I check the checkbox.
Please help, thanks !
Check the jquery loaded:
if (typeof jQuery == 'undefined') {
console.log("jQuery is not loaded"); // Or
alert("jQuery is loaded");
} else {
console.log("jQuery is not loaded");
alert("jQuery is not loaded");
}
Suppose the title attribute was used as the text for a tool tip. Is it possible just to change the text, using jQuery?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
Hover over me
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
I couldn't get it to change with the option as I believe the api says using title is to tell it what the value should be if the title is not there. I got it to work by changing the title to be data-title and gave the title option as a function that returns this value.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
title: function () {
return this.getAttribute('data-title');
}
});
setInterval(function(){
$('[data-toggle="tooltip"]').attr('data-title', Date.now());
}, 1000);
});
<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>
<div class="container">
<h3>Tooltip Example</h3>
Hover over me
</div>
I am testing a scroll down button on a website and wondering why the action does not work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style_sheet.css" type="text/css" rel="stylesheet" />
<title>COS</title>
<script>
$(function() {
$('.scroll-down').click (function() {
$('html, body').animate({scrollTop: $('section.ok').offset().top }, 'slow');
return false;
});
});
</script>
</head>
<body>
<section>
<p>SCROLL DOWN CSS</p>
</section>
<section class="ok">
<p>OK SCROLL !</p>
</section>
</body>
</html>
If I understand right, the javascript should be located in head. What am I doing wrong?
In the code you've posted, there's no jQuery linked in.
Try inserting <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
`
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').off("mouseenter mouseleave");
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
why i am not able to get tooltip even if i initializing two times ??
DavidG's comment with logging. Basically you need to completely destroy the tooltip if you want to be able to call tooltip again and have it attach the listeners. By doing calling off you were just removing the listeners but not destroying the tooltip. Therefore when you called tooltip a second time it would not initialize the tooltip again. Because of the following line:
if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
https://github.com/twbs/bootstrap/blob/v3-dev/js/tooltip.js#L501
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a data-toggle="tooltip" data-placement="top" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
console.log("init");
$('[data-toggle="tooltip"]').tooltip();
setTimeout(function() {
console.log("destroy");
$('[data-toggle="tooltip"]').tooltip("destroy");
setTimeout(function() {
console.log("reinit");
$('[data-toggle="tooltip"]').tooltip();
}, 5000);
}, 5000);
});
</script>
</body>
</html>
I removed the duplicate declaration and added a tooltip placement and now it works
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a data-toggle="tooltip" data-placement="top" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a id="anchor" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<script>
var handler = function (e) {
$('[data-toggle="tooltip"]').tooltip();
}
$(document).ready(function(){
$('[data-toggle="tooltip"]').off("mouseenter mouseleave",handler);
$('[data-toggle="tooltip"]').on("mouseenter mouseleave",handler);
});
</script>
</body>
</html>
It works, though I believe there might be better solutions if you elaborate more on what exactly it is that you want to do.
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>