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 13 of 13
  1. #1
    New Coder
    Join Date
    Sep 2011
    Location
    Braintree, Massachusetts
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts

    New here, Need some help immediately!

    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):

    Code:
    <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%2FMessages&amp;ContentTypeId=0x012002009E73B71E51BD5A4487B5BA4453025B6C&amp;Source=https%3A%2F%2Fbfsiteportal%2Fsites%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.)
    Code:
    <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%20Analysts%2fNQR%20Reports%20%2d%20Names%20Included&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=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%2fCommand%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%20Analysts&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.
    Code:
    <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.

  • #2
    New Coder
    Join Date
    Sep 2011
    Location
    Braintree, Massachusetts
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,711
    Thanks
    41
    Thanked 191 Times in 190 Posts
    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.

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

  • #5
    New Coder
    Join Date
    Sep 2011
    Location
    Braintree, Massachusetts
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Attached Thumbnails Attached Thumbnails New here, Need some help immediately!-screenshot.jpg   New here, Need some help immediately!-screenshot10.jpg.jpg  
    Last edited by Ejean91; 09-20-2011 at 05:02 PM.

  • #6
    New Coder
    Join Date
    Sep 2011
    Location
    Braintree, Massachusetts
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    *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.
    Code:
    <!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)


    Code:
    <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>
    Last edited by Ejean91; 09-20-2011 at 08:39 PM.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    ok First, is the above code your complete html?
    Teed

  • #8
    New Coder
    Join Date
    Sep 2011
    Location
    Braintree, Massachusetts
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:
    Code:
    		$(document).ready(function(){
    Last edited by Ejean91; 09-20-2011 at 08:45 PM.

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Ejean91 View Post
    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:
    Code:
    		$(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.
    Teed

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #11
    New Coder
    Join Date
    Sep 2011
    Location
    Braintree, Massachusetts
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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..
    Code:
    <!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/cor...le1/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.
    Last edited by Ejean91; 09-21-2011 at 02:59 PM.

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    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

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

    Code:
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    instead of this:
    Code:
    <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?

  • #13
    New Coder
    Join Date
    Sep 2011
    Location
    Braintree, Massachusetts
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    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

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

    Code:
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    instead of this:
    Code:
    <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
    Last edited by Ejean91; 09-22-2011 at 02:51 PM.


  •  

    Posting Permissions

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