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.
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?
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 RelatedI 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 RelatedInternet 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]....
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?
Do anyone have idea about moving the blocks in left or right, or top/bottom like yahoo,
View 3 Replies View Relatedi 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 can't get my lightbox script to work. Also how do you set up absolute bottom for the image on my "artwork" page?
View 1 Replies View RelatedI'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 RelatedI 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.
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 RelatedFor 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...
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 RelatedI am experiencing some crazy stuff, at least crazy to me Both the 'if' and 'else' blocks (according to firebug) are being executed in the following anonymous function:
[Code]...
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 RelatedI've got a bunch of <div> blocks, with a fixed width and height, that are all left floated.I would like a user to be able to click a "remove" link and have it delete a box, and all the boxes to the right "slide in" to fill the void created.I have it working well enough with a "snap" transition. I made that term up because I'm not sure how else to describe it--by "snap" transition I mean that the boxes to the right "snap" into position--there's no "sliding" or easing as they move, it's just moment their in their old positions, and the next moment, everything has been rearranged and they're in their new positions. how to adequately describe it in text, so here's a video showing what I mean: [URL]
View 2 Replies View RelatedI'd like to process several blocks of parallel actions, but in a sequential manner.
As an example:
Thus, I want to process blocks, from which I don't know how long they will take and afterwards have a couple of actions, before beginning with another block. I already tried it through using .queue, .ready() etc, but that leads to very ugly or unusable code..
I'm trying to understand how jQuery works, so I wanted to create something in order to learn a little bit ;-) here's the case:
I want to create a box with a text in german. Above the text, there are buttons in order to change the language. So, by clicking on "French", the german text disappears and is replaced by the french one. So, I created the buttons and the DIV-Blocks.
The question is, which function I should use with jQuery in order to achieve my goal (?) show / hide ? replace? First, I should show only one DIV, and hide all these others, no?
so this may be a simple question. Anyway: This Script forces a div to be "clickable" what works fine.
$(document).ready(function(){
$(".pane-list li").click(function(){
window.location=$(this).find("a").attr("href");return false;
[code]....
I have an error and I don't know how to solve it. Well I load a page into a div called 'entry_container'for my WP theme and I use this function:
[Code]...
I don't know if it's appropriate to discuss a JS library here, but I'm wanting to use jQuery to toggle the display of content based on a selected radio button. Here's an example HTML
Code:
<label><input type="radio" name="toggler" value="block01" />Show block 1</label>
<label><input type="radio" name="toggler" value="block02" />Show block 2</label>
<label><input type="radio" name="toggler" value="block03" />Show block 3</label>
<div id="block01>This is block 1</div>
<div id="block02>This is block 2</div>
<div id="block03>This is block 3</div>
Obviously the idea is that only one block is displayed at a time. I'm happy to get the effect anyway possible, but I do want to use jQuery because I believe it will be easier in the long run.
What I don't know how to do is to use the value of a selected radio option to show a block with the same ID as the value. I'm also not sure if I'm correctly select a name when I use $("[name='toggler']").
EDIT: Actually, I don't seem to be able to select the radio buttons using any other method than $("input"). Even if I give each input the same class I can't select it using $(".toggler").
[div id="WhateverHolder"]
[div class="item"][/div]
[div class="item"][/div]
[div class="item"][/div]
[code]....
I have looked for a plugin that can do this but to no avail what is the easiest way to do this in jQuery
I hired a programmer to develop a drag and drop system for my blog. The user should be able to browse one of my blog entries and click, drag and drop an image from my entry to a fixed bottom bar on that page.The problem we are facing is that when dragging an image, it wont place it on the bottom bar until the whole page is scrolled down to the bottom of the page. This is a problem because some of the pages can be very lengthy
View 2 Replies View RelatedI'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.
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