I am using the jquery UI to create a floating window. I am able to create window. But I am having trouble in making it floating. I want that the window should be in top right corner of the "body". (now you can see its on right but at bottom) and I also want to make it moving. When I will scroll the page the window should also scroll along with it. e.g. http://manos.malihu.gr/tuts/jquery-floating-menu.html
Here is the code what I have done so far.
Please find the code on http://jsfiddle.net/z8rW6/1/
Javascript Code:
$(document).ready(function(){
$("#dialog").dialog();
var $parent = $('#body');
var windowHeight = $(window).height();
var parentAbsoluteTop = $parent.offset().top;
var parentAbsoluteBottom = parentAbsoluteTop + $parent.height();
var topStop = parentAbsoluteTop + $( ".selector" ).dialog( "option", "height" );
$('#dialog').dialog({ width: 300,height: 600 }).dialog('widget').position({
my: 'right top',
at: 'right top',
of: $('#body')
});
$(window).scroll(function(event) {
var windowBottom = $(window).scrollTop() + windowHeight;
if (windowBottom < topStop)
$('.selector').dialog({ dialogClass: 'myPosition1' });
else if (windowBottom >= topStop && windowBottom <= parentAbsoluteBottom)
$('.selector').dialog({ dialogClass: 'myPosition2' });
else
$('.selector').dialog({ dialogClass: 'myPosition3' });
})
CSS Code:
#page{
width:800px;
margin:0 auto;
}
.myPosition1 {
position: 'absolute',
top: '0px',
bottom: 'auto',
Right: '0'
}
.myPosition2 {
position: 'fixed',
top: 'auto',
bottom: 'auto',
Right: '0'
}
.myPosition3 {
position: 'absolute',
top: 'auto',
bottom: '0px',
Right: '0'
}
#header{
border:1px solid blue;
height:15px;
margin:8px;
}
#body{
border:1px solid blue;
height:5600px;
margin:8px;
position: relative;
}
#footer{
border:1px solid blue;
height:15px;
margin:8px;
}
h1,h2{
padding:16px;
}
#debug {
position: fixed;
bottom: 0;
right: 0;
height: 100px;
width: 100px;
color: red;
}
Html Code:
<html>
<head>
<LINK href="css/style.css" rel="stylesheet" type="text/css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src='javascript/behaviour.js'></script>
</head>
<body style="font-size:62.5%;">
<div id="page">
<div id="header"><h1>header</h1></div>
<div id="body" >
<h1>content top -> when scrolling up the box should STOP here (at the line right above this text)</h1>
<div id="dialog" title="Detailed FeedBack">I'm in a dialog </div>
<span style="position: absolute; bottom: 0; ">content bottom -> when scrolling down the box should STOP here (at the line right below this text)</span>
</div>
<div id="footer"><h1>footer</h1></div>
<div id="debug"></div>
</div>
</body>
</html>
:) All of these answers are great ways to handle the question you technically asked... how to do it with jQuery. However - it is far easier to do it with very simple CSS.
Example:
<head>
<style type="text/css">
.myDialog {
padding: 5px 10px;
background: yellow;
border: 1px solid #999;
position: fixed; /* This is the magic - stays during scroll. */
top: 0; right: 0; /* These coordinates are now in
relation to the first parent
with non-static positioning (body) */
}
.hidden {
display: none;
}
</style>
</head>
<body>
<!-- The rest of your page -->
<!-- Put your dialog at the end of the body (or the beginning)
This way you don't have to worry about it getting hung up
within the positioning boxes of any other elements -->
<div class="myDialog hidden">
This is my dialog content!
</div>
</body>
<script type="text/javascript" language="javascript">
// Now you can just toggle on and off the "hidden"
// class to make the dialog hide/show.
$('#SomeButton').bind('click', function (ev) {
$('.myDialog').toggleClass('hidden');
});
</script>
The exact same principles can be applied to your Modal dialog to make it move with the scrolling of the page, and that sort of thing.
For a working example of the above, take a look at this jsFiddle: http://jsfiddle.net/WSZXL/
This should work with your HTML, though you should increase #footer's height (like to 400px) in your CSS to be able to confirm that it works :
var $d;
$(document).ready(function(){
var dlg_width = 300;
var dlg_height = 200;
var dlg_offset_x = $("#page").width() - dlg_width + 100;
var dlg_margin_top = $("#header").outerHeight(true); // includeMargins=true
var dlg_margin_bottom = $("#footer").outerHeight(true); // includeMargins=true
$d = $('#dialog').dialog({
width: dlg_width,
height: dlg_height,
position: [dlg_offset_x, dlg_margin_top]
});
$(window).bind('scroll', function(evt){
var scrollTop = $(window).scrollTop();
var bottom = $(document).height() - scrollTop;
$d.dialog("option", {"position": [
dlg_offset_x,
((dlg_margin_top - scrollTop > 0) ?
dlg_margin_top - scrollTop :
((bottom - dlg_height > dlg_margin_bottom) ?
0 :
bottom - dlg_height - dlg_margin_bottom
)
)
]});
});
});
You can see it live here : http://jsfiddle.net/5TFQy/10/
Note that there are some quircks though:
dialog sticks to the right of the viewport, when it should stick to the right of the #body. Did I miss something, or is it a limitation of dialog()?
dlg_margin_bottom = $("#footer").outerHeight(true) isn't enough of a value to pixel-perfectly honour your bottom-blue-line requirement. #body's margin and border sizes should certainly be added. Tried to keep it simple not to complicated.
I hope this will help you:
http://jsfiddle.net/lytican/UxZKH/2/
Related
I would like to create vertically a fixed navigation bar for my site. Currently i use the one that has been mentioned on various posts here:
HTML:
<html>
<head>
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'navbar.css' %}">
<script type="application/javascript">
$(document).ready(function () {
var navPos = $('.nav_menu').offset().top; //Sticky navbar
$(window).scroll(function () {
var scrollPos = $(this).scrollTop();
if (scrollPos >= navPos) {
$('.nav_menu').addClass('fixed');
} else {
$('.nav_menu').removeClass('fixed');
}
});
});
</script>
.....
<div class="nav-container">
<div class="nav_menu">
Bars go here
....
And CSS:
.nav-container .nav_menu.fixed {position: fixed; z-index: 10000; top: 0; width: 195px; padding-left: 8px}
This solution works great, the navbar is sticked, in my case the navbar is on the top left side of the page. If i scroll down it perfectly follows the scroll. In case i open the gape using a small window and i stoll down plus right the bar follows (as it should happen). However i would like the bar to only follow vertically, in case someone scrolls left or right the bar should stay where it is.
How can i achieve this?
You can stop the horizontal fixed by applying minus left scroll:
var $window = $(window);
var navPos = $('.nav_menu').offset().top; //Sticky navbar
$window.scroll(function() {
var scrollPos = $window.scrollTop();
var left = 0 - $window.scrollLeft();
if (scrollPos >= navPos) {
$('.nav_menu').addClass('fixed').css('left', left + 'px');
} else {
$('.nav_menu').removeClass('fixed').css('left', 0);
}
});
body,
html {
height: 1000px;
width: 2000px;
position: relative;
margin: 0;
padding: 0;
}
.nav_menu {
height: 50px;
background-color: blue;
width: 195px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br>
<div class="nav_menu"></div>
I was wondering if it is possible to create a mirroring effect with the cursor on a webpage (using Javascript perhaps?). Take for example in the code below, the line between the black and white portion of the page would be the "line of reflection," so if the mouse were moving around in the top black portion, there would be an inverse image of a cursor and inverse action happening in the the bottom white portion, and vice versa.
Any help and pointers (no pun intended) on where to start would be appreciated, thanks!
Edit: I tried using .mousemove(), event.pageX, event.pageY as people suggested (shown below). I'm pretty new to Javascript so I have issues making it work.
cursor.html
<doctype! html>
<head>
<link rel="stylesheet" href="cursor.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="cursor.js"></script>
<title> Cursor Mirror </title>
</head>
<body>
<div class="top-half-black"></div>
<div class="bottom-half-white">
<img id="mirror-image" src="upside-down.png">
</div>
<script>
$(".top-half-black").mousemove(function(event){
var xPosition = event.pageX;
var yPosition = event.pageY;
})
function placeCursor() {
var d = document.getElementById('mirror-image');
d.style.position = "absolute";
d.style.left = xPosition+'px';
d.style.top = -yPosition+'px';
}
$( ".top-half-black").mouseover(function( event ){
placeCursor () ;
})
</script>
</body>
</html>
cursor.css
body{
margin:0px 0px 0px 0px;
}
.top-half-black{
background-color:black;
width:100%;
height:50%;
}
What I want it to look like:
I imagine you want something like this.
HTML:
<div class="section top-half-black"></div>
<div class="section bottom-half-white">
<img id="mirror-image" src="http://i.imgur.com/cjjNbk1.png"></img>
</div>
CSS:
body{
margin:0px 0px 0px 0px;
}
.top-half-black{
background-color:black;
width:100%;
height:50%;
}
.bottom-half-white{
position: relative;
}
#mirror-image{
left: 0;
top: 0;
position: absolute;
width: 17px;
height: 25px;
}
.section{
display: block;
min-height: 10em;
}
JS:
var $img = $('#mirror-image');
var imgHeight = $img.height() / 2;
function placeCursor(x, y){
$img.css({top: y + 'px', left: x+ 'px', position:'absolute'});
}
$(".top-half-black").mousemove(function(event){
var newY = $(this).height() - event.pageY - imgHeight;
placeCursor(event.pageX, newY);
});
Working demo:
http://codepen.io/alirezanoori/pen/YyagKP
I don't know about changing colors but if you can find some images of the cursor colors you want you can add this to your CSS classes.
cursor: url(images/my-cursor.png), auto;
I am trying to achive a fixed position after a certain point of the page is passed using CSS JS and HTML.
Also I don't know the bet aproach in loading the function into the html doc, I was thinking on using the onload...
Here is what I have done until now:
<!DOCTYPE html>
<html>
<head>
<script>
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
</script language="JavaScript">
<style>
#main {
position: relative;
width: 620px;
margin: 0 auto;
height: 1800px;
}
#left1{
position: absolute;
font-family: sans-serif;
left: 0px;
top: 10px;
height: 200px;
width: 300px;
background-color: #F6D565;
}
#right1{
position:absolute;
font-family: sans-serif;
top: 10px;
right: 0px;
height: 300px;
width: 300px;
background-color: #DFFCC2;
}
#right2{
position:absolute;
top: 320px;
right: 0px;
font-family: sans-serif;
height:300px;
width: 300px;
background-color: #DFFCC2;
}
#right3{
position:absolute;
top: 630px;
right: 0px;
font-family: sans-serif;
height: 300px;
width: 300px;
background-color: #DFFCC2;
}
</style>
</head>
<body >
<div id="main">
<div id="left1">aaaaaaaaaaaaaaaaaaaa</div>
<div id="right1">bbb</div>
<div id="right2">cccccccccccccccccccccc</div>
<div id="right3">ddd</div>
</div>
</body>
</html>
DEMO
The DOM is not available when you are trying to access div with id left1.
So your first line var left1 = document.getElementById("left1"); will give error.
Instead Wrap your current code within window.onload
<script>
window.onload = function() {
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
function onScroll(e) {
console.log("calling scroll")
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
}
</script>
Else place your javascript just above the </body> tag
Yes, you can use onload to call a function after the page is loaded like so:
<script type="text/javascript">
function onLoad(){
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
}
function onScroll(e) {
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
</script>
and replace
<body>
with:
<body onload="onload()">
Note that you can still leave the script in the header of your page (between <head> and </head>).
You can use window.addEventListener() if you don't like <body onload="onload">, but IE won't support this. See "Hook a javascript event to page load" for details.
You have to load your script after the DOM is created. The time you are trying to parse var left1 =document.getElementById("left1"); DOM hasn't created yet so var left1 is null
TRY:
<!DOCTYPE html>
<html>
<head>
<style>
//YOUR CSS
</style>
</head>
<body >
<div id="main">
<div id="left1">aaaaaaaaaaaaaaaaaaaa</div>
<div id="right1">bbb</div>
<div id="right2">cccccccccccccccccccccc</div>
<div id="right3">ddd</div>
</div>
<script>
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
</script language="JavaScript">
</body>
</html>
EDIT:
By changing position you have to rearrange your item.
Try:
function onScroll(e) {
if (window.scrollY >= origOffsetY) {
left1.style.position = "fixed";
left1.style.left = "66px"
} else {
left1.style.position = "absolute";
left1.style.left = "0px";
}
}
DEMO
I have the following code:
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script>
$(window).on("scroll",function(e){
var sidepos = parseFloat($('#footer').offset().top - $('#side').outerHeight());
if($(window).scrollTop() > 100 && $('#side').offset().top < sidepos) {
$('#side').css('position','fixed');
$('#side').css('top','0');
}
else if($(window).scrollTop() > 100 && $('#side').offset().top >= sidepos) {
$('#side').css('position','absolute');
$('#side').css('top','' + sidepos + 'px');
}
else if($(window).scrollTop() < 100) {
$('#side').css('position','');
$('#side').css('top','');
}
});
</script>
</head>
<body>
<div id="header"></div>
<div id="body">
<div id="side"></div>
</div>
<div id="footer"></div>
</body>
</html>
I want to keep the #side fixed while scrolling till before the #footer so that it doesn't overlap with it.
Now there are 2 problems:
If you scroll down quickly like pressing 'end' button on keyboard, the function will not execute and the side overlaps with the #footer ignoring the if condition.
After switching to position:absolute can't figure out how to fix again when scrolling up and the #side becomes permanently sticking with the #footer even if you scroll up again.
I created a fiddle for you to test: http://jsfiddle.net/JuD5h/
Here is your updated fiddle: http://jsfiddle.net/JuD5h/4/.
I made some changes to CSS:
#body {
height: 3000px;
position: relative;
}
#side {
width: 100px;
height: 350px;
float: left;
border: 1px solid #000000;
position: absolute;
top: 0;
}
And here is the updated Javascript:
$(function(){ // document ready
var maxAbsoluteTop = $('#body').outerHeight() - $('#side').outerHeight();
var minAbsoluteTop = 0;
$(window).scroll(function(){
var windowTop = $(window).scrollTop();
var actualTop = windowTop - 100;
if ( actualTop <= maxAbsoluteTop && actualTop >= minAbsoluteTop) {
$('#side').css({ top: windowTop - 100 });
} else if (actualTop > maxAbsoluteTop){
$('#side').css({ top: maxAbsoluteTop });
} else {
$('#side').css({ top: minAbsoluteTop });
}
});
});
Use of position: absolute has made the animation flickery but I hope that is something you can fix using a small delay.
I created a graph using html, now I want to give it a nice effect when it initially loads. I want the bars of the graph to fly in from the left. The code below does that, only problem is each bar ends up with 70% width (obviously since I set that in the jQuery code). Instead I need that number to be unique to the width set within the bars (span tags). I assume the answer would be something like:
$(this).attr('width')...
but I can't get it to work, please help.
The Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style type="text/css">
div.graph { display: none; border: 1px solid red; height: 200px; width: 400px; margin: 0 auto; }
div.graph span { display: none; display: block; background: red; height: 20px; margin-bottom: 10px; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('div.graph').fadeIn('slow');
$('div.graph > span').animate({
width: "70%"
}, 1500 );
});
</script>
<div class="graph">
<span style='width:10%'></span>
<span style='width:40%'></span>
<span style='width:25%'></span>
<span style='width:15%'></span>
<span style='width:10%'></span>
</div><!-- graph -->
edit
After reading your code, if you don't care for non-JS support [there are many casex when you don't], you can use .data() method [very elegant, too :)]
HTML:
<span data-width="10%">Hello</span>
JS:
$('div.graph > span').each(function(){
$(this).animate({
width: $(this).data('width')
}, 1500 );
});
updated example
http://jsfiddle.net/vGUM7/2/
code
.animate({
'width': $(element).width()
},500);
example
http://jsfiddle.net/vGUM7/1/
[updated with %]
Try this on for size:
$('div.graph > span').each(function(){
var w=$(this).width();
$(this).width(0);
$(this).animate({
width: w
}, 1500 );
});
you could do something like:
$(document).ready(function() {
$('div.graph > span').each(function() {
var $this = $(this);
var w = $this.width(); // Grab what it should be
$this.width(0); // Reset so it does the animation
$this.animate({
width: w
}, 1500 );
});
$('div.graph').fadeIn('slow');
});
It reads what you want the bar to be, then sets it back to 0. setting up the animation to go. After its all set, the fade in starts
Try this...
$('div.graph').fadeIn('slow');
var bars = $('div.graph > span');
for(var i=0; i<bars.length; i++){
var w = $(bars[i]).width();
$(bars[i]).width(0);
$(bars[i]).animate({
width: w
}, 1500);
}
$(this).width() should work, or else $(this).css('width');
however .css('width') will return the value that the css has, so could be '10%' for example or 'auto'