http://www.globalguideline.com/interview_questions/Questions.php?sc=C_Sharp_Programming_Language_Interview_Questions_A&page=6
In this URL, a user sees on the left side a Twitter picture move. How to do it. What's this technique name? How to do that?
Try to search for floating menu.
There are two types: with fixed and absolute positioning. If you want similar animation as in the example then go with absolute. And if I remember it right IE6 has some issues with fixed position.
Alternatively you can go with jQuery, here is a good example with sources.
You need to hook scroll event to keep content always visible.
Hope this helps you:
<html>
<head>
<title>fixed div</title>
<script src="js/jquery1.4.1.js" type="text/javascript"></script>
</head>
<body>
<div id="div1" style="float:left;left:10px;top:10px;z-index:5000;height:50px;
width:50px;clear:both;background-color:green;color:grey;
font-size:300%;">O</div>
a<br/> b<br/> b<br/> d<br/> e<br/> f<br/> g<br/> h<br/> i<br/>j<br/>
k<br/> l<br/> m<br/> n<br/> o<br/> p<br/> q<br/> r<br/>
<script type = "text/javascript">
$(function(){
var left = 10;
var top = 10;
var d=$("#div1");
$(window).scroll(function(){
var t=$(window).scrollTop() + top +"px";
d.animate({'margin-top':t},'slow');
});
});
</script>
</body>
</html>
Related
I have been working on making a shrinking header with javascript, and while I have this jsfiddle working exactly how I want it, I can't seem to get it to work outside of the fiddle.
What is wrong with this html?
<body>
<div id='sizeShifter'>
Here is my website's header
</div>
<div id='spacer'></div>
<div id='content'>
Here is my website's content
</div>
<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
<script>
var divToChange = $('#sizeShifter');
var lastScroll = 0;
$(document).scroll(function(event){
var st = $(this).scrollTop();
var divHeight = 400-st;
divToChange.css({height:divHeight});
});
</script>
</body>
</html>
I can see few issues in your code.
You didn't add CSS file, which is present in fiddle.
jquery-2.1.3.min.js file might not be at correct location. BTW, it is preferred we use jquery from http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js or http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js, unless you have modified version of jquery.
If you can fix them, your code should work :)
I'll explain what I mean in more detail:
There is a way to make the entire screen movable by either dragging it with the cursor, or touching it with your fingers. You're then in turn able to snap to the div closest to your location. The div is also able to adjust based on resolution and changing the screen size.
Here is the prime example: http://making.gene.com/1/start/
I'm interested in how you can accomplish this, and I've done research on the subject.
There are many jquery plugins that let you snap to a div, or move an object on the screen, but nothing to the degree i'm looking for.
This is my first post, so let me know if there is something I can add that will help you.
Here is an example of snapping to a div, the most i've been able to find out.
<script src="src/jquery.scrollsnap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.snap',
proximity: 50
});
});
</script>
This lets you snap to a div when you scroll near it, while also being able to change the proximity of when it snaps.
try this http://guidobouman.github.io/jquery-panelsnap/
this plugin snap the section
<!doctype html>
<html>
<head>
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.panelSnap.js"></script>
<script>
jQuery(function($) {
$('body').panelSnap();
});
</script>
</head>
<body>
<section>
...
</section>
<section>
...
</section>
<section>
...
</section>
</body>
</html>
you should start from here
$(function() {
$( "#draggable" ).draggable();
});
working demo: http://jqueryui.com/draggable/ and http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/
I'm having a problem with my 'curtainX' cycle animation in jquery. The first animation seems to zoom out in the top center, instead of doing the animation it should. I can't seem to find the problem and now I don't know where to start. I tried checking the different options for the animations and can't seem to figure it out.
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">img{position:absolute;}</style>
<script src = "jquery.js"></script>
<script src = "jquery-ui.js"></script>
<script src = "jquery-cycle.js"></script>
<script src = "text/javascript">
function start(){
$("#blank").cycle({
fx: 'curtainX',
sync: false,
delay: -4000
});
}
</script>
</head>
<body>
<div id = "blank" onclick = "start()">
<img src = "img/blank.gif" style = "z-index:1"/>
<img src = "img/1c.gif"/>
</div>
</body>
</html>
You can view a demo at http://vrbj.webs.com/flipTest.html
It seems to be a problem related to the absence of a width and a height.
I've rewritten the code here
Removing width and height causes your problem.
You can solve changing:
img{position:absolute;}
to
img{position:absolute; width: 59px; height: 74px;}
Consider also the way you have written your code, taking a loo at what i've written.
Your code's right but the way is written is less "plugin's compliant" than in the fiddle.
Functions in the tag are called when they are needed. Try moving your start function within the tag and put that within an $(document).ready( your function ) call
I tried to use the following function in order to set the div's position to 100 px from top after scrolling 100 px.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(window).scroll(function(){
$("#header").css("top",Math.max(0,100-$(this).scrollTop()));
});
</script>
<div class="header" style="position:fixed;top:100px;background-color:red">something</div>
it is not working(the div stick to it's fixed position). it seems that the function is not relating to the div. what is my problem ?
Your problem ist that your div has the class header, not the id.
Try
<div id="header" style="position:fixed;top:100px;background-color:red">something</div>
$(document).ready(function(){
$('.header').scroll(function(){
$(this).css("top",Math.max(0,100-$(this).scrollTop()));
});
});
I am relatively proficient in html and css, but am not with javascript and jquery. I am trying to get a div to move diagonally, however its not working.
Here is my code:
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#box1 div").animate({left: '+=150', top: '+=150'}, 1000);
});
</script>
<div id="box1"></div>
</body>
</html>
I know its probably something really stupid, but does anybody know what the problem is?
Thanks!
You have to first make it position: absolute or relative in CSS.
#box{
position: absolute;
}
$("#box1").animate({left: '+=150', top: '+=150'}, 1000);
Oh yeah, do this:
$("div#box1") //correct
instead of:
$("#box1 div") //incorrect
DEMO: http://jsfiddle.net/DerekL/bwg8R/
To animate something using left and top the element needs to be positioned. either relative or absolute, otherwise left and top don't do anything to the element.
See my example here: http://jsbin.com/ayafup/edit#html,live
And target your #box1 element directly as $(#box1), not all child div's inside it as you're doing, $(#box1 div)
Also move your scripts down to the bottom before </body> for better performance and better practice in general.
Give your div some position because left and top are used after position is set
<div id="box1" style="position:absolute;">s</div>
And in javascript
$("#box1 div").animate({left: '+=150', top: '+=150'}, 1000);
Should be
$("#box1").animate({left: '+=150', top: '+=150'}, 1000);
Because the previos one was selecting child of #box1
Here is the best solution I find for animations effects.. I you don't have any constraint to support older version of browser than animation of you will be like eating a cake..
Try this http://daneden.me/animate/
Cheers...!!!