Control Absolute Positioned DIV Onscroll?

Aug 12, 2009

I have an absolute positioned navigation on my page that makes you jumps up or down the page to view some pictures placed in another absolute positioned DIV with scroll bar. The navigation is simply made by numbers: 1 2 3 4 5 6. When you rollover 2 is underlined and onclick the page jumps down to the second picture and the number 2 stays underlined, and so on for 3 4 5 6. The style changes this way

HTML
<span id='first' class="selected"><a href="#1" onclick="first()">1 </a></span>
<span id='secondo' class="normal"> <a href="#2" onclick="second()">2 </a></span>
and so on for 3 4 5 6

[Code]....

What I would like to do is to make the style change automatically also when the user scroll the page instead of clicking. I thought I could control the y coordinate with window.onscroll but because what scrolls is the DIV and not the page the window.onscroll doesn't work. Is there a way to control the same way the scroll of a DIV? Or should I build the site differently?

View 4 Replies


ADVERTISEMENT

JQuery :: Center An Object That Is Positioned Via 'absolute'?

Jun 15, 2011

I have a routine that centers an object. I pass it a string such as "#myid" and it sets the 'left' property based on the width of the object and of the monitor.

Now in theory I could just use <center> tags, but I'm trying to center an object that is positioned using the 'absolute' attribute. It seems that <center> tags have no effect on 'absolute' positioned objects.

(I need the 'absolute' because the screensscroll underneath it). Anyway, I've been told that this is bad practice, and positioning should always be done via css, and never jquery/javascript. But I don't see any other way to do this. Is there one?

View 2 Replies View Related

JQuery :: Top Or Bottom For Absolute Positioned Blocks?

Feb 4, 2010

How to determine how a absoluted positioned element was positioned?

For example, a div positioned with bottom: 10px, will have a "top" read in Firefox. But if using "top" to move the box, instead of moving it, it will grow or shrink.

View 4 Replies View Related

JQuery :: Click Events On Absolute Positioned Elements?

Jun 2, 2010

I have an div element (lets call it div number 1) that I have attached a click event to using jquery.bind() method. That works fine. I then have another div element (div number 2) that is absolute positioned on top of div 1. Now div number 2 also has a click event binded to it, which works... the problem is when I click div 2 and the click event triggers, so does the click event from div 1... I don't want the click event from div 1 to fire.

View 3 Replies View Related

JQuery :: Get Fixed/absolute Positioned DOM Elements In Whole Document?

Dec 15, 2011

I have some fixed or absolute positioned DOM elements in the whole document for some purpose, How can I traverse the whole document to get the above mentioned elements, any jquery method to be there please let me know,

View 3 Replies View Related

JQuery :: Internet Explorer Can't Bind Events To Absolute Positioned Elements?

May 10, 2010

Internet Explorer can't bind events to absolute positioned elements ? can't bind a "click" to an element that is overlapping another.Have tried loads of different ways, here are 5 of them:

version 1:
$(".classHolder").click(function(){ alert( $(this).html() ); });
version 2:

[code]....

View 3 Replies View Related

Moving Div With Onscroll?

Jan 19, 2011

I am getting to learn JavaScript, and as for my first personal project, I would like to have a page with some text on it and when the user scrolls, a div containing a picture will move with the user when they scroll. I have found a solution, however, I do not like it.

<html>
<head runat="server">
<title>Test</title>

[code]...

As you can see, it works by getting the scroll position and adding 250, to a height property-element above the image div. I have tried to use document.getElementById("image").style.top = scrollevel + 'px', but it does not work.

View 2 Replies View Related

Firefox, Textarea And Onscroll

Jul 6, 2006

Is there any way to get Mozilla to fire an event when a textarea
scrolls? IE seems not to have a problem with it, but Moz just won't
cooperate.

I tried the W3 event model: myTextArea.addEventListener("scroll", fn,
true); - also tried "false" for the phase parameter (apparently this
event neither bubbles nor captures).

I also tried the "singleton" event model: myTextArea.onscroll = fn;

View 1 Replies View Related

Get Permission Denied To Get Property Onscroll?

Aug 10, 2011

I have this

window.top.onscroll = function(){moveScroll();
}

