I place items at absolute locations on my LONG window.
When I scroll the window My Absolute is only relative to the Viewing
Area and tends to move up as i scroll my window.
Is this the normal behaviour ?
I need to have my item fixed to the bottom right hand corner no matter
what is happening to the window, including scrolling.
[URL]
<style>
div#back{
width:1000px;
height:1000px;
margin-left: auto;
margin-right: auto;
background-color:#096;
}div#topmenu{
width:400px;
height:35px;
position:relative;
top:5px;
left:595px;
background-color:#9F0;
}div#logopart{
width:950px;
height:70px;
position:relative;
top:0px;
left:50px;
background-color:#0FF;
}div#leftmenu{
width:100px;
height:400px;
position:relative;
top:0px;
left:0px;
background-color:#999;
}div#cont{
width:900px;
height:500px;
position:relative;
top:0px;
left:0px;
background-color:#FF6;
}</style>...
<div id=back>
<div id="topmenu">topmenu</div>
<div id="logopart">logopart</div>
<div style='display:inline;'>
<div id="leftmenu">leftmenu</div>
<div id="cont">cont</div>
</div></div>
How do I put "cont" div on the right of "leftmenu" without using "absolute"?? The screenshot was little bit cropped out and there is no problem on width.
I am trying to create a menu system.
The mainmenu is a table
<table><tr><td>menu1</td><td>menu2</td></tr></table>
No I try insert the submenu so that it becomes relative to the main menu
item. For menu1 the relevant code then becomes:
<td style="position:relative;">menu1<div style="position:absolute; top:20;
left:0;">
<a href=x.htm>option1</a><br>
<a href=y.htm>option2</a>
</div></td>
This works fine in IE: the div is positioned relative to the td of menu1.
However, in Mozilla it doesn't work. The div becomes relative to the top of
the page.
What am I doing wrong?
The following works in IE, but not in firefox:
document.getElementById('mydiv').style.left = event.clientX + document.body.scrollLeft;
document.getElementById('mydiv').style.top = event.clientY + document.body.scrollTop;
Any ideas why?
Is it possible to create popup menus without using absolute positioning
that take up no space in the flow of the document and appear with an
onMouseOver()?
i wonder if there's a way to find an absolute position of a div-layer from the bottom of the page with some jquery-code.
i need the bottom-value of this container, because my elements are positioned from the bottom of the page.
I am working on a puzzle that produces a container div.Within that div are produced a grid of 9.16. or 25 tiles.The tiles are positioned absolutely so I can be sure of their relative placement. The container div width and height is calculated according to a preset tile width and height (square actually). So the width of the container should adjust to either 3,4 or 5 tile widths and heights.The trouble is that the offset position of the top left tile is different relative to the container for each different set of tiles (even though it is supposed to be the same position relative to the container for each). I do this so I can apply dragging to the container div.The tiles will follow the container when it is moved and the game will not loose its place when tiles swap locations.(one tile is elected as blank, and tiles, one to left, right, top
or bottm, with game content, will swap location with blank when clicked)
I'm just figuring out how to use absolute inside a relative element to shift an image without changing the flow of the rest of the html. It's working for Firefox 4, but not IE 9.
In firefox the div element doesn't cause a hole in the flow. The div and the image inside is simply moved over to where they should be. But in IE, the image is sitting there as part of the flow bumping down the next things (the text and span tags) and the image isn't moving over to the right at all.
I've tried wrapping the div in an another div but that made no difference. Am I crazy to think this is supposed to work? I'm inserting the div and image tags dynamically in the client in javacript.
[Code]...
I'm trying to get the height of an element that contains content which is absolutely positioned. As far as I can tell, because the absolute positioned content is taken out of the page flow, you cannot retrieve the 'visible' height (ie height as seen onscreen) of the element with properties like clientHeight / offsetHeight.
Is there any way to access the visible height of an element like this?
Because of the nature of my page, I would like to animate a div from a fixed postion when someone first visits the site to an absolutely position location using after clicking a menu item using .animate and the easing effects. This part seems to work fine, however, when I click on the "home" button again, the div will not move back to the original fixed position. The div just sticks to the top of the page. My assumption is that the .animate scriptdoesn't' know how to interpret/find the fixed position location. Is there a way to make this work?
[Code]...
How come when I make a button that's "absolute" position, My dialog overflows and I get the vertical scroll bar if I move the button out of place? I thought it would re size the height accordingly but it doesn't.
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#ui-information-dialog").dialog({
[code]....
jQuery - Scrolling browser Window. I have two demos of scrolling page content with jQuery.
This one - [url] is scrolling the contents inside a container and it works as I wanted on Mac/PC
Code:
I need the same effect as above but I need to scroll the whole browser window.
I have a demo here - [url]
Code:
Problem here is on the Mac the transition are jumpy and it seems to flash the first yellow div before sliding up or down. Testing on a PC it will slide down but won't slide up. How can I get the whole browser window to slide up and down with a smooth transition.
I am hoping that this is a proper forum to post to. I got an Ajax script from Dynamic Drive called "Dynamic Ajax Content" that loads external pages into a DIV in the Parent page. The effect is much like that of an iFrame. I am loading videos into the target DIV. All of that works fine, but visibility on the parent page seems to be a problem. By necessity, I must(?) place the div close to the bottom of the page. However, when I click on a link that loads the video, I would like to have the parent page "jump" to the DIV with the video.
It is probably easier to visualize this than for me to try to explain it: [URL] For instance, if you click on "The Natural", the video indeed loads, but it is not 100% viewable since it is at the bottom of the page. I tried to emulate an <a name=#jump"> <a href="#jump"> scenario, but since javascript is controlling the generation of the Ajax window, it was to no avail (I am embarrassed to say my javascript skills have eroded a bit!).
[Code]...
I have a Modeless window that I need help positioning in the top left corner instead of the center.
[Code]....
I have made a remote control window which opens from its parent. On loading, the remote is positioned relative to the screen using window.moveTo(x,y).
What I would like to happen is the remote control to open docked in a
specific location relative to the parent (opener).
Fortunately, I need this to work ONLY in IE, so at least I don't have to
worry about cross-browser issues.
Does anyone know how to open a window realtive to an anchor in the parent
wiondow?
I'm working on a website where we're using the jquery.linkselect plugin, and we're running into a situation where we have one of the dropdown linkselect menus happening near the very bottom of the users' window.
Imagine that we have a list of articles with abstracts, authors, etc. running down the left hand side in a div which is set to show a scrollbar if the results list gets long, and each article has a linkselect dropdown menu.
Unexpectedly, if you've scrolled to the bottom of the scrolling div and you're on the last item in the list, linkselect is allowing the menu to drop down extending past the bottom of the scrolling div and outside the boundary of the browser window. This is problematic, as it makes the menu items inaccessible.
We're looking for a way to have it automatically detect the bottom of the screen and reposition the menu accordingly (similarly to the way it does it to make sure it doesn't get positioned off the right hand side of the screen). I might be able to hack it, but was hoping maybe the linkselect team might be able to put something in more quickly and efficiently than I can. :)
Alternately, a way to specify that a menu drops up rather than drops down would also be a great solution to our situation (I didn't see that in the options.
well i've got this script:
Code:
<script language=JavaScript>
function scrollit(from, dist){
y = from;
scrollEnd = y + dist;
for (I=1; I<=scrollEnd; I++){
parent.scroll(1,I)
}
}
</script>
and i call it like this:
<a href="#" onMouseOver="scrollit(0,500);">scroll</a>
but i was trying to make the window scroll from a position since my script will only scroll down from the top, how do i do this?
This is a clarification of a previous message, which was not expressed
very well. I have a set of checkboxes near the bottom of the page and
a function that checks or unchecks all of them. But when the function
runs, the window scrolls to the top of the page.
How can I set my checkboxes but leave the window's scroll position
exactly where it is? Or at least have it scroll to the bottom (where
the checkboxes are).
I've tried using window.scrollTo(), but the window always scrolls to
the top no matter what. It's the same in Navigator and IE.
Here's my code:
function checkAll(whichForm, startIndex, endIndex)
{
for (var j = startIndex; j <= endIndex; j++)
{
document.forms[whichForm].elements[j].checked = true;
}
window.scrollTo(0, 1000);
}
I was wondering if there is a way to prevent the browser window from scrolling when you are scrolling inside an overflow auto div and reach the end of the div's scroll? Right now I have a few people complaining about a div that loads scrolling info on the screen and when they scroll down using the mouse wheel and get to the bottom of the div then the rolling of the mouse wheel starts scrolling the browser window. It would be nice if the browser could see that your cursor is over the div and even though it reaches the end, not scroll the window unless you move the cursor outside of the div that you are currently scrolling.
View 1 Replies View RelatedThe issue seems to be that when the buffer becomes extremely large instead of scrolling to the bottom of the window, there is a gap at the bottom instead.
Here is the test code I've been using, and it allows me to get to around 18000 pixels before the gap begins...
window.scrollTo(0, Math.max(document.documentElement.offsetHeight,
document.body.scrollHeight
) +
(window.innerHeight ||
document.body.clientHeight
) + 100);
window.scrollBy(0, Math.max(document.documentElement.offsetHeight,
document.body.scrollHeight
) +
(window.innerHeight ||
document.body.clientHeight
) + 100);
The issue is really driving me crazy, hopefully someone will be able to help me out.
Please do not suggest putting a link at the bottom of the content (IE: <a name="bottom">asdf</a>, url#name) for this is not an option.
The window is supposed to automatically scroll and move but it isn't working. (It was taken from a discontinued book called javascript in 24hrs) The javascript:
var pos=100;
function Scroll(){
if (!document.getElementById ) return;
obj=document.getElementById("thetext");
pos -=1;
if(pos < 0-obj.offsetHeight + 130) return;
obj.style.top=pos;
[Code]...
jQuery - Scrolling browser Window. I have two demos of scrolling page content with jQuery.
This one - [url] is scrolling the contents inside a container and it works as I wanted on Mac/PC
Code:
I need the same effect as above but I need to scroll the whole browser window.
I have a demo here - [url]
Code:
Problem here is on the Mac the transition are jumpy and it seems to flash the first yellow div before sliding up or down. Testing on a PC it will slide down but won't slide up. How can I get the whole browser window to slide up and down with a smooth transition.
I have been working on this code in the last few hours with my boss and we are completely stumped. We are currently writing our companies new site, and we have come across a problem. We built a mini samples user control that shows on a few of our pages, that works with no problem. In that user control, we implemented a Rad Window Control by Telerik.
We have the auto populate thumbnail images and full size images from a database during the ItemDataBound event on our Repeater, this too works fine with no problem. When we first implemented the window, we added anchors to the thumbnails in the code behind so when a user clicks on a thumbnail from the parent page the thumbnail shows up in the window scroll bar at the bottom when the window opens. This worked fine except when you click on a thumbnail with the window closed the parent page would scroll half way down and then the window would open. The scroll function worked fine and had no problems with it, but we wanted to fix the parent page issue.
We decided to do accomplish the same task but with javascript. Since it only meant a few changes we thought it would be no problem, but we are stumped like never before. The javascript code we are using works fine, but when we try to implement it in the window, it doesn't do squat. We suspected that the javascript was being called before the page was loaded but even when using onload in the body tag it still doesn't do anything. We then added a literal and populated the text in the PreRender event but still no avail.
I made a test page that had the exact same javascript functions as the samples page but with hard coded content rather than data binded. This page works exactly as it should, but the samples page doesn't. I have already looked into the Telerik support forums but can't find anything near related to our issue so I thought I would stop by here as a last resort. I hope that we are just missing something and is an easy fix, rather than having to rewrite everything but if it's needed then it has to be done.
So here are my questions for you :Can you look at our code and see if we are missing something. Maybe a fresh pair of eyes will do the trick.Would going back to the anchor system be better and just try to fix the parent page scrolling issue?
I have posted our samples page and the test page that I made.
view-samples.aspx
So I have a webpage listing a bunch of book titles. I have coded a popup message with the book summary to appear when the title is clicked on. There is one problem. After the viewer reads a summary he or she clicks ok on the popup message, and then the window automatically scrolls back to the top. This will be a nuisance; if the user is half way or close to the end of the list, he or she would have to keep scrolling back down to his or her spot after reading the book summary.
View 2 Replies View RelatedHere is an example of a scrolling window and the codes about it:
[Code]...
I have some questions about it:
a)Can i move the text from top to the buttom?(which is the opposite from what it moves now).
b)How can i make the text to move nonstop?In other words when it stops to start again.
c)I have used the obj.style.left=pos in order to make the text move from left to right but i want it to move all horizontally in one line only.How could i do that?
for opening a PopUp Window I use the Popup.js from Adrian "yEnS" Mato Gondelle. Adrian has written a function to center the popup by calculating the window height/with and popup width/height as well ans putting the coord in the middle of these coordinates. Like this:
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
[Code].....
My Problem with this is, that it only centers the Popup correctly if you haven't scrolled down the page. What I need is a jQuery way to get the height of the actually scolled position to calculate the correct value for the top css parameter as well, to get my PopUp every time in the correct top/left position without having this scrolling bug. Is there a way in jQuery how I can get the scrolled down coordinates? I need the height of the scrolled position and by adding the half height of the screen resolution I have the css top value which I need here.
