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>
Related
I know there are lots of similar questions but I can't get it to work and hope you can help me.
I have a nested list of items. Mostly simple hrefs but some are links which should call a copy-to-clipboard function and display a success message in as span afterwards.
The message should be displayed above the link and centered. On a desktop with high resolution there is no problem. On mobile,unfortunately showing the span uses space and moves the hrefs + the position is anywhere but above and in the middle.
Using data-tooltip class templates didn't work for me because they normally use "hover". In my case the span should only be displayed after clicking the link and shouldn't mess up the other elements.
function CopyToClipboard(id) {
// do copy stuff here
// [...]
// showing tooltip
var span_element = document.getElementById(id).parentElement.querySelector('span');
if(span_element != null) {
span_element.style.display = "inline";
setTimeout( function() {
span_element.style.display = "none";
}, 2000);
}
}
body {
margin-left: 0px;
}
ul {
padding-left: 20px;
}
div.container {
margin: 10px;
width: 98%;
word-break: break-all;
}
.custom-tooltip {
padding: 4px;
background-color: grey;
color: #fff;
position: relative;
bottom: 2em;
right: 5em;
display: none;
}
<html lang="de" class=" heujtnrdy idc0_345">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.90">
<link rel="stylesheet" href="index_tmp.css">
<script type="text/javascript" src="index_tmp.js"></script>
</head>
<body>
<div class="container">
<ul>
<li>
<span>Layer 1</span>
<ul>
<li>
<span>Layer 2</span>
<ul>
<li>
<span>Layer 3</span>
<ul>
<li>
<div>
<table>
<tr>
<td><a id="uGzkLTVmLY" onclick="CopyToClipboard('uGzkLTVmLY');return false;" href="#">Short text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Looooooooooooooooooong text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Even loooooooooooooooooooooooooooooooooooooooooooooooooooooonger text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
-- Update 05.02.2023 --
Here my modified CSS, based on granite's alternative solution. This looks like this:
.modal {
display: none;
position: fixed;
padding-top: 50%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
text-align: center;
justify-content: center;
}
.modal-content {
background-color: grey;
border: 0.5px solid grey;
border-radius: 3px;
color: #fff;
text-align: center;
margin: 0 auto;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.0em;
font-family: monospace;
font-weight: 700;
bottom: 1em !important;
position: fixed;
}
As a secondary option (via modal):
Html: 2 lines code.
CSS: 7 extra lines code.
JS: 10 extra lines code.
Just need to get the JS CopyToClipboard to link up.
<button id="MBtn" id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;">long text to copy</button>
<div id="Modal" class="modal"><div class="modal-content">Copied!</div></div>
.modal {
display: none;
position: fixed;
padding-top: 25%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #eff;
text-align:center;
margin: 0 auto;
padding: 3px;
width:4em;
}
var modal = document.getElementById("Modal");
var btn = document.getElementById("MBtn");
btn.onclick = function() {
modal.style.display = "block";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
TL;DR
I'd like to drag & drop spans from one container div to a target div and back but not being the draggable spans valid drop targets themselves.
Description
I'm bulding an interactive tournament bracket app and I do struggle with setting the elements valid drop targets. I have a bordered div with #team-container on the right where all the draggable team spans (.draggable-team) are placed (screen snippet).
I used this tutorial and managed to get it working perfectly but there is also an unintended behaviour.
The valid drop targets are indicated by .drop-target and I add event listeners to all of these via
const dropTargets = document.querySelectorAll(".drop-target");
dropTargets.forEach(dropTarget => {
// dropTarget.addEventListener(...);
});
Unfortunately, the items I like to place via drag & drop are also set as valid drop targets (see here). I think that is due to the querySelectorAll I use as the #team-container is a .drop-target too, so the teams can be returned there when necessary. The returned NodeList object does contain the #team-container with its childNodes containing the draggable teams which might be the cause of trouble.
Any idea how to prevent the childs (the teams I like to drag & drop) from being a valid drop target just by being placed into a div that also is a valid drop target? Every help much appreciated! Thanks!
Edit 1
Removed First version with the issue. Possible nesting of draggable team spans is undesirable.
I have kind of solved my problem with if clauses checking if the drop target also is a draggable-team or contains .name. Is there a more elegant way of preventing the draggable team spans from being selectable as drop target?
Edit 2
Added first version snippet here and removed links to jsfiddle.net
addDragListeners();
const dropTargets = document.querySelectorAll('.drop-target');
dropTargets.forEach((dropTarget) => {
dropTarget.addEventListener('dragenter', dragEnter);
dropTarget.addEventListener('dragover', dragOver);
dropTarget.addEventListener('dragleave', dragLeave);
dropTarget.addEventListener('drop', drop);
});
function addDragListeners() {
let items = document.querySelectorAll('.draggable-team');
items.forEach((item) => {
item.addEventListener('dragstart', dragStart);
});
}
function dragStart(e) {
e.dataTransfer.setData('text/plain', e.target.id);
setTimeout(() => {
e.target.classList.add('hide');
}, 0);
}
function dragEnter(e) {
e.preventDefault();
e.target.classList.add('drag-over');
}
function dragOver(e) {
e.preventDefault();
e.target.classList.add('drag-over');
}
function dragLeave(e) {
e.target.classList.remove('drag-over');
}
function drop(e) {
let dropTarget = e.target;
dropTarget.classList.remove('drag-over');
let id = e.dataTransfer.getData('text/plain');
let draggable = document.getElementById(id);
if (dropTarget.id === 'team-container') {
draggable.classList.remove('dragged-team');
} else {
draggable.classList.add('dragged-team');
}
dropTarget.appendChild(draggable);
draggable.classList.remove('hide');
}
/* ==================== GLOBAL ==================== */
:root {
--text-white: #aaaaaa;
--text-pale: #505050;
--team-background: #1e1e1e;
--background: #303030;
--blue: #003865;
--bracket-line: 4px solid #ffffff;
}
html {
font-size: 14px;
}
body {
margin: 0;
font-family: sans-serif;
background-color: var(--background);
}
* {
box-sizing: border-box;
}
/* ==================== BRACKET ==================== */
.bracket-container {
display: flex;
flex-direction: row;
column-gap: 0.5rem;
margin-left: 1rem;
}
/* ----- MATCHES ----- */
.match-column {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.match {
display: flex;
margin: 1rem 0;
}
.team-names {
display: flex;
flex-direction: column;
width: 100%;
}
.match-number {
height: 100%;
display: flex;
align-items: center;
margin-right: 0.5rem;
color: var(--text-white);
}
.top-number,
.top-name {
border-bottom: 1px solid var(--text-pale);
}
.number {
padding: 0.5rem 0.5rem;
min-width: 2.1rem;
color: var(--team-background);
background-color: var(--text-white);
justify-content: center;
display: flex;
}
.name {
padding: 0.5rem 1rem;
color: var(--text-white);
background-color: var(--team-background);
display: block;
height: 50%;
min-width: 10rem;
}
/* ==================== DRAG & DROP ==================== */
#team-container {
position: absolute;
display: flex;
flex-direction: column;
right: 10px;
top: 10px;
height: 50vh;
padding: 1rem 2rem;
border: 3px solid #000000;
}
#team-container>span {
margin: 1rem 0;
text-align: center;
max-height: 2.5rem;
}
.draggable-team {
cursor: move;
}
.dragged-team {
padding: 0;
height: 100%;
}
.hide {
display: none;
}
.drag-over {
background-color: var(--blue);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<article class="bracket-container">
<div class="match-column">
<div class="match">
<span class="seed-number">
<span class="number top-number">1</span>
<span class="number bottom-number">4</span>
</span>
<span class="team-names">
<span class="drop-target name top-name"></span>
<span class="drop-target name bottom-name"></span>
</span>
</div>
<div class="match">
<span class="seed-number">
<span class="number top-number">2</span>
<span class="number bottom-number">3</span>
</span>
<span class="team-names">
<span class="drop-target name top-name"></span>
<span class="drop-target name bottom-name"></span>
</span>
</div>
</div>
<div class="match-column">
<div class="match">
<span class="seed-number">
<span class="number top-number">1</span>
<span class="number bottom-number">2</span>
</span>
<span class="team-names">
<span class="drop-target name top-name"></span>
<span class="drop-target name bottom-name"></span>
</span>
</div>
</div>
</article>
<div id="team-container" class="drop-target">
<span class="draggable-team name" id="team1" draggable="true">Team1</span>
<span class="draggable-team name" id="team2" draggable="true">Team2</span>
<span class="draggable-team name" id="team3" draggable="true">Team3</span>
<span class="draggable-team name" id="team4" draggable="true">Team4</span>
</div>
<script src="script.js"></script>
</body>
</html>
Added second snippet with improved version here
addDragListeners();
const dropTargets = document.querySelectorAll(".drop-target");
dropTargets.forEach(dropTarget => {
dropTarget.addEventListener("dragenter", dragEnter);
dropTarget.addEventListener("dragover", dragOver);
dropTarget.addEventListener("dragleave", dragLeave);
dropTarget.addEventListener("drop", drop);
});
function addDragListeners() {
let items = document.querySelectorAll(".draggable-team");
items.forEach(item => {
item.addEventListener("dragstart", dragStart);
});
}
function dragStart(e) {
e.dataTransfer.setData("text/plain", e.target.id);
setTimeout(() => {
e.target.classList.add("hide");
}, 0);
}
function dragEnter(e) {
e.preventDefault();
e.target.classList.add("drag-over");
}
function dragOver(e) {
e.preventDefault();
e.target.classList.add("drag-over");
}
function dragLeave(e) {
e.target.classList.remove("drag-over");
}
function drop(e) {
let dropTarget = e.target;
dropTarget.classList.remove("drag-over");
let id = e.dataTransfer.getData("text/plain");
let draggable = document.getElementById(id);
// Move draggable back to tem-container if dropTarget is not empty
if (dropTarget.textContent != "") {
resetToTeamContainer(e);
} else {
// Remove class dragged-team when put back to team-container
if (dropTarget.id === "team-container") {
draggable.classList.remove("dragged-team");
} else {
draggable.classList.add("dragged-team");
}
// If dropped in draggable team, place back in team-container and remove
// class dragged-team
if (dropTarget.classList.contains("draggable-team")) {
resetToTeamContainer(e);
} else {
dropTarget.appendChild(draggable);
}
}
// display the draggable element
draggable.classList.remove("hide");
}
function resetToTeamContainer(e) {
let id = e.dataTransfer.getData("text/plain");
let draggable = document.getElementById(id);
draggable.classList.remove("dragged-team");
document.querySelector("#team-container").appendChild(draggable);
}
/* ==================== GLOBAL ==================== */
:root {
--text-white: #aaaaaa;
--text-pale: #505050;
--team-background: #1e1e1e;
--background: #303030;
--blue: #003865;
--bracket-line: 4px solid #ffffff;
}
html {
font-size: 14px;
}
body {
margin: 0;
font-family: sans-serif;
background-color: var(--background);
}
* {
box-sizing: border-box;
}
/* ==================== BRACKET ==================== */
.bracket-container {
display: flex;
flex-direction: row;
column-gap: 0.5rem;
margin-left: 1rem;
}
/* ----- MATCHES ----- */
.match-column {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.match {
display: flex;
margin: 1rem 0;
}
.team-names {
display: flex;
flex-direction: column;
width: 100%;
}
.match-number {
height: 100%;
display: flex;
align-items: center;
margin-right: 0.5rem;
color: var(--text-white);
}
.top-number,
.top-name {
border-bottom: 1px solid var(--text-pale);
}
.number {
padding: 0.5rem 0.5rem;
min-width: 2.1rem;
color: var(--team-background);
background-color: var(--text-white);
justify-content: center;
display: flex;
}
.name {
padding: 0.5rem 1rem;
color: var(--text-white);
background-color: var(--team-background);
display: block;
height: 50%;
min-width: 10rem;
}
/* ==================== DRAG & DROP ==================== */
#team-container {
position: absolute;
display: flex;
flex-direction: column;
right: 10px;
top: 10px;
height: 50vh;
padding: 1rem 2rem;
border: 3px solid #000000;
}
#team-container>span {
margin: 1rem 0;
text-align: center;
max-height: 2.5rem;
}
.draggable-team {
cursor: move;
}
.dragged-team {
padding: 0;
height: 100%;
}
.hide {
display: none;
}
.drag-over {
background-color: var(--blue);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<article class="bracket-container">
<div class="match-column">
<div class="match">
<span class="seed-number">
<span class="number top-number">1</span>
<span class="number bottom-number">4</span>
</span>
<span class="team-names">
<span class="drop-target name top-name"></span>
<span class="drop-target name bottom-name"></span>
</span>
</div>
<div class="match">
<span class="seed-number">
<span class="number top-number">2</span>
<span class="number bottom-number">3</span>
</span>
<span class="team-names">
<span class="drop-target name top-name"></span>
<span class="drop-target name bottom-name"></span>
</span>
</div>
</div>
<div class="match-column">
<div class="match">
<span class="seed-number">
<span class="number top-number">1</span>
<span class="number bottom-number">2</span>
</span>
<span class="team-names">
<span class="drop-target name top-name"></span>
<span class="drop-target name bottom-name"></span>
</span>
</div>
</div>
</article>
<div id="team-container" class="drop-target">
<span class="draggable-team name" id="team1" draggable="true">Team1</span>
<span class="draggable-team name" id="team2" draggable="true">Team2</span>
<span class="draggable-team name" id="team3" draggable="true">Team3</span>
<span class="draggable-team name" id="team4" draggable="true">Team4</span>
</div>
<script src="script.js"></script>
</body>
</html>
Remaining question:
Is there a way to prevent the draggable spans from being a valid drop target?
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.
I have a sub menu div which has a cart span in it. When the user hovers over it, it displays my hidden cart DIV. The user can then move the mouse to the DIV to remove an item.
If the user displays and moves the mouse into the hidden DIV then moves out of this, the DIV is re-hidden
The issue i'm having is that if the user displays the DIV but instead of moving into hidden DIV, goes back to the sub/main menu the DIV is not re-hiding and i have tried everything i can think.
Please check my fiddle
If you dont go to the div first it wont hide it
$('#subMenuCartBox').mouseover(function () {
$('#cartBox').show();
$('#cartBox').mouseleave(function () {
$('#cartBox').hide();
});
}).mouseleave(function () {
setTimeout(function () {
if (!$('#cartBox').length) {
$('#cartBox').hide();
}
});
})
.mainMenu {
width: 100%;
height: 75px;
background-color: lightblue;
}
.subMenu {
width: 100%;
height: 45px;
background-color: gray;
text-align: right;
padding: 10px;
}
.subMenuOptionSpan {
display: inline-flex;
}
.subMenuCartBox {
background-color: deepskyblue;
padding: 5px;
width: 100%;
cursor: pointer;
}
.cartBox {
float: right;
padding: 15px;
background-color: lightgray;
display: none;
left: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainMenu">
Main menu options
</div>
<div class="subMenu">
<div class="row justify-content-end align-items-center">
<span class="subMenuOptionSpan col-12 col-sm-auto">
<i class="fas fa-user fa-lg"></i>
<div id="username">Test of long username</div>
</span>
<span id="subMenuCartBox" class="subMenuOptionSpan col-12 col-sm-auto">
<i class="fas fa-shopping-cart fa-lg"></i>
<div id="cartAmountBox" class="subMenuCartBox">
<span id="cartAmountText" class="subMenuCartAmount">0 item(s) - £0.00</span>
</div>
</span>
</div>
</div>
<div id="cartBox" class="cartBox">
<b id="emptyCart">There are currently no items in your cart.</b>
</div>
I need the hidden DIV to re-hide if the user goes anywhere on the page without having to go inside it and then out of it.
With Jquery you can check on which side the mouse leaves the button and keep the div open when you leave the button on the bottom.
$('#subMenuCartBox').mouseover(function () {
$('#cartBox').show();
$('#subMenuCartBox').mouseleave(function (e) {
var $this = $(this);
var bottom = $this.offset().top + $this.outerHeight();
if(e.pageY < bottom) {
console.log("CLOSE");
$('#cartBox').hide();
}
});
$('#cartBox').mouseleave(function () {
$('#cartBox').hide();
});
}).mouseleave(function () {
setTimeout(function () {
if (!$('#cartBox').length) {
$('#cartBox').hide();
}
});
})
$('#subMenuCartBox').mouseover(function () {
$('#cartBox').show();
}).mouseleave(function () {
$('#cartBox').hide();
})
.mainMenu {
width: 100%;
height: 75px;
background-color: lightblue;
}
.subMenu {
width: 100%;
height: 45px;
background-color: gray;
text-align: right;
padding: 10px;
}
.subMenuOptionSpan {
display: inline-flex;
}
.subMenuCartBox {
background-color: deepskyblue;
padding: 5px;
width: 100%;
cursor: pointer;
}
.cartBox {
float: right;
padding: 15px;
background-color: lightgray;
display: none;
left: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainMenu">
Main menu options
</div>
<div class="subMenu">
<div class="row justify-content-end align-items-center">
<span class="subMenuOptionSpan col-12 col-sm-auto">
<i class="fas fa-user fa-lg"></i>
<div id="username">Test of long username</div>
</span>
<span id="subMenuCartBox" class="subMenuOptionSpan col-12 col-sm-auto">
<i class="fas fa-shopping-cart fa-lg"></i>
<div id="cartAmountBox" class="subMenuCartBox">
<span id="cartAmountText" class="subMenuCartAmount">0 item(s) - £0.00</span>
</div>
</span>
</div>
</div>
<div id="cartBox" class="cartBox">
<b id="emptyCart">There are currently no items in your cart.</b>
</div>
Do you mean you want to archive this? please clarify your question.
I am using a layout on the blog website Tumblr. I'd like to remove the "Childhood Influences" category from the Show All feature. I've only managed to remove it from the front page, but I would like the Childhood Influences to only show up when you click on its tab. Here's the code:
<!--
CURRENTLY WATCHING #2
pistachi-o (nutty-themes # tumblr)
Theme Documentation:
http://nutty-themes.tumblr.com/themedoc
Please Do Not:
http://nutty-themes.tumblr.com/terms
-->
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">
<meta name="description" content="" />
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<style type="text/css">
/* Reset ----------------------------- */
body,div,dl,dt,dd,ol,ul,li,pre,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
/* Scrollbar ----------------------------- */
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-track {background: #FFF;}
::-webkit-scrollbar-thumb {background: #DDD;}
/* General ----------------------------- */
body {
background: #f3f3f3;
font-size: 10px;
color: #000000;
font-family: 'Roboto Condensed', Arial, sans-serif;
line-height: 100%;
}
a:link, a:active, a:visited {
color: #130912;
text-decoration: none;
}
a:hover {
color: #f38335;
text-decoration: none;
}
b {
color: #f7941d;
text-decoration: none;
}
/* Isotope (DO NOT EDIT) ----------------------------- */
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
-webkit-hiatus-duration: 0.8s;
-moz-hiatus-duration: 0.8s;
hiatus-duration: 0.8s;
}
.isotope {
-webkit-hiatus-property: height, width;
-moz-hiatus-property: height, width;
hiatus-property: height, width;
}
.isotope .isotope-item {
-webkit-hiatus-property: -webkit-transform, opacity;
-moz-hiatus-property: -moz-transform, opacity;
hiatus-property: transform, opacity;
}
/* Navigation ----------------------------- */
#shows {
position: relative;
width: 100%;
height: 10px;
margin: 0px auto 10px;
background: blue;
padding: 15px 0px;
background: #fafafa;
text-align: center;
}
/* Contents ----------------------------- */
#container {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#containers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainer {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
.stylewrap {
background: #edd456;
width: 200px;
height: 165px;
margin: 5px;
text-align: center;
text-transform: uppercase;
}
.hiatus {
background: #a0c1ba;
}
.complete {
background: #45c0ab;
}
.childhood {
background: #e3e3e3;
}
.next {
background: #c6c6c6;
}
.stylewrap img {
margin: 0;
width: 200px;
border-bottom: 2px solid #F3F3F3;
}
h2 {
margin: 10px 0px 3px;
line-height: 100%;
}
#filters {
text-transform: uppercase;
}
#filters li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
#dash {
text-transform: uppercase;
margin: 25px;
}
#dash li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
.stylewrap:hover .grey {
filter: none;
-webkit-filter: grayscale(0%);
}
</style>
</head>
<body>
<div id="shows">
<ul id="filters" class="show-set clearfix" data-option-key="filter">
<li style="background: #f5f5f5;">Show All</li>
<li style="background: #f5f5f5;">Currently Watching</li>
<li style="background: #f5f5f5;">On Hiatus</li>
<li style="background: #f5f5f5;">Completed</li>
<li style="background: #f5f5f5;">Next Up</li>
<li style="background: #f5f5f5;">Childhood Influences</a></li>
</ul>
<ul id="dash">
<li>Back Home</li>
<li>Dashboard</li>
<li>Theme Credits</li>
</ul>
</div>
<div id="container">
<!-- To add completed show copy and paste the following -->
<div class="stylewrap next">
<img class="grey" src="http://imgur.com/Bktk9mC.jpg">
<h2 class="name">6teen</h2>
Up Next
</div>
<!-- End of Complete Show -->
<div class="stylewrap current">
<img class="grey" src="http://imgur.com/IO7NGnK.jpg" />
<h2 class="name">18 to Life</h2>
Season 2 Episode 11
</div>
<div class="stylewrap childhood">
<img class="grey" src="http://imgur.com/NTMO0xq.jpg">
<h2 class="name">7th Heaven</h2>
(1996-2007)
</div>
<!-- To add completed show copy and paste the following -->
<div class="stylewrap complete">
<img class="grey" src="http://imgur.com/vPkxn7c.jpg">
<h2 class="name">About a Girl</h2>
(2007-2008)
</div>
<!-- End of Complete Show -->
<!-- To add hiatus show copy and paste the following -->
<div class="stylewrap hiatus">
<img class="grey" src="http://imgur.com/owiMXh5.jpg">
<h2 class="name">Awkward.</h2>
Returning September 23, 2014
</div>
<!-- End of Hiatus Show -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/whx9ghv/1eGm9d17y/isotope.js"></script>
<script type="text/javascript">
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector : '.stylewrap',
filter: '.current, .hiatus, .next, .complete',
getSortData : {
name : function ( $elem ) {
return $elem.find('.name').text();
}
}
});
var $optionSets = $('#shows .show-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.show-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
filter: '.current, .hiatus, .next, .complete';
}
return false;
});
});
</script>
</body>
</html>
I believe the problem is in the jQuery, but I just can't figure it out. I've spent 2 days on this, but I'm not too advanced so I've just been searching everywhere I can for an answer.
edit: Sorry for being unclear. The problem is solved!
Well...not sure if this is the best way, but you could simply alter the data-option-value attribute for the Show All option to omit childhood from the selector. You HTML might then become:
<li style="background: #f5f5f5;">Show All</li>
Here's a JSFiddle to show you the code in action. Now clicking "Show All" will not reveal the item tagged with childhood. Hope this helps! Let me know if you have any questions.
Your question isn't very clear but I believe you're asking how to remove a certain element from your unordered list.
This line:
<li style="background: #f5f5f5;">Childhood Influences</a></li>
represents a list element with a text value of "Childhood Influences". Remove the line, and this list item will no longer show up.
Edit: I misread your question, give me a second and I will edit this answer again to address your entire question correctly