Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 30
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts

    div positioning help please!!

    Hi All,

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

    here

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

    here is the div css
    Code:
    <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
    Last edited by LJackson; 03-03-2009 at 02:39 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello LJackson,
    Was in the middle of it and the box went away. It's a link now? Do you still need this?

    Code:
    <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">
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    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
    PHP Code:
    <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
    PHP Code:
    <div id="subcontent" style="position:absolute; visibility: hidden; border: 7px solid black; background-color: white; width: 250px; height:300px; padding: 8px;"
    ????

    cheers
    Last edited by LJackson; 03-03-2009 at 01:05 AM.

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    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.
    Last edited by Fisher; 03-03-2009 at 01:18 AM.

  • #5
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    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
    PHP Code:
        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
    Code:
    //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
    Last edited by LJackson; 03-03-2009 at 01:22 AM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    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;

  • #8
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    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

  • #9
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    its very strange now sure where to go now

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

  • #10
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    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.

  • #11
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    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

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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:
    Code:
    #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:
    Code:
    #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...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    LJackson (03-03-2009)

  • #13
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    ive solved it

    it was the javascript, i played around with it and changed the following
    Code:
    var horizontaloffset=(subobj.dropposition[0]=="left")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 //calculate user added horizontal offset
    to

    Code:
    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???

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    I don't know much about javascript, but you should be able to edit this line and add something like "-179 to it"

    Code:
    subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset + "px"
    try:
    Code:
    subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset  -179 + "px"
    Edit: oops, 2 minutes too late

    way to go


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •