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
Related
As you can see in my index.html page, I am adding two javascript file in a single page, one is for menu drop down and another is for readmore option.i'm new to javascript please help.when i add both last one file is work only first file cannot work .
"index.html"
<!DOCTYPE html>
<html>
<head>
<title>united</title>
<link rel="stylesheet" href="/static/css/dps.css"/>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">MENU</button>
<div id="myDropdown" class="dropdown-content">
<a href='..'>Home</a>
About
Contact
Question Bank
calender
calculator
</div>
</div><br>
<script src="/static/js/menu.js"></script>
<script src="/static/js/readmore.js" ></script>
</Body>
</html>
"menu.js"
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
"readmore.js"
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
}
else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
please solve my problem why two js files cannot work in a single page.
Welcome to Stack Overflow!
Both your scripts define a function with the same name: myFunction. If you define 2 functions with the same name, then the second function will shadow the first one, meaning that the first one is inaccessible. When calling myFunction you will always call the second function.
If you make sure that the functions have different names, then it should work.
be carefull about the "onClick" EventListener, the good way to do that is to add an EventListener to the element.
For exemple for your button
const element = document.getElementById('dropbtnId');
element.addEventListener("click", function() {
myFunction();
});
Here is an example with your code :
const element = document.getElementById('dropbtnId');
element.addEventListener("click", function() {
alert("triggered");
});
<html>
<head>
<title>united</title>
<link rel="stylesheet" href="/static/css/dps.css"/>
</head>
<body>
<div class="dropdown">
<button id="dropbtnId" class="dropbtn">MENU</button>
<div id="myDropdown" class="dropdown-content">
<a href='..'>Home</a>
About
Contact
Question Bank
calender
calculator
</div>
</div><br>
Next step is to rename your functions, and then call it inside the EventListener
I ve the following working in codepen but not localy
https://codepen.io/LoudDesignStudios/pen/RwxPJKY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="assets/css/css1.css">
</head>
<body>
<section id="about-us" class="">
s1
</section>
<section id="why-choose-us" class="">
s2
</section>
<section id="funfacts" class="">
s3
</section>
<section id="services" class="">
s4
</section>
<section id="studio" class="">
s5
</section>
<section id="contactus" class="">
s6
</section>
<section id="footer-widgets" class="">
s7
</section>
<footer id="footer" class="footer">
footer
</footer>
<button onclick="topFunction()" id="scrollUp"><i class="las la-chevron-up" aria-hidden="true"></i></button>
<script>
var mybutton = document.getElementById("scrollUp");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 60 || document.documentElement.scrollTop > 60) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
Same codes working in other websites made a while ago and still working just starting from scratch now the window.scroll is not firing.
Thanks.
It's because you're trying to get an element (mybutton) by its ID before the document's contents are fully loaded.
You will need to wrap your code inside a DOMContentLoaded event handler. Below is slightly modified version of your JavaScript code:
document.addEventListener("DOMContentLoaded", function () {
var mybutton = document.getElementById("scrollUp");
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 60 || document.documentElement.scrollTop > 60) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
});
function topFunction() {
document.body.scrollTop = 0;
document.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
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
I am new to web development. I am trying to create my photography webpage. I have created a basic html design.
I want to filter the image when the specific button is clicked. I went through the w3schools code about it but could not get quite clear about it. Not with the JQuery.
Here is my html code with buttons.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="script.js"></script>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')">ALL</button>
<button class="btn active" onclick="filterSelection('all')">Nature</button>
<button class="btn active" onclick="filterSelection('all')">Animal</button>
</div>
<!--grid-->
<div class="row">
<div class="column_nature">
<div class="content">
<img src="images/nature.jpg" style="width:40%">
<h4>Nature</h4>
<p>This is me</p>
</div>
</div>
</div>
<div class="column_nature">
<div class="content">
<img src="images/swan.jpg" style="width:40%">
<h4>Swan</h4>
</div>
</div>
</body>
</html>
Because both of your images had 'nature' on them, a filter would not have had any effect. I adapted your code to the w3schools example, but changed it so that the first image had 'nature' as a filter , and the second had 'bird' as a filter.
Incidentally, there is no underscore between the column and the filter name (If you put one in, as you did in your code) it won't work. I adapted this too.
Best of luck
/*this goes in your script.js*/
filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
/*this bit will go into your style.css file*/
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
/* Center website */
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 8px -16px;
}
/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
padding: 8px;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
display: none; /* Hide columns by default */
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
/* Add a grey background color on mouse-over */
.btn:hover {
background-color: #ddd;
}
/* Add a dark background color to the active button */
.btn.active {
background-color: #666;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="script.js"></script>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')">ALL</button>
<button class="btn active" onclick="filterSelection('nature')">Nature</button>
<button class="btn active" onclick="filterSelection('bird')">Animal</button>
</div>
<!--grid-->
<div class="row">
<div class="column nature">
<div class="content">
<img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg" style="width:40%">
<h4>Nature</h4>
<p>This is me</p>
</div>
</div>
</div>
<div class="column bird">
<div class="content">
<img src="https://www.phrases.org.uk/images/swan-song-1.jpg" style="width:40%">
<h4>Swan</h4>
</div>
</div>
</body>
</html>
I understand that you're new to programming; so beware that some users may provide you with answers suggesting you install jQuery, or Bootstrap - which while that it entirely true and what I would recommend - I equally understand that these all provide steep learning curves for a beginner.
As such, you can develop in HTML, CSS, and the naked JavaScript library as standard. So I have provided a solution to your problem in the code below, and documented my code also, so that you may better understand it.
Replace your code, with my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="script.js"></script>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('All')">ALL</button>
<button class="btn active"
onclick="filterSelection('Nature')">Nature</button>
<button class="btn active"
onclick="filterSelection('Swan')">Animal</button>
</div>
<!--grid-->
<div class="row">
<div class="column_nature filter" id="Nature">
<div class="content">
<img src="images/nature.jpg" style="width:40%">
<h4>Nature</h4>
<p>This is me</p>
</div>
</div>
</div>
<div class="column_nature filter" id="Swan">
<div class="content">
<img src="images/swan.jpg" style="width:40%">
<h4>Swan</h4>
</div>
</div>
</div>
<script>
// Function to hide all other elements, bar the parameter provided
function filterSelection(elementToShow){
if(elementToShow != "All"){
// Get an array of elements with the class name, filter.
var x = document.getElementsByClassName("filter");
// For each of them
for(var i = 0; i < x.length; i++){
// Make them invisible
x[i].style.display = "none";
}
// Get and then make the one you want, visible
var y = document.getElementById(elementToShow).style.display = "block";
}
else{ // If the parameter provided is all, we want to display everything
// Get an array of elements with the class name, filter.
var x = document.getElementsByClassName("filter");
// For each of them
for(var i = 0; i < x.length; i++){
//Make them visible
x[i].style.display = "block";
}
}
}
</script>
</body>
</html>
Please note the following; if you add a new button to filter something else, you must give it an * onclick="filterSelection('x')" * where the x is the name of that which you want to filter. Then on the div you want to keep, simply give it a class with the same name as "x".
So for instance, if I had a button:
<button onclick="filterSelection('Mountains')">Mountains</button>
Then I would expect that if I click it, that all filter class divs would be hidden, except for the div that had the class mountains. So I would have to have a div like so:
<div class="filter Mountains">This would be the div that would be displayed on click of the above button, and all others would be hidden.</div>
I hope this helps provide you with the answer you were looking for, although eventually it would be best to look into Bootstrap or jQuery which will be much more sustainable in the long run.
I need some with javascript code. I have a html code that read my list of image from in my image folder. I have to create a function button, so when I click on the next button, the next image will show. I have my code, but somehow it's not working. I have debug the code, there is no error, however the next image is not showing
Here is my code code:
var $ = function(id) {
return document.getElementById(id);
};
var listNode, captionNode, imageNode;
// Process image links
var i, linkNode, image;
var imageCache = [];
var imageCounter = 0;
var nexButton = function () {
listNode = $("image_list");
captionNode = $("caption");
imageNode = $("image");
var links = listNode.getElementsByTagName("a");
var imageCounter = 0;
for (i = 0; i < links.length; i++) {
linkNode = links[i];
// Preload image and copy title properties
image = new Image();
image.src = linkNode.getAttribute("href");
image.title = linkNode.getAttribute("title");
if (imageCounter < linkNode) {
imageCounter = imageCounter + 1;
image = imageCache[imageCounter];
imageNode.src = image.src;
captionNode.firstChild.nodeValue = image.title;
}
else {
alert("This is the last image");
}
}
};
window.onload = function() {
$("next").onclick = nexButton;
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="main.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="slide_show.js"></script>
</head>
<body>
<section>
<h1>Fishing Slide Show</h1>
<ul id="image_list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h2 id="caption">Casting on the Upper Kings</h2>
<p>
<img src="images/casting1.jpg" alt="" id="image">
</p>
<input type="button" value="Previous" name="previous" id="previous">
<input type="button" value="Next" name="next" id="next">
</section>
</body>
</html>