It works perfect in ie, but in firefox I get permission denied to get property onscroll.why? and whats the solution? on top of my page i have done this though var url = document.URL;

url = url.substring(7,url.length);
url = url.substring(0,url.indexOf(":"));
if(isMoz)document.domain = url;

View 2 Replies View Related

Textarea Onscroll To Bottom Select Option?

Sep 18, 2011

I am trying to create a little code that when a user reads the rules they need to scroll right to the bottom of the textarea before the Select Option enables.heres my form:

HTML Code:
<form method="post" name="form1" id="form1" action="http://www.maddogfitness.co.uk/cgi-bin/FormMail.pl">

[code]...

View 4 Replies View Related

Detecting If Onscroll Events Working / Supported In Firefox

Jul 23, 2005

Is there a way to detect if an textarea onscroll event is working in
Firefox (or Mozilla). I know that there is an onscroll event bubbling
bug with current vesions of these browsers so I want to detect this
problem with a test like "if (textarea.onscroll == 'undefined' ||
!textarea.onscroll) {}."

View 1 Replies View Related

Need Next-previous Control To Control Contents Within An IFrame?

Oct 10, 2011

Situation:I have a very long page divided into many sections vertical-wise marked by bookmarks, say pageX.html#s1 to s10. I need to show the section inside an iframe (iFrame1) on the mainpage (mainpage.html). I am thinking of having 4 buttons, sitting on the mainpage, to help navigate between these sections on pageX, namely NEXT, PREVIOUS, TOP, END.condition of the frame, fixed width/height, no scroll, no border.Very new to javascript but need this code to make a page work for BIZ.

View 1 Replies View Related

Relative Positioned Scrolling Div

May 23, 2005

I've wondering if anyone knows of a script where I can scroll a div down the page as the user scrolls down the page. You know, like those annoying ads do sometimes

I've googled for some, but the ones I've tried only work to varying degrees when I want the div positioned relatively. The reason I want it relatively positioned is that my site is centred, and fixed-width.

Basically, I need it to scroll up and down in a 'side bar' area, and the main problem I seem to be having: not scroll below my footer area.

View 6 Replies View Related

JQuery :: Looping Set Of Divs That Are Positioned On Top Of Each Other

Sep 15, 2011

I'm having an issue with looping a set of divs that are positioned on top of each other. When a link is clicked, the second div should fade in as the top div fades out, which coincides with another div changing background colour.As you'll notice, when the link is clicked for a third time, it loops back to the beginning by using the rel tag to keep track of what div is showing. The problem is that when it loops to the beginning the animation is not in sync with the second div changing colour.The code for all three is exactly the same and it doesn't matter how many coloured divs you have, it's always the last one fading out that causes the issue. The '#second' colour change fires after the box changes, not synchronised like the previous clicks.This is a basic example that I'm using on a site elsewhere so the concept of the second div fading in and then the first fading out is important - I can't switch so the first fades out then the second fades in.

View 1 Replies View Related

JQuery :: Using Scale On An Absolutely Positioned Div?

Aug 20, 2010

I have a Div element (id=Div1) that is absolutely positioned on the page. Inside it I have another Div (id=Div2) that is absolutely sized so that it fills the whole of Dvi1.Looking at the UI/Effects/Scale page in the API docs I see the example code:

$("div").click(function () {
$(this).hide("scale", {}, 1000);
});

Translating this I am trying to make Div2 shrink until it vanishes, as shown in the example, so I am using $("#Div2") to get this done, however, it does not work.Is this because the Div (either of them!) is absolutely positioned? Ideally Id like Div2 to shrink away to nothing on the click of a button, but first steps first.

View 1 Replies View Related

JQuery :: Absolutely-positioned Div Disappearing While IE7 Is Animating ?

Apr 20, 2010

I am having a problem with an absolutely-positioned div disappearing while IE7 is animating. The animation has a z-index lower than the div containing Questions, Customizable, and Library, but the div disappears during animation. Is there anything I can do about this? I've tried changing the positioning, z-index, and moving the div to occur before the animation, but nothing seems to work. Everything looks fine in FF, IE8, and Safari.

View 7 Replies View Related

JQuery :: Jdmenu Second Level Positioned Centered?

May 11, 2011

