I am trying to rewrite my webpages to display properly on a smartphone. In my testing I cannot get a dropdown menu to disappear when the mouse moves out of the div of the dropdown menu. Below is my code:
<script type="text/javascript">
function expandMenu() {
document.getElementById("moreMenu").style.display = "block";
}
function hideMenu() {
document.getElementById("moreMenu").style.display = "none";
}
</script>
.......
<div class="medianfont">News - Email - Editorials -
<span style="cursor:pointer; color:blue" onclick="expandMenu()"> More</span><br />
<div id="moreMenu" style="display:none; margin-left:14em;" onmouseout="hideMenu()" onclick="hideMenu()">
History <br />
Events <br />
</div>
</div>
It works ok when testing on my desktop but in testing on my Android phone, the dropdown menu will appear but no amount of clicking will make it go away even though the links do work. So is there a way to get a dropdown menu to disappear on a smartphone similar to a desktop? I am not coding in Android, I am merely displaying the webpage on a smartphone.
There is no mouseout for mobile devices since there is no mouse.
Suggest using a mobile framework or at least reading up on the available events.
http://api.jquerymobile.com/category/events/
https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Touch_events
What about using blur?
Here is a demo using blur. I tested this on an Android device.
HTML
<div id="menu" onclick="expandMenu();" onblur="hideMenu();">Menu</div>
<div id="moreMenu" tabindex="-1" onblur="hideMenu();">
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
JavaScript (No JQuery)
function expandMenu() {
document.getElementById("moreMenu").style.display = "block";
document.getElementById("moreMenu").focus();
}
function hideMenu() {
document.getElementById("moreMenu").style.display = "none";
}
CSS
#moreMenu {
width:100px;
height:400px;
border: 1px solid blue;
display: none;
outline: none;
}
#menu {
outline: none;
background: #e5e5e5;
width: 100px;
}
See jsFiddle Demo...
Related
I want to use this drag and drop function also on mobile devices but when I run it on my mobile phones it doesn't work.
Here is the code:
copy = 1;
$('.dragArea img').on('dragstart',function(e) {
console.log('dragge it!',e);
e.originalEvent.dataTransfer.setData("text",e.target.id);
}).on('dragend',function(e) {
console.log('dragged',e);
});
$('.drop-field').on('dragover',function(e) {
//console.log('dragover',e);
e.preventDefault();
}).on('drop',function(e) {
e.preventDefault();
//window.status = 'successfully dragged';
console.log('drop',e,window.status);
data = e.originalEvent.dataTransfer.getData("text");
$(this).append(copy ? $('#' + data).clone() : $('#' + data));
});
.drop-field {
border: 4px #287CA1 dashed;
display: inline-block;
min-width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dragArea">
<img src="http://lorempixel.com/image_output/city-q-g-640-480-4.jpg" width="50" height="50" alt="logo" id="logo" />
</div>
<div class="dropArea">
<span class="drop-field"></span>
<span class="drop-field"></span>
</div>
Probably because the drag and drop functions use mousedown and mouseup, whose are not mobile compliant.
Here is a linked topic : How to get jquery dragging working on mobile devices? where the suggested solution to use jQuery UI Touch Punch (which convert click events to touch events).
I'm creating a lightbox without using a jquery plugin, and now I'm trying to close it by clicking on the close button or by clicking anywhere else outside of the white area (.white_content)
Jsfiddle Example
<button onclick="document.getElementById('lightbox').style.display='inline';">
Show lightbox
</button>
<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none">
<div class="white_content">
Close
<p>Click anywhere to close the lightbox.</p>
<p>Use Javascript to insert anything here.</p>
</div>
</div>
<!-- LIGHTBOX CODE END -->
Although it's not just like I want it. I want it to close only if I click on the dark area of the lightbox and not on the white container (.white_content), I've heard that event.propagation can be a bad thing to use, so here's how I'm closing the lightbox
$(document).on('click', function(event) {
if (!$(event.target).closest('button').length) {
$(".lightbox").hide();
}
});
you can change you condition bit like below
$(document).on('click', function(event) {
if ($(event.target).has('.white_content').length) {
$(".lightbox").hide();
}
});
Most lightbox scripts are using two div-s, content and overlay. Overlay is there for background and to prevent users to click on page content, and also click on overlay can be used to close lightbox.
HTML:
<div id="lightbox"> LIGHTBOX CONTENT </div>
<div id="overlay"></div>
JS:
$( '#overlay, #close').on('click', function(event) {
$("#lightbox, #overlay").hide();
});
$( '#show').on('click', function(event) {
$("#lightbox, #overlay").show();
});
EXAMPLE
You want to close the lightbox on any click that isn't targeting the lightbox or one of its children. Your existing code is pretty close:
$(document).on('click', function(event) {
if (!$(event.target).closest('button').length &&
!$(event.target).closest('.white_content').length) {
$(".lightbox").hide();
}
});
$(document).on('click', function(event) {
if (!$(event.target).closest('button').length &&
!$(event.target).closest('.white_content').length) {
$(".lightbox").hide();
}
});
.textright {
float: right;
}
.lightbox {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, .8);
}
.white_content {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 5px solid gray;
background-color: white;
z-index:1002;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="document.getElementById('lightbox').style.display='inline';">
Show lightbox
</button>
<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none">
<div class="white_content">
Close
<p>Click anywhere to close the lightbox.</p>
<p>Use Javascript to insert anything here.</p>
</div>
</div>
<!-- LIGHTBOX CODE END -->
I'd also recommend using a class to denote whether the lightbox is visible or not, rather than changing the display property directly; that way it's more clear when you check it. Compare $el.is('.active') with $(el).css('display') == 'inline'
<div id="z1" onclick="document.getElementById('q1').style.display=''; document.getElementById('z1').style.display='none';" style="border:solid 1px; background- color: #DDDDDD; width:936px; height:auto; margin-left:0px;margin-right:0px;">
<h2> Pg. 419-423, problems 8-14 even, 20-30 odd, AYP 1-10</h2></div>
<div id="q1" onclick="document.getElementById('q1').style.display='none'; document.getElementById('z1').style.display='';" style="display:none; border:solid 1px; background-color: #DDDDDD; width:938px; height:auto;margin-left:0px;margin-right:0px;">
<h2> Pg. 419-423, problems 8-14 even, 20-30 odd, AYP 1-10</h2>
</br>
<img src="http://www.rediker.com/reports/samples/Attendance-Period/Homework-Assignment- form.jpg"></img></div>
The above script is what I planned on using to create a spoiler. Basically, when the user clicks on the z1 element, it hides itself and shows the q1 element, and vice-versa. It works on all browsers besides IE. Linking Jquery would be a small liability.
I think this is what you're looking for. You're missing to add display: block
Change this
document.getElementById('z1').style.display='';
to
document.getElementById('z1').style.display='block';
You should think about cleaning your code.
HTML:
<div id="z1" onclick="aa()"></div>
<div id="q1" onclick="bb()">
<img src="http://www.rediker.com/reports/samples/Attendance-Period/Homework-Assignment-form.jpg"/>
</div>
JS:
function aa() {
document.getElementById('q1').style.display = 'block';
document.getElementById('z1').style.display = 'none';
}
function bb() {
document.getElementById('q1').style.display = 'none';
document.getElementById('z1').style.display = 'block';
}
Working JSfiddle
I want to make a similar navigation menu like what m.facebook.com did.
but this, i want to make it nicely animated slide out from left side of the website.
Flow ::
Click a button > (Menu is hidden by default) Menu Slide out, push the main container to right a bit to fit the menu > Click again > Menu Slide in and hidden again.
I got no idea to make it with javascript or jquery or ajax while i'm new to web development and there are too much of effect scripting language. May i know to achieve this, which is perfect in smoothness ?
Something along these lines... http://jsfiddle.net/HfdXY/
HTML:
<div id="menu">Menu</div>
<button id="openMenu">Toggle menu</button>
CSS:
#menu {
height: 300px;
width: 0px;
border: 1px solid black;
display: none;
}
JS:
$("#openMenu").click(function() {
var menu = $("#menu");
if ($(menu).is(":visible")) {
$(menu).animate({width: 0}, 1000, function() {$(menu).hide();});
} else {
$(menu).show().animate({width: 100}, 1000);
}
});
Can I get help correcting the code below? You can just copy and paste and try it yourself. Onmouseover the popup div appears. If I click X the popup div should close but it doesn't. Only doubleclicking X closes the popup div. Onmouseover it should always display a popup div though.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<style type="text/css">
.container {
display:block;
width:500px;
height:200px;
border:1px solid green;
}
.advert {
float:right;
overflow:hidden;
width:100px;
height:30px;
border:1px solid red;
}
.close {
float:right;
width:20px;
height:28px;
cursor:pointer;
border:1px solid black;
}
</style>
<body>
<div class="container" onmouseover='getad(39);' onmouseout='hidead(39);changeback(39);'>
<div class='advert' id="39" style="display:none;"><div class="close">X</div></div>
<input type="text" value="1" id="ad39" />
</div>
<div class="container" onmouseover='getad(40);' onmouseout='hidead(40);changeback(40);'>
<div class='advert' id="40" style="display:none;"><div class="close">X</div></div>
<input type="text" value="1" id="ad40" />
</div>
<script type="text/javascript">
function getad(number) {
if(document.getElementById('ad'+number).value==1) {
if(document.getElementById(number).style.display == "none") {
document.getElementById(number).style.display = "block";
}
}
}
function hidead(number) {
if(document.getElementById('ad'+number).value==1) {
if(document.getElementById(number).style.display == "block") {
document.getElementById(number).style.display = "none";
}
}
}
function closead(number) {
document.getElementById('ad'+number).value = 0;
if(document.getElementById(number).style.display == "block") {
document.getElementById(number).style.display = "none";
}
}
function changeback(number) {
if(document.getElementById('ad'+number).value==0) {
document.getElementById('ad'+number).value = 1;
}
}
</script>
</body>
</html>
You IDs are wrong:
<div class='advert' id="39" style="display:none;">
<div class='advert' id="40" style="display:none;">
should be:
<div class='advert' id="ad39" style="display:none;">
<div class='advert' id="ad40" style="display:none;">
I tried your code in firefox and it works.
In IE8, it does not work.
This is the main reason why you should never write native Javascript...
Use JQuery or another JS framework.
First, it will make your code cross browser compatible.
Second, only 1 line of code will do what you need to do ;-)
Something like $(#39).hide() or $(#39).show()
The problem isn't that your ad isn't being removed. It's that in order to click the link that triggers the hidead() function, you must also be hovering the mouse cursor over the div that triggers getad() on mouseover.
So what is actually executing if you step through the actions is this.
Click event triggers on the tag for the "X-link"
closead(number) fires and executes it's code.
Mouseout event fires and propagates to the parent
hidead(number) fires and executes.
Mouseover event fires and propagates to the parent
getad(number) fires and executes.
So your event is being unloaded, then immediately reloaded. Perhaps if you could provide some context, we could help you make this workable. I'm not sure under what circumstances you want to load an ad on mouseover, hide it on mouseout, and give the user a close button. That just seems like a lot of loading/unloading/flashing content that's going to annoy your visitor more than simply having a static ad that reloads every X seconds via AJAX or something.