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';
}
});
});
Related
I am trying to show products and when I apply the animation it applies to the whole div
for instance
<div class="product_area">
<div class="product">1</div>
<div class="product">2</div>
<div class="product">3</div>
<div class="product">4</div>
<div class="product">5</div>
</div>
$(document).ready(function()
{
$(".product_area").slideUp(); //Whole div slides up.
$(".product").slideUp(); //Just one product slides up.
}
What I want that one by one the product slides in from right.
Check this out
$(function(){
//$(".product_area").slideUp(); //Whole div slides up.
//$(".product").slideUp(); //Just one product slides up.
var delay = 500
$('.product').each(function(){
$(this).delay(delay).toggle( "slide" );
delay = delay+1500;
});
});
/* Put your css in here */
.product {
display:none;
width:100px;
background-color:#ccc;
padding:15px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="product_area">
<div class="product">1</div>
<div class="product">2</div>
<div class="product">3</div>
<div class="product">4</div>
<div class="product">5</div>
</div>
</body>
</html>
This question already has answers here:
Scroll to the top of the page using JavaScript?
(49 answers)
Closed 6 years ago.
I want to have a button, and when you click on it, it will get you (the visitor) to the top of the page.
How can this be done?
Thanks
If you have a keyboard attached:
Press the 'Home' button.
The classic operation of hyperlinks is to point to a page different from the one being viewed, to navigate the site. It is also possible to create a link to a specific location on the current page, or to another page in order to position the browser correctly.
Creating an anchor is easy: you just have to assign the element to which you want to be able to point an identifier (with the attribute HTML id) and to associate a link starting with the character #, followed by the name of this Identifier.
Ex:
<div id="top">...</div>
It is then enough to make a link to this anchor:
top of page
Demo:
<!DOCTYPE html>
<html>
<head>
<title>top link</title>
<meta charset="UTF-8">
</head>
<body>
<div id="top">...</div>
<!-- Content -->
<!-- Content -->
<!-- Content -->
top of page
</body>
</html>
On button click, run the Javascript:
window.scrollTo(0, 0);
You can do it like this :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Back To Top Button by CodexWorld</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script type='text/javascript'>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#scroll').fadeIn();
} else {
$('#scroll').fadeOut();
}
});
$('#scroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
<style type="text/css">
/* BackToTop button css */
#scroll {
position:fixed;
right:10px;
bottom:10px;
cursor:pointer;
width:50px;
height:50px;
background-color:#3498db;
text-indent:-9999px;
display:none;
-webkit-border-radius:60px;
-moz-border-radius:60px;
border-radius:60px
}
#scroll span {
position:absolute;
top:50%;
left:50%;
margin-left:-8px;
margin-top:-12px;
height:0;
width:0;
border:8px solid transparent;
border-bottom-color:#ffffff
}
#scroll:hover {
background-color:#e74c3c;
opacity:1;filter:"alpha(opacity=100)";
-ms-filter:"alpha(opacity=100)";
}
</style>
</head>
<body>
<!-- BackToTop Button -->
Top<span></span>
<!-- ++++++++++++ Page Content Goes Here ++++++++++++ -->
</body>
</html>
Just Copy & Paste the script and run
For a link:
Back to top
With button:
<a href="#">
<button>Back to top</button>
</a>
See also:
How to create an HTML button that acts like a link?
HTML Anchors with 'name' or 'id'?
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.
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 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();
});