Position fixed with slideToggle() to push content down - javascript

http://jsfiddle.net/b6rkb/18/
I want to have a fixed bar at the top of my page, that on hover shows a sub-bar. I want this sub-bar to push the rest of the page down when this happens.
CSS:
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
.page{
height:5000px;
}
.fixed{
position: fixed;
}
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").hover(function(){
$("#panel").stop().slideToggle("slow");
});
});
</script>
<body>
<div class="page">
<div class="fixed">
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</div>
<br><br><br>
sup
</div>

You should also give the margin to the page and put the position fixed div above the page.
Working Demo
Jquery
$(document).ready(function(){
$("#flip").hover(function(){
$("#panel").stop().slideToggle("slow");
$(".page").stop().animate({"margin-top":"120px"}, "slow")
}, function() {
$(".page").stop().animate({"margin-top":"0"}, "slow")
$("#panel").stop().slideToggle("slow");
});
});
I'm not sure about the slideToggle, Please comment if you feel this is wrong.

try this... (You can test this http://jsfiddle.net/b6rkb/28/)
<style> <!-- Add to style -->
#page{
height:200px;
display:none;
opacity: 0;
}
</style>
<script>
$(document).ready(function(){
$("#flip").hover(function(){
$("#panel").stop().slideToggle("slow");
$("#page").stop().slideToggle("slow"); //Add this line
});
});
</script>
<body><div class="page">
<div class="fixed">
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</div>
<br><br><br>
<div id="page"> <!-- Add this div -->
test
</div>
sup
</div></body>

Related

Why Is My Jquery Slide div always showing at the start

I have a simple jQuery slide toggle but I want hit the div on start up but it is always showing
Here is a demo I build to show u what I mean.
Maybe you can see where I am going wrong
<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");
});
});
</script>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:Red;
border:solid 5px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">This div should always be hidden til clicked </div>
</body>
</html>
You need to hide the panel div
this should do it
#panel
{
padding:50px;
display:none;
}
Hope it helps
$(document).ready(function(){
//just need an initial run to close it first
$("#panel").slideDown();
//or if it was open to start use this instead
$("#panel").slideUp();
//rest the same
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});

Jquery/css displaying an image on hover

I have a div with id="mybutton" and a hidden div with id="mydiv" like in the code below :
<head>
<script>
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
</script>
</head>
<body>
<div id="mybutton">Show</div>
<div id="mydiv" style="display:none;">Hidden thing..</div>
</body>
I want "mydiv" to appear even if mouse is over "mydiv"(after hovering at mybutton).
Write CSS
#mydiv{
display:none;
/* visibility:hidden; */
}
#mybutton:hover + #mydiv,#mydiv:hover{
display:block;
/* visibility:visible; */
}
Demo
You can also use visibility:visible; and visibility:hidden; instead of display property
Give a common parent to them and connect the hover to it.
html:
<div id="parent">
<div id="mybutton">Show</div>
<div id="mydiv">Hidden thing..</div>
</div>
css:
#mydiv {
display: none;
}
Jq:
$(document).ready(function(){
$("#parent").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
JSfiddle: http://jsfiddle.net/f2W9b/
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
Wrap it inside div:
<div id="container">
<div id="mybutton">Show</div>
<div id="mydiv">Hidden thing..</div>
</div>
And listen for mouseenter event on the container div.
Wrap your button in a container, like so:
<span id="hoverarea">
<div id="mybutton">Show</div>
<div id="mydiv" style="display: none;">Hidden thing..</div>
</span>
<script>
$(document).ready(function(){
$("#hoverarea").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
</script>
http://jsfiddle.net/n4B5b/1/
In the fadeout() portion of your function, can you check if the mouse is currently hovering over the #mydiv div? If so (such as adding a class on hover to the #mydiv), check it and don't fadeout.
<head>
<script>
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
if (!$("#mydiv").hasClass('hovering') {
$("#mydiv").fadeOut();
}
});
$("#mydiv").hover(function(){
$("#mydiv").addClass('hovering');
}, function (){
$("#mydiv").removeClass('hovering');
});
});
</script>
</head>
<body>
<div id="mybutton">Show</div>
<div id="mydiv" style="display:none;">Hidden thing..</div>
</body>

style.height doesnt work javascript

i want to make the map'e height is auto with the device's screen...
but when i change the style.height to auto, 100%, screen.height, the map is disappear...
how to make the height is auto?
this is my code...
script.js
$('#home').live('pagecreate',function(){
document.getElementById('map_canvas').style.width=screen.width;
document.getElementById('map_canvas').style.height="20em";
});
in index.html i just called
<div id="home" data-role="page">
<div data-role="header">
*my header*
</div>
<div data-role="content">
<div id="map_canvas"></div>
</div>
</div>
if you use jquery you can do as below:
instead of this:
document.getElementById('map_canvas').style.width=screen.width;
document.getElementById('map_canvas').style.height="20em";
you can use:
$("#map_canvas").css({
'width':screen.width,
'height':"20em"
});
Please check this example:
I think your problem is related to css not to javascript.
The % height you want to set will be based on the parent height, so if the parent is empty, the 100% of 0 will be 0: check this
code example:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
<style>
#map_canvas{
background-color:#00F;
}
#cont{
background:#F00;
height:200px;
}
</style>
<button onClick="doit1()">Click me to put something in map_canvas</button>
<button onClick="doit()">Click me to make the height 100%</button>
<div id="home" data-role="page">
<div data-role="header">
*my header*
</div>
<div id="cont" data-role="content">
<div id="map_canvas"></div>
</div>
</div>
</body>
<script>
$('#home').live('pagecreate',function(){
$('#map_canvas').css('height','auto');
});
function doit(){
$('#map_canvas').css('height','100%');
}
function doit1(){
$('#map_canvas').html('a')
}
</script>
</html>

How to toggle only panel next to flip class

I have problem with javascript basics, how to toggle only panel next to flip class? Not all by one click but every panel separately.
same code on editor: http://jsfiddle.net/GaXPG/
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
.panel,.flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
</body>
</html>
You can use .next() in your case to select the div panel next to the clicked section.
$(document).ready(function () {
$(".flip").click(function () {
$(this).next(".panel").slideToggle("slow");
});
});
If you want to slideUp other panels and toggle the panel respective to the current clicked section. This will help too.
$('.panel') //Get all panels
.not($(this).next(".panel") //But not the one next to this
.slideToggle("slow")) //Toggle this panel
.slideUp("slow"); //using chaining still get back the remaining panels to slideUp
Fiddle
See .not()

Truouble implementing two smooth scrolling effects

I am making a webpage that is continuous scrolling. However I am unable to make it scroll smoothly
My html code is:
<nav class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- Logo -->
<a class="brand" href="index1.html">MAPPLAS</a>
<ul class="nav">
<li>Inicio</li>
<li>Portfolio</li>
<li>Equipo</li>
<li>Blog</li>
<li>Contacto</li>
</ul>
</div><!-- end .container -->
</div><!-- end .navbar-inner -->
</nav> <!-- end .navbar -->
My function is as follows:
((function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500);
event.preventDefault();
});
});
})();
I think there is a problem because I have another function which creates a buttom back-to-top, that function is as follows:
((function() {
$('<i id="back-to-top"></i>').appendTo($('body'));
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function() {
$('body,html').animate({scrollTop:0},600);
});
})();
The thing is that one is working smoothly ( the back to top ) but the other is not. I am not an expert on js and I have tried including completely separated js scripts but nothing solves the problem.
Anyone has an idea why is not working??Thank u!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Smooth Scrolling</title>
<style type="text/css">
.container{
width:300px;
margin:0 auto;
}
.section{
margin-top:60px;
}
.navigation{
position: fixed;
background:white;
padding:20px 20px;
width:100%;
margin-top:0px;
top:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="navigation">
HTML
JavaScript
jQuery
PHP
CSS
</div>
<div class="section">
<h1 id="html">HTML</h1>
<p>
put your text about html here
</p>
</div>
<div class="section">
<h1 id="javascript">JavaScript</h1>
<p>
put your javascript details here.
</p>
</div>
<div class="section">
<h1 id="jquery">jQuery</h1>
<p>
Put your details about javascript here
</p>
</div>
<div class="section">
<h1 id="php">PHP</h1>
<p>
put your details about php here
</p>
</div>
<div class="section">
<h1 id="css">CSS</h1>
<p>put your details </p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('a[href^="#"]').click(function(event) {
var id = $(this).attr("href");
var offset = 60;
var target = $(id).offset().top - offset;
$('html, body').animate({scrollTop:target}, 3000);
event.preventDefault();
});
});
</script>
</body>
</html>

Categories

Resources