Trying to create Chrome extension where it deletes particular elements from the third party website.
I'm getting an issue I want to remove a class element by getting an element by ID on the third party website and it run successfully when the whole website reload. But when the only page content update then they find the null value.
Please Note The whole page does not reload only the contents of the page reload.
Other items stay same like Heading, Descriptions, etc are same but only the episode changes.
For example, a video streaming site where the episode of videos in a list sequence and when the first episode ends the next episode reload only and starts playing. Other items stay the same heading of the videos, the name, the summary are not changed.
var temp = document.getElementById('html5_player_id_html5');
alert('Element temp : ' + temp);
Result: Null
var v = document.getElementsByClassName("ad-cuet");
alert('Element temp : ' + v[0]);
while (v.length >0) v[0].remove();
alert("Hello timetext remove");
Result: Undefined
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('btn_click_id');
// onClick's logic below:
link.addEventListener('click', function() { alert("Hello from Button click 1");
myFunction();
});
});
function timedText() { setTimeout(myTimeout, 1000) }
function myTimeout()
{
var v = document.getElementsByClassName("ad-cuet");
while (v.length >0) v[0].remove();
alert('Element temp : ' + v[0]);
alert("Timetext remove");
}
function myFunction()
{
// event.preventDefault();
var temp = document.getElementById('html5_player_id');
alert('Element html5_player_id : ' + temp);
if(typeof(temp) != 'undefined' && temp != null)
{
// temp.remove();
alert("3 Dance4dancers chrome extenstion :");
console.log("html5_player_id : " + temp);
alert('Element html5_player_id exists!');
timedText();
}
else
{
if(typeof(temp) != 'undefined' && temp != null)
{
alert('Element null value!');
timedText();
}
else{
// myFunction();
timedText();
alert('Element does not exist!');
}
}
}
/* Modal Structure */
html,
body {
font-family: "Open Sans", sans-serif;
font-size: 14px;
margin: 0;
min-height: 180px;
padding: 0;
width: 260px;
}
h1 {
font-family: "Menlo", monospace;
font-size: 22px;
font-weight: 400;
margin: 0;
color: #2f5876;
}
a:link,
a:visited {
color: #000000;
outline: 0;
text-decoration: none;
}
img {
width: 10%;
}
.modal-header {
align-items: center;
border-bottom: 0.5px solid #dadada;
}
.modal-content {
padding: 0 22px;
}
.modal-icons {
border-top: 0.5px solid #dadada;
height: 50px;
width: 100%;
}
.logo {
padding: 16px;
}
.logo-icon {
vertical-align: text-bottom;
margin-right: 4px;
}
.version {
color: #444;
font-size: 18px;
}
.flex-container {
display: flex;
justify-content: space-between;
padding: 10px 22px;
}
.flex {
opacity: 1;
transition: opacity 0.2s ease-in-out;
width: 80px;
}
.flex:hover {
opacity: 0.4;
}
.flex .fa {
font-size: 30px;
color: #2f5876;
}
.separator {
width: 100%;
border-top: 2px groove white;
margin: 5px -5px 5px -3px;
}
#titletext {
padding: 8px 8px 2px 0px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>D4d Launcher</title>
<link rel="stylesheet" href="goog letets.css">
</head>
<body >
<div class="modal-header">
<h1 id="#titletext" class="logo">
<img class="logo-icon" src="images/icons.png " /><b> Dance 4 dancerss</b>
</h1>
</div>
<div class="modal-content">
<p>If you've DANCE content would like to share, just send a DM/TAG US on instagram <b>#dance4dancerss</b> & we post it.
Featuring dancers from around the world <i class="fa fa-globe" style="color:rgb(248, 75, 44) "></i> </p>
</div>
<div class="modal-icons">
<div class="flex-container">
<div class="flex">
<a href="https://www.youtube.com/watch?v=q_WvEJntnJM" target="_blank">
<i class="fa fa-youtube" style="color:rgb(248, 75, 44) "></i>
</a>
</div>
<div class="flex">
<a href="https://www.twitter.com/dance4dancers" target="_blank">
<i class="fa fa-twitter" style="color:rgb(248, 75, 44) "></i>
</a>
</div>
<div class="flex">
<a href="https://www.instagram.com/dance4dancerss" target="_blank">
<i class="fa fa-instagram" style="color:rgb(248, 75, 44) "></i>
</a>
</div>
<div class="flex">
<a href="https://facebook.com/dance4dancers" target="_blank">
<i class="fa fa-facebook" style="color:rgb(248, 75, 44) "></i>
</a>
</div>
</div>
<div></div>
<div id="separator0" class="modal-header">
</div>
<button class="btn_click" id="btn_click_id">Click</button>
</div>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
Where the content of the page updated rather than the whole page reupload.
I searched it throughout the day today but didn't get any information anywhere.
Related
Using Javascript to open and close a navbar but it's not working in my new project
When i use devtools i can see the function active but my nav bar does not open or close. So funny because i've used it for an old project which is working fine. I have no idea why this time it's frustrating. I need your help please if any
This is the js code
let Menupopupup = document.getElementById("dropdownheadernav");
function opendropdownheadernav() {
Menupopupup.classList.add("Openmenudrops");
document.body.style.overflow = "hidden";
}
function closedropdownheadernav() {
Menupopupup.classList.remove("Openmenudrops");
document.body.style.overflow = "auto";
}
This is my HTML
<nav class="firstnavigationbar">
<button id="Showscroll" type="submit" class="barsbutton" onclick="opendropdownheadernav()">
<div class="barbtnimagecontainer" >
<img class="barbtn"
src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
height="23"
width="22"
alt=""
/></div></button>
<ul class="firstunorderedlist" id="dropdownheadernav">
<button id="Closescroll" type="button" class="closemenubutton" onclick="closedropdownheadernav()"><span class="closemenuspan">✕</span></button>
This is my Css
.firstunorderedlist {
margin-top: -40px;
display: none;
color: #1e2329;
list-style: none;
line-height: 3.5;
background-color: #fff;
width: 320px;
overflow: hidden;
}
The element UL must be closed with /ul. As for javascript, you need to find the element by id and then use style.display and make it equal to the desired value. I attached the neatified code below. It does what you need and is made shorter.
<!DOCTYPE html>
<html>
<head>
<style>
.firstunorderedlist {
margin-top: -40px;
display: none;
color: #1e2329;
list-style: none;
line-height: 3.5;
background-color: #fff;
width: 320px;
overflow: hidden;
}
</style>
</head>
<body>
<nav class="firstnavigationbar">
<button id="Showscroll" type="submit" class="barsbutton" onclick="openNav()">
<div class="barbtnimagecontainer" >
<img class="barbtn"
src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
height="23"
width="22"
alt="">
</div>
</button>
<ul class="firstunorderedlist" id="dropdownheadernav">
<li>Code</li>
<li>Goes</li>
<li>Here</li>
</ul>
<button id="Closescroll" type="button" class="closemenubutton" onclick="openNav()">
<span class="closemenuspan">✕</span>
</button>
<script>
let navOpened = false;
function openNav() {
if (navOpened) {
navOpened = false;
document.getElementById("dropdownheadernav").style.display = 'none';
} else {
navOpened = true;
document.getElementById("dropdownheadernav").style.display = 'initial';
}
}
</script>
</body>
</html>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: blue;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: red;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #04AA6D;
color: white;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<body>
<div class="mobile-container">
<div class="topnav">
Navbar
<div id="myLinks">
News
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h3>Vertical Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</div>
</div>
</body>
<html>
i'm presently working on a gitHub battle game with JavaScript manipulations. Please, how can i make the "PLAY AGAIN" button restart the game. (Starting All Over Again)
I also want to make the "DIV WITH CONTROL-BUTTON ID" display as block only if data fetch from API was successful.... Thanks
MY CODE IS BELOW:
"use strict";
let user = document.getElementsByClassName('github-username'),
player1 = document.getElementById('player-one'),
player2 = document.getElementById('player-two'),
form1 = document.getElementById('form1'),
form2 = document.getElementById('form2'),
cont1 = document.getElementById('continue1'),
cont2 = document.getElementById('continue2'),
reSelect = document.getElementById('reselect-players'),
playAgain = document.getElementById('play-again'),
initiate = document.getElementById('initiate-battle');
// Function that activate the start button
function getStarted() {
let startPage = document.getElementById('startPage'),
startBtn = document.getElementById('get-started-button');
startBtn.onclick = function() {
startPage.style.display = "none";
player1.style.display = "block";
};
};
getStarted();
// Function that initiates player 1 input
function firstForm() {
player1.style.display = "none";
player2.style.display = "block";
return false;
};
// Function that initiates player 2 input
function secondForm() {
let confirmPage = document.getElementById('confirm-page');
player2.style.display = "none";
confirmPage.style.display = "block";
// Function that fetches users data from input
function fetchUsers() {
let user1, user2;
fetch("https://api.github.com/users/" + user[0].value)
.then(function(response) {
return response.json();
})
.then(function(data) {
// Log the data to the console
console.log(data);
// Cache the data to a variable
user1 = data;
let myUser1 = document.getElementById('user1-container'),
totalScore = (1 * user1.followers + 1 * user1.following + 0.5 * user1.public_repos);
myUser1.innerHTML = `<ul class="user-info">
<p id="firstPlayer"> Player 1 </p>
<li id="score">Score: <span class="totalScr"> ${totalScore}</span> </li>
<li><img class="avatar" src="${user1.avatar_url}"></li>
<li>Name: ${user1.name} </li>
<li>Username: ${user1.login} </li>
<li>Following: ${user1.following} </li>
<li>Followers: ${user1.followers} </li>
<li>Repository: ${user1.public_repos} </li>
</ul>`;
//Make another API call and pass it into the stream
return fetch("https://api.github.com/users/" + user[1].value)
.then(function(response) {
//Get a JSON object from the response
return response.json();
})
})
.then(function(data) {
//Log the data to the console
console.log(data);
// Cache the data to a variable
user2 = data;
//Now that you have both APIs back, you can do something with the data
let myUser2 = document.getElementById('user2-container'),
totalScore2 = (1 * user2.followers + 1 * user2.following + 0.5 * user2.public_repos);
myUser2.innerHTML = `<ul class="user-info">
<p id="secondPlayer"> Player 2 </p>
<li id="score2">Score: <span class="totalScr"> ${totalScore2}</span> </li>
<li><img class="avatar" src="${user2.avatar_url}"></li>
<li>Name: ${user2.name} </li>
<li>Username: ${user2.login} </li>
<li>Following: ${user2.following} </li>
<li>Followers: ${user2.followers} </li>
<li>Repository: ${user2.public_repos} </li>
</ul>`;
})
};
fetchUsers();
setTimeout(function() {
document.getElementById('control-buttons').style.display = "block";
playAgain.style.display = "none";
}, 1500);
return false;
};
//Function that assign users score and winner
initiate.onclick = function() {
document.getElementById("confirm-players").innerHTML = "Winner";
document.getElementById('score').style.display = "block";
document.getElementById('score2').style.display = "block";
initiate.style.display = "none";
reSelect.style.display = "none";
playAgain.style.display = "block";
let totalScr = document.getElementsByClassName("totalScr"),
totalScr1 = parseFloat(totalScr[0].innerText),
totalScr2 = parseFloat(totalScr[1].innerText);
if (totalScr1 > totalScr2) {
document.getElementById("firstPlayer").innerHTML = "Winner";
document.getElementById("secondPlayer").innerHTML = "Loser";
} else if (totalScr1 < totalScr2) {
document.getElementById("firstPlayer").innerHTML = "Loser";
document.getElementById("secondPlayer").innerHTML = "Winner";
} else {
confirm("IT'S A TIE, PLAY AGAIN");
};
};
reSelect.onclick = function() {
confirmPage.style.display = "none";
player1.style.display = "block";
user[0].value = null;
user[1].value = null;
};
playAgain.onclick = function() {
//Make this function start the game again, following the usual pattern
};
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, cursive;
background-image: url('images/photo.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
input[type=text] {
-moz-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
border: 1px solid #999;
margin: 50px 0 15px;
}
.body-container {
margin: 0;
text-align: center;
}
.body-container p {
font-size: 16px;
padding-bottom: 5px;
}
.head-text {
padding-top: 60px;
margin-bottom: -10px;
font-size: 36px;
}
#confirm-players {
font-size: 30px;
margin: 10px 0 5px;
}
#get-started-button {
font-size: 18px;
font-weight: 10%;
border: none;
width: 150px;
word-spacing: 2px;
border-radius: 5px;
height: 40px;
background-color: green;
color: white
}
.continue-button {
font-size: 18px;
word-spacing: 2px;
border: none;
width: 200px;
border-radius: 5px;
height: 40px;
background-color: green;
color: white
}
#get-started-button:hover,
.continue-button:hover,
#initiate-battle:hover {
background-color: darkgreen;
}
.github-username {
width: 65%;
height: 35px;
padding: 10px;
margin: 20px 0 15px;
}
#score,
#score2 {
font-size: 18px;
font-weight: bolder;
display: none;
text-align: center;
}
#player-one,
#player-two {
display: none;
}
#confirm-page,
#winner {
display: none;
margin: 20px 0 10px;
}
#initiate-battle,
#play-again {
font-size: 18px;
border: none;
width: 200px;
border-radius: 5px;
word-spacing: 2px;
letter-spacing: 0.4px;
height: 40px;
background-color: green;
color: white;
margin: 15px auto 5px;
}
#reselect-players {
font-size: 18px;
border: none;
word-spacing: 2px;
letter-spacing: 0.4px;
width: 240px;
border-radius: 5px;
height: 35px;
background-color: cornflowerblue;
color: white;
margin: 10px auto;
}
#control-buttons {
display: none;
}
#reselect-players:hover {
background-color: darkslateblue;
}
.avatar {
border-radius: 50%;
height: 200px;
width: 200px;
}
.myUsers {
display: inline-block;
margin: 0 5px 0 10px;
}
ul {
margin-left: -30px;
}
li {
list-style: none;
padding: 5px;
text-align: left;
border: 1px solid grey;
}
#firstPlayer,
#secondPlayer {
margin-bottom: 0;
}
<DOCTYPE! html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="githstyle.css" type="text/css">
</head>
<body>
<div id="startPage" class="body-container">
<h1 class="head-text">GitHub Challenge</h1>
<p>Some challenges are worth engaging 🤓</p>
<button id="get-started-button">Get Started</button>
</div>
<div id="player-one" class="body-container">
<h1 class="head-text">Player One</h1>
<div class="form-container">
<form id="form1" onsubmit="return firstForm();">
<div>
<input type="text" class="github-username" placeholder="Enter Player's GitHub Username" required>
</div>
<div>
<input type="submit" value="Continue" id="continue1" class="continue-button">
</div>
</form>
</div>
</div>
<div id="player-two" class="body-container">
<h1 class="head-text">Player Two</h1>
<div class="form-container">
<form id="form2" onsubmit="return secondForm()">
<div>
<input type="text" name="" class="github-username" placeholder="GitHub Username" required>
</div>
<div>
<input type="submit" value="Continue" id="continue1" class="continue-button">
</div>
</form>
</div>
</div>
<div id="confirm-page" class="body-container">
<h1 id="confirm-players">Confirm players</h1>
<div id="user1-container" class="myUsers">
</div>
<div id="user2-container" class="myUsers">
</div>
<div id="control-buttons">
<div>
<button id="initiate-battle">Initiate Battle</button>
</div>
<div>
<button id="reselect-players">Reselect Players</button>
</div>
<div>
<button id="play-again">Play Again</button>
</div>
</div>
</div>
<script src="gith.js" type="text/javascript">
</script>
</body>
</html>
Reloading the page using JavaScript is very easy.
You can achieve this by using location.reload()
If you want to achieve reloading using a button, then be sure to add a return false; right after you call location.reload() to prevent bubbling (parents of the button won't know the event occurred).
So, your code will look something like this :
document.getElementById('yourButton').addEventListener('click', function(){
location.reload();
return false;
});
Hope this helps ! :)
I'm currently trying to create a navigation bar that sticks when you scroll past. I've gotten to the point where the bar will stick when I scroll past, but when I scroll back to the top the navbar is still sticking. I've been able to troubleshoot to realize that the navbar.offsetTop is being set to 0 when scrolling past, which causes the class "sticky" to never be removed. How can I fix this so that the navbar retains its original offset while being "stuck" to the top of the page?
HTML
<div style="height: 40px">
<ul class="navbar" id="navbar">
<a class="navbutton left" href="about.html"><b>About</b></a>
<a class="navbutton left" href="Games.html"><b>Games</b></a>
<a class="navbutton left" href="#"><b>Btn 1</b></a>
<a class="navbutton left" href="#"><b>Btn 2</b></a>
<a class="navbutton left" href="#"><b>Btn 3</b></a>
<a class="navbutton left" href="#"><b>Btn 4</b></a>
<a class="navbutton" href="#" style="float: right"><b>Btn 5</b></a>
</ul>
</div>
CSS
body {
font-family: Monaco;
background-color: white;
color: #f0dcca;
transition-duration: 0.4s;
}
.navbar {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbutton {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
/* padding: length|initial|inherit; */
padding: 10px 12px;
transition-duration: 0.4s;
}
.navbutton:hover {
background-color: #f0dcca;
color: black;
}
.sticky {
position: fixed;
top:0;
width: 100%;
}
.content {
padding: 16px;
}
.sticky + .content {
padding-top: 60px;
}
Javascript
function stickyNav() {
var navbar = document.getElementById("navbar");
var navTop = navbar.offsetTop;
console.log('navTop = ' + navTop);
console.log('scrollY = ' + window.scrollY);
if (window.scrollY >= navTop) {
navbar.classList.add("sticky");
}
else {
navbar.classList.remove("sticky");
}
}
window.addEventListener('scroll', stickyNav);
The problem is in the function definition of stickyNav.
What I'm seeing is stickyNav function is registered as a callback for the scroll event. But the variables navbar and navTop are inside the function which is assigning values to them every time you scroll. And navTop is getting assigned 0 every time. And the sticky class is never removed.
Try avoiding reassigning values. This worked for me.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Monaco;
background-color: white;
color: #f0dcca;
transition-duration: 0.4s;
height: 1000px;
}
.navbar {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbutton {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
/* padding: length|initial|inherit; */
padding: 10px 12px;
transition-duration: 0.4s;
}
.navbutton:hover {
background-color: #f0dcca;
color: black;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.content {
padding: 16px;
}
.sticky+.content {
padding-top: 60px;
}
</style>
<script>
function stickyNav() {
var navbar = document.getElementById("navbar");
var navTop = navbar.offsetTop;
window.addEventListener('scroll', function() {
console.log('navTop = ' + navTop);
console.log('scrollY = ' + window.scrollY);
if (window.scrollY >= navTop) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
});
}
</script>
</head>
<body onload="stickyNav()">
<h1>dummy content</h1>
<h1>dummy content</h1>
<h1>dummy content</h1>
<div style="height: 40px">
<ul class="navbar" id="navbar">
<a class="navbutton left" href="about.html"><b>About</b></a>
<a class="navbutton left" href="Games.html"><b>Games</b></a>
<a class="navbutton left" href="#"><b>Btn 1</b></a>
<a class="navbutton left" href="#"><b>Btn 2</b></a>
<a class="navbutton left" href="#"><b>Btn 3</b></a>
<a class="navbutton left" href="#"><b>Btn 4</b></a>
<a class="navbutton" href="#" style="float: right"><b>Btn 5</b></a>
</ul>
</div>
</body>
</html>
I wrote a custom drop down for a phone-gap project. It has 3 entries: Enterprices Routing & Switches, Junos Security and Service Provider Routing and Switching. Whenever I select any one of 3 entries, it gets selected successfully, however It shows selected entry twice. I want selected entry to be shown only once. My JavaScript code is:
$(".current_track").click(function() {
if ($('.track').is(':visible')) {
$(".track").hide();
$(".trackIcon").removeClass("trackOpenIcon").addClass("trackCloseIcon");
if ($('.trackName').text() != "Select Track") {
$(".category").show();
$('.lock_hide').show();
$('#TrackBuy').show();
}
} else {
$(".category").hide();
$('.lock_hide').show();
$('#TrackBuy').hide();
$(".track").show();
$('.lock_hide').show();
$(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
}
});
$('.trackDiv').on("click", ".track", function() {
$('.trackName').text($(this).text());
$('.trackName').attr("id", $(this).attr("id"));
$(".track").hide();
$(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
$('.lock_hide').show();
// saving user selected/clicked trackid and track name to local stroage
localStorage.setItem("mainTrackid", $(this).attr("id"));
localStorage.setItem("mainTrackname", $(this).text());
localStorage.setItem("selectedTrackPayStatus", $(this).attr("payStatus"));
localStorage.removeItem("selectedTrackPrice");
// check first paper exist or not if exist means load exams list
checkTrackpapersExist();
});
Entire code example.
Updated fiddle.
You could use an extra class selected to do the trick.
Remove selected class from all the track's and add it to the clicked one :
$('.trackDiv').on("click", ".track", function() {
$('.track').removeClass('selected');
$(this).addClass('selected');
$('.trackName').html($(this).html()); //Use '.html()' to show the icon
....
});
Hide the selected track from the dropdown :
$(".current_track").click(function() {
.....
$('.track.selected').hide();
});
Hope this helps.
$(".current_track").click(function() {
if ($('.track').is(':visible')) {
$(".track").hide();
$(".trackIcon").removeClass("trackOpenIcon").addClass("trackCloseIcon");
if ($('.trackName').text() != "Select Track") {
$(".category").show();
$('.lock_hide').show();
$('#TrackBuy').show();
}
} else {
$(".category").hide();
$('.lock_hide').show();
$('#TrackBuy').hide();
$(".track").show();
$('.lock_hide').show();
$(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
}
$('.track.selected').hide();
});
$('.trackDiv').on("click", ".track", function() {
$('.track').removeClass('selected');
$(this).addClass('selected');
$('.trackName').html($(this).html());
$('.trackName').attr("id", $(this).attr("id"));
$(".track").hide();
$(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
$('.lock_hide').show();
});
.trackDiv > .track > .fa-lock {
margin-top: 3px;
}
.fa-lock {
color: #fff;
font-size: 23px;
}
.lock_category {
padding-right: 0px;
padding-top: 3px;
}
.lock_hide {
display: none;
}
.fa-unlock {
color: #fff;
font-size: 17px;
}
.trackDiv {
background-color: #374550;
border-radius: 4px;
height: 40%;
margin: 2% 0 0;
padding: 3% 2.7% 2.9%;
width: 100%;
}
.trackName {
color: #fff;
font-family: "robotRegular";
font-size: 16px;
font-weight: 500;
}
.trackOpenIcon {
background-image: url("../JunosImages/mob/down-arrow_normal1.png");
background-image: url("../JunosImages/mob/front-arrow_normal_tab.png");
background-repeat: no-repeat;
background-size: 100% 100%;
display: block;
height: 11px;
margin-top: 1.5%;
width: 19px;
}
.trackCloseIcon {
background-image: url("../JunosImages/mob/front-arrow_normal_tab.png");
background-repeat: no-repeat;
background-size: 100% 100%;
display: block;
height: 18px;
margin-top: 0.7%;
width: 12px;
}
.track {
color: #fff;
display: block;
font-family: "robotRegular";
font-size: 16px;
font-weight: 500;
padding: 5% 0 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="categorylist">
<div class="trackDiv">
<div class="current_track">
<span class="trackName">Select Track</span>
<span class="trackIcon trackOpenIcon pull-right"></span>
<div><span class="label label-primary Buy" id="TrackBuy" style="display:none">Buy $24</span></div>
</div>
<span id="t1" class="track">Enterprices Routing & Switches <span class="fa fa-lock pull-left"></span></span>
<span id="t2" class="track">Junos Security</span>
<!-- <span id="t3" class="track">Data Center Design</span> -->
<span id="t4" class="track"> Service Provider Routing and Switching</span>
</div>
<div class="category">
<span class="ctgryName">JNCIs - SEC</span>
<span class="ctgryIcon pull-right"></span>
</div>
<div class="category">
<span class="ctgryName">JNCIS - ENT</span>
<span class="ctgryIcon pull-right"></span>
</div>
<div class="category">
<span class="ctgryName">JNCIS - ENT</span>
<span class="ctgryIcon pull-right"></span>
</div>
<div class="category">
<span class="ctgryName" id="ctgryName">JNCIA - Junos</span>
<span class="ctgryIcon pull-right"></span>
</div>
</div>
I've been learning HTML and CSS for some weeks now and I start feeling comfortable with those. However I'm trying to learn JavaScript too.
I've been working on a button in HTML and CSS, you can view the demo of the button here.
I want to make the dropdown menu visible when you click the button and also if you click the button again the dropdown menu disappears.
Is there any simple or understandable way for creating a function which does this in JavaScript?
Here is the code I have:
HTML:
<div id="language-wrapper">
<a class="language-icon fr" href="#" alt="choose-your-language">Language</a>
<div id="language-dropdown">
<h3>Choose your language</h3>
<a class="language-links" href="#">Chinese</a>
<a class="language-links" href="#">Danish</a>
<a class="language-links" href="#">Deutsch</a>
<a class="language-links" href="#">English</a>
<a class="language-links" href="#">Espanol</a>
<a class="language-links" href="#">Filipino</a>
<a class="language-links" href="#">Hindu</a>
<a class="language-links" href="#">Italiano</a>
<a class="language-links" href="#">Norsk</a>
<a class="language-links" href="#">Nederlands</a>
<a class="language-links" href="#">Polski</a>
<a class="language-links" href="#">Portugues</a>
<a class="language-links" href="#">Svenska</a>
<a class="language-links" href="#">Suomi</a>
<a class="language-links" href="#">Turkce</a>
<a class="language-links" href="#">Urdu</a>
<p>Do you speak multiple languages or can't find your language? <font color="#d13030">Help us translate!</font><p>
</div> <!-- end of language-dropdown class -->
</div> <!-- end of language-wrapper -->
CSS:
#language-wrapper { display: inline-block; }
#language-wrapper:hover #language-dropdown { opacity: 1; display: block; }
.language-icon {
color: #fff;
font-weight:700;
padding-right:20px;
padding-left:30px;
display:inline-block;
font-size:11px;
text-align:right;
text-decoration:none;
position:relative;
left: 0; top: 0;
}
.fr { background: url("images/language-sprite.png") no-repeat 0 0; }
.fr:hover { background: url("images/language-sprite.png") no-repeat 0 -20px; color: #d13030; }
.language-icon:before {
content:'\25BE';
width:0px;
height:0;
position:absolute;
right:16px;
top: 0;
}
.language-icon:hover:before {
color: #d13030;
content: '\25B4';
top: -1px;
}
/* ------------------ LANGUAGE DROPDOWN ------------------ */
#language-dropdown {
opacity: 0;
width: 1023px;
display: none;
margin-top: 3px;
left: 0;
position: absolute;
border: 1px solid #ddd;
background: #fff;
box-shadow: 0px 3px 3px #b3b3b3;
}
#language-dropdown h3 {
color: #d13030;
font-size: 14px;
font-weight: normal;
padding: 5px 15px 0px 15px;
}
#language-dropdown p {
font-size: 12px;
padding: 0px 0px 10px 15px;
}
#language-dropdown a {
padding: 0px 0px 0px 15px;
}
.language-links {
font-size: 12px;
text-decoration: none;
color: #2793e6;
}
.language-links:hover {
text-decoration: underline;
}
it can be a basic toggle display function on onclik event:
function toggle(el) {
var tag=document.getElementById(el);
tag.style.display = tag.style.display === 'block' ? 'none' : 'block';
// set as defaut oposite defaut active value in document
// here defaut is set to block cause it is none in CSS
}
<a class="language-icon fr" href="#" alt="choose-your-language" onclick="toggle('language-dropdown');">Language</a>
test here : http://codepen.io/anon/pen/cHIrd/
note:
opacity:0; removed from your initial CSS
Better practice is to toggle class not style values :)
and maybe to set onclick event via javScript.
return false can be added to avoid link to href .
<a class="language-icon fr" href="#" alt="choose-your-language" onclick="toggle('language-dropdown');return false;">Language</a>
The Html
<button id="clickme">Clickme</button>
<h1 id="Another">Menu</h1>
The JavaScript:
document.getElementById("clickme").onclick=function(){
var el = document.getElementById('Another');
if (el.style.display == '') {
el.style.display = 'none';
alert("hide");
}else{
el.style.display = '';
alert("show");
}
};
Here is a sample