...
PDA

New here, Need some help immediately!

Ejean91
09-19-2011, 04:20 PM
Hii guys, I'm new here. I'm currently an employee at Boston Financial Data Services and I need some help coding a MS Sharepoint page (or separate HTML page,) with HTML, CSS, and Javascript all in one.

I've been working with another on trying to get a lightbox to work with my sharepoint page for quite some time and we came across a snag.

I want to use this Javascript here in either my Sharepoint content web part or in a separate HTML page (but neither code seem to work with it):

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Manage Portal</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - images
*/

$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
</head>



<a id="various3" href="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/Lists/Messages/NewForm.aspx?RootFolder=%2Fsites%2FDepartmentCommunities%2FInvestorServices%2FISMC2%2FLists%2FMessag es&amp;ContentTypeId=0x012002009E73B71E51BD5A4487B5BA4453025B6C&amp;Source=https%3A%2F%2Fbfsiteportal%2Fsite s%2FDepartmentCommunities%2FInvestorServices%2FISMC2%2FLists%2FMessages%2FAllItems%2Easpx" target=_blank><IMG style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; WIDTH: 238px; BORDER-BOTTOM: 0px solid; HEIGHT: 202px" height=140 alt="Post Message" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/link.png" width=190 border=0></A>&nbsp;</P></TD></TR></TBODY></TABLE>&nbsp;



This is the sharepoint "content editor web part" code that works with the default aspx (only used tables to align because separate CSS formatting Sucks with Sharepoint.)
<DIV align=center>
<TABLE style="WIDTH: 1231px; HEIGHT: 902px" summary="" background=https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/bg.png><BR><BR>
<STYLE>A:hover IMG {
FILTER: alpha(opacity=30)
}
</STYLE>

<TBODY>
<TR>
<TD colSpan=8>
<P><A title="" href="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/html/helpfile.html" target=_blank><IMG style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; WIDTH: 282px; BORDER-BOTTOM: 0px solid; HEIGHT: 265px" alt=HELP!!! src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/link.png" border=0></A></P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A title="" href="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/IDP/Forms/AllItems.aspx" target=_blank><IMG style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" alt=IDP src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/idpbut.png" border=0></A><IMG style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" alt=NQR src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/nqrbut.png" border=0><A title="" href="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/Command%20Center%20Call%20Totals/Forms/AllItems.aspx" target=_blank><IMG style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" alt="Call Totals" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/ct.png" border=0></A><A title="" href="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/stats_usage/Sharepoint%20-%20KnowledgeBase%20Usage%202011.xls" target=_blank><IMG style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" alt=NQR src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/kb.png" border=0></A><A title="" href="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/Quality/Forms/AllItems.aspx?RootFolder=%2fsites%2fDepartmentCommunities%2fInvestorServices%2fQuality%2fQuality%20A nalysts%2fNQR%20Reports%20%2d%20Names%20Included&amp;FolderCTID=&amp;View=%7b2D817F74%2d9FF3%2d4326%2d9426%2 dA9282BD600DC%7d" target=_blank><IMG style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" alt=NQR src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/nqrbut.png" border=0></A>&nbsp;</P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <A title="" href="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/ScoreCards/Forms/AllItems.aspx" target=_blank><IMG style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" alt=Scorecards src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/scbut.png" border=0></A><IMG style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" alt=NQR src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/nqrbut.png" border=0><A title="" href="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/Shared%20Documents/Forms/AllItems.aspx?RootFolder=%2fsites%2fDepartmentCommunities%2fInvestorServices%2fShared%20Documents%2f Command%20Center%2fDaily%20Reports%2fEfficiency%20Reports&amp;FolderCTID=&amp;View=%7b9A6F0DB3%2d0681%2d4156 %2dBB8C%2d19F58142F97A%7d" target=_blank><IMG style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" alt="Efficiency Reports" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/er.png" border=0></A><IMG style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" alt="Mel's RFPs" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/mrfp.png" border=0><A title="" href="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/Quality/Forms/AllItems.aspx?RootFolder=%2fsites%2fDepartmentCommunities%2fInvestorServices%2fQuality%2fQuality%20A nalysts&amp;FolderCTID=&amp;View=%7b2D817F74%2d9FF3%2d4326%2d9426%2dA9282BD600DC%7d" target=_blank><IMG style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" alt="Quality Folder" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/qf.png" border=0></A>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A title="" href="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/Lists/Messages/AllItems.aspx" target=_blank></A>&nbsp; </P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P><A title="" href="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/html/helpfile.html" target=_blank></A>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P><A title="" href="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/html/helpfile.html" target=_blank></A>&nbsp;</P></TD>
<TD colSpan=7>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</P>
<P>&nbsp;&nbsp;&nbsp; </P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</P>
<P>&nbsp;&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <IMG style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; WIDTH: 210px; BORDER-BOTTOM: 0px solid; HEIGHT: 229px" alt=HELP!!! src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/link.png" border=0></P></TD></TR></TBODY></TABLE>&nbsp;
<TABLE style="WIDTH: 100%" summary="">
<TBODY></TBODY></TABLE>
<P>&nbsp;</P></DIV>
<DIV></DIV>&nbsp;<BR>&nbsp;<BR>

Now that i figured my javascript wasnt working with the above code on Sharepoint, I opted to make a completely separate HTML page to replace Sharepoint's default ASPX page (seeing that its such a mess with all the nbsp's and crap, css is much cleaner to position the icons that i need in the proper spots. This might confuse some because i'm in a rush to figure this all out.
<style type="text/css">
body
{
background-color:black;
width: 1231px;
height: 902px;
}
div.BACKGROUNDD {
position: middle;
top: 100px;
left: 40px;
width: 1231px;
height: 902px;
}
div.NQRBUTTON {
position: absolute;
top: 320px;
left: 250px;
width: 80px;
height: 80px;
}
div.IDPBUTTON {
position: absolute;
top: 320px;
left: 330px;
width: 81px;
height: 81px;
}
div.CTBUTTON {
position: absolute;
top: 319px;
left: 405px;
width: 80px;
height: 80px;
}
div.KBBUTTON {
position: absolute;
top: 323px;
left: 485px;
width: 77px;
height: 77px;
}
div.QFBUTTON {
position: absolute;
top: 323px;
left: 568px;
width: 81px;
height: 81px;
}
div.SCBUTTON {
position: absolute;
top: 323px;
left: 653px;
width: 80px;
height: 80px;
}
div.IDPBUTTON1 {
position: absolute;
top: 323px;
left: 733px;
width: 80px;
height: 80px;
}
div.KBBUTTON1 {
position: absolute;
top: 423px;
left: 250px;
width: 80px;
height: 80px;
}
div.QFBUTTON1 {
position: absolute;
top: 423px;
left: 330px;
width: 80px;
height: 80px;
}
div.SCBUTTON1 {
position: absolute;
top: 423px;
left: 405px;
width: 80px;
height: 80px;
}

div.container {
position: absolute;
width: 1231px;
height: 902px;
margin: 0 auto;

text-align: left;
}
table.center {
position: absolute;
width: 1231px;
height: 902px;
margin-left:auto;
margin-right:auto;
}
table#table1 {
width:70%;
margin-left:10%;
margin-right:15%;
}</style>
<table border="0" class="center" id="table1" style="width: 1231px; height: 902px">
<tbody>
<tr>
<td>
<div class="Backgroundd">
<img border="o" height:="902" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/bg.png" width:="1231" /></div>
<div class="NQRBUTTON">
<a href="http://www.google.com"><img position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/nqrbut.png" style="border-right: 0px solid; border-top: 0px solid; border-left: 0px solid; width: 80px; border-bottom: 0px solid; height: 80px" /></a></div>
<div class="IDPBUTTON">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/idpbut.png" width="80" /></div>
<div class="CTBUTTON">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/ct.png" width="80" /></div>
<div class="KBBUTTON">
<img border="0" height="78" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/kb.png" width="78" /></div>
<div class="QFBUTTON">
<img border="0" height="78" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/qf.png" width="78" /></div>
<div class="SCBUTTON">
<img border="0" height="81" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/scbut.png" width="81" /></div>
<div class="IDPBUTTON1">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/idpbut.png" width="80" /></div>
<div class="KBBUTTON1">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/kb.png" width="80" /></div>
<div class="QFBUTTON1">
<img alt="" border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/qf.png" width="80" /></div>
<div class="SCBUTTON1">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/scbut.png" width="80" /></div>
<div>
&nbsp;</div>
<div>
&nbsp;</div>
</td>
</tr>
</tbody>
</table>
<p>
&nbsp;</p>


Can anyone tell me why the javascript isnt compatible with either of these codes? I really need this because the lightbox is what my supervisor needs.

I would've taken more time to properly introduce myself, but i'm in deperate need to finish this code this week and make it perfect, whether it's in the Sharepoint aspx or through a completely new html to replace the aspx.

Thanks in advance. I really appreciate any help available here.
Ejean91
09-20-2011, 02:40 PM
BUMP. need some help still! please if you need the images to make more sense of this whole thing, i'll be glad to attach them as a zip or somethning. I have an avi video of how its supposed to be showing up, but without the lightbox code.
teedoff
09-20-2011, 03:28 PM
A link to your site would be much better. Also, if this is a javascript issue, you would be much better off having this post moved to the js forum.

But I for one am a bit confused about your problem. So again a site link that clearly shows what's not working would be much more helpful, especially dealing with images.
alykins
09-20-2011, 04:29 PM
I think in a frantic attempt to get things working you are mixing and matching things that will/should not work together...
for instance...
I personally do not know the ramifications of absolute positioning within a <td> especially since the <td> (or <tr> or <table> for that matter) are not position relative. I also saw a position:middle; which is non-existent.... I understand that you are in much need of help, but... take a breather, unwind a little bit, and (my suggestion) is take a screen shot of what it looks like, and then take a screen shot of what it is you are attempting to achieve in the end...
When we rush we make mistakes. :)
Ejean91
09-20-2011, 04:35 PM
See, the problem is that since its on a secure server, and on sharepoint, it would be hard to really show the issue. And my html page isnt published publicly as it's still in its development stages, and will be on the corporate intranet anyway.

but if you come up with images at the same size as the ones in the code, i wont see the issue in replicating what i need. if anything, i have a on screen video of the functionality without the lightbox, and i cna probably get a video of what happens when i put the javascript into my separate html page.


So i'll try to explain it even further. (and i just realized posting in the JS forum probably would've been a better option. Maybe a mod could move it for me?)


Ok, so the first code is javascript as you know. This is for a javascript lightbox. I've given up on trying to make it work with Sharepoint's default aspx page (the second code posted), so I'm trying to get it to work with my own HTML page, (which is the third code.) BUT, the javascript isnt working for that either.

essentially, the lightbox needs to work on a image icon within the table of my code.

*edit* uploaded screenshots of the desired format (not using the second code i posted, the third code which is all css)

(You see the little notepad that says post a message? you're supposed to be able to click on that, and a lightbox, like when you're on someones blog and theres a box that pops up that enlarges a picture but with a dark transparent border around it, something like that but instead of an image in the lightbox, a webpage will come up with the message form.)

I have the javascript for the lightbox, but it's not working on my third code i posted.
Ejean91
09-20-2011, 07:37 PM
------------------------------------------------------------------------------------------------------------------------------------------------------------------------

*2nd edit* I thought i was getting somewhere with this code, but i'm confused, its not doing what I want to do.

Edited the full source code because i forgot to include the script link for the javascript, still didn't fix the issue by the way.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Manager's Collaboration Portal</title>
</head>

<style type="text/css">
body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:0px solid #416CE5;}
h2{font-size:13px; margin:15px 0 0 0;}
body
{
background-color:black;
width: 1231px;
height: 902px;
}
div.BACKGROUNDD {
position: middle;
top: 100px;
left: 40px;
width: 1231px;
height: 902px;
}
div.NQRBUTTON {
position: absolute;
top: 320px;
left: 250px;
width: 80px;
height: 80px;
}
div.IDPBUTTON {
position: absolute;
top: 320px;
left: 330px;
width: 81px;
height: 81px;
}
div.CTBUTTON {
position: absolute;
top: 319px;
left: 405px;
width: 80px;
height: 80px;
}
div.KBBUTTON {
position: absolute;
top: 323px;
left: 485px;
width: 77px;
height: 77px;
}
div.QFBUTTON {
position: absolute;
top: 323px;
left: 568px;
width: 81px;
height: 81px;
}
div.SCBUTTON {
position: absolute;
top: 323px;
left: 653px;
width: 80px;
height: 80px;
}
div.IDPBUTTON1 {
position: absolute;
top: 323px;
left: 733px;
width: 80px;
height: 80px;
}
div.KBBUTTON1 {
position: absolute;
top: 423px;
left: 250px;
width: 80px;
height: 80px;
}
div.QFBUTTON1 {
position: absolute;
top: 423px;
left: 330px;
width: 80px;
height: 80px;
}
div.SCBUTTON1 {
position: absolute;
top: 423px;
left: 405px;
width: 80px;
height: 80px;
}
div.Linkbutton {
position: absolute;
top: 635px;
left: 995px;
width 220px;
height: 214px;
}
div.container {
position: absolute;
width: 1231px;
height: 902px;
margin: 0 auto;

text-align: left;
}
table.center {
position: absolute;
width: 1231px;
height: 902px;
margin-left:auto;
margin-right:auto;
}
table#table1 {
width:70%;
margin-left:10%;
margin-right:15%;
} </style>
</p>

<table border="0" class="center" id="table1" style="width: 1231px; height: 902px">
<tbody>

