1

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?

Shakesy
  • 335
  • 2
  • 8

1 Answers1

1

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

Nephelococcygia
  • 726
  • 5
  • 11
  • Good reasoning, I'll give this a try. – Shakesy Apr 11 '14 at 10:38
  • While this is valid, a blank href will reload the page. http://stackoverflow.com/questions/5637969/is-an-empty-href-valid – Sumo Apr 11 '14 at 10:41
  • most likely, try just remove the href attribute ? – Nephelococcygia Apr 11 '14 at 10:42
  • @user3523157 As it stands, this answer is actually two answers and is not valid. Removing the anchor is not a solution and not showing how to use the 'preventDefault' function isn't enough. It is suggested to modify this answer using [jQuery's documentation](http://api.jquery.com/event.preventdefault/) as a guide. – Sumo Apr 11 '14 at 10:59
  • Regardless of specifics, this answer led me to solving my problem, which was to simply remove the href="#" altogether. – Shakesy Apr 11 '14 at 11:18