I'm new to this site. I've googled for almost 6 days now for javascript to use in making a dropdown menu as seen on Google and Facebook. FB uses it on Account link. When you click on Account in Facebook, a dropdown menu comes out.
This is what I'd like:
When we click anywhere else on the page, it disappears, but it's still displayed when we click on this menu itself e.g. we can logout from the page, but if we click somewhere else, it disappears like some onblur event has occured.
I've written the code like the following:
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function dropdown() {
var ele = document.getElementById("hide");
if(ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
</head>
<body>
Hello Mohd
<div id="hide" style="display:none">
<p>Hii All<p></p>Hw r u</p>
<p>Sign Out</p>
</div>
</body>
</html>
In the above code, it works well when I click the link. A dropdown menu appears with all my details and disappears when I click it again. I want it to disappear when we click anywhere else on the page, which I'm unable to do.
If I use onblur then the dropdown menu disappears even when I click on it i. e. I can't use it.
Here you go:
http://jsfiddle.net/Paulpro/vty5s/
Code:
<html>
<head>
<title>Javascript Dropdown Example</title>
<style type="text/css">
#hide{
display: none;
background-color: #68D;
border: 1px solid #000;
width: 80px;
}
</style>
<script type="text/javascript">
function showDropDown(e){
document.getElementById('test').onclick = function(){};
if(e.stopPropagation)
e.stopPropagation(); // W3C model
else
e.cancelBubble = true; // IE model
document.getElementById("hide").style.display = "block";
document.onclick = function(e){
var ele = document.elementFromPoint(e.clientX, e.clientY);
if(ele == document.getElementById("test")){
hideDropDown();
return;
}
do{
if(ele == document.getElementById("hide"))
return;
}while(ele = ele.parentNode);
hideDropDown();
};
}
function hideDropDown(){
document.onclick = function(){};
document.getElementById("hide").style.display = "none";
document.getElementById('test').onclick = showDropDown;
}
</script>
</head>
<body>
Hello Mohd
<div id="hide">
<p>Hii All<p></p>Hw r u</p>
<p>Sign Out</p>
</div>
</body>
<script type="text/javascript">
document.getElementById('test').onclick = showDropDown;
</script>
</html>
Related
I have been working on the project where i need to show data on OnClick as Popover. Where user clicks it contains inside multiple tags, my On click is working on Tag in which I'm giving the id to click but its not working on other tags that are inside it. I hope u will get my point from my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="share.css">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<img src="mainBodyPic.png" alt="Cinque Terre" width="100%" height="620px">
<div class="mainContainerElement">
<div class="mainContainerShare">
<div id="popover-content-share">
<div id="closeButton">X</div>
<div>Data here</div>
</div>
<div id="showOnClick" class="shareMainBodyIcon">
when i click this then onClick works
<p>This is not working</p>
<div>This is also not working</div>
</div>
</div>
</div>
<script>
var button = document.getElementById('showOnClick');
button.onclick = function() {
var div = document.getElementById('popover-content-share');
if (div.style.display !== 'none') {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
};
var button1 = document.getElementById('closeButton');
button1.onclick = function() {
var div = document.getElementById('popover-content-share');
if (div.style.display !== 'none') {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
};
window.onload = function() {
var hideMe = document.getElementById('popover-content-share');
document.onclick = function(e) {
if (e.target.id !== 'popover-content-share' && e.target.id !== 'showOnClick') {
hideMe.style.display = 'none';
}
};
};
</script>
</body>
</html>
You want to add an event listener and specify the click event. That would look something like this:
button.addEventListener("click", event => {
// Your function goes here
});
There are plenty of ways to resolve this, one way is making the z-index of showOnClick element higher than the elements inside, the other is making the elements inside the div showOnClick no clickables via css props:
Example:
#showOnClick p,div {
pointer-events: none;
}
I Have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function myEvent(){
if(document.getElementById('demo2').innerHTML=="Hide Me"){
document.getElementById('demo1').src='none';
document.getElementById('demo2').innerHTML='Display Me';
}
else {
document.getElementById('demo1').src="deepika.jpg";
document.getElementById('demo2').innerHTML="Hide Me";
changeCSS();
}
}
function changeCSS(){
document.getElementById('demo1').style.height="500";
document.getElementById('demo1').style.width="400";
}
</script>
</head>
<body>
<img src="deepika.jpg" id="demo1" height="500" width="400"><br>
<button type="button" id="demo2" onclick=myEvent()>Hide Me</button>
</body>
</html>
After clicking on Hide Me button I get this page:
Now I want to completely remove the picture block and bring Display Me button to top of the page. How can I do so?
I want to use plain JavaScript only and no JQuery
If I understand the question properly, you want to toggle the display of image upon button click. You can use the below updated myEvent function:
function myEvent(){
if(document.getElementById('demo2').innerHTML=="Hide Me"){
document.getElementById('demo1').src='none';
document.getElementById('demo1').style.display = "none";
document.getElementById('demo2').innerHTML='Display Me';
}
else {
document.getElementById('demo1').style.display = "";
document.getElementById('demo1').src="deepika.jpg";
document.getElementById('demo2').innerHTML="Hide Me";
changeCSS();
}
}
What I want to do is, when I click on button then one div should disappear and another should appear and if i click on the same button one more time, then first one should appear and second one should disappear. This would go until I click on the button.
What I tried:
JavaScript:
function change_image(){
var flag = true;
if(flag){
document.getElementById('speaker_main_div_with_rounded_image').style.display="none";
document.getElementById('speaker_main_div_with_square_image').style.display="block";
flag = false;
} else {
document.getElementById('speaker_main_div_with_rounded_image').style.display="block";
document.getElementById('speaker_main_div_with_square_image').style.display="none";
flag = true;
}
}
HTML:
<input type="button" value="Click Here to get another image" onClick="change_image(this)">
Any help would be grateful.
Thank You.
Your flag variable is local, and its value is always the same when function is called. Initialize it with:
var flag = document.getElementById('speaker_main_div_with_rounded_image').style.display !== 'none';
This is my solution using jQuery Library .
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").toggle();
$("#div2").toggle();
});
});
</script>
<style>
.hide{
display:none;
}
</style>
</head>
<body>
<button type="button" id="btn1">Toggle</button>
<div id ="div1">
I am div 1
</div>
<div id ="div2" class="hide">
I am div 2
</div>
</body>
</html>
This topic has been covered a few times but there is no clear solution using Javascript. All responses were quite nebulous. Please help me out as there hasn't been a straightforward answer anywhere that I could find on any site.
I am trying to execute a function when any click occurs within an iframe window. Specifically, a click on a hyperlink on page displayed within the iframe. However just being able to have any click within an iframe trigger a function is enough for me.
I have a function Show() that I would like to run when an iframe is clicked. So basically a link is automatically hidden and when the first link is clicked it is shown. When the "click to hide" link that shows up is clicked, the "click to hide" link is hidden. I want the "click to hide" link to show up when someone clicks within the iframe. I need it to run the function every time a click occurs within the iframe. Thanks.
Code:
<html>
<head>
<title>StackOverflow Example</title>
<style>
.visible {visibility: visible}
.hidden {visibility: hidden}
</style>
<script type="text/javascript">
var visible_link = true;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
</script>
</head>
<body>
<center>
<iframe src="http://www.google.com" height=549 width=100% frameborder=0 name = "hello"></iframe>
click to show below link
<div id="my_div" class="hidden">
<a href="http://www.google.com" target="hello" onclick = "Hide();" >click me to hide</a>
</div>
</center>
</body>
</html>
If there is some kind of domain issue please explain and please, if you have time and are able, explain what the issue is and how to fix such a problem. Edits to this code are welcome for the sake of coming up with a solution that achieves the goal that I outlined.
You guys are great.
UPDATE
I have implemented apaul34208's response which technically works, but I am having three problems.
1) How can this take up the full width of the window (I tried adding 100% to the width value under #cover)
2) When the div covers all of the iframe, the webpage within the iframe is not clickable
3) The div is not transparent.
If someone can edit the below code and have the div take up all of the width while being transparent with the iframe's webpage being entirely clickable - I would be very appreciative and happy.
<html>
<head>
<title>Show / Hide Link</title>
<style>
.visible {visibility: visible}
.hidden {visibility: hidden}
#cover {
position: absolute;
background: rgba(0, 0, 0, 0.5); /* added for example */
height: 150px;
width: 150px;
}
</style>
<script type="text/javascript">
var visible_link = true;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
</script>
</head>
<body>
<center>
<div id="cover" onclick="Show();"></div>
<iframe src="http://stackoverflow.com" height=549 width=100% frameborder=0 name = "hello"></iframe>
links
<div id="my_div" class="hidden">
<a href="http://stackoverflow.com" target="hello" onclick = "Hide();" ><-</a>
</div>
</center>
</body>
</html>
I would strongly advise against doing this for any reason, this is usually referred to as "Clickjacking", and it is an extremely bad practice.
So... Please don't ever do this.
But for educational purposes... You can cover an iframe with another positioned element and capture the click on that element:
var visible_link = true;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
.visible {
visibility: visible
}
.hidden {
visibility: hidden
}
#cover {
position: absolute;
background: rgba(0, 0, 0, 0.5); /* added for example */
height: 150px;
width: 300px;
}
<div id="cover" onclick="Show();"></div>
<iframe id="iframe" src="http://stackoverflow.com"></iframe>
<div id="my_div" class="hidden">
click me to hide
</div>
Once again. Don't ever do this.
I found a solution. It's not perfect but I figured out that I don't really need to it to detect every iframe click and this is good enough. I originally wanted to make a back button appear if a link within the page that is within the iframe was clicked (which would return the user to the main page within the iframe where they started). Obviously they may click randomly and not hit a hyperlink and the back link would pop up for no reason (while they are still on the main page). That's fine I guess but if someone knows of a better solution let me know. Most people would just hit a link to begin with as the page only has hyperlink interaction I presume.
I hope my working code below helps people who are exploring this topic in the future.
Code:
<html>
<head>
<title>StackOverflow Example</title>
<style>
.visible {visibility: visible}
.hidden {visibility: hidden}
}
</style>
<script type="text/javascript">
var visible_link = true;
var inIframe = false;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
function checkClick() {
if (document.activeElement
&& document.activeElement === document.getElementById("hello")) {
if (inIframe == false) {
Show();
inIframe = true;
}
} else
inIframe = false;
}
setInterval(checkClick, 200);
</script>
</head>
<body>
<center>
<div id="cover" onclick="Show();"></div>
<iframe src="http://w3schools.com" height=549 width=100% frameborder=0 name = "hello" id = "hello" style =""></iframe>
click to show link
<div id="my_div" class="hidden">
<a href="http://w3schools.com" target="hello" onclick = "Hide();" >click to hide</a>
</div>
</center>
</body>
</html>
This is inside my CSS:
div.hide {
display:none;
}
div.show {
color: #66CCFF;
}
This is in my HTML:
16:10
<script language="JavaScript">
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);"></a>
<div id="text1" class="hide">This is your monitors aspect ratio.</div>
I'm trying to make the first link display the "This is your monitors aspect ratio." text lower on the page.
Any help is much appreciated.
Pure CSS Answer
Ok, if you just want to append text after you have moved to a position in a page using an anchor tag, you could do it with nothing but CSS similar to the following:
a:target:after{
content: " Test";
background-color: #ccffcc;
}
What this does is appends the text "Test" after the active anchor and colors. Here is an example page with implementation:
<!DOCTYPE html>
<html>
<head>
<title>Link Printer 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
a:target:after{
content: " Test";
background-color: #ccffcc;
}
.bigSection{
height: 200px;
}
</style>
</head>
<body>
<div class="bigSection">
<div><a name="first">First</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="second">Second</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="third">Third</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
</body>
</html>
Answer using JavaScript
You need to bind an eventListener and prevent it from moving to the next page. Here is a way to do it with JavaScript or CSS. The JavaScript way will actually set the text to whatever you want. The CSS way will hide actually hide the element.
<!DOCTYPE html>
<html>
<head>
<title>Link Printer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
.hide{
display: none;
}
</style>
<script>
function jsShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.innerHTML === "") {
divToManip.innerHTML = "Hello";
}
else {
divToManip.innerHTML = "";
}
event.preventDefault();
}
function cssShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.className === "") {
divToManip.className = "hide";
}
else {
divToManip.className = "";
}
event.preventDefault();
}
function setListeners() {
document.getElementById("jsPrinter").addEventListener("click", jsShowText, false);
document.getElementById("cssPrinter").addEventListener("click", cssShowText, false);
}
window.onload = setListeners;
</script>
</head>
<body>
<div><a id="jsPrinter" href="" onclick="showText();">Click With JavaScript</a></div>
<div><a id="cssPrinter" href="" onclick="showText();">Click With CSS</a></div>
<div id="text">I'm text</div>
</body>
</html>
"showText" must receive an id parameter to be used with the call to "document.getElementById"
Try this, just 1 link that will display the text below after click:
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);">16:10</a>
<script language="JavaScript">
function showText(id)
{
document.getElementById(id).style.display = "block";
}
</script>
<div id="text1" style="display:none;">This is your monitors aspect ratio.</div>
I'm just using style display to hide/show the element. Hope it helps.
just change your css like this:
div.show {
display:block;
color: #66CCFF;
}
Here I am going to provide an example with something that I was working, thank you Alberto Montellano for the example, that gave me an idea, however what was required at the end was something a little different, with the option not to show the data and display it only when I click and make it disappear when click again. In this example I am going to give you two options; you can have a button or a link to trigger the JS function to display and hide the body text, you can choose if you want the button or link that is way I put a comment (optional), both behave as the same, it is up to you which one you want to use.
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<!-- text before the button or link -->
<p>Click the "PIN" button (or link) to display PIN options:</p>
<!-- The Pin button (optional) -->
<button type="button" onclick="myFunction()">PIN button:</button>
<!-- The Pin link (optional) -->
</br></br></br>
<a onclick="myFunction()" href="javascript:void(0);">PIN link:</a>
<!--Data will display or hide (toggle)-->
<div id="myDIV"style="display:none;">
These are the steps to get your PIN number: Bla bla bla.
</div>
<p><b>Note:</b> The text display when you click the button or link will take space, if you click again will be toggle.</p>
<!-- JS -->
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>