When I click on first time flip, it shows panel, then I click on panel, it will shows the sub-panel.
But when I click multiple times on flip, and then click single time on panel, then it works wrongly as the sub-panel shows and hides multiple times for single click.
What's the problem?
My code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$('#panel').slideToggle("slow",function(){
$('#panel').click(function(){
$('#subpanel').slideToggle("slow");
});
});
});
});
</script>
<style>
#panel,#flip,#subpanel
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel,#subpanel
{
padding:50px;
display:none;
}
</style>
<style>
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
<div id="subpanel" style="display:none;">hello </div>
</body>
</html>
Try Moving the .click on #panel out of the click handler for #flip. Everytime you click flip you're readding the click handler for panel.
Related
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>
Hello I am trying to create sliding out tabs on this website: http://imaginationmuzic.com/
I am referring to the red 'Contact Us' and blue 'Twitter' tabs at the left and right of the site.
Currently the Contact Us tab opens up in a top to down motion; I would like it to open up from left to right like a sliding out tab.
Here is the code I used in the header:
$(document).ready(function(){
$(".btn-slide2").click(function(){
$("#panel2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
I also would like the opposite to be done for the Twitter tab (have it open left to right).
Any help would be appreciated.
Some crude js code I made to demonstrate.
<!DOCTYPE HTML>
<html>
<head>
<!--Add style sheet-->
<link rel="stylesheet" type="text/css" href="soc.css">
<!--Add jquery-->
<script src="jquery-1.10.2.js">
</script>
<!--Add script for this page-->
<script src="soj.js">
</script>
</head>
<body>
<div id="container">
<div id="panel"> </div>
<div id="contact"> </div>
</div>
</body>
<html>
-------------css----------
#panel{
height:500px;
width:200px;
background-color:#EE4488;
}
#contact{
position:relative;
top:-500px;
left:200px;
width:10px;
height:50px;
background-color:#22EEFF;
}
#container{
position:relative;
left:-200px;
}
------------JS---------
$(document).ready(function(){
var pos='in';
$("#contact").click(function(){
if(pos=='in'){
$("#container").animate({left:'0px'
});
pos='out';
}
else
{
$("#container").animate({left:'-200px'
});
pos='in';
}
});
});
I have a problem with flip effect on jquery plugin.When the image rotates it does not rotate correctly.I dont know why but i spent hours and no solution please help.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Flip-jQuery/jquery-1.9.1.js"></script>
<script src="Flip-jQuery/jquery-ui-1.7.2.custom.min.js"></script>
<script src="Flip-jQuery/jquery.flip.min.js"></script>
<script src="Flip-jQuery/jquery.flip.js"></script>
<title>Untitled Document</title>
<script type="text/javascript">
$(document).ready(function(){
$("#box1").on('mouseover',function(){
$(".flip").flip({
direction:'lr',
content:'hello',
color:'red'
});
})
$('.revert').on('click',function(){
$('.flip').revertFlip();
})
});
</script>
#main{
border:1px solid red;
width:500px;
height:auto;
position:absolute;
}
#box1, #box2{
border:2px solid black;
width:100px;
height:100px;
margin:10px;
cursor:pointer;
}
</style>
<div id='main'>
<div id='box1' class='flip'>
box1
</div>
<div id='box2'>
box2
</div>
<a style=" float:right;" href="#" class="revert">Click to revert</a>
</div>
Here is the whole code.I have tried anything but nothing.
Thanks in advance.
Try this
$(document).ready(function(){
$("#box1").on('mouseover',function(){
$(".side2").flip({
direction:'lr', //in the flip API direction seems to come first in every example
content:'hello',
color:'red'
});
})
});
You also have a syntax error in your HTML:
<div id='main'>
<div id='box1' class='side1'"> <!-- HERE remove that double quote -->
box1
</div>
<div id='box2' class='side2'>
box2
</div>
</div>
You have included the flip.js plugin twice in your HTML header.
Check this thing i get what the problem was. Basically you are triggering twice the mouse over event JavaScript/jQuery: event fired twice
I'm new to JQuery and am hoping someone can help out with the problem I'm having.
I setup a JSFiddle Page with the issue I'm having for ease of helping me: http://jsfiddle.net/66Bwp/
The problem: When I click on the button "Test 1" or "Test 2" and then click on the black overlay that produces, the overlay disappears, however the content that was faded in stays on the page until the "cancel" button is pressed.
Interesting Side Note: If I click on the button "Test 1" or "Test 2" to produce the content effect, and then click cancel, everything works as intended (overlay and content fade out), and then if I click the button "Test 1" or "Test 2" again, without reloading the page, and then click the overlay, everything works as intended.
The Javascript File:
$(document).ready(function(){
lbHide();
})
function lbShow( idName ) {
$("#lbOverlay, #" + idName).fadeIn(300);
}
function lbHide( idName ) {
$("#lbOverlay, #" + idName).fadeOut(300);
$("#lbOverlay").click(function() {
$("#lbOverlay, #" + idName).fadeOut(300);
})
}
The CSS File:
#lbOverlay{
display:none;
background:#000000;
opacity:0.4;
filter:alpha(opacity=90);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#lbExampleOne{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
#lbExampleTwo{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
The HTML File:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Lightbox Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link type="text/css" rel="stylesheet" href="css/master.css" />
</head>
<body>
<button id="show-panel" onClick="lbShow('lbExampleOne')">Test 1</button>
<button id="show-panel" onClick="lbShow('lbExampleTwo')">Test 2</button>
<div id="lbExampleOne">
<h2>Example Content One</h2>
<p><button type="reset" id="close-panel" onClick="lbHide('lbExampleOne')">Cancel</button>
</div>
<div id="lbExampleTwo">
<h2>Example Content Two</h2>
<p><button type="reset" id="close-panel" onClick="lbHide('lbExampleTwo')">Cancel</button></p>
</div>
<div id="lbOverlay"></div>
</body>
</html>
I'm not sure what the problem could be. Does anyone have any suggestions?
Thanks!
Change your lbHide function to this:
function lbHide(idName) {
$("#lbOverlay, #" + idName).fadeOut(300);
$("#lbOverlay").click(function () {
$("#lbOverlay, #lbExampleOne, #lbExampleTwo").fadeOut(300);
})
}
jsFiddle example
When your overlay is clicked, there is no idName parameter being passed to it, so just fade out the divs. You should probably give them classes to make them easier to refer to.
It's because when you are clicking on the overlay you are are calling the click event that you have assigned to it. The problem is that the click event uses the idName variable which has no value at this point in time.
Therefore the overlay fades but not your other elements
I have an openlayers map and I have positioned a div to sit inside/over the map component.
This works fine, however when dragging the map, if the mouse moves through/over the div the drag action is terminated.
How can I avoid the drag action from terminating?
thanks, p.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
</head>
<body>
<div id="map" style="margin:0px; width:300px; height:200px;"></div>
<div id="overlay" style="position:absolute; width:100px; height:75px; border:1px solid red; background-color:white; z-index:5000; text-align:center;">I want to drag through this</div>
<script type="text/javascript">
// create map
var map = new OpenLayers.Map("map", {"maxResolution":0.703125});
map.addLayers([new OpenLayers.Layer.WMS("World Map", "http://labs.metacarta.com/wms-c/Basic.py?", {layers:"basic", format:"image/png"})]);
map.zoomToMaxExtent();
// put div over map
Position.clone($("map"), $("overlay"), {offsetLeft:100, offsetTop:62.5, setWidth:false, setHeight:false});
</script>
</body>
</html>
EDIT: solution using accepted answer:
<div class="mapDragThrough">some content which gets positioned over the map</div>
initialise: function()
{
this.map.events.register("movestart", this, this.applyDragThrough);
this.map.events.register("moveend", this, this.applyDragThrough);
},
applyDragThrough: function(event)
{
var elements = Element.select(document.body, ".mapDragThrough");
var value = this.map.dragging ? "none" : "auto";
elements.invoke("setStyle", {"pointerEvents":value});
},
You can set pointer-events css attributes of the overlay DIV to none.
This causes the element not to receive mouse events at all, allowing the map dragging to continue uninterrupted.
Here's a working example:
<html>
<head>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
</head>
<body>
<div id="map" style="margin:0px; width:300px; height:200px;"></div>
<div id="overlay" style="position:absolute; width:100px; height:75px; border:1px solid red; background-color:white; z-index:5000; text-align:center;">I want to drag through this</div>
<script type="text/javascript">
// create map
var map = new OpenLayers.Map("map", {"maxResolution":0.703125});
map.addLayers([new OpenLayers.Layer.WMS("World Map", "http://labs.metacarta.com/wms-c/Basic.py?", {layers:"basic", format:"image/png"})]);
map.zoomToMaxExtent();
// put div over map
Position.clone($("map"), $("overlay").setStyle({'pointerEvents': 'none'}), {offsetLeft:100, offsetTop:62.5, setWidth:false, setHeight:false});
</script>
</body>
</html>
A possible solution could be to listen to hover event with jQuery and activate/deactivate Navigation control(or you probably are using MouseDefaults which you shouldn't) accordingly. The code should look something like this:
var nav = map.getControlsByClass("OpenLayers.Control.Navigation")[0];
$("#your-overlay-div").hover(function(){
nav.deactivate();
},function(){
nav.activate();
});