how to call a function from javascript to html

how to call a function from javascript to html - javascript

I cant able to call the functions when I link it through different javascript file
I wanna call this to my HTML how should I do this I tried adding script file but it doesn't work
<html>
<head>
<link href="home.css" rel="stylesheet" type="text/css">
<script type="application/javascript" src="jj.js"></script>
</script>
</head>
<body>
<div class="container" id="showSlides()">
<div class="image-sliderfade fade">
<img src="img1.png" style="width:100%">
</div>
<div class="image-sliderfade fade">
<img src="img2.png" style="width:100%">
</div>
<div class="image-sliderfade fade">
<img src="img3.png" style="width:100%">
</div>
<div class="dotcontainer">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<body>
<head>
now this is my .js file
function showSlides() {
var i;
var slides = document.getElementsByClassName("image-sliderfade");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 4000);
}

<html>
<head>
<link href="home.css" rel="stylesheet" type="text/css">
</head>
<body onload="showSlides()">
<div class="image-sliderfade fade">
<img src="img1.png" style="width:100%">
</div>
<div class="image-sliderfade fade">
<img src="img2.png" style="width:100%">
</div>
<div class="image-sliderfade fade">
<img src="img3.png" style="width:100%">
</div>
<div class="dotcontainer">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<script type="application/javascript">
function showSlides() { var i;
var slides = document.getElementsByClassName("image-sliderfade");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 4000);
}
</script>
</body>
</html>

You can change your second code-snippet to also execute the funtion when the page is loaded, like:
<link href="home.css" rel="stylesheet" type="text/css">
<script type="application/javascript" src="jj.js"></script>
<script>
window.onload = function () {
showSlides();
}
</script>

You can build a self executing function like this :
(function() {
var i;
var slides = document.getElementsByClassName("image-sliderfade");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 4000);
})();
I did not test your function if it works, I only copy and paste it in my answer.
If you are using jQuery then you can call it when the document is loaded:
jQuery(document).ready(function(){
Your function call here.....
});

You've included the file. However you never execute the function all your code is in.
This is likely the cause.
Try the following:
on line 1 of jj.js (before the function) write console.log('this is jj.js'); and run the page. In your console (web inspector) you should see the message "this is jj.js" which means the script tag is doing it's thing.
Then remove the console log (you don't need it) and either make sure your code isn't inside the function (so simply remove it) or invoke the function by doing something like:
showSlides(); function showSlides() { console.log('Init function')}

Change your reference to
<script type="text/javascript" src="jj.js"></script>
Call your showSlides() inside anywhere your script jj.js.
e.g
function showSlides(){
//Function body goes here
}
showSlides();
But best is to call it onload either javascript's window.onload or jquery's $(document).ready(function(){ showSlides()})

<link href="home.css" rel="stylesheet" type="text/css">
<script type="application/javascript" src="jj.js"></script>
You can use either jQuery or pure javascript for this i.e
// use dom elements
<script>
document.addEventListener('DOMContentLoaded', function() {
showSlides()
}, false);
</script>
DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
// use below function
<script>
(function () {
showSlides()
})();
</script>
It’s an Immediately-Invoked Function Expression. It executes immediately after it’s creation.
// jQuery function
<script>
$(function() {
showSlides()
});
</script>
// use window event
<script>
window.onload = function() {
showSlides()
};
</script>
it is fired when the entire page loads, including its content (images, CSS, scripts, etc.)
<script>
$(document).ready( function () {
showSlides()
})
</script>
It is fired when the DOM is ready which can be prior to images and other external content is loaded.
Add one of above function in your jj script

Related

Running 2 slideshows in the same page

I want to run 3 slideshows on one page, I tried copying the code but it wasn't successful. I'm using a W3 slideshow. Also, I want to make the Next & previous buttons like in this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow Please help me
Here is the code:
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
.mySlides {display:none;}
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-content w3-display-container">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>
</body>
</html>

animations doesn't work when I add bootstrap4 cdn

<div class="mySlides fade">
<img src="https://media.giphy.com/media/9JpsWBPgRtBDOYE6QB/source.gif" style="width:100%; height: 100%; border-radius: 0; ">
</div>
<div class="mySlides fade">
<img src="https://media2.giphy.com/media/fRGq1cnopavJ7mKDYn/giphy.webp" style="width:100%; height: 100%; border-radius: 0; ">
</div>
<div class="mySlides fade">
<img src="https://media1.giphy.com/media/lPRrCc9lQsOPa2qZiw/giphy.webp" style="width:100%; height: 100%; border-radius: 0; ">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(+1)">❯</a>
</div>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
clearTimeout(timer);
showSlides(slideIndex += n);
}
function currentSlide(n) {
clearTimeout(timer);
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n==undefined){n = ++slideIndex}
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
timer = setTimeout(showSlides, 2500);
}
</script>
This is my slider image with button and auto slide. I got this code from w3schools and edited.Some of the codes are not good but the main problem is when I add Bootstrap4 CDN it is not working and some of the divs(class "container") are getting smaller. How can I solve this.