For one project i am suing jdMenu to power up the drop down menu system. I am interested for the second level of the menu to position the <ul> at 50% on the parent <li>, like on[URL]...

Using css this is not possible since the ul has the size in em and the parent li have the size in %. So have to use a different method...

View 1 Replies View Related

JQuery :: Show/hide Positioned To Its Trigger?

Jun 24, 2009

i am trying to learn how to position a show/hide module to the "a" that triggers it, instead of a literal positioning through css this is a sample of the module i am trying to position.[URL]..would like to set the object relative to the cell where the trigger exists. can anyone point me in the direction of tutorials or samples of this behavior?

View 1 Replies View Related

Lazy Load Images Which Are Absolutely Positioned On Top Of Each Other?

Aug 4, 2010

Anyone know of a method to lazy load images which are absolutely positioned on top of each other? I have seen the lazy load plugins out there, but none of them seem to work with this layout. I am using jQuery cycle to animate a slideshow. Cycle takes the slides and absolutely positions them on top of one another. Any way to lazy load these? I'm sure I could do it custom but pulling all of the slides not currently active and load them later, but I am looking for an easier way.

View 5 Replies View Related

JQuery :: Order Absolutely Positioned <div> Tags Without Overlap?

Aug 26, 2009

I have about 40 divs, all positioned absolutely with a certain width and a left attribute.I am looking for a way to make sure all these divs don't overlap, meaning that if one div has its starting point (left) within another div(left+width), the first div should be moved down as long as it takes (height of 2nd div).Having barely any experience with jQuery at all, I really hope I can find some answers here.

View 2 Replies View Related

Page Centering Script For Absolutely Positioned DIVs?

Mar 4, 2010

I've designed a web page that uses several DIVs that use absolute positioning so they can layer on top of each other with transparent shadows. You can view the design here:http:[url]...The client wanted the whole design to center in the window horizontally, and since I can't use margin: 0 auto; to achieve this, I'm using a script that detects the window size using the onLoad operator in the body tag. This is the script:

Code:
<!--
window.onresize= alertSize;
function alertSize() {[code].....

It works, but I don't like that the page snaps back to the left every time a new page loads. Is there a way for the script to detect the window size from the previous page so that the design won't jump if the window hasn't been resized?

View 2 Replies View Related

Image Gallery That Work Where Some Photos Are Positioned Horizontally And Some Are Vertical

Oct 19, 2011

I am looking for a image gallery that will work where some photos are positioned horizontally and some are vertical. I hope it is possible. The photos are for an artist that I am working with. I hope someone will have an answer. It doesn't have to be fancy. Even a simple magnifyer would be fine. I guessed that javascript might be the most appropriate form.

View 3 Replies View Related

Positioned Layers/Radio Buttons On Order Form Won't Work

Dec 1, 2011

I can't get the form validation and the postioned layers/radio buttons working at the same time is either 1 of the other. I have provided the code html/css/javascript code below [URL]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

[code]...

View 5 Replies View Related

Four Flyer Images Aren't Being Positioned Correctly Upon Uploading Of Page

Feb 1, 2010

I'm not sure is this is a CSS issue or one that can be solved with JavaScript, but I'm having a problem with this page URL...where the text on the four flyer images aren't being positioned correctly upon the uploading of the page. However, when you refresh again, it positions correctly. At first I thought this was a caching issue on my computer, but it did the same thing on someone else's.I'm a perfectionist (as you all are as well ) and I don't like things moving around or being out of position.If it doesn't happen on your computer when you first upload it, try it again because it's an on and off thing.

View 1 Replies View Related

Get The Absolute Position Of A DIV?

Jun 28, 2009

Before you immediately give me an answer, let me describe fully what I'm trying to do, as it's not as simple as the title suggests.

I need to get the absolute position of a DIV (top and left properties) relative to the viewport/screen.

I've tried using .offsetTop and .offsetLeft, but these return the top and left properties relative to the DIV's immediate parent element, not the viewport (unless of course the DIV is top-level and not contained in any other DIVs).

So, is there any way to retrieve the absolute position of a DIV relative to the viewport, even if that DIV is nested in other DIVs?

View 1 Replies View Related

DIV Positioning Without Using Absolute?

Oct 25, 2011

[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.

View 4 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved