Moving session login to top of page 1

[jonbutterworth]

Hi Guys,

I've been working on this webpage for some time now, and I've decided to add the Mikogo session login bit from their website and place it at the top right next to the logo to make it easier for people to find it.

I planned to put it into a neat little box using a border and background colour in CSS similar to the other boxes, but no matter how many times I resize the div, the login box will not move and continues to sit below!

I copied the code for the login box from the mikogo page (this is allowed) and it uses tables instead of CSS only. Could this be the cause of the problem?

The page is located at

http://www.adeo-it.co.uk

The suspect code is as follows:

<form name="aspnetForm" method="post" action="start.aspx?jscheck=1&amp;&amp;&amp;" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEP...klljK/rCnv2Hq4U2ZvA==" />
</div>
 
    <div>
        
<!--	Page content goes here	-->
	<script type="text/javascript" src="../script/wz_tooltip.js"></script>
	<script type="text/javascript" src="../script/tip_balloon.js"></script>
	<script type="text/javascript" src="../script/tip_centerwindow.js"></script>
	<script type="text/javascript" src="../script/tip_followscroll.js"></script>
	<script type="text/javascript">
		function	myTip( text )
		{
			Tip(text, BALLOON, false, WIDTH, 210, BGCOLOR, '#FFFBCC', OFFSETX, -100, TEXTALIGN, 'justify', BALLOONIMGPATH, '../script/tip_balloon/');
		}
 
		var connectionProgramTip	= "Use the connection program to actively participant in a session. The connection program will allow you to share your screen, obtain or give remote keyboard or mouse control, transfer files, record the session, see the participant list and use the whiteboard and pointer.";
		var htmlViewerTip			= "Use the browser login to join a session in view-only mode. The advantage is that you do not need to run any software. You only need a browser. No Java, no ActiveX, no Flash required.";
	</script>
 
<!-- MIKOGO Session Login-->
 
	<b>Support Session</b>
	<p>Please enter the session ID and your name.</p>
	<table border="0">
		<tr>
			<td>Session ID</td>
			<td><input name="ctl00$ContentPlaceHolder_EN$txtSessionKey" type="text" id="ctl00_ContentPlaceHolder_EN_txtSessionKey" class="textbox" onKeyUp="checkFormat( this, event )" onBlur="checkFormat( this, event )" /></td>
		</tr>
		<tr>
			<td>Your Name</td>
			<td><input name="ctl00$ContentPlaceHolder_EN$txtScreenName" type="text" id="ctl00_ContentPlaceHolder_EN_txtScreenName" class="textbox" />
				<span onmouseover="myTip('Fill in your first and last name. This name will be displayed in the participant list.')">
                   
                </span>
			</td>
		</tr>
		
		<tr>
			<td></td>
			<td><input type="submit" name="ctl00$ContentPlaceHolder_EN$btnView" value="Join Session" id="ctl00_ContentPlaceHolder_EN_btnView" class="button" />
			<input name="ctl00$ContentPlaceHolder_EN$hSessionPassword" type="hidden" id="ctl00_ContentPlaceHolder_EN_hSessionPassword" />
			</td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td colspan="2">&nbsp;</td>
		</tr> 
		
		
		
	</table>       
	<input name="ctl00$ContentPlaceHolder_EN$bAutoJoin" type="hidden" id="ctl00_ContentPlaceHolder_EN_bAutoJoin" value="false" />
 
	<script type="text/javascript">
		detectJavaScript();
		autoJoin();
	</script>
 
	<script type="text/javascript">
		var toFocus	= document.getElementById("ctl00_ContentPlaceHolder_EN_txtSessionKey");
		toFocus.focus();
 
		var toFormat	= document.getElementById("ctl00_ContentPlaceHolder_EN_txtSessionKey");
		checkFormat(toFormat, null);
	</script>
<!--    END OF Page content goes here  -->
 
    </div>
    </form>

As said, this portion of code was copied and pasted from the mikogo page, so it may be that I'm going to have to re write it to make it fit into the above mentioned webpage.

I'd be very gratefull for any help pointing me in the right direction.

Thanks,
Jon

 

[Vragabond]

As long as you keep the script and input tags intact, you should be able to change any other aspect of presentation of the form. So you can put these input boxes in a nice div based layout and style it via CSS.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jonbutterworth]

Hey,

Thanks for that, I've removed the table and got it placed nicely inside a div with the correct display properties. But for love nor money I just can't get it to move and sit next to the logo on the right hand side!!

I keep thinking it may be about sizing, and that it's too big to fit, but I have altered the sizing to test and it won't move.

Any additional help will be greatly appreciated.

Thanks,
Jon

 

[jonbutterworth]

Just thought I'd post some of my code...

I can move it everywhere but where I want it to go!!

The DIV properties:

#mikogo{
	float:left;
	background-color:#f9f9f9;
	border:#e8e6e6 1px solid;
	width:320px;
	margin-top:10px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 30px;
}

The Logo on the top left:

   <p><img src="images/Adeo-Logo-Final1.jpg" width="422" height="249" /></p>

Then Immediately after that the Mikogo Code:

<div id="mikogo">
                       
             <form name="aspnetForm" method="post" action="start.aspx?jscheck=1&amp;&amp;&amp;" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwU...Fal0K/rCnv2Hq4U2ZvA==" />
</div>
 
    <div>
        
<!--	Page content goes here	-->
	<script type="text/javascript" src="../script/wz_tooltip.js"></script>
	<script type="text/javascript" src="../script/tip_balloon.js"></script>
	<script type="text/javascript" src="../script/tip_centerwindow.js"></script>
	<script type="text/javascript" src="../script/tip_followscroll.js"></script>
	<script type="text/javascript">
		function	myTip( text )
		{
			Tip(text, BALLOON, false, WIDTH, 210, BGCOLOR, '#FFFBCC', OFFSETX, -100, TEXTALIGN, 'justify', BALLOONIMGPATH, '../script/tip_balloon/');
		}
 
		var connectionProgramTip	= "Use the connection program to actively participant in a session. The connection program will allow you to share your screen, obtain or give remote keyboard or mouse control, transfer files, record the session, see the participant list and use the whiteboard and pointer.";
		var htmlViewerTip			= "Use the browser login to join a session in view-only mode. The advantage is that you do not need to run any software. You only need a browser. No Java, no ActiveX, no Flash required.";
	</script>
 
<!-- MIKOGO Session Login-->
 
	<b>Support Session</b>
	<p>Please enter the session ID and your name.</p>
	
    			Session ID<input name="ctl00$ContentPlaceHolder_EN$txtSessionKey" type="text" id="ctl00_ContentPlaceHolder_EN_txtSessionKey" class="textbox" onKeyUp="checkFormat( this, event )" onBlur="checkFormat( this, event )" />
<br />
			Your Name<input name="ctl00$ContentPlaceHolder_EN$txtScreenName" type="text" id="ctl00_ContentPlaceHolder_EN_txtScreenName" class="textbox" />
				<span onmouseover="myTip('Fill in your first and last name. This name will be displayed in the participant list.')">
                   
                </span>
		
			<input type="submit" name="ctl00$ContentPlaceHolder_EN$btnView" value="Join Session" id="ctl00_ContentPlaceHolder_EN_btnView" class="button" />
			<input name="ctl00$ContentPlaceHolder_EN$hSessionPassword" type="hidden" id="ctl00_ContentPlaceHolder_EN_hSessionPassword" />
			
	<input name="ctl00$ContentPlaceHolder_EN$bAutoJoin" type="hidden" id="ctl00_ContentPlaceHolder_EN_bAutoJoin" value="false" />
 
	<script type="text/javascript">
		detectJavaScript();
		autoJoin();
	</script>
 
	<script type="text/javascript">
		var toFocus	= document.getElementById("ctl00_ContentPlaceHolder_EN_txtSessionKey");
		toFocus.focus();
 
		var toFormat	= document.getElementById("ctl00_ContentPlaceHolder_EN_txtSessionKey");
		checkFormat(toFormat, null);
	</script>
<!--    END OF Page content goes here  -->
 
    </div>
    </form>

</div>

Thanks for all help.

 

[Vragabond]

When floating things, the first floated element will always begin floating (left or right) next to the bottom of the last unfloated element. Elements following the floated element will, provided there is space around them, wrap around the floated element.

In your case, you're floating your login box, causing it to begin floating right below the logo (which is not floated) and next to the rest of the content. Since there is no space for the rest of the content (and also because it looks like you might have mismatched tags), no actual floating is visible (login box floats and main content could wrap around it, but since there's too much of the main content, it cannot wrap).

To do what you want, you need to either:
- float your logo (this will make logo float and other content, like a login box, wrap around it);
- move your login box in the code above your logo (this will make login box first item on the page and floated and logo will wrap around it).

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jonbutterworth]

Vragabond, you're a great great man!!

I floated the logo, and hey presto! Had a bit of a problem with the menu after that, but floated that too and all looking fine!!

It seems to be one knock after the other though!! lol

The form does not work!

It's working perfectly on

http://help.adeo-it.co.uk

but when I copied the code to integrate it into the main site (and finally got it where I wanted it!) it seems to not work at all :-(

I'll have a play around with it later, but if anyone has any ideas to help I'd be happy to hear....

Thanks again on the float advice though, that was great and just what I wanted.

Thanks,
Jon

 

[Vragabond]

Help pages points the form action to:

[URL unfurl="true"]http://help.adeo-it.co.uk[/URL][!]/en[/!]/start.aspx?jscheck=1&&&

Main page points the form action to:

[URL unfurl="true"]http://help.adeo-it.co.uk/start.aspx?jscheck=1&&&[/URL]

That's why it's not working... There's no script at this address.


[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jonbutterworth]

Excellent, thanks so much for your help.

I've solved all my little niggles now I think. Time to crack on with the rest of the site... only another 30 odd pages to go!! lol

Thanks again

Jon

 

[feherke]

Hi

Here on Tek-Tips we used to thank for the received help by giving stars. Please click the

* [navy]Thank Vragabond
for this valuable post![/navy]

at the bottom of Vragabond's post. That way you both show your gratitude and indicate this thread as helpful.

Feherke.

http://free.rootshell.be/~feherke/

 

[jonbutterworth]

I have done that for you, thanks ever so much for all your help.

Jon