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.
Results 1 to 9 of 9

Thread: Scrolling Issue

  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Scrolling Issue

    Hello,

    Thanks to the wonderful people on here, I have solved a couple issues in trying to upgrade my knowledge. Now, one more:

    http://www.dereknewmandesigns.com/temp-pp/xindex.htm

    Anyone know why you can keep scrolling past the blue part at the bottom?

    In Dreamweaver, you can only scroll down to the blue part but once posted online, you can scroll way below it.

    I only know HTML and use tables so please do not hurt me

    Thanks,

    DN

  • #2
    New Coder
    Join Date
    Oct 2008
    Posts
    23
    Thanks
    2
    Thanked 1 Time in 1 Post
    There are a lot of excessive divs at the bottom with classes starting with anklink... Delete those and you'll be fine

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hello,

    Thanks for the reply.

    I am not sure what you mean.

    Could you be more specific.

    I looked at the bottom of the code and see nothing except (from the icons table at the bottom):

    Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr> 
        <td align="left" valign="top" bgcolor="003e65"> <br>
          <table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr align="left" valign="top">
              <td width="605"><a href="http://www.dereknewmandesigns.com" title="Need a website?  Check out DN Designs" target="_blank"><img src="images/button_dnd_01.jpg" width="340" height="30" border="0"></a></td>
              <td width="5">&nbsp;</td>
              <td width="30"><a href="http://itunes.apple.com/ca/podcast/premier-punditry/id419950951" title="Subscribe to the podcast thru iTunes" target="_blank"><img src="images/button_itunes_01.jpg" width="30" height="30" border="0"></a></td>
              <td width="5">&nbsp;</td>
              <td width="30"><a href="podcast_pp.xml" title="Subscribe to the podcast thru our RSS Feed" target="_blank"><img src="images/button_rss_01.jpg" width="30" height="30" border="0"></a></td>
              <td width="5">&nbsp;</td>
              <td width="30"><a href="http://www.facebook.com/home.php?sk=group_131913956879472&ap=1" title="Like on Facebook" target="_blank"><img src="images/button_facebook_01.jpg" width="30" height="30" border="0"></a></td>
              <td width="5">&nbsp;</td>
              <td width="30"><a href="http://twitter.com/#!/PremierPunditry" title="Follow @PremierPunditry on Twitter" target="_blank"><img src="images/button_twitter_01.jpg" width="30" height="30" border="0"></a></td>
              <td width="5">&nbsp;</td>
              <td width="30"><a href="http://premierpunditry.wordpress.com/" title="Check out our blog" target="_blank"><img src="images/button_wordpress_01.jpg" width="30" height="30" border="0"></a></td>
            </tr>
          </table>
          <br>
          <p>&nbsp; </p></td>
      </tr>
    </table>
    </body>
    </html>
    Thanks,

    Derek

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    mikhial is right you have a bunch of excessive divs at the bottom. if they aren't in your script then chances are dreamweaver is adding them on. i dont use dreamweaver so i can't be sure



  • Users who have thanked Sammy12 for this post:

    number41baby (08-08-2011)

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hello,

    Thanks for the replies.

    Any suggestions as I do not see any of that in the code or any file I have

    Thanks,

    DN

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,928
    Thanks
    46
    Thanked 203 Times in 202 Posts
    Quote Originally Posted by number41baby View Post
    Hello,

    Thanks for the replies.

    Any suggestions as I do not see any of that in the code or any file I have

    Thanks,

    DN
    the reason you are not seeing it is because it is generated via javascript more specifically (I assume) the javascript
    Code:
    <script type="text/javascript" src="anylinkmenu.js">
    because of the classes being assigned to them... anyways when you view source or view the original code the javascript is not firing hence not seeing them...
    I do not know exactly why you are having these issues, but i do know it is due to your javascript (one of the two you have)... as testimony, disable javascript and view your page, it looks like it seems you want it to look

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    number41baby (08-08-2011)

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hello,

    You are correct however I have now lost my drop-down menu (which Sammy and everyone helped me learn how to do).

    Is there something within the JAVASCRIPT I can delete to prevent this from happening.

    I really do not want to re-start with a new drop-down menu as I am struggling with it enough

    Thanks,

    DN

  • #8
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hello,

    I put the JAVASCIPT here for you. This is from DYNAMIC DRIVE.

    ---

    Code:
    //** AnyLink JS Drop Down Menu v2.0- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
    //** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
    //** January 29th, 2009: Script Creation date
    
    //**May 22nd, 09': v2.1
    	//1) Automatically adds a "selectedanchor" CSS class to the currrently selected anchor link
    	//2) For image anchor links, the custom HTML attributes "data-image" and "data-overimage" can be inserted to set the anchor's default and over images.
    
    //**June 1st, 09': v2.2
    	//1) Script now runs automatically after DOM has loaded. anylinkmenu.init) can now be called in the HEAD section
    
    //**May 23rd, 10': v2.21: Fixes script not firing in IE when inside a frame page
    
    //**June 28th, 11': v2.3: Menu updated to work properly in popular mobile devices such as iPad/iPhone and Android tablets.
    
    if (typeof dd_domreadycheck=="undefined") //global variable to detect if DOM is ready
    	var dd_domreadycheck=false
    
    var anylinkmenu={
    
    menusmap: {},
    preloadimages: [],
    effects: {delayhide: 200, shadow:{enabled:true, opacity:0.3, depth: [5, 5]}, fade:{enabled:true, duration:500}}, //customize menu effects
    
    dimensions: {},
    ismobile:navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers
    
    getoffset:function(what, offsettype){
    	return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
    },
    
    getoffsetof:function(el){
    	el._offsets={left:this.getoffset(el, "offsetLeft"), top:this.getoffset(el, "offsetTop"), h: el.offsetHeight}
    },
    
    getdimensions:function(menu){
    	this.dimensions={anchorw:menu.anchorobj.offsetWidth, anchorh:menu.anchorobj.offsetHeight,
    		docwidth:(window.innerWidth ||this.standardbody.clientWidth)-20,
    		docheight:(window.innerHeight ||this.standardbody.clientHeight)-15,
    		docscrollx:window.pageXOffset || this.standardbody.scrollLeft,
    		docscrolly:window.pageYOffset || this.standardbody.scrollTop
    	}
    	if (!this.dimensions.dropmenuw){
    		this.dimensions.dropmenuw=menu.dropmenu.offsetWidth
    		this.dimensions.dropmenuh=menu.dropmenu.offsetHeight
    	}
    },
    
    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
    },
    
    setopacity:function(el, value){
    	el.style.opacity=value
    	if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported
    		el.style.MozOpacity=value
    		if (document.all && typeof el.style.filter=="string"){
    			el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")"
    		}
    	}
    },
    
    showmenu:function(menuid){
    	var menu=anylinkmenu.menusmap[menuid]
    	clearTimeout(menu.hidetimer)
    	this.getoffsetof(menu.anchorobj)
    	this.getdimensions(menu)
    	var posx=menu.anchorobj._offsets.left + (menu.orientation=="lr"? this.dimensions.anchorw : 0) //base x pos
    	var posy=menu.anchorobj._offsets.top+this.dimensions.anchorh - (menu.orientation=="lr"? this.dimensions.anchorh : 0)//base y pos
    	if (posx+this.dimensions.dropmenuw+this.effects.shadow.depth[0]>this.dimensions.docscrollx+this.dimensions.docwidth){ //drop left instead?
    		posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw)
    	}
    	if (posy+this.dimensions.dropmenuh>this.dimensions.docscrolly+this.dimensions.docheight){  //drop up instead?
    		posy=Math.max(posy-this.dimensions.dropmenuh - (menu.orientation=="lr"? -this.dimensions.anchorh : this.dimensions.anchorh), this.dimensions.docscrolly) //position above anchor or window's top edge
    	}
    	if (this.effects.fade.enabled){
    		this.setopacity(menu.dropmenu, 0) //set opacity to 0 so menu appears hidden initially
    		if (this.effects.shadow.enabled)
    			this.setopacity(menu.shadow, 0) //set opacity to 0 so shadow appears hidden initially
    	}
    	menu.dropmenu.setcss({left:posx+'px', top:posy+'px', visibility:'visible'})
    	if (this.effects.shadow.enabled){
    		//menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
    		menu.shadow.setcss({left:posx+anylinkmenu.effects.shadow.depth[0]+'px', top:posy+anylinkmenu.effects.shadow.depth[1]+'px', visibility:'visible'})
    	}
    	if (this.effects.fade.enabled){
    		clearInterval(menu.animatetimer)
    		menu.curanimatedegree=0
    		menu.starttime=new Date().getTime() //get time just before animation is run
    		menu.animatetimer=setInterval(function(){anylinkmenu.revealmenu(menuid)}, 20)
    	}
    },
    
    revealmenu:function(menuid){
    	var menu=anylinkmenu.menusmap[menuid]
    	var elapsed=new Date().getTime()-menu.starttime //get time animation has run
    	if (elapsed<this.effects.fade.duration){
    		this.setopacity(menu.dropmenu, menu.curanimatedegree)
    		if (this.effects.shadow.enabled)
    			this.setopacity(menu.shadow, menu.curanimatedegree*this.effects.shadow.opacity)
    	}
    	else{
    		clearInterval(menu.animatetimer)
    		this.setopacity(menu.dropmenu, 1)
    		menu.dropmenu.style.filter=""
    	}
    	menu.curanimatedegree=(1-Math.cos((elapsed/this.effects.fade.duration)*Math.PI)) / 2
    },
    
    setcss:function(param){
    	for (prop in param){
    		this.style[prop]=param[prop]
    	}
    },
    
    setcssclass:function(el, targetclass, action){
    	var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
    	if (action=="check")
    		return needle.test(el.className)
    	else if (action=="remove")
    		el.className=el.className.replace(needle, "")
    	else if (action=="add" && !needle.test(el.className))
    		el.className+=" "+targetclass
    },
    
    hidemenu:function(menuid){
    	var menu=anylinkmenu.menusmap[menuid]
    	clearInterval(menu.animatetimer)
    	menu.dropmenu.setcss({visibility:'hidden', left:0, top:0})
    	menu.shadow.setcss({visibility:'hidden', left:0, top:0})
    },
    
    getElementsByClass:function(targetclass){
    	if (document.querySelectorAll)
    		return document.querySelectorAll("."+targetclass)
    	else{
    		var classnameRE=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "i") //regular expression to screen for classname
    		var pieces=[]
    		var alltags=document.all? document.all : document.getElementsByTagName("*")
    		for (var i=0; i<alltags.length; i++){
    			if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
    				pieces[pieces.length]=alltags[i]
    		}
    		return pieces
    	}
    },
    
    addDiv:function(divid, divclass, inlinestyle){
    	var el=document.createElement("div")
    	if (divid)
    		el.id=divid
    	el.className=divclass
    	if (inlinestyle!="" && typeof el.style.cssText=="string")
    		el.style.cssText=inlinestyle
    	else if (inlinestyle!="")
    		el.setAttribute('style', inlinestyle)
    	document.body.appendChild(el)
    	return el
    },
    
    getmenuHTML:function(menuobj){
    	var menucontent=[]
    	var frag=""
    	for (var i=0; i<menuobj.items.length; i++){
    		frag+='<li><a href="' + menuobj.items[i][1] + '" target="' + menuobj.linktarget + '">' + menuobj.items[i][0] + '</a></li>\n'
    		if (menuobj.items[i][2]=="efc" || i==menuobj.items.length-1){
    			menucontent.push(frag)
    			frag=""
    		}
    	}
    	if (typeof menuobj.cols=="undefined")
    		return '<ul>\n' + menucontent.join('') + '\n</ul>'
    	else{
    		frag=""
    		for (var i=0; i<menucontent.length; i++){
    			frag+='<div class="' + menuobj.cols.divclass + '" style="' + menuobj.cols.inlinestyle + '">\n<ul>\n' + menucontent[i] + '</ul>\n</div>\n'
    		}
    		return frag
    	}
    },
    
    addEvent:function(targetarr, functionref, tasktype){
    	if (targetarr.length>0){
    		var target=targetarr.shift()
    		if (target.addEventListener)
    			target.addEventListener(tasktype, functionref, false)
    		else if (target.attachEvent)
    			target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)})
    		this.addEvent(targetarr, functionref, tasktype)
    	}
    },
    
    domready:function(functionref){ //based on code from the jQuery library
    	if (dd_domreadycheck){
    		functionref()
    		return
    	}
    	// Mozilla, Opera and webkit nightlies currently support this event
    	if (document.addEventListener) {
    		// Use the handy event callback
    		document.addEventListener("DOMContentLoaded", function(){
    			document.removeEventListener("DOMContentLoaded", arguments.callee, false )
    			functionref();
    			dd_domreadycheck=true
    		}, false )
    	}
    	else if (document.attachEvent){
    		// If IE and not an iframe
    		// continually check to see if the document is ready
    		if ( document.documentElement.doScroll && window == window.top) (function(){
    			if (dd_domreadycheck) return
    			try{
    				// If IE is used, use the trick by Diego Perini
    				// http://javascript.nwbox.com/IEContentLoaded/
    				document.documentElement.doScroll("left")
    			}catch(error){
    				setTimeout( arguments.callee, 0)
    				return;
    			}
    			//and execute any waiting functions
    			functionref();
    			dd_domreadycheck=true
    		})();
    	}
    	if (document.attachEvent && parent.length>0) //account for page being in IFRAME, in which above doesn't fire in IE
    		this.addEvent([window], function(){functionref()}, "load");
    },
    
    addState:function(anchorobj, state){
    	if (anchorobj.getAttribute('data-image')){
    		var imgobj=(anchorobj.tagName=="IMG")? anchorobj : anchorobj.getElementsByTagName('img')[0]
    		if (imgobj){
    			imgobj.src=(state=="add")? anchorobj.getAttribute('data-overimage') : anchorobj.getAttribute('data-image')
    		}
    	}
    	else
    		anylinkmenu.setcssclass(anchorobj, "selectedanchor", state)
    },
    
    addState:function(anchorobj, state){
    	if (anchorobj.getAttribute('data-image')){
    		var imgobj=(anchorobj.tagName=="IMG")? anchorobj : anchorobj.getElementsByTagName('img')[0]
    		if (imgobj){
    			imgobj.src=(state=="add")? anchorobj.getAttribute('data-overimage') : anchorobj.getAttribute('data-image')
    		}
    	}
    	else
    		anylinkmenu.setcssclass(anchorobj, "selectedanchor", state)
    },
    
    setupmenu:function(targetclass, anchorobj, pos){
    	this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
    	var relattr=anchorobj.getAttribute("rel")
    	dropmenuid=relattr.replace(/\[(\w+)\]/, '')
    	var dropmenuvar=window[dropmenuid]
    	var dropmenu=this.addDiv(null, dropmenuvar.divclass, dropmenuvar.inlinestyle) //create and add main sub menu DIV
    	dropmenu.innerHTML=this.getmenuHTML(dropmenuvar)
    	var menu=this.menusmap[targetclass+pos]={
    		id: targetclass+pos,
    		anchorobj: anchorobj,	
    		dropmenu: dropmenu,
    		revealtype: (relattr.length!=dropmenuid.length && RegExp.$1=="click") || anylinkmenu.ismobile ? "click" : "mouseover",
    		orientation: anchorobj.getAttribute("rev")=="lr"? "lr" : "ud",
    		shadow: this.addDiv(null, "anylinkshadow", null) //create and add corresponding shadow
    	}
    	menu.anchorobj._internalID=targetclass+pos
    	menu.anchorobj._isanchor=true
    	menu.dropmenu._internalID=targetclass+pos
    	menu.shadow._internalID=targetclass+pos
    	menu.dropmenu.setcss=this.setcss
    	menu.shadow.setcss=this.setcss
    	menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
    	this.setopacity(menu.shadow, this.effects.shadow.opacity)
    	this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOVER event for anchor, dropmenu, shadow
    		var menu=anylinkmenu.menusmap[this._internalID]
    		if (this._isanchor && menu.revealtype=="mouseover" && !anylinkmenu.isContained(this, e)){ //event for anchor
    			anylinkmenu.showmenu(menu.id)
    			anylinkmenu.addState(this, "add")
    		}
    		else if (typeof this._isanchor=="undefined"){ //event for drop down menu and shadow
    			clearTimeout(menu.hidetimer)
    		}
    	}, "mouseover")
    	this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOUT event for anchor, dropmenu, shadow
    		if (!anylinkmenu.isContained(this, e)){
    			var menu=anylinkmenu.menusmap[this._internalID]
    			menu.hidetimer=setTimeout(function(){
    				anylinkmenu.addState(menu.anchorobj, "remove")
    				anylinkmenu.hidemenu(menu.id)
    			}, anylinkmenu.effects.delayhide)
    		}
    	}, "mouseout")
    	this.addEvent([menu.anchorobj, menu.dropmenu], function(e){ //CLICK event for anchor, dropmenu
    		var menu=anylinkmenu.menusmap[this._internalID]
    		if ( this._isanchor && menu.revealtype=="click"){
    			if (menu.dropmenu.style.visibility=="visible")
    				anylinkmenu.hidemenu(menu.id)
    			else{
    				anylinkmenu.addState(this, "add")
    				anylinkmenu.showmenu(menu.id)
    			}
    			if (e.preventDefault)
    				e.preventDefault()
    			return false
    		}
    		else
    			menu.hidetimer=setTimeout(function(){anylinkmenu.hidemenu(menu.id)}, anylinkmenu.effects.delayhide)
    	}, "click")
    },
    
    init:function(targetclass){
    	this.domready(function(){anylinkmenu.trueinit(targetclass)})
    },
    
    trueinit:function(targetclass){
    	var anchors=this.getElementsByClass(targetclass)
    	var preloadimages=this.preloadimages
    	for (var i=0; i<anchors.length; i++){
    		if (anchors[i].getAttribute('data-image')){ //preload anchor image?
    			preloadimages[preloadimages.length]=new Image()
    			preloadimages[preloadimages.length-1].src=anchors[i].getAttribute('data-image')
    		}
    		if (anchors[i].getAttribute('data-overimage')){ //preload anchor image?
    			preloadimages[preloadimages.length]=new Image()
    			preloadimages[preloadimages.length-1].src=anchors[i].getAttribute('data-overimage')
    		}
    		this.setupmenu(targetclass, anchors[i], i)
    	}
    }
    
    }

  • #9
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    RESOLVED

    RESOLVED.

    For those having this problem, add this:

    Code:
    .anylinkshadow{ /*CSS for shadow. Keep this as is */
    position: absolute;
    height: 0 !important;
    left: 0;
    top: 0;
    z-index: 99; /*zIndex for shadow*/
    background: black;
    visibility: hidden;
    }
    Thanks to Sammi and alykins: I would never had known where to look,

    DN


  •  

    Posting Permissions

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