I am trying to Animate a div's top position by -130px, so it will move off screen. Its not working and i cant workout why! Am obviously a jQuery/Javascript novice.
Basically i have a button/hyperlink with the id #NavShrink, on clicking this i want the div #Header to slide up off screen by 130px, leaving its bottom 20px on screen.
Nothing happens!
Here's my code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body {
padding:0px;
margin:0px;
font-family: Helvetica, sans-serif;
font-size:11px;
color:#7b7a7a;
}
#Header {
height:150px;
background-color:#f4f4e9;
}
#MainNav {
padding:20px 20px 0px 20px;
width:1140px;
margin-left:auto;
margin-right:auto;
text-align:right;
position:relative;
height:130px;
}
a#NavShrink {
display:block;
width:15px;
height:15px;
background-image:url(../images/ShrinkNav.png);
position:absolute;
bottom:5px;
right:0px;
}
</style>
</head>
<body>
<div id="Wrap">
<div id="Header">
<div id="MainNav">
<script language="javascript" type="text/javascript">
$('#NavShrink').click(function() {
$('#Header').animate({ top: "-=130px"})
})
</script>
</div>
</div>
</div>
</body>
In addition to the issue raised by j08961, another problem, I imagine, is that you're animating the top property; which effectively has no meaning in a div (or other element) with position: static (the default position property).
To animate, simply assign position: relative to the relevant div.
Brief, though hopefully illustrative, JS Fiddle demo.
Either wrap your code in a document ready call:
$(document).ready(function() {
// Handler for .ready() called.
});
or put your code at the end of your document, before the closing </body> tag. You're executing your code before the element you want it to act on exists.
Also, change your animate call to $('#Header').animate({ top: "-=130"}) (no px), and give the #Header a position (e.g. position:relative).
Here's a jsFiddle example.
Hey is this what you are looking for: http://jsfiddle.net/EGc96/
you can also use .toggle for slide effect or sliup and down.
hope it fits the cause :)
code
$('#NavShrink').click(function() {
$('#Header').animate({
// top: "-=130",
height: "-=130"
});
});
Related
I am aware I can use background-image: url("www.linktoimage.com/image.png"), in css, to place an image in the background. I also know I can add a javascript file into html with tag. My challenge is how do I apply css characteristics of a background image to my javascript file?
To add some context, the javascript file is a simple animation (randomly bouncing balls, that responds to the screen width and height. I want to place text on top of this as if it was background, but no matter what I do, text will place itself above the script, in a white box, instead of directly on top of my script. Below is the general result of my various attempts:
I would like to place "Welcome" on top of my javascript, as oppose to how it currently appears on top of window with a white background. My css is as follows:
#font-face {
font-family:'HighTide';
src: url('assets/HighTide.otf')
font-family:'HighTideSans';
src: url('assets/HighTideSans.otf')
}
body {
padding: 0;
margin: 0;
}
canvas {
vertical-align: top;
z-index: -1
}
.title {
font-family:'HighTide';
font-size: 10vw;
margin: auto;
text-align: center;
z-index: 1;
}
.enter {
font-family:'HighTideSans';
font-size: 2vw;
text-align: center;
margin: auto;
z-index: 1;
}
And here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LockeDesign</title>
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
<script src="libraries/svg.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=title> WELCOME </div>
<a href="main.html" class=enter> </a>
</body>
</html>
Any suggestions are appreciated, thank you!
EDIT
Using position: absolute; works partially, all I had to do was add left: 0;
right: 0; and bottom: 50%; to re-center the text. Resizing the window would cause scrollbars to appear, which was less than desirable, so I added overflow:hidden; to the body tag. Now this works exactly as intended, thanks all!
I would suggest WRAPPING all of the content you wish to display over the dynamic background in a single div
Example
<html>
<body>
<div id="BodyWrapper">
<h1> This is an HTML Page </h1>
</div><!-- End BodyWrapper -->
</body>
</html>
Then apply some Z positioning to the BodyWrapper with css
#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;}
If the above is still not enough then you may have to delay the
showing of the body content (make sure the dynamic background
completely loads first).
You can set the initial display styling of the wrapper to
#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; display:none;}
and onLoad... call this function
function show_PageBody()
{
setTimeout(function(){ update_Wrapper(); },1000);
function update_Wrapper()
{
document.getElementById('BodyWrapper').style.display='block';
document.getElementById('BodyWrapper').style.zIndex = 5;
}
}
You can add a css transition for the opacity of the BodyWrapper so that it fades onto the screen instead of just appearing.
This should work (has worked for me in the pass).
If not please let me know.
Using position: absolute; works partially, and renders this result:
All I had to do was add left: 0; right: 0; and bottom: 50%; to re-center the text. Also, resizing the window would cause scrollbars to appear, which was less than desirable, so I added overflow:hidden; to the body tag. Now this works exactly as intended:
I'm working on a HTML framework that most of it's pages constructed from two section. first section (TopPanel) is a sliding panel that could slide down or up (with jQuery as well). second section is the Main part of page that could contain any sort of HTML document.
<!doctype html>
<html>
<head>
<!--Meta scripts & more-->
</head>
<body>
<div class="TopPanel">
<!--Panel's Contents-->
</div>
<div class="Main">
<!--Some standard HTML docs here-->
</div>
</body>
</html>
When the TopPanel is sliding down, all elements of the Main section must move down. But it's possible to exist some position:fixed element in the Main section. so it's clear that they won't move unless we gave them some margin-top: [$('.TopPanel').height()] px;. But it's not what I'm looking after!
I'm looking for a way to shift down and shift up all content of the Main section with a smooth effect and without changing of all elements attributes.
Have you thought about using a CSS transform:translateY(20px) on the body tag? If you are using fixed position on the other element, it shouldn't actually affect it although I haven't tested that.
You can then use transitions to get the smooth movement you are after.
body{
padding:10px;
overflow:hidden;
background:#fff;
height:100%;
transition:all .2s;
}
body.active{
transform: translateY(60px);
}
Example:
http://codepen.io/EightArmsHQ/pen/gpwPPo
Lookout for this kind of stuff though : Positions fixed doesn't work when using -webkit-transform
JSFIDDEL version
(UPDATED) Try this:
$('.main').click(function(){
$('.main').toggleClass('toggle');
})
.main{
width:20%;
height: 10%;
background-color: rgba(100,100,100,0.7);
text-align: center;
position: fixed;
top: 12%;
transition:all 1.0s
}
.top{
width: 20%;
height: 10%;
text-align: center;
background-color: rgba(300,50,50,0.7);
position: absolute;
}
.toggle{
transform: translateY(100px);
transition:all 1.0s
}
<div class="content">
<div class="top">
Top
</div>
<div class="main">
Main
</div>
</div>
It would need some tweaking but it still does what you are looking for.
I think you are looking for is maybe this:
I have used JQuery UI 1.9.2 for making the toggle ease effect. For more i have created the Fiddle
JQuery
$("button").click(function(){
$(".topPanel").toggleClass("height", 300);
$(".main").toggleClass("top", 300);
});
CSS
body { margin:0; }
.topPanel
{
width:100%;
height:50px;
background:#333;
}
.main
{
top:50px;
bottom:0px;
width:100%;
position:absolute;
background:#ddd;
}
.height { height:100px; }
.top { top:100px; }
p { font-weight:bold; }
HTML
<div class="topPanel">
</div>
<div class="main">
<center><button>Click Me!</button></center>
<p>Hey look at me, i am moving along when you click button!</p>
</div>
What I want to do is create a status bar, that when you click on it the bar will go up. I am also not using jquery. I was going to have multiple images, that represented each point of the status bar, then display them as an image, which would work but I do not know if it is possible to link js variables into html. I also found I could use something like this
HTML
<div class="skill_bar" style="position:absolute; top:100px; left:50px; z-index:2">
<div class="skill_bar_progress skill_one"></div>
</div>
CSS
.skill_bar {
width:20px;
height:50px;
background:#c0c0c0;
margin-bottom:5px;
}
.skill_bar_progress {
width:100%;
height:100%;
background:#00f;
}
But that did not work so well because it only worked once and I could not find a way to change it.
Thanks in advance
You need to add an event listener to the click event on the status bar. That function is going to move the status bar up.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#statusBar {
background-color: orange;
width: 200px;
height: 100px;
position: absolute;
top: 100px;
}
</style>
<script>
addEventListener("DOMContentLoaded", function () {
var statusBar = document.querySelector("#statusBar");
var top = parseFloat(getComputedStyle(statusBar).top);
statusBar.addEventListener("click", function () {
top = top - 10;
statusBar.style.top = top + "px";
});
});
</script>
</head>
<body>
<div id="statusBar">Status</div>
</body>
</html>
I have the following code
<div id="wrapper">
<div id="article">
Here is a text containg something
</div>
</div>
<style>
#wrapper {
height:200px;
width:500px;
background:url(http://3.bp.blogspot.com/-06iGd_Ue9dk/UqPzuA1Kw7I/AAAAAAAACPc/hBtKtRBSDGE/s1600/Pattern-call.png);
-moz-transition: background-color 2s linear;
transition: background-color 2s linear;
}
#article {
background: url("http://4.bp.blogspot.com/-5BAxq07aDQA/UgdY3Mk8spI/AAAAAAAAB84/ElxocGOzgYA/s1600/Opacity.png") repeat scroll 0 0 rgba(0, 0, 0, 0.4);
margin-top:50px;
margin: 0 auto;
width: 100px;
padding:10px;
position: relative;
top:60px;
}
#article a {color:#fff;
text-decoration:none;
}
.hover {
background:rgba(0, 0, 0, 0.4) !important;
}
</style>
<script>
$('#wrapper > div').hover(function(){
$(this).parent().toggleClass('hover');
})
</script>
I am facing 2 problems now -
1. I do no want the fade effect on hover but a transition in which the background-color would change starting from the left and end at right. (As we see in loading effect)
2. Secondly, as the background change is complete I want the browser to redirect the user to the anchor link (the cursor is stil in hover state)
I am facing problem in setting up the two. Your help would be appreciated.
Here is a jsfiddle I have made http://jsfiddle.net/MjkC5/1/ for your reference.
Finally got a link of what sort of thing I want in transition see this page http://bloggingstory-shameer.rhcloud.com/sample-post-for-ghost/ See how the background changes with the loading of page I want same sort of effect. CSS is preferable but I dont mind Jquery too.
The following code does exactly what you want. See if it helps.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.animated_div').animate({ 'width':'300px' }, 2000);
})
</script>
<style type="text/css">
.wrapper {width:300px; height:100px; background:#000; position:relative;}
.animated_div {position:absolute; top:0px; left:0px; width:0px; height:100px; background:#BABABA;}
</style>
</head>
<body>
<div class="wrapper">
<!--you can put anything inside here-->
<div class="animated_div">
</div>
</div>
</body>
</html>
Thanks
I am making a fake computer screen with images. I have a picture of a Firefox icon and when the mouse hovers over it, it increases in size, and I would like another picture to appear when clicking on the picture of the icon. This is the closest I have been able to get.
<html>
<title> Scope </title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<embed src="73797^alarmclock.mp3"; autostart="true"; loop="true"; hidden="true";/>
<body>
<img src ="alarm clock2.jpg"/>
<p> Pulling the sheets into my body, I begin to sink back into the bed...
uggh... my alarm clock... time to get up..
<img id="computerscreen" src= "computer.jpg"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
<img id="grow" src="icon2.gif"/>
<img class="show hidden" src="screen2.jpg" />
</body>
Here is CSS
#grow{
position:absolute;
top:1157px;
left:599px;
width:47px;
z-index:4;
height:47px;
}
#grow:hover{
top:1137px;
left:589px;
width: 70px; !important;
height: 70px; !important;
cursor:pointer;
}
.hidden {
display:none;
position:absolute;
top:300px;
right: 0px;
width:850px;
height:550px;
z-index:6;
}
#computerscreen{
position:absolute;
top:300px;
right: 0px;
z-index:3;
}
and Script
$(document).ready(function(){
$('#grow').click(function() {
$('.hidden').fadeIn('slow', function() {
});
});
Seems you don't need the callback from the fadeIn(), just call fadeIn
$('.hidden').fadeIn('slow');
on '.hidden' in the css remove the display:none; and hide it in the jQuery so here is what the jQuery will look like...
$(document).ready(function () {
$('.hidden').hide();
$('#grow').click(function () {
$('.hidden').fadeIn('slow');
});
});
I have also removed the callback function, because you do not need it.