CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shakesy
Shakesy

Reputation: 335

Center & middle positioning regardless of window scroll

I'm using the 'read more' buttons on this page to display previously (display:none) divs: http://apexhubmobile.co.uk/corporate-friends

The problem is when they display they force the window to the top of the page to view it, I tried changing the positioning to fixed and the box then didn't display properly until I scrolled a little.

My aim is for the hidden div to show up in the center & middle of the window regardless of how far down the page the user is. Here's a few excerpts of code.

<style>
.b1 {float:left;width:292px;background-color:#F2F2F2;margin:0 4px 5px;vertical-align:middle;border:1px solid grey;line-height:0 !important;}
.b2 {line-height:0 !important;}
.f1 {z-index:999;background-color:white;border:1px solid; grey; position:fixed; top:50%; left:50%; height:430px; width:900px; margin:-215px 0 0 -450px; display:none;}
.f2 {width:100%;background-color:silver;text-align:center; font-size:1.2em; color:white;}
.f3 {position:absolute; right: 0;top: 2px; font-size:0.8em;color:black;}
.f4 {width:35%; height:410px; float:left; display:inline-block;padding:15px 0 0 15px;text-align:center;}
.f5 {width:35%;float:left;text-align:center;position:absolute;bottom:15px;}
.f6 {width:65%;float:left;display:inline-block;padding:15px;}


<div id="s38" class="f1"><div class="f2">SEMINARS@THIRTYEIGHT
<span class="f3">&nbsp;&#91; <a href="#" onclick="jQuery('#s38').css('display', 'none');">close</a> &#93;&nbsp;</span></div><div class="f4">
 <img src="http://apexhubmobile.co.uk/images/friends/Seminars38.png">
 <div class="f5"><a href="http://seminarsthirtyeight.com" target="new">www.seminarsthirtyeight.com</a></div></div><div class="f6">
Seminars@thirtyeight is a centre for continuing professional development for the whole dental team. Our practice and seminar facility are intimate and inspirational. They are the ‘first class’ end of dental education and mentoring. All of the courses are GDC verifiable.

Held within private dental practice 38 Devonshire Street, located in the heart of London’s Harley Street medical district, the aim at Seminars@thirtyeight is to give you an unsurpassed dental training experience, with some of the world’s most gifted dental mentors. Their relaxed and intimate venue ensures you the best opportunity to network at a professional level and meet the top researchers, opinion leaders and coaches within the dental industry.


 <div class="b1"><img src="http://apexhubmobile.co.uk/images/friends/16.png"><div class="b2"><a href="#" onclick="jQuery('#s38').css('display', 'initial');"><img src="http://apexhubmobile.co.uk/test/rm.png" onMouseOver="this.src='http://apexhubmobile.co.uk/test/rmy.png'" onMouseOut="this.src='http://apexhubmobile.co.uk/test/rm.png'"></a></div></div>

Any ideas?

Upvotes: 1

Views: 217

Answers (1)

Nephelococcygia
Nephelococcygia

Reputation: 1131

Your problem is that you set attribute "href='#'" so it try to target # anchor when you click on it, but as it is not found, it just set the scroll to the top.

You can remove href attributes and style in CSS cursor pointer for your links.

Or set anchors onto your page.

PS : or maybe use event.preventDefault(); with jQuery

Upvotes: 1

Related Questions