Working with JavaScript it seems there may be an issue where transition causes an issue with the closing of a menu. In this MWE the menu on the left opens as it should by either clicking the menu icon or through mouseover. It also closes properly with mouseout. However, when attempting to close by clicking the close icon there is some discrepancy: it works erratically. Could this be due to the transition effect? It seems to close properly when the transition is removed. How could the transition be retained while also making the menu close properly both by mouseout and clicking the relevant icon?
Thanks.
MVE:
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#title {text-align:right}
#menu {display:block;height:100%;width:180px; position:fixed;top:0;left:-120px; overflow:visible;background:lightgrey;transition:.3s}
#menuicon, #closeicon {position:absolute;top:1em;left:150px;cursor:pointer}
#closeicon {display:none}
</style>
<script>
function menutoggle(x) {
if (x) {
document.getElementById('menu').style.left = '0';
document.getElementById('menuicon').style.display = 'none';
document.getElementById('closeicon').style.display = 'block';
} else {
document.getElementById('menu').style.left = '-120px';
document.getElementById('menuicon').style.display = 'block';
document.getElementById('closeicon').style.display = 'none';
}
}
</script>
</head>
<body>
<div id="menu" onmouseover="menutoggle(1)" onmouseout="menutoggle()">
<span id="closeicon" onclick="menutoggle()">X</span>
<span id="menuicon" onclick="menutoggle(1)">=</span>
</div>
<p id="title">Title</p>
</body></html>``
Related
OK, I'm still mind boggled. I've done a ton here, and still can't see why the things aren't loading. I thought maybe it had to do with CORS, so I added a cookies rule to the script, but even then I find this weird, because I was able to display the podcast player locally just fine when I wasn't trying to hide and activate one or the other.
The code seems to be just fine however, I can't seem to pick out the problem.
document.cookie = "cookiename=cookievalue; SameSite=None; Secure; path="
// Add active class to default player and button
document.getElementById("player1-button").classList.add("active");
document.getElementById("player1").classList.add("active");
// Add event listeners to the buttons to listen for clicks and execute a function
document.getElementById("player1-button").addEventListener("click", function() {
//Remove active class from the current player and button
document.getElementById("player2-button").classList.remove("active");
document.getElementById("player2").classList.remove("active");
// Add active class to player1 and player1-button
document.getElementById("player1").classList.add("active");
this.classList.add("active");
});
document.getElementById("player2-button").addEventListener("click", function() {
//Remove active class from the current player and button
document.getElementById("player1-button").classList.remove("active");
document.getElementById("player1").classList.remove("active");
// Add active class to player2 and player2-button
document.getElementById("player2").classList.add("active");
this.classList.add("active");
});
This is my new javascript.
Furthermore, here's the related CSS:
.podcast-player div:not(.active) {
display: none;
}
.podcast-player div.active {
display: block;
}
and as well, the HTML for the player element:
<div class="podcast-player">
<!-- add the 2 embedded players here -->
<div id="player1">
<div id='buzzsprout-small-player'></div>
<script type='text/javascript' charset='utf-8' src='https://www.buzzsprout.com/2107108.js?container_id=buzzsprout-small-player&player=small'></script>
</div>
<div id="player2">
<div id='buzzsprout-large-player'></div>
<script type='text/javascript' charset='utf-8' src='https://www.buzzsprout.com/2107108.js?container_id=buzzsprout-large-player&player=large'></script>
</div>
</div>
I've been combing through this for the past few hours, and to me it all seems like it should work. I'm baffled.
Can you check the following code, and let me know if this is what you were looking for?
<!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>
<style>
.player {
display: none;
}
.player.active {
display: block;
}
</style>
</head>
<body>
<div class="player active" id='buzzsprout-small-player'></div>
<div class="player" id='buzzsprout-large-player'></div>
<button disabled id="small-player-button">Activate Player Small</button>
<button id="large-player-button">Activate Player Large</button>
<script type='text/javascript' charset='utf-8'
src='https://www.buzzsprout.com/2107108.js?container_id=buzzsprout-large-player&player=large'></script>
<script type='text/javascript' charset='utf-8'
src='https://www.buzzsprout.com/2107108.js?container_id=buzzsprout-small-player&player=small'></script>
<script>
// Add event listeners to the buttons to listen for clicks and execute a function
document.getElementById("small-player-button").addEventListener("click", function () {
//Remove active class from the large player
document.getElementById("buzzsprout-large-player").classList.remove("active");
// Add active class to small player
document.getElementById("buzzsprout-small-player").classList.add("active");
// Enable large player button
document.getElementById("large-player-button").disabled = false;
// Disable small player button
this.disabled = true;
});
document.getElementById("large-player-button").addEventListener("click", function () {
//Remove active class from the small player
document.getElementById("buzzsprout-small-player").classList.remove("active");
// Add active class to large player
document.getElementById("buzzsprout-large-player").classList.add("active");
// Enable small player button
document.getElementById("small-player-button").disabled = false;
// Disable large player button
this.disabled = true;
});
</script>
</body>
</html>
So I made a display: block when the mouse hovers over a certain , and display: none when the cursor moves away. '
A div I have made that displays only when the mouse hovers over a certain link
the div has a display: none when the mouse moves away from the link
this is the code I have used
HTML:
Login/Sign Up
JavaScript:
function LoginShow (){
document.getElementById("log").style.display="block";}
function LoginHide(){
document.getElementById("log").style.display="none";}
But I can't click on the div because as soon as I try to move my cursor to the buttons in the div, the div goes to display none as I have to move my cursor away from the link.
I am new to JS, but I have seen other web pages do it, what's the way for the div to display on mouseover and can be clicked on and goes to display: none only when I move away from the div.
I have also tried
Login/Sign Up
<div class="login" id="log" onmouseover="LoginShow()"
onmouseout="LoginHide()">
It kind of solves the problem, but for the div to go to display none I have to move the cursor away from the div, if the move the cursor away from the anchor tag, it doesn't go away.
You can do it without any js, take a look at below snippet.
let target = document.getElementById('target');
function showLog() {
target.style.display = 'block';
}
function hideLog() {
target.style.display = 'none';
}
.wrapper {
background: #eee;
}
.wrapper .inner-content {
display: none;
position: absolute;
background: red;
}
<div class="wrapper" onmouseover="showLog()" onmouseout="hideLog()">
I am the wrapper
<div class="inner-content" id="target">
<p>Here is some content inside wrapper element</p>
</div>
</div>
i think it can be done with css selectors as you can make other div as the switch to change other elements.
Reference for css selectors
And i think your div is part of button which is the reason why they disappear. if that is the case then you should try giving your button "position:relative" and then your div element the "position:absolute". it might work.
Edited:
here is what i tried, its not appealing but just look at it, if it is what you are trying to achieve.
function LoginShow (){
document.getElementById("log").style.display="block";
}
function LoginHide(){
document.getElementById("log").style.display="none";
}
.container{
width:400px;
height:400px;
background:lightgreen;
border:1px red solid;
}
#log{
background:#efefef;
padding:20px;
width:100px;
text-align: center;
display:none;
}
.log>button{
padding:20px;
}
<!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="custom.css">
</head>
<body>
<div class="container">
Login/Sign Up
<div id="log" onmouseover="LoginShow()" onmouseout="LoginHide()"><button>Sign Up</button></div>
</div>
<script src="main.js"></script>
</body>
</html>
I have a site that I would like for new users to see a contact us when the page loads. I have tried numerous methods and gotten an overlay but the ability to hide and continue onto the page is not working.
$(document).ready(function() {
$('#overlay').fadeIn();
});
$('button').click(function() {
$('#overlay').fadeOut(200, "linear");
});
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="myNav" class="overlay">
<h1>Text</h1>
<button>hide</button>
</div>
</body>
</html>
If any suggestions for closing the popup exist please share.
There are a bunch of ways to hide an element, being the most common one to set
document.getElementById("myNav").style.display = "none";
And to show it again
// Empty to have the one specified by CSS or the element default.
// Or "block", "inline", "inline-block"... Whatever fits you better.
document.getElementById("myNav").style.display = "";
If you hide by height (is a good decision if you have a CSS transision, but you need fixed heights), you need to set the element overflow to hidden. By default, if the content of an element is bigger than the element size it will be shown, so your .overlay class should have overflow: hidden to hide it.
By the way, you are using dynamic heights so you are not using transitions. As a recommendation, use the display way instead.
EDIT: Just noticed the ID problem that #Rubenxfd points out. He is right. Is going to be the main problem for sure.
Also, another problem you have is that you run this code
$('button').click(function() {
$('#overlay').fadeOut(200, "linear");
});
before the button element is rendered, so the event won't attach to it as it don't exists. You should attach it when the page is ready, so you have to move it inside the ready function, like this:
$(document).ready(function() {
$('#myNav').fadeIn();
$('button').click(function() {
$('#myNav').fadeOut(200, "linear");
});
});
Notice the difference.
You are using an class, but calling an id in your jQuery.
Change your jQuery to this:
$(document).ready(function() {
$('.overlay').fadeIn();
});
$('button').click(function() {
$('.overlay').fadeOut(200, "linear");
});
Fiddle
You had a # instead of a ..
$('#overlay').fadeOut(200, "linear"); will happen to the element with the id overlay not to the class. if you write $('.overlay').fadeOut(200, "linear");it will happen to all elements with the class of overlay
$(document).ready(function() {
$('.overlay').fadeIn();
});
$('button').click(function() {
$('.overlay').fadeOut(200, "linear");
});
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="myNav" class="overlay">
<h1>Text</h1>
<button>hide</button>
</div>
</body>
</html>
I would like to change the colour of an element (in this example a 100px x 100px square called "block" from transparent to black when the variable trigger= 1. The code listed below works with a button. I have other javascript (that this code will be incorporated into that does work with trigger.
Any help would be appreciated.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/colourswap.css">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="_js/jquery.color.js"></script>
</head>
<body>
<div id="block">Hello!</div>
<!--button id="go">Simple</button-->
<script>
var trigger = 1;
(function(){
if (trigger == 1) {
jQuery("#block").animate({
backgroundColor: "#000"
}, 1500 );
};
});
</script>
</body>
</html>
You can actually just use .show() or .toggle() if the block is transparent otherwise, e.g.
//say if you wanted the block to show when button is clicked
$("#go").click(function(){
$("#block").toggle();
});
And then set the block's colour to black by default.
In my web application, I have tabs and if any of the tab is clicked, the corresponding page will be displayed. But even after the tab is selected, the hyperlink button is enabled. My need is that if i do mouse over on the selected tab, the normal pointer should display instead of hyperlink. please help me suggesting the solution.
regards,
Jeya
Either
<a>you can't click me</a>
or
<a href='...' style='cursor:default'>you can click me but the cusror doesn't indicate this</a>
Here is a complete sample :
<html>
<head>
<style type="text/css">
a:target
{
cursor: default;
}
</style>
</head>
<body>
<a id="anchor1" href="#anchor1">Anchor1</a>
<a id="anchor2" href="#anchor2">Anchor2</a>
<a id="anchor3" href="#anchor3">Anchor3</a>
</body>
</html>
When you click any of the link it'll become the current target of the page, then the a:target rule will be applied to it, setting the default cursor.
EDIT for IE :
Changing my original sample, here is another implementation using jQuery, tested with IE8 but not IE7.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function()
{
var hash = null;
var updateAnchors = function()
{
hash = window.location.hash;
$(".tab").removeClass("target");
$(".tab[href=" + hash + "]").addClass("target");
};
window.setInterval(function ()
{
if (window.location.hash != hash)
{
updateAnchors();
}
}, 100);
updateAnchors();
});
</script>
<style type="text/css">
.target
{
cursor: default;
}
</style>
</head>
<body>
<a id="anchor1" href="#anchor1" class="tab">Anchor1</a>
<a id="anchor2" href="#anchor2" class="tab">Anchor2</a>
<a id="anchor3" href="#anchor3" class="tab">Anchor3</a>
</body>
</html>
You can select an element using javascript:
document.getElementById('element-id');
Once you've done that, you can modify the style within that element:
document.getElementById('your-element').style.cursor = 'default';
Now your cursor should look normal.
Use JavaScript:
document.getElementById("myATagId").style.cursor = "default";