Overwrite this bootstrap CSS
.fade:not(.show) { opacity: 1; }
Full Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
.fade:not(.show){
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="mySlides fade">
<img src="https://media.giphy.com/media/9JpsWBPgRtBDOYE6QB/source.gif" style="width:100%; height: 100%; border-radius: 0 ">
</div>
<div class="mySlides fade">
<img src="https://media2.giphy.com/media/fRGq1cnopavJ7mKDYn/giphy.webp" style="width:100%; height: 100%; border-radius: 0 ">
</div>
<div class="mySlides fade">
<img src="https://media1.giphy.com/media/lPRrCc9lQsOPa2qZiw/giphy.webp" style="width:100%; height: 100%; border-radius: 0 ">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(+1)">❯</a>
</div>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
clearTimeout(timer);
showSlides(slideIndex += n);
}
function currentSlide(n) {
clearTimeout(timer);
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n==undefined){n = ++slideIndex}
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
timer = setTimeout(showSlides, 2500);
}
</script>
<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.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>

Sidenav Dropdowns Conflicting

I am attempting to have a dropdown navigation system, however, I am unable to have both dropdowns open at the same time. Despite hours of looking I can't seem to find a way to achieve this.
Any help is much appreciated.
My HTML;
<head>
<title>Home</title>
<link type="text/css" href="F:\Revision Website\Styling\Stylesheet.css" rel="stylesheet"/>
<script type="text/javascript" src="F:\Revision Website\Scripts\Main.js"></script>
</head>
<body>
<header>
<h1>Home</h1>
</header>
<nav>
<div class="navbar">
Home
<button class="dropbtn" onclick="showFunction()">Computing</button>
<div class="dropdownContainer" id="content">
Link 1
Link 2
Link 3
</div>
<button class="dropbtn" onclick="showFunction()">Physics</button>
<div class="dropdownContainer" id="content">
Link 1
Link 2
Link 3
</div>
</div>
</nav>
<article>
<p></p>
</article>
</body>
My JS;
function showFunction() {
document.getElementById("content").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdownContainer");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
EDIT
The following code "works" however, only through use of internal JS, which I rather not use.
var dropdown = document.getElementsByClassName("dropbtn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}

Please Use
<button class="dropbtn" onclick="showFunction(this)">Physics</button>
and javascript
function showFunction(ele) {
$(ele).find('#content').classList.toggle("show");
}
i think this would be help

Why does my javascript code rotate big images (>1MB)?

Hello and thanks in advance!
I created with some help the following code to display images out of a folder in kind of a slideshow. every minute the side will reload itself if nobody did something. this is to display new images while the slideshow is running. if the uploaded image is small (<1MB) the slideshow displays everything fine. But do I upload or copy larger images the slideshow flips or rotates the image sometime 180' or 90'.
here is the code:
<?php
$dir_path = "uploads/prints/";
$extensions_array = array('jpg','png','jpeg');
if(is_dir($dir_path))
{
$files = array_slice(scandir($dir_path), 2);
foreach ($files as $file)
{
$ext = pathinfo($file);
$ext = $ext['extension'];
if(in_array($ext, $extensions_array))
$images[] = '<img class="mySlides" src="'. $dir_path . $file.'" style="max-width:90%";>';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>automatic slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
</head>
<body background="/back2.png">
<!--<h2 class="w3-center">Automatic Slideshow</h2> -->
<div class="w3-content w3-section" style="width:500px">
<?php echo implode ($images); ?>
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 4000); // Change image every 4 seconds
}
//refresh page
var timeout = setTimeout("location.reload(true);",60000);
function resetTimeout() {
clearTimeout(timeout);
timeout = setTimeout("location.reload(true);",0000);
}
</script>
</body>
Does anyone has an idea?

how to show Image slider for long time

I am trying to show the image slider for long time where I already used timeout for every image to display.
But now I want to image slider in this case also:
1.The system should not go the sleep mode if we are not using the system, it
should show the image slider until I close the browser.
2.The system should not go to the screensaver mode, it should show the image
slider until I close the browser.
code:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mySlides
{
display:none;
}
</style>
<body>
<h2 class="w3-center"></h2>
<div class="w3-content w3-section" style=""width='962px';height='565px';frameborder='0'"">
<img class="mySlides" src="Chrysanthemum.jpg" style="width='100%">
<img class="mySlides" src="Desert.jpg" style="width:100%">
<img class="mySlides" src="Hydrangeas.jpg" style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++)
{
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length)
{
myIndex = 1;
}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000);
}
</script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

how to call a function from javascript to html - javascript

You can change your second code-snippet to also execute the funtion when the page is loaded, like: <link href="home.css" rel="stylesheet" type="text/css"> <script type="application/javascript" src="jj.js"></script> <script> window.onload = function () { showSlides(); } </script>

Related

Running 2 slideshows in the same page

animations doesn't work when I add bootstrap4 cdn

Sidenav Dropdowns Conflicting

Why does my javascript code rotate big images (>1MB)?

how to show Image slider for long time

Categories

Resources