...

View Full Version : Resolved div positioning help please!!



LJackson
03-02-2009, 07:06 PM
Hi All,

i have a hidden div which i want to be shifted to the left

here (http://www.kernow-connect.com/teststores.php?Cat=ent&sID=Game)

click on rate store here link underneeth the store score on the right to see the div.

here is the div css

<div id="subcontent" style="position:absolute; visibility: hidden; border: 7px solid black; background-color: white; width: 250px; padding: 8px;">

if anyone can move it to the left so that the top right hand corner is underneath the word here.

thanks
Luke

Excavator
03-02-2009, 11:34 PM
Hello LJackson,
Was in the middle of it and the box went away. It's a link now? Do you still need this?


<div style="border: 7px solid black; padding: 8px; position: absolute; visibility: visible; background-color: white; width: 250px; top: 277px; left: 1000px; clip: rect(0pt, auto, auto, 0pt);" id="subcontent">

LJackson
03-02-2009, 11:43 PM
hi sorry mate been trying to sort it but failing, tried changing the position state adding a right and top position but it doesnt do a lot :(

it should be as it was, too far over to the right if you can help i'd really appreciate it :)

if you click on the link where it says rate store here the box should appear :)

thanks
Luke

just checked the source code and im not sure where this came from

<div style="border: 7px solid black; padding: 8px; position: absolute; visibility: hidden; background-color: white; width: 250px; top: 277px; left: 1000px; clip: rect(0pt, auto, auto, 0pt);" id="subcontent">

in my php page its

<div id="subcontent" style="position:absolute; visibility: hidden; border: 7px solid black; background-color: white; width: 250px; height:300px; padding: 8px;">????

cheers

Fisher
03-03-2009, 12:15 AM
Using the firebug toolbar, it shows that <div id="subcontent"> has a style of left:984px. If you change that value, it will move it over. (For example, when I remove that value it moves it all the way to the left edge)

Edit: A value of 805px will put it where you want.

LJackson
03-03-2009, 12:20 AM
hi fisher

i wish it were that simple lol, but i dont see that in my php code :(

here is my php code for this section bit messy :(

print "<div class='storesLogo'>$img_source";
print "</div>";

print "<div class='storesDescription'>$description</div>";


print "<div class='storeRatings'>";
print "<div class='averagerating'>KC Rating<br /><b>$avg</b><p><font size='2'>";
print "<p><a href='http://www.kernow-connect.com' id='ratelink' rel='subcontent'>rate store here</a></font></p>";
print "</div>";//storeRatings closed
print "</div>";//averagerating closed
?>
<div id="subcontent" style="position:absolute; visibility: hidden; border: 7px solid black; background-color: white; width: 250px; height:300px; padding: 8px;">

<?php

print "<p><b>Please Rate $idReference</b></p>";

print "<div class='ratingcat_container'>";
print "<div class='ratingscat_head'>Value for money</div>";
print "<div class='ratingscat_head'>Ease of use</div>";
print "<div class='ratingscat_head'>Delivery time</div>";
print "<div class='ratingscat_head'>P&amp;P costs</div>";
print "</div>";

print "<div class='ratingscontainer'>";
print "<div class='storeRatings_Individual'>";print rating_bar($idReference.'valuetemp',5);print "</div>";
print "<div class='storeRatings_Individual'>";print rating_bar($idReference.'easeofusetemp',5);print "</div>";
print "<div class='storeRatings_Individual'>";print rating_bar($idReference.'deliverytemp',5);print "</div>";
print "<div class='storeRatings_Individual'>";print rating_bar($idReference.'delchargetemp',5); print "</div>";
print "</div>";


print "<div class='submitcontainer'><input type='submit' name='submit' id='submit' value='Submit'></div>";
print "<div class='ratingclose'>";
?>
<a href="javascript:dropdowncontent.hidediv('subcontent')">Close</a>
<?php print "</div></div>"; ?>

<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:

dropdowncontent.init("ratelink", "right-bottom", 600, "mouseover")
dropdowncontent.init("contentlink", "left-top", 300, "click")

</script>


but nowhere does it say style of left:984px ??????
where is it being hidden lol

here is the javascript that is associated with it

//Drop Down/ Overlapping Content: http://www.dynamicdrive.com
//**Updated: Dec 19th, 07': Added ability to dynamically populate a Drop Down content using an external file (Ajax feature)
//**Updated: Feb 29th, 08':
//1) Added ability to reveal drop down content via "click" of anchor link (instead of default "mouseover")
//2) Added ability to disable drop down content from auto hiding when mouse rolls out of it
//3) Added hidediv(id) public function to directly hide drop down div dynamically

//**Updated: Sept 11th, 08': Fixed bug whereby drop down content isn't revealed onClick of anchor in Safari/ Google Chrome

var dropdowncontent={
disableanchorlink: true, //when user clicks on anchor link, should link itself be disabled (always true if "revealbehavior" above set to "click")
hidedivmouseout: [false, 200], //Set hiding behavior within Drop Down DIV itself: [hide_div_onmouseover?, miliseconds_before_hiding]
ajaxloadingmsg: "Loading content. Please wait...", //HTML to show while ajax page is being feched, if applicable
ajaxbustcache: true, //Bust cache when fetching Ajax pages?

getposOffset:function(what, offsettype){
return (what.offsetParent)? what[offsettype]+this.getposOffset(what.offsetParent, offsettype) : what[offsettype]
},

isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
},

show:function(anchorobj, subobj, e){
if (!this.isContained(anchorobj, e) || (e && e.type=="click")){
var e=window.event || e
if (e.type=="click" && subobj.style.visibility=="visible"){
subobj.style.visibility="hidden"
return
}
var horizontaloffset=(subobj.dropposition[0]=="left")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 //calculate user added horizontal offset
var verticaloffset=(subobj.dropposition[1]=="top")? -subobj.offsetHeight : anchorobj.offsetHeight //calculate user added vertical offset
subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset + "px"
subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+verticaloffset+"px"
subobj.style.clip=(subobj.dropposition[1]=="top")? "rect(auto auto auto 0)" : "rect(0 auto 0 0)" //hide drop down box initially via clipping
subobj.style.visibility="visible"
subobj.startTime=new Date().getTime()
subobj.contentheight=parseInt(subobj.offsetHeight)
if (typeof window["hidetimer_"+subobj.id]!="undefined") //clear timer that hides drop down box?
clearTimeout(window["hidetimer_"+subobj.id])
this.slideengine(subobj, (subobj.dropposition[1]=="top")? "up" : "down")
}
},

curveincrement:function(percent){
return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input
},

slideengine:function(obj, direction){
var elapsed=new Date().getTime()-obj.startTime //get time animation has run
if (elapsed<obj.glidetime){ //if time run is less than specified length
var distancepercent=(direction=="down")? this.curveincrement(elapsed/obj.glidetime) : 1-this.curveincrement(elapsed/obj.glidetime)
var currentclip=(distancepercent*obj.contentheight)+"px"
obj.style.clip=(direction=="down")? "rect(0 auto "+currentclip+" 0)" : "rect("+currentclip+" auto auto 0)"
window["glidetimer_"+obj.id]=setTimeout(function(){dropdowncontent.slideengine(obj, direction)}, 10)
}
else{ //if animation finished
obj.style.clip="rect(0 auto auto 0)"
}
},

hide:function(activeobj, subobj, e){
if (!dropdowncontent.isContained(activeobj, e)){
window["hidetimer_"+subobj.id]=setTimeout(function(){
subobj.style.visibility="hidden"
subobj.style.left=subobj.style.top=0
clearTimeout(window["glidetimer_"+subobj.id])
}, dropdowncontent.hidedivmouseout[1])
}
},

hidediv:function(subobjid){
document.getElementById(subobjid).style.visibility="hidden"
},

ajaxconnect:function(pageurl, divId){
var page_request = false
var bustcacheparameter=""
if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE6 or below
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
document.getElementById(divId).innerHTML=this.ajaxloadingmsg //Display "fetching page message"
page_request.onreadystatechange=function(){dropdowncontent.loadpage(page_request, divId)}
if (this.ajaxbustcache) //if bust caching of external page
bustcacheparameter=(pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcacheparameter, true)
page_request.send(null)
},

loadpage:function(page_request, divId){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(divId).innerHTML=page_request.responseText
}
},

init:function(anchorid, pos, glidetime, revealbehavior){
var anchorobj=document.getElementById(anchorid)
var subobj=document.getElementById(anchorobj.getAttribute("rel"))
var subobjsource=anchorobj.getAttribute("rev")
if (subobjsource!=null && subobjsource!="")
this.ajaxconnect(subobjsource, anchorobj.getAttribute("rel"))
subobj.dropposition=pos.split("-")
subobj.glidetime=glidetime || 1000
subobj.style.left=subobj.style.top=0
if (typeof revealbehavior=="undefined" || revealbehavior=="onclick"){
anchorobj.onmouseover=function(e){dropdowncontent.show(this, subobj, e)}
anchorobj.onmouseout=function(e){dropdowncontent.hide(subobj, subobj, e)}
if (this.disableanchorlink) anchorobj.onclick=function(){return false}
}
else
anchorobj.onclick=function(e){dropdowncontent.show(this, subobj, e); return false}
}
}

cheers
Luke

Excavator
03-03-2009, 12:25 AM
Same problem.
When I looked at it earlier the left was set to 1184px; but I couldn't find it in the markup or CSS anywhere. Editing the inline style with FireBug moved it to the right place but left:1000px; was what it needed, not 805.

Fisher
03-03-2009, 12:26 AM
The only reference I can see to subcontent is a class in stores_stylesheet.css.

.subcontent{
position:absolute;
visibility: hidden;
border: 7px solid black;
background-color: white;
width: 250px;
padding: 8px;
left:400px;
top:100px;
}

Try changing the left value there to 221px;

LJackson
03-03-2009, 12:28 AM
ah yeah thats obsolite now was using that to try and add subcontent to my stylesheet instead of on the php page as above, but it screwed everything up so i reverted back and forgot to delete it

LJackson
03-03-2009, 12:29 AM
its very strange now sure where to go now :(

im thinking its got something to do with the javascript????

Fisher
03-03-2009, 12:30 AM
The value is different with browser size though. I just resized my window and opened up the box and the left attribute had a different number again.

It's puzzling why it says it's an ID of subcontent though, when your CSS refers to a class of subcontent.

LJackson
03-03-2009, 12:33 AM
ignore the css class its incorrect i forgot to delete it, its not being used at the mo just tried something with it but didnt work so i left it there for future use :)

Excavator
03-03-2009, 12:37 AM
Jeez, was that there before? I looked through all those CSS files a couple times and didn't see that.

Part of the trouble might be your #wrapper is not enclosing your entire site. Try this once real quick:

#wrapper{
margin: 0 auto;
width:960px;
background-color:#FFC773;
border: 5px solid #f00;
}You can see the border doesn't get very far.
Now clear the floats like this:

