I need to make a jquery slidetoggle effect in upward direction., now the slide toggle is working only in downward direction. When i used slide up method i couldn't use same button to slide up and slide down the div.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
height:92px;
width:261px;
opacity:0.8;
background-color:#b3171d;
}
#panel
{
padding:50px;
background:url(maharani%20html/images/prince.jpg) no-repeat;
width:262px;
height:248px;
}
</style>
</head>
<body>
<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
I am a beginner in jquery., please help me :)
Try following code Here is JSFIDDLE
<!DOCTYPE html>
<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({
direction: "up"
}, 400);
});
});
</script>
<style>
#panel,#flip
{
position:absolute;
bottom:0;
width: 50%;
padding-bottom:2%;
z-index: 100;
opacity:0.8;
background-color:#b3171d;
}
#panel
{
display: none;
padding:50px;
background:url(maharani%20html/images/prince.jpg) no-repeat;
width:262px;
height:248px;
}
</style>
</head>
<body>
<div>
<div id="panel">Hello world!</div>
</div>
<div id="flip">Click to slide up panel</div>
</body>
</html>
Related
I've had this issue many times, where the scroll is off from the sections and it creates an effect where the top of a section is actually the bottom of one previous. I have an image in a section with position: absolute on it, is that the problem?
Link
Edit: Code
Codepen
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: false,
css3: false
});
});
</script>
<style>
#intro {
backgroundSize: 100% 10% !important;
color: white;
}
img {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section" id="intro">
<img src="https://aos.iacpublishinglabs.com/question/aq/1400px-788px/many-lumens-100-watt-incandescent-light-bulb-give-off_2c6301bc5ccd144.jpg?domain=cx.aos.ask.com"></img>
<h1>Tungsten: It'l light up your day!</h1>
</div>
<div class="section" id="gallery">
<div class="slide">
</div>
<div class="slide">asdfasdf
</div>
<div class="slide">asdfasdfasdf
</div>
</div>
</div>
</body>
</html>
I'm a beginner in JavaScript and jQuery. My css and JavaScript codes are external to html file. There are already answers for this question and i tried, tried all the codes but scrolling does not work. I don't know what i missed. jQuery is installed (Even CDN).
Well, this code works in the snippet so probably something wrong with javaScript or JQuery. Still i don't know what is my mistake. Please help.
$("#btn1").click(function() {
$('html,body').animate({
scrollTop: $("#fir").offset().top},
'slow');
});
$("#btn2").click(function() {
$('html,body').animate({
scrollTop: $("#sec").offset().top},
'slow');
});
.button1{ position:absolute; top:130px; left:150px; font-size: 10px; cursor:pointer; color:#000000;}
.main{ width: 100%; height:500px; background:black; }
.first{ width: 100%; height: 1000px; background: green; }
.second{ width: 100%; height: 1000px; background: blue; }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> <!-- JQuery CDN -->
<script>window.jQuery || document.write('<script src="JQuery.js"><\/script>');</script> <!-- JQuery library -->
<script src="js/script.js" type="text/javascript"></script> <!-- my javascript -->
<div class="main">
<button id="btn1" type="button" class="button1">Sign Up</button>
<button id="btn2" type="button" class="button1" style=left:250px>Sign In</button></div>
<div id="fir" class="first"></div>
<div id="sec" class="second"></div>
</body>
</html>
I have combined (for simplicity of my test) all the elements into singe .html file with some modifications and it works for me:
move script tags at the end of the document
add document.ready() logic
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<style type="text/css">
.button1{ position:absolute; top:130px; left:150px; font-size: 10px; cursor:pointer; color:#000000;}
.main{ width: 100%; height:500px; background:black; }
.first{ width: 100%; height: 1000px; background: green; }
.second{ width: 100%; height: 1000px; background: blue; }
</style>
<div class="main">
<button id="btn1" type="button" class="button1">Sign Up</button>
<button id="btn2" type="button" class="button1" style=left:250px>Sign In</button></div>
<div id="fir" class="first"></div>
<div id="sec" class="second"></div>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> <!-- JQuery CDN -->
<script type="text/javascript">
$( document ).ready(function() {
$("#btn1").click(function() {
$('html,body').animate({
scrollTop: $("#fir").offset().top},
'slow');
});
$("#btn2").click(function() {
$('html,body').animate({
scrollTop: $("#sec").offset().top},
'slow');
});
});
</script>
</body>
</html>
2 part question.
So I want to be able to click the square at the middle which should slide the top left box to the right horizontally, and the top right box will slide to the bottom vertically, etc.
Duration being 2 seconds for the slide.
$(document).ready(function(){
$("#container").click(function(){
$("#box1, #box3").switchClass("horizontal", "newVertical", 1000);
$("#box2, #box4").switchClass("vertical", "newHorizontal", 1000);
});
});
in Fiddle animation is running. Does NOT run in chrome or firefox. Am I using the correct cdn?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cie Studios | Solution</title>
<!--Stylesheet-->
<link rel="stylesheet" href="ciestyle.css">
</head>
<body>
<section id="main">
<div id="container">
<div class="horizontal" id="box1">1</div>
<div class="vertical" id="box2">2</div>
<div class="vertical" id="box3">3</div>
<div class="horizontal" id="box4">4</div>
</div>
<label>Fig 1.2</label>
</section>
<!--Google JQuery Lib -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!--Javascript -->
<script src="ciescript.js"></script>
</body>
</html
CSS
* {
margin:0px auto;
}
#main {
height:100%;
width:100%;
margin-top:20%;
text-align:center;
}
#container {
display:block;
border:1px solid #000;
background-color:#333333;
height:151px;
width:151px;
}
.horizontal {
width:100px;
height:50px;
}
.vertical {
width:50px;
height:100px;
}
.newHorizontal {
width:100px!important;
height:50px!important;
float:left!important;
border:0px!important;
}
.newVertical {
width:50px!important;
height:100px!important;
float:right!important;
border:0px!important;
}
#box1, #box3 {
float:left;
}
#box2, #box4 {
float:right;
}
#box1 {
background-color:#ffffff;
border-bottom:1px solid #000;
}
#box2 {
background-color:#cccccc;
border-left:1px solid #000000;
}
#box3 {
background-color:#999999;
border-right:1px solid #000000;
}
#box4 {
background-color:#666666;
border-top:1px solid #000000;
}
JQUERY
$(document).ready(function(){
$("#container").click(function(){
$("#box1, #box3").switchClass("horizontal", "newVertical", 1000);
$("#box2, #box4").switchClass("vertical", "newHorizontal", 1000);
});
});
http://jsfiddle.net/pcdqz/1/
JqueryUI has a dependency on Jquery.
Add <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> or a similar cdn link prior to loading JqueryUI.
I am trying to the div box with image move left to right,
I tried another script: http://jsfiddle.net/bala2024/MzHmN/
Here is the html code
<!DOCTYPE html>
<html>
<head></head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
<div style="width:50px; height:50px">
<img src="sceen.jpg">
</div>
</div>
</body>
</html>
CSS
.slide {
position: relative;
background-color: gray;
height: 100px;
width: 500px;
overflow: hidden;
}
.slide .inner {
position: absolute;
left: -500px;
bottom: 0;
background-color:#e3e3e3;
height: 30px;
width: 500px;
}
JS
$(document).ready(function () {
$('#slideleft button').click(function () {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() : 0
});
});
});
You will need to apply width to main container. Please replace it with below line and check in your browser.
<div id="slideleft" class="slide" style="width:100px; margin:0 auto">
use margin for outer space and padding for inner space
try this
<!DOCTYPE html>
<html>
<head>
</head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
<div style="width:50px; height:50px; margin-left: 100px;"><img src="sceen.jpg">
</div>
</div>
</body>
</html>
Click the following link to watch live demo... Click Here
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Animation test</title>
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
</script>
</head>
<body>
<div style="position:relative">
<div id="b" style="position:absolute;">B</div>
</div>
</body>
</html>
CSS:
div.inner{
background:black;
margin-left:0;
width:100px;
animation:sample 2s;
-webkit-animation:sample 2s;
}
keyframes sample{
from{margin-left:100%;}
to{margin-left:0%;}
}
#-webkit-keyframes sample{
from{margin-left:100%;}
to{margin-left:0%;}
}
fiddle: http://jsfiddle.net/apRMU/17/
I'm looking to have a slide(down) toggle but would like the panel to line up neatly along the left edge of the button. I don't want to hard code margin, position, px, etc but want the slide down panel to always be "in relation" to (and relative) the (left bottom of) button.
What am I missing?
<!doctype html>
<head>
<script src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<style type="text/css">
.slideToggleBox{
float:left;
padding:8px;
margin:16px;
border:1px solid red;
width:200px;
height:50px;
background-color:blue;
color:white;
position:fixed;
left:-10.5px;
top:2.3%;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="clear">
<button id=slideToggle>slideToggle()</button>
<br/>
<div class="slideToggleBox">
slideToggle()
</div>
</div>
<script type="text/javascript">
$("#slideToggle").click(function () {
$('.slideToggleBox').slideToggle();
});
</script>
</body>
</html>
Try this code. Added a demo here
HTML
<div class="wrapper">
<button class=slideToggle>slideToggle()</button>
<div class="slideToggleBox">slideToggle()</div>
</div>
<div class="wrapper">
<button class=slideToggle>slideToggle()</button>
<div class="slideToggleBox">slideToggle()</div>
</div>
CSS
.wrapper{
float:left;
width:200px;
}
.slideToggleBox {
float:left;
border:1px solid red;
width:200px;
height:50px;
background-color:blue;
color:white;
margin-top: -1px;
margin-left:1px;
}
JS
$(".slideToggle").click(function () {
$(this).next().slideToggle();
});