I am using a script that adds scollbars to a doc library webpart which works fine on sites using the "default.master" system master page, but once I attempt to use my custom master page it breaks the jquery and the scrollbars do not appear.
Any idea on what I can look at in my custom master page to fix this? I am using a CEWP and not directly including the jquery inside my master page.
scollbar script (just in case)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"
type="text/javascript"></script>
<style type="text/css">
<!--
.DataGridFixedHeader { position: relative; top: expression(this.offsetParent.scrollTop);}
-->
</style>
<script type="text/javascript">
$(function(){
var $table = $("TABLE[ID^='onetidDoclibViewTbl0']",
"#MSO_ContentTable");
<!--WRAP TABLE IN SCROLL PANE-->
$table.wrap("<DIV style='OVERFLOW: auto; HEIGHT: 250px'></DIV>");
<!--FROZEN HEADER ROW-->
$("TR.ms-viewheadertr:first", $table).addClass("DataGridFixedHeader");
});
</script>
Did you check the browser console to see if the jquery is being correctly loaded? Or if there is another script error? This script seems to be fine but if you have a script error on the page before this it will never be loaded.
Related
How can I scroll to a certain anchor tag inside the IFrame page?
Using the ingenious Iframe-Resizier Library by David J. Bradshaw
https://github.com/davidjbradshaw/iframe-resizer
I’m including an IFrame with a lot of content (=long page) inside the outer page. So if I link to the page, then much of the content isn't visible on the first screen and under certain circumstances I would like to jump to a specific anchor tag further down in the iframe.
<html>
<a href=“outer-page.html#somewhere_name” />
</html>
seems not to work
I am using "inPageLinks: true" like this:
<script type="text/javascript">
iFrameResize({
heightCalculationMethod: 'lowestElement',
inPageLinks: true
</script>
My question now is: How can I make the outer page scroll down to a certain anchor tag without the need to implement something new inside the iframe page? The anchor tag in this case is located inside the IFrame page.
When I include the IFrame page like
<html>
<iframe id=“strytl” src=“iframe-page.html#somewhere_name”></iframe
</html>
Then the (re)sizing of the IFrame seems not to work perfectly and contents at the top of the iframe are getting cut off.
But with moveToAnchor it works perfectly from inside the IFrame and the page is magically scrolling down to the anchor tag. So in the iframe page I can call:
<script type="text/javascript>
parentIFrame.moveToAnchor('somewhere_name’);
</script>
But how can I trigger this from the parent page?
<script type="text/javascript>
$('iframe#strytl').iFrameResize({moveToAnchor: 'somwhere_name'});
</script>
results in this error:
<script type=“text/javascript”>
[iFrameSizer][Host page: strytl] Ignored iFrame, already setup.and
</script>
And
<script type="text/javascript">
iFrameResize({
heightCalculationMethod: 'lowestElement',
inPageLinks: true,
moveToAnchor: 'somewhere_name'});
</script>
seems to have no effect at all.
(In this case the outer page and the iframe have different server names.)
<script type=“text/javascript”>
var myFrm = document.getElementById('strytl');
var myCw = myFrm.contentWindow;
myCw.parentIFrame.moveToAnchor(‘somewhere_name’);
</script>
result:
<script type=“text/javascript”>
Error: Permission denied to access property “parentIFrame"
</script>
Can I jump to an anchor in the iframe from the outer page at all?
Something like this.
<script type="text/javascript">
iFrameResize({
heightCalculationMethod : 'lowestElement',
inPageLinks : true,
initCallback : function (iFrame){
iFrame.iFrameResizer.moveToAnchor('someAnchor');
}
});
</script>
I am using primefaces schedule, i want to change the color of event header which is saved in DB,
scheduleEvent.setStyleClass(".event-consultation .fc-event-skin .fc-event-head");
using this class i want to change the background-color property with the color saved in DB. how can i change color got from db here?
I don't try it, but I guess the following should work:
<style type="text/css">
.yourclass .fc-event-inner{
background-color: #{yourBackBean.backGroundProperty};
}
</style>
....
scheduleEvent.setStyleClass("yourclass");
This way, you specify in-page CSS style that set as color-background the value of a backBean property that you previously loaded from DB.
Of course, you can create an application scope backBean and hardcode the EL in an external CSS file. Your choice.
Hope it helps!
Edit to clarify
You have to put the <style> html node inside <h:head>. I just tested it in a project to change background color of a <p:menuBar> this way:
<h:head>
... some stuff of mine, not relevant
<style type="text/css">
.ui-menubar,.ui-menu-child,.ui-menu {
background: #{sessionBean.bckgColor} !important;
}
</style>
</h:head>
And it works like a charm. I don't know what css style do you have to adapt to custom the event component of <p:schedule>, I am telling you how to write a custom CSS reading values from DB or whatever, using EL.
Maybe you need to use !importan css attribute to override original values as I did.
I've been trying to get an extremely minimal web page using Polymer to simply render in the browser - I'm using a Node/ExpressJS/Jade setup on the server-side of things. My code is as close as it gets to the examples that ship with the Polymer documentation, I think I'm missing something really simple. I'm using Chrome M35.
On the server, I have installed all the Polymer stuff (platform, core and paper) using bower and I've mapped bower_components to be served statically under /static
app.use('/static', express.static(path.join(process.cwd(), 'bower_components')))
I've verified that my server can correctly serve resources such as http://localhost:3000/static/paper-button/paper-button.html – this returns the content of the desired file.
The HTML served by the page is as such:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/static/platform/platform.js"></script>
<title>Authenticate</title>
<link rel="import" src="/static/paper-button/paper-button.html">
<style>
body {
font-family: 'Helvetica Neue';
margin: 0;
padding: 24px;
user-select: none;
transform: translateZ(0);
}
paper-button {
margin: 1em;
width: 10em;
}
paper-button.colored {
color: #4285f4;
fill: #4285f4;
}
</style>
</head>
<body>
<paper-button label="Authenticate" class="colored"></paper-button>
</body>
</html>
This is as close as it gets to the example for the same widget as documented on the Polymer website. In my case, nothing renders. The really odd thing is what is shown in the Network tab of the inspector:
There is a Loader.js script, which I believe gets installed by platform.js, which sends an XHR for the root page itself (the 3rd line). In every other example I see, that loading script starts loading the imported web components. I just can't figure out why it's doing this in my case. The other odd thing is the call originating from Parser.js – the requested data URL is data:text/javascript;base64,Ci8vIyBzb3VyY2VVUkw9bnVsbC9bMTQ1M10uanMK, which translates to: //# sourceURL=null/[1453].js - again, not a very good sign.
I've tried to use relative srcs in my links - to no avail. I'm basically stuck at a very early stage and would really appreciate to be pointed in the right direction.
This is not right:
<link rel="import" src="/static/paper-button/paper-button.html">
It should be:
<link rel="import" href="/static/paper-button/paper-button.html">
Side note: You might also want to use the favicon express middleware to prevent a "suspicious" http request. (If you don't have a favicon in your public root, you'll see an extra http request being handled by express, the middleware will serve the express favicon if you don't have one in your public root.)
We have a need to include long title for Sharepoint's (2007) built in webpart. title runs across and users are having to scroll left to right. Is there a way to introduce wrapping to the web part title? I tried few html tag but they are not working.
You should add this little snippet of css that will override the way the space are rendered in the title (and will thus allow proper wrapping) in either your master page, a separate style sheet or one linked with the master page that you are using (do not edit core.css although)
.ms-WPTitle nobr { white-space: normal !important; }
The easiest way is to include it inline within your master page, you'll have versioning for your master page if you want to roll back this change and it won't require to create another style sheet and attach it in the master page or load it as an alternate stylesheet.
In the relevant master page, at the end of the head tag, add this style overriding
<head>
<!-- ootb head content kept above -->
<style type="text/css">
.ms-WPTitle nobr { white-space: normal !important; }
</style>
</head>
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>