Has anyone gotten the current version of fancybox 2.1.4 (http://fancyapps.com/fancybox/) with jQuery 1.9.1 to work with Microsoft Office SharePoint Server (MOSS) 2007?
Seems like the out of box css/html of MOSS 2007 is interfering with the sizing and positioning calculations that fancybox/jQuery does. The end result is a tiny fancybox (130px width).
Here is a screenshot of the issue:
screenshot of issue http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-54-79-Images/4152.fancyboxIssueInMOSS2007.png
Here is the super simple code I am doing:
MAIN PAGE:
<%# Page language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=12.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<link type="text/css" rel="stylesheet" href="jquery.fancybox-2.1.4_Styles.css" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.fancybox-2.1.4.js"></script>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
Hello from the test page!
<a id="fancyBox1" style="display: none" data-fancybox-type="iframe" href="iframeContents.aspx"></a>
<script type="text/javascript">
$(document).ready(function () {
// show fancyBox
$('#fancyBox1').fancybox().trigger('click');
});
</script>
</asp:Content>
IFRAME PAGE:
<%# Page language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=12.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
Hello from the iframeContents!
</asp:Content>
Thanks for any and all help!
PS-By the way, fancybox works fine in SharePoint 2010. However, I must make it work in MOSS 2007.
SOLVED!!! Thanks JFK.
Yes, the problem was the browser (IE 10 in this case) was running in quirks mode since there was no DOCTYPE present. After I added the DOCTYPE to the master page, fancybox works!
<!DOCTYPE html>
Side note: having the DOCTYPE added to the masterpage actually disrupts out of box MOSS 2007 branding. But it's ok in my case since we will be using custom branding that already does have the DOCTYPE present. I got lucky with that one. Thanks again for the help!
Related
I can't find the source code for the html used for the calendar table. I have the webpart, but not the html for the table. I need to strip the inline CSS and attributes.
Following is the markup for the event calendar (obviously this is what you see):
<%# Control Language="C#" AutoEventWireup="true"
Inherits="CMSWebParts_EventManager_EventCalendar" CodeFile="~/CMSWebParts/EventManager/EventCalendar.ascx.cs" %>
<div class="Calendar">
<cms:CMSCalendar ID="calItems" runat="server" EnableViewState="false" />
</div>
<div class="EventDetail">
<cms:CMSRepeater ID="repEvent" runat="server" Visible="false" StopProcessing="true" EnableViewState="false" />
</div>
So what you see on the live page is created by CMSCalendar control, which leaves in CMS.Controls library, which means you can't modify it unless you have full source code of Kentico.
I'd try to change the appearance of this control with CSS, if CSS doesn't work there is javascript/jQuery.
Have you looked into creating a skin? You can change the css classes used if needed.
Might help some
I am new to SharePoint branding. I want to put a background-image that covers the entire content part of one page. When I put it in the Master page (e.g.,Additional Page Header), it bleeds onto all pages,lists, etc. in the site. How do I do this?
Open the page in sharepoint designer
<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
<style type="text/css">
body {
background-image: url('...');
}
</style>
</asp:Content>
I am trying to make an editable box (kind of a richTextBox) using html5 (contenteditable="true") and jquery. I need to find out position of each element inside the editable div so that I can insert a page break like microsoft word does.
Here is the page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Context Menu Plugin Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#divEdit").keyup(function(){
$.each($("#divEdit").find("*"), function(i,item){
alert(item.position());
});
});
});
</script>
</head>
<body>
<h1>jQuery Context Menu Plugin and KendoUI Demo</h1>
<div style="width:740px;height:440px" contenteditable="true" id = "divEdit">
<p>
<img src="http://www.kendoui.com/Image/kendo-logo.png" alt="Editor for ASP.NET MVC logo" style="display:block;margin-left:auto;margin-right:auto;" />
</p>
<p>
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
accessibility standards and provides API for content manipulation.
</p>
<p id="para">Features include:</p>
<ul>
<li>Text formatting & alignment</li>
<li>Bulleted and numbered lists</li>
<li>Hyperlink and image dialogs</li>
<li>Cross-browser support</li>
<li>Identical HTML output across browsers</li>
<li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
</ul>
<p>
Read more details or send us your
feedback!
</p>
</div>
</body>
The problem is that alert(item.position()) is not fetching anything. The error that comes in firefox developer toolbar is 'item.position is not a function'.
My guess is that it has to do something with the type of each element in $("#divEdit").find("*") as all the elements are different.
Any help would be appreciated.
Thanks
You need to get the jQuery object out of item, as position() is a jQuery method, hence the complain about position() is not a function
$(item).position() // instead of item.position()
Or even more concise:
$.each($("#divEdit").find("*"), function(i,item){
alert(item.position());
}
change to
$('#divEdit').find('*').each(function() {
alert($(this).position());
})
Change this line
alert(item.position());
to
alert($(item).position());
We're trying to use the built in SharePoint spell check functionality but unfortunately it seems that it doesn't allow anonymous users to access the page. I'm calling the spell via the normal JS call:
<SharePoint:ScriptLink ID="ScriptLink1" Language="javascript" Name="core.js" runat="server" />
<SharePoint:ScriptLink ID="ScriptLink2" Language="javascript" Name="bform.js" runat="server" />
<SharePoint:ScriptLink ID="ScriptLink3" Language="javascript" Name="SpellCheckEntirePage.js" runat="server" />
<script language="javascript" type="text/javascript">
function SpellCheck() {
SpellCheckEntirePage('/_vti_bin/SpellCheck.asmx', '/_layouts/SpellChecker.aspx');
}
</script>
Basically it seems that the /_layouts/SpellChecker.aspx page is the issue. I made a copy of the file and moved it to the pages library and referenced it there and it fixed the issue for that page but then it was requiring login for the master page that page uses and some controls. Short of attempting to locate and copy out each referenced page (which I'm not convinced will even work in the first place) I'm not sure what will fix the overall issue.
Am I missing something here or is it just going to not work?
I've created a simple placeHolder for some extra javascript in jQuery - The issue is that the placeHolder is within some script tags and therefore isn't recognized by Sharepoint designer.
The page works correctly, so it hasn't bothered me until now, since you can't touch any part of the design view, without fixing the issue.
My code looks something like this in the master template:
<script type="text/javascript>
$(document).ready(function(){
<asp:ContentPlaceHolder id="PlaceHolderjQuery" runat="server" />
});
</script>
Is there a way to make this work correctly, so that the placeholder is actually recognized by Sharepoint Designer?
Thanks for the help!
I understood that you are trying to call a JavaScript function that is defined inside the PlaceHolder.
But your code wont work as the PlaceHolder is a Server Control and pushing it as a child element of the some other tag wont work. Script tag is a client processing tag. So What I would suggest is to change the logic as below.
In the master page I will have a JavaScript to call a function by default.
<script type="text/javascript>
$(document).ready(function(){
myOnLoadFunction();
});
</script>
And I will define the content Place Holder with a dummy function
<asp:ContentPlaceHolder id="PlaceHolderjQuery" runat="server">
<script type="text/javascript>function myOnLoadFunction(){ //do nothing }</script>
</asp:ContentPlaceHolder>
Now in your content page you can define
<asp:Content ID="javascript" ContentPlaceHolderID="PlaceHolderjQuery" runat="server">
<script type="text/javascript>function myOnLoadFunction(){ alert('Hello jQuery'); }</script>
</asp:Content>