#wrapper{
margin: 0 auto;
width:960px;
background-color:#FFC773;
border: 5px solid #f00;
overflow: auto;
}

I'm still trying to find a div that can be relative to your absolute positioned .subcontent though...

LJackson
03-03-2009, 12:40 AM
ive solved it :)

it was the javascript, i played around with it and changed the following

var horizontaloffset=(subobj.dropposition[0]=="left")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 //calculate user added horizontal offset

to


var horizontaloffset=(subobj.dropposition[0]=="right")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 //calculate user added horizontal offset

so now when you click on it is should have shifted to the left???

Excavator
03-03-2009, 12:42 AM
Dammit. Now it's #subcontent and it's inline styles again.
I can't keep up.


You need to make the container that #subcontent is in position:relative; so #subcontent can position itself relative to that, instead of relative to the browser window like it is now.

Fisher
03-03-2009, 12:42 AM
I don't know much about javascript, but you should be able to edit this line and add something like "-179 to it"


subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset + "px"

try:

subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset -179 + "px"

Edit: oops, 2 minutes too late

way to go

LJackson
03-03-2009, 12:44 AM
Dammit. Now it's #subcontent and it's inline styles again.
I can't keep up.


sorry for messing it up :(

but im getting somewhere :)

Excavator
03-03-2009, 12:45 AM
This works, as of a few seconds ago...