<script src="js/jquery.min.js"></script><script src="js/jquery.colorbox.js"></script><script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".example5").colorbox();
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".example7").colorbox({width:"80%", height:"80%", iframe:true});
$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
$(".example9").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
<tr>
<td>
<div class="Backgroundd">
<img border="o" height:="902" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/bg.png" width:="1231" /></div>
<div class="NQRBUTTON">
<a href="http://www.google.com"><img position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/nqrbut.png" style="border-right: 0px solid; border-top: 0px solid; border-left: 0px solid; width: 80px; border-bottom: 0px solid; height: 80px" /></a></div>
<div class="IDPBUTTON">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/idpbut.png" width="80" /></div>
<div class="CTBUTTON">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/ct.png" width="80" /></div>
<div class="KBBUTTON">
<img border="0" height="78" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/kb.png" width="78" /></div>
<div class="QFBUTTON">
<img border="0" height="78" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/qf.png" width="78" /></div>
<div class="SCBUTTON">
<img border="0" height="81" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/scbut.png" width="81" /></div>
<div class="IDPBUTTON1">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/idpbut.png" width="80" /></div>
<div class="KBBUTTON1">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/kb.png" width="80" /></div>
<div class="QFBUTTON1">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/qf.png" width="80" /></div>
<div class="SCBUTTON1">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/scbut.png" width="80" /></div>
<div class="Linkbutton">
<p><a class='example7' href="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/Lists/Team%20Discussion/AllItems.aspx">
<IMG style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; WIDTH: 220px; BORDER-BOTTOM: 0px solid; HEIGHT: 214px" alt="Post a Message" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/link.png" border=0></A></p>

</td>
</tr>
</tbody>
</table>

This is the code that's supposed to call the javascript and open up the lightbox/iframe (this is in the above code as well)



<div class="Linkbutton">
<p><a class='example7' href="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/Lists/Team%20Discussion/AllItems.aspx">
<IMG style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; WIDTH: 220px; BORDER-BOTTOM: 0px solid; HEIGHT: 214px" alt="Post a Message" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/link.png" border=0></A></p>
teedoff
09-20-2011, 08:09 PM
ok First, is the above code your complete html?
Ejean91
09-20-2011, 08:32 PM
Yes it is, and this wont be public, just on the intranet

updated the code.

error in iex:

line 126
char: 3
Error: object expected
code: 0
url: (address of the test html file)

in notepad++, line 126 appears to be this:
$(document).ready(function(){
teedoff
09-20-2011, 11:37 PM
Yes it is, and this wont be public, just on the intranet

updated the code.

error in iex:

line 126
char: 3
Error: object expected
code: 0
url: (address of the test html file)

in notepad++, line 126 appears to be this:
$(document).ready(function(){

You do have some invalid html. Dont think that's your issue, but you have your styles outside your head section.

Now, refardless of that, it seems a moderator moved your thread to the js forum, which is where I was thinking it should be.
Kor
09-21-2011, 01:13 PM
To avoid any possible mismatch, try to organize your HTML document with separate HEAD and BODY sections (even if, theoretically, those elements are not strictly required):

Doctype
HTML
HEAD
/HEAD
BODY
/BODY
/HTML

Keep the javascript and CSS codes (external or embedded) within the HEAD section. Write the HTML content within the BODY section.
Ejean91
09-21-2011, 02:29 PM
ok i'll try that to see if it works. But every time i try to wrap my code in head and body tags it tends to not know what the hell im talking about and gets rid of it in my WYSIWYG 'ckeditor'. I'll let you know how it goes when i try to change it through notepad++. (but i think there's an error in the javascript somehow, but i don't know what the hell to change on it.)

*edit* that didn't solve the problem. Unless I did it wrong, which i'm pretty sure I didn't..
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset=utf-8 />
<title>Manager's Collaboration Portal</title>


<style type="text/css">
body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:0px solid #416CE5;}
h2{font-size:13px; margin:15px 0 0 0;}
body
{
background-color:black;
width: 1231px;
height: 902px;
}
div.BACKGROUNDD {
position: middle;
top: 100px;
left: 40px;
width: 1231px;
height: 902px;
}
div.NQRBUTTON {
position: absolute;
top: 320px;
left: 250px;
width: 80px;
height: 80px;
}
div.IDPBUTTON {
position: absolute;
top: 320px;
left: 330px;
width: 81px;
height: 81px;
}
div.CTBUTTON {
position: absolute;
top: 319px;
left: 405px;
width: 80px;
height: 80px;
}
div.KBBUTTON {
position: absolute;
top: 323px;
left: 485px;
width: 77px;
height: 77px;
}
div.QFBUTTON {
position: absolute;
top: 323px;
left: 568px;
width: 81px;
height: 81px;
}
div.SCBUTTON {
position: absolute;
top: 323px;
left: 653px;
width: 80px;
height: 80px;
}
div.IDPBUTTON1 {
position: absolute;
top: 323px;
left: 733px;
width: 80px;
height: 80px;
}
div.KBBUTTON1 {
position: absolute;
top: 423px;
left: 250px;
width: 80px;
height: 80px;
}
div.QFBUTTON1 {
position: absolute;
top: 423px;
left: 330px;
width: 80px;
height: 80px;
}
div.SCBUTTON1 {
position: absolute;
top: 423px;
left: 405px;
width: 80px;
height: 80px;
}
div.Linkbutton {
position: absolute;
top: 635px;
left: 995px;
width 220px;
height: 214px;
}
div.container {
position: absolute;
width: 1231px;
height: 902px;
margin: 0 auto;

text-align: left;
}
table.center {
position: absolute;
width: 1231px;
height: 902px;
margin-left:auto;
margin-right:auto;
}
table#table1 {
width:70%;
margin-left:10%;
margin-right:15%;
} </style>
<script src="js/jquery.min.js"></script><script src="js/jquery.colorbox.js"></script><script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".example5").colorbox();
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".example7").colorbox({width:"80%", height:"80%", iframe:true});
$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
$(".example9").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
</head>
<body>
<table border="0" class="center" id="table1" style="width: 1231px; height: 902px">
<link href="css/colorbox.css" media="screen" rel="stylesheet" />

<tbody>
<tr>
<td>
<div class="Backgroundd">
<img border="o" height:="902" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/bg.png" width:="1231" /></div>
<div class="NQRBUTTON">
<a href="http://www.google.com"><img position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/nqrbut.png" style="border-right: 0px solid; border-top: 0px solid; border-left: 0px solid; width: 80px; border-bottom: 0px solid; height: 80px" /></a></div>
<div class="IDPBUTTON">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/idpbut.png" width="80" /></div>
<div class="CTBUTTON">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/ct.png" width="80" /></div>
<div class="KBBUTTON">
<img border="0" height="78" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/kb.png" width="78" /></div>
<div class="QFBUTTON">
<img border="0" height="78" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/qf.png" width="78" /></div>
<div class="SCBUTTON">
<img border="0" height="81" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/scbut.png" width="81" /></div>
<div class="IDPBUTTON1">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/idpbut.png" width="80" /></div>
<div class="KBBUTTON1">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/kb.png" width="80" /></div>
<div class="QFBUTTON1">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/qf.png" width="80" /></div>
<div class="SCBUTTON1">
<img border="0" height="80" position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/scbut.png" width="80" /></div>
<div class="Linkbutton">
<a class="example7" href="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/Lists/Team%20Discussion/AllItems.aspx"><img position="absolute" src="https://bfsiteportal/sites/DepartmentCommunities/InvestorServices/ISMC2/images/link.png" style="border-right: 0px solid; border-top: 0px solid; border-left: 0px solid; border-bottom: 0px solid; height: 214px" /></a></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

http://colorpowered.com/colorbox/core/example1/index.html
^
The outside webpage (iframe) colorbox is the one i'm trying to use but i keep getting nothing out of it! I'm trying to use a picture rather than a text to call the javascript.
xelawho
09-21-2011, 02:47 PM
hello.

I don't know if this will help, but the error "$(document).ready(function(){" refers to jQuery. I know because I have gotten it in the past when I have not loaded the jQuery file into the right folder :o

from the looks of it, I suspect that when you are referencing external files in the head section, they should be like this:

<script type="text/javascript" src="../js/jquery.min.js"></script>

instead of this:
<script type="text/javascript" src="js/jquery.min.js"></script>

but really that's just a guess - I assume you are accepting guesses at this point?
Ejean91
09-22-2011, 02:39 PM
hello.

I don't know if this will help, but the error "$(document).ready(function(){" refers to jQuery. I know because I have gotten it in the past when I have not loaded the jQuery file into the right folder :o

from the looks of it, I suspect that when you are referencing external files in the head section, they should be like this:

<script type="text/javascript" src="../js/jquery.min.js"></script>

instead of this:
<script type="text/javascript" src="js/jquery.min.js"></script>

but really that's just a guess - I assume you are accepting guesses at this point?


At this point, guesses are better than nothing! thanks, i'll update what happens.

*update* didn't work... i'm beginning to think that iframe lightboxes wont work on a hyperlinked picture within a table

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum