New to JQuery and web dev in general.
I have been trying to get the confirm override simplemodal demo to work, so that it pops up with on alert on initial load of my site.
The below is the standard sample, but I have included the $(document).ready() function to try and fire the modal dialog on startup.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#confirm-dialog').modal();
});
</script>
</head>
<body>
<div id='container'>
<div id='content'>
<div id='confirm-dialog'>
<input type='button' name='confirm' class='confirm' value='Demo'/>
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/confirm/header.gif' alt='' />
<img src='img/confirm/button.gif' alt='' />
</div>
</div>
</div>
</body>
</html>
However, this does not fire, and from what my limited experience with Firebug, I cannot see any errors so must be my code logic that is the issue?
It works for me in JSFiddle. What about using .dialog method of jquery UI library:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.ui.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#confirm-dialog').dialog({modal: true});
});
</script>
</head>
<body>
<div id='container'>
<div id='content'>
<div id='confirm-dialog'>
<input type='button' name='confirm' class='confirm' value='Demo'/>
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/confirm/header.gif' alt='' />
<img src='img/confirm/button.gif' alt='' />
</div>
</div>
</div>
</body>
</html>
You can download jquery.ui file from here
Related
I am trying to make a simple webpage with buttons that redirect to other subpages, all the HTML javascript, and CSS files are in the same folder. When I use the javascript code it just won't redirect when I click the button, anyone knows what is wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
<script src="script.js" type="text/javascript"></script>
</script>
<link href="styles.css" rel="stylesheet">
<title>About me</title>
</head>
<body>
<div class="title">
<h1 style="size: 22;">HOMEPAGE</h1>
</div>
<div class="btn-group blue">
<button id="general">General</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
<div class="float-container">
<div class="float-child" style="border: white;">
<img src="https://api.time.com/wp-content/uploads/2014/03/improving-life-health-hiking-nature.jpg" alt="Picture of Hiker" style="width: 100%; padding: 5px;"/>
</div>
<div class="float-child">
<p>
Hello, welcome to my website.
</p>
</div>
</div>
</body>
</html>
And here is the Javascript.
document.addEventListener('DOMContentLoaded', function(){
let general = document.querySelector(".general");
general.addEventListener('click', function(){
window.location.replace("general.html");
});
});
Anyone notice anything?
I tried different ways of redirecting on W3 schools and none of it worked.
Because you have defined button by id not by class
<button id="general">General</button>
So change
let general = document.querySelector(".general");
to
let general = document.querySelector("#general");
document.addEventListener('DOMContentLoaded', function(){
let general = document.querySelector("#general");
general.addEventListener('click', function(){
window.location = "https://www.facebook.com";
return false;
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
<script src="script.js" type="text/javascript"></script>
</script>
<link href="styles.css" rel="stylesheet">
<title>About me</title>
</head>
<body>
<div class="title">
<h1 style="size: 22;">HOMEPAGE</h1>
</div>
<div class="btn-group blue">
<button id="general">General</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
<div class="float-container">
<div class="float-child" style="border: white;">
<img src="https://api.time.com/wp-content/uploads/2014/03/improving-life-health-hiking-nature.jpg" alt="Picture of Hiker" style="width: 100%; padding: 5px;"/>
</div>
<div class="float-child">
<p>
Hello, welcome to my website.
</p>
</div>
</div>
</body>
</html>
I have the following script that allows me to resize the image, however, I am not able to drag the image around and change its position
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="home.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
</head>
<body>
<div class="row">
<div class="div1">
<h1> About Us </h1>
<p class="card-text">
general description
</p>
<div id="draggableHelper" style="display:inline-block">
<img id="image" src = "images/jimslogo2.png"/>
</div>
</div>
<div class="div2">
<span class="dot">
<div>
<div id="rotator"></div>
</div>
<p class="textScale">
<b>Featured Products </b>
</p>
</span>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#draggableHelper').draggable();
$('#image').resizable();
});
</script>
</body>
</html>
The image I'm trying to drag is contained in its own div tag within the "row" class div. I'm not sure this isn't working
What is your purpose in the draggable, you need to define the options for it
https://jqueryui.com/draggable/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="home.css" >
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="div1">
<h1> About Us </h1>
<p class="card-text">
general description
</p>
<div id="draggableHelper">
<img id="image" src = "images/jimslogo2.png"/>
</div>
</div>
<div class="div2">
<span class="dot">
<div>
<div id="rotator"></div>
</div>
<p class="textScale">
<b>Featured Products </b>
</p>
</span>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#draggableHelper').draggable();
$('#image').resizable();
});
</script>
</body>
</html>
Use these two links instead.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
You can try my answer here https://jsfiddle.net/a68mdzes/
Hope it works :)
You appear to have two versions of jQuery (3.5.1 & 1.9.1) in your script. You are also using an older version of jQuery UI (1.9.2). It would be best to ensure you are using the latest versions.
$(document).ready(function() {
$('#draggableHelper').draggable();
$('#image').resizable();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
<div class="div1">
<h1> About Us </h1>
<p class="card-text">general description</p>
<div id="draggableHelper" style="display:inline-block">
<img id="image" src="https://dummyimage.com/100x100/000/fff.png&text=IMAGE" />
</div>
</div>
<div class="div2">
<span class="dot">
<div>
<div id="rotator"></div>
</div>
<p class="textScale">
<b>Featured Products </b>
</p>
</span>
</div>
</div>
The above test allows for both to work as expected. You will notice I am using only one version of jQuery and jQuery UI.
I need to add popover/tooltip functionality to my page and I can't get it to work. I don't get any console errors, the popup just does not show up. I've tried reordering my scripts and putting them every part of my code. I tried basically every form of the activation script I could find as you will see here. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="au theme template">
<meta name="author" content="Hau Nguyen">
<meta name="keywords" content="au theme template">
<!-- Title Page-->
<title>Company</title>
<!-- New Tab Favicon -->
<link rel="icon" href="images/favicon_tranparent.png">
<script src="/jquery-3.4.1.min.js" language="JavaScript" type="text/javascript"></script>
<!-- <script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script> -->
<script>
$(function(){
$("#generatedTable").load("<%= table %>");
});
</script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<script>
$(function () {
$('#popover').popover({
container: 'body'
})
})
</script>
<script>
$(function () {
$('.popover').popover({
container: 'body'
})
$('.popover-dismiss').popover({
trigger: 'focus'
})
})
</script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<script>
jQuery(document).ready(function () {
jQuery('[data-toggle="tooltip"]').tooltip();
});
</script>
<p id="noSpaceName" hidden><%= noSpaceName %><p>
<p id="CSV" hidden><%= CSV %><p>
<script>
function dynamic_file() {
var folder = document.getElementById("noSpaceName").innerHTML
var file = document.getElementById("CSV").innerHTML
console.log("data/" + folder + "/" + file)
return "data/" + folder + "/" + file;
}
function download_file(name) {
var dlink = document.createElement('a');
var currentTime = new Date();
dlink.download = document.getElementById("noSpaceName").innerHTML.concat("-" + currentTime.toDateString().split(' ').join('-'));
dlink.href = name;
dlink.onclick = function(e) {
// revokeObjectURL needs a delay to work properly
var that = this;
setTimeout(function() {
window.URL.revokeObjectURL(that.href);
}, 1500);
};
dlink.click();
dlink.remove();
}
</script>
<!-- Fontfaces CSS-->
<link href="/font-face.css" rel="stylesheet" media="all">
<link href="/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
<link href="/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<!-- Bootstrap CSS-->
<link href="/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">
<!-- Vendor CSS-->
<link href="/animsition/animsition.min.css" rel="stylesheet" media="all">
<link href="/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
<link href="/wow/animate.css" rel="stylesheet" media="all">
<link href="/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
<link href="/slick/slick.css" rel="stylesheet" media="all">
<link href="/select2/select2.min.css" rel="stylesheet" media="all">
<link href="/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">
<!-- Main CSS-->
<link href="/theme.css" rel="stylesheet" media="all">
<link href="/custom.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="#" />
<script src="/jquery-3.2.1.min.js"></script>
<script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script>
<script src="/bootstrap-4.1/bootstrap.min.js"></script>
</head>
<body class="animsition">
<div class="page-wrapper">
<!-- MENU SIDEBAR-->
<aside class="menu-sidebar d-none d-lg-block">
<div class="logo">
<a href="">
<img src="temp_logo.png" alt="Company Name" />
</a>
</div>
<div class="menu-sidebar__content js-scrollbar1">
<nav class="navbar-sidebar">
<ul class="list-unstyled navbar__list">
<li>
<a class="js-arrow" href="/">
<i class="fas fa-table"></i>Arrest Records</a>
</li>
<li>
<a href="/analytics">
<i class="fas fa-chart-bar"></i>Analytics
</a>
</li>
</ul>
</nav>
</div>
</aside>
<!-- END MENU SIDEBAR-->
<!-- PAGE CONTAINER-->
<div class="page-container">
<!-- HEADER DESKTOP-->
<header class="header-desktop">
<div class="section__content section__content--p30">
<div class="container-fluid">
<div class="header-wrap">
<div></div>
<div class="custom_title">
<h2><font color="#666666"><%= fullName %></font></h2>
</div>
<div class="flex-box">
<!-- <a id="csv" href="" download=""> -->
<a id="popover" data-trigger="hover" data-toggle="popover">Popover</a>
<button onclick='download_file(dynamic_file())' class="btn btn-download"><i class="fa fa-download"></i> Download</button>
<script> $('[data-toggle="tooltip"]').tooltip()</script>
<!-- </a> -->
<!-- Log Out User -->
<form class="form-header" action="/logout?_method=DELETE" method="POST">
<button type="submit" class="btn btn-lightish"><i class="zmdi zmdi-power"></i> Log Out</button>
</form>
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER DESKTOP-->
<!-- MAIN CONTENT-->
<div class="main-content">
<div class="section__content section__content--p30">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive table--no-card m-b-30">
<div id="generatedTable"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="copyright">
<p>Copyright © 2020 Company. All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Jquery JS-->
<!-- <script src="/jquery-3.2.1.min.js"></script> -->
<!-- Bootstrap JS-->
<!-- <script src="/bootstrap-4.1/popper.min.js"></script> -->
<script src="/bootstrap-4.1/bootstrap.min.js"></script>
<script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script>
<!-- Vendor JS -->
<script src="/slick/slick.min.js">
</script>
<script src="/wow/wow.min.js"></script>
<script src="/animsition/animsition.min.js"></script>
<script src="/bootstrap-progressbar/bootstrap-progressbar.min.js">
</script>
<script src="/counter-up/jquery.waypoints.min.js"></script>
<script src="/counter-up/jquery.counterup.min.js">
</script>
<script src="/circle-progress/circle-progress.min.js"></script>
<script src="/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="/chartjs/Chart.bundle.min.js"></script>
<script src="/select2/select2.min.js">
</script>
<!-- Main JS-->
<script src="/main.js"></script>
</body>
</html>
<!-- end document-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I can not get the values from an HTML page using document.getElementById ("ID"),is returning Null, in all the rest of the code everything works perfectly
Something so simple is driving me crazy, because in other parts of the code identically everything works perfectly
HTML:
<div id="childTemplateNotice" class="col-md-12">
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
JavaScript:
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
HTML INDEX:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="notice.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/coments/coments.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/header/header.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/footer/footer.css" media="screen" />
<!-- Bootstrap e Jquery -->
<link rel="stylesheet" type="text/css" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" media="screen" />
</head>
<body>
<div class="col-md-12">
<?php include "../../components/header/header.html"; ?>
<div id="noticeFather"class=" col-md-12">
<div class="ads col-md-12 top">
</div>
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
</div>
<div class="row">
<div class="right col-md-3"></div>
<div class="midle col-md-6">
<p class="body"></p>
<span class="linkTitle"></span>
<a class="linkUrl"></a>
<!-- Coments -->
<div class="comentsDiv col-md-12">
</div>
</div>
<div class="left col-md-3"></div>
</div>
</div>
</div>
<div class="col-md-12">
<?php include "../../components/coments/coments.html" ?>
</div>
<?php include "../../components/footer/footer.html"; ?>
</div>
<!-- Scripts js -->
<script type="text/javascript" src="../../node_modules/moment/min/moment.min.js"></script>
<script type="text/javascript" src="../../node_modules/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../components/header/header.js"> </script>
<script type="text/javascript" src="../../service/esmiucado-service.js"></script>
<script type="text/javascript" src="../../repositorio/repositorio.js"> </script>
<!-- Requisição DataBase -->
<script>
postNotice()
getComents(noticeCod)
</script>
</body>
</html>
I already try:
$(document).ready(function() {
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
});
and:
window.onload = function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
and they did not work
OBS: the files javascript and html are in different directories
UPDATE:
When I call the function of another page everything works fine, so the problem is when I call this specific page, but I have not yet identified which problem
in document.ready function either remove the function inside it or call the function. First one is also working fine you just have to call the function. window.onload is working perfectly
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
postNotice();
$(document).ready(function() {
console.log(document.getElementById('childTemplateNotice'))
});
window.onload = function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="childTemplateNotice" class="col-md-12">
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
The problem was happening simply because I was not calling the html element on the main page.
I stuck into this problem. My separate header and footer only show after the data in js file is completely fetched. When the data is loading, I can see the input (search image) and another text input but I can't see the header and footer. Any suggestion for getting the header and footer first before executing js file?
Thanks.
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script>
$(function(){
$("#header").load("../header/index.html");
$("#footer").load("../footer/index.html");
});
</script>
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../footer/style.css">
</head>
<body>
<div id="header"></div>
<section>
<div>
<input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
<div style="overflow: hidden;">
<input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
</div>
</div>
</section>
<div id="footer"></div>
<script src="./main.js"></script>
</body>
</html>
Header file
<link rel="stylesheet" href="./style.css">
<header>
<div class="container">
<div id="branding">
<img src="../img/icon.png" height="40" width="160"/>
</div>
<nav>
<img src="../img/firstFlag.png" height="20" width="30"/>
<img src="../img/secondFlag.png" height="20" width="30"/>
</nav>
</div>
</header>
Give this a try:
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../footer/style.css">
</head>
<body style="display: none">
<div id="header"></div>
<section>
<div>
<input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
<div style="overflow: hidden;">
<input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
</div>
</div>
</section>
<div id="footer"></div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="./main.js"></script>
<script>
$(function(){
$("#header").load("../header/index.html", function (){
$("#footer").load("../footer/index.html", function() {
$("body").fadeIn(1000);
});
});
});
</script>
</body>
if load method is sync, then try change your html structure like this :
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../footer/style.css">
<script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body style="display: none">
<div id="header"></div>
<div id="footer"></div>
<script>
$("#header").load("../header/index.html");
$("#footer").load("../footer/index.html");
</script>
<section>
<div>
<input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
<div style="overflow: hidden;">
<input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
</div>
</div>
</section>
<script src="./main.js"></script>
</body>