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/
Related
I am fairly new to web development. I am trying to apply jQuery to my website, such that when the page loads up, the heading is animated. But for some reason I am not able to get it working. Here is the javascript code :
$(window).ready(function() {
$("h1").animate({left:'250px'});
});
Here is the relevant HTML code:
<!DOCTYPE html>
<html>
<head>
<title> Welcome! </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery_functions.js"></script>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
CSS left only works with absolutely positioned elements. If you add position:absolute to your H1 tag, it will work.
$(window).ready(function() {
$("h1").animate({left:'250px'});
});
h1 { position: absolute; }
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<h1>Hello!</h1>
This is because h1 may have a static position. You may need to set a CSS relative or absolute position to that element like
h1 {position: relative}
and this jQuery code will work
$(document).ready(function () {
$("h1").animate({
left: 250
});
});
See JSFIDDLE
I'm new myself but it appears your animate option is missing an argument.
$('img').animate({left: "-=10px"}, 'fast'); is an example. yours tells it how much to move, but you left off the how.
You can try changing
$("h1").animate({left:'250px'});
to
$("h1").animate({marginLeft:'250px'});
maybe $(doucment).ready()
I think it will be work ))
I would like to drop down a div with further information when the mouse is hovering over another div and am unsure how i should organize this. I have the following: http://quaaoutlodge.com/drupal-7.14/ and I would like that if one hovers over the Book Now area, that the TEST-div drops down as long as the cursor is over Book Now or TEST and it should drop up again as soon as the cursor leaves the area. How do I best go about this?
To get something similar to what you can see on http://www.thedana.com/, I tried to implement some onmouseover javscript code that shall be executed when hovering over the book now div. I just try to change the height of my element statically first like this:
function dropbox(element){
obj = document.getElementById(element);
if(obj) {
obj.style.min-height = "400px";
} else {
}
}
but I can't get it going. The eventual goal is to have a loop with some delay to slowly drop down the book now tab.
You can try a css approach
#book + div{
display:none;
}
#book:hover + div{
display:block;
}
+ selector
you can use this code or (reference: w3schools.com)
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").hover(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
seems like I have edit obj.style.height instead of .min-height and it works fine.
Used JQuery instead and it seems to work fine:
<script src="./path/to/jquery.js"></script>
<script>
$(function() {
var fade = $('#fade');
$('#book').hover(function() {
fade.fadeIn();
}, function() {
fade.fadeOut();
});
});
with my html looking like this:
<div style="" id="book">Book Now<br/> <!-- hover div-->
<div class="fade" id="fade"> <!-- drop down div set to display:none; in css-->
How can I add loading effect on <div>. In this code my members.php is so big file so its take time to load. So I want to show that loading… in my member <div> with effect. my javascript skills are so poor so I don’t know is this a right idea to do this or I have to code in member.php. I am so new and try to learn so please help me. I have tried with some free text javascript effect but I couldn’t find what I looking for. I want some image effect like rounding circle or something like that. Here is my code. I appreciate all answers.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#member').load('members.php').show();
});
</script>
</head>
<body>
<div id member>Loading…</div>
</body>
jQuery
function showLoading()
{
$('<div class="loading"/>').appendTo('#member');
}
showLoading();
$('#member').load('members.php');
CSS
.loading {
background: url('') no-repeat;
padding: 12px;
}
Replace the url with the path to the loading image you want, and the padding should be half the image area size.
Simple fiddle available here
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>
I want to detect the height of the viewable area using Javascript. I have this DIV of height 550px which I want to display on the browser. However, this height might cause the vertical scrollbar to appear on some browsers (depending on how many toolbars the user has installed). In that case I want to detect that, and alert the user about it.
I tried using document.body.clientHeight but it doesnt seem to work... gives me the same height when I tried adding new toolbars and refreshed the page.
this should help you:
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
Extremely easy in jQuery (and works well across different platforms):
<html>
<head>
<title>Heyo</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
alert($(window).height());
});
</script>
</body>
</html>
Documentation here
It's easy with YUI as well.
<html>
<head>
<title>Heya</title>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0b1/build/yui/yui-min.js"></script>
</head>
<body>
<script type="text/javascript">
YUI().use('node', function(Y) {
alert(Y.get(document).get('winHeight'));
});
</script>
</body>
</html>
Documentation here