Make #wrapper position: relative; like this -

#wrapper{
margin: 0 auto;
width:960px;
background-color:#FFC773;
position: relative;
}

Change the settings in red to move it -
<div style="border: 7px solid black; padding: 8px; position: absolute; visibility: visible; background-color: white; width: 250px;
top: 277px; left: 468px;
clip: rect(0pt, auto, auto, 0pt);" id="subcontent">

I did not mess with your js at all.

Excavator
03-03-2009, 12:47 AM
sorry for messing it up :(

but im getting somewhere :)

haha, no worries. At least some people are looking at it now. This topic sat here with no replies so long I started feeling guilty.

LJackson
03-03-2009, 12:59 AM
ok mate i have tried what you suggested and its not working :( the div is out to the right further, i tried changing the left style and it didnt move :(

just try it again at your end to see if its still working? and not the modifications i made to the javascript file

cheers

LJackson
03-03-2009, 01:01 AM
This topic sat here with no replies so long I started feeling guilty.

i know i was getting worried lol what i first thought was a simple problem i was expecting an answer within mins lol but the problem is much deeper than first thought :)

little blighter

cheers

Fisher
03-03-2009, 01:05 AM
I downloaded a copy of your site and when I made the 179px change in the javascript file it worked. Try it yourself.

LJackson
03-03-2009, 01:07 AM
im sorry for making this task much harder for you both by changing the php page all the time must really make your jobs harder. :(

how do you manager to recreate my page and run test on it to see what works im intreagued? is there a special program you use?

cheers

Fisher
03-03-2009, 01:09 AM
No, I just chose file save as web page in the browser. It's not perfect but it gets the job done.

This works no matter what the size of the browser:

subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset -179 + "px"

LJackson
03-03-2009, 01:10 AM
I downloaded a copy of your site and when I made the 179px change in the javascript file it worked. Try it yourself.

hi mate i did and it moved the container too far to the left so i altered it to get it where i want but im not sure if it was still relitave to the browser or subcontents container? answered above ^^^ (you must be a mind reader :) )

with your above code did you keep my change

var horizontaloffset=(subobj.dropposition[0]=="right")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 //calculate user added horizontal offset or leave it as left?

here is what i used to positionit as it is now

subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset +10 + "px"


cheers

Fisher
03-03-2009, 01:24 AM
No, I used your original file. No other changes.

You can just modify the horizontal and vertical offsets in the javascript file.

subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset -necessary fudge + "px"
subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+verticaloffset - necessary fudge +"px"

That should work. If not, I'm out of ideas. Try Excavator's solution with your original files.

LJackson
03-03-2009, 01:27 AM
if you resize you browser window with the div showing does it stay relitave to the page or does it stay in the same place?

cheers

Fisher
03-03-2009, 01:30 AM
See I think there's a bit of confusion here. It is applying fixed positioning to that div. If you resize the browser with the div open, it messes up as it stays in place while everything moves.

BUT, if you shut the div, resize the browser and open it up again, it is in the proper spot.

edit: This is what's being passed to the browser. Note that it is absolute positioning:

<div id="subcontent" style="border: 7px solid black; padding: 8px; position: absolute; visibility: visible; background-color: white; width: 250px; height: 300px; top: 277px; left: 984px; clip: rect(0pt, auto, auto, 0pt);">

LJackson
03-03-2009, 01:33 AM
See I think there's a bit of confusion here. It is applying fixed positioning to that div. If you resize the browser with the div open, it messes up as it stays in place while everything moves.

BUT, if you shut the div, resize the browser and open it up again, it is in the proper spot.

same here, but thats fine, i may look into the js file to see if i can change the position style but if not im happy with it as it is :)

LJackson
03-03-2009, 01:35 AM
Thanks for your help guys really appreciate it :)
:thumbsup::thumbsup::thumbsup:

Fisher
03-03-2009, 01:51 AM
Don't know if it would be possible to work into your site, but I've always like this bit of javascript you can read about here:

http://icant.co.uk/articles/dyngallery/

It positions the javascript popup in a div which you can style with your css. You could apply a float, margin, whatever to the popup.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum