How to make my web to open at certain scroll height - web

My web's important content is at 300 pixels from the top so I want it to open directly at that height giving the user the option to scroll up if they want.
Which is the easier way to achieve this?

I found one alternative. I create an anchor and then make it load directly to it. I didn't want to use anchors but as no one answered me...
<body onload="location.href ='#home'">
<a id="home"></a>
EDIT: Here's what i was looking for!!
<script type="text/javascript">
function Scrolldown() {
window.scroll(0,100);
}
window.onload = Scrolldown;
</script>

Related

modify the appearance of the page

I've never worked before with SharePoint, that's why maybe my question is so basic but I could't find out the way to do this.
This picture contains what I've done so far.
I'm working with a SharePoint where I don't have all the administrator permitions, that's why I don't if teh option I need is disabled or just I can't find it.
You can see I have my page divided into 3 parts:
-the Left section, where I have a scheme of what i have in the middle.
-the Middle seccion, where I have the buttons.
-The Right section, this section I don't really need it so I want to delete it but I couldn't find the way to do it, and although I dont have anything there, It have a blank.
This is all the options I have in configuration:
We can add the code below into script editor web part to remove the right web part zone.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div[zoneTitle='Right']").closest("tr").children("td").eq(0).attr("width","100%");
$("div[zoneTitle='Right']").closest("td").hide();
})
</script>
Or we can use CSS style to hide the Right section.
<style>
div[zoneTitle='Right']{
display:none;
}
</style>

Executing <Script> elements injected into the DOM

I've been attempting to add the Google Tag Manager script to a website developed with Squarespace. Unfortunately Google implementation guidelines specify that this script should be inserted immediately after the opening <body> tag, something Squarespace doesn't permit.
Consequently, I've been playing around with YUI library to attempt to inject this code to where it is required. And have this:
<script>
Y.use('node', function() {
Y.on('domready', function() {
obj = Y.Node.create('<!-- Google Tag Manager --><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-KPT4S5" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>'+'<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({\'gtm.start\':new Date().getTime(),event:\'gtm.js\'});var f=d.getElementsByTagName(s)[0],'+'j=d.createElement(s),dl=l!=\'dataLayer\'?\'&l=\'+l:\'\';j.async=true;j.src=\'//www.googletagmanager.com/gtm.js?id=\'+i+dl;f.parentNode.insertBefore(j,f);'+'})(window,document,\'script\',\'dataLayer\',\'GTM-KPT4S5\');<\/script><!-- End Google Tag Manager -->');
Y.one('body').prepend(obj);
});
});
</script>
The code above will inject the Script where required, but it wont execute it. Could someone help identify why and possibly suggest a solution please?
Incidentally, I know I can achieve this with jQuery, but I dont wish to load any additional libraries.
Many thanks.
N.B Apologies, I wasn't clear in my original post. I dont have access to the source code in Squarespace and I need to insert the GTM script directly after the opening <body> tag. I can insert scripts into the <head> in Squarespace so my attempt was to inject GTM code to the <body> from there.
You can use document.write to execute the inline script code that you've inserted as DOM text. So instead of
<script>
Y.use('node', function() {
Y.on('domready', function() {
obj = Y.Node.create('<!-- Google Tag Manager --><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-KPT4S5" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>'+'<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({\'gtm.start\':new Date().getTime(),event:\'gtm.js\'});var f=d.getElementsByTagName(s)[0],'+'j=d.createElement(s),dl=l!=\'dataLayer\'?\'&l=\'+l:\'\';j.async=true;j.src=\'//www.googletagmanager.com/gtm.js?id=\'+i+dl;f.parentNode.insertBefore(j,f);'+'})(window,document,\'script\',\'dataLayer\',\'GTM-KPT4S5\');<\/script><!-- End Google Tag Manager -->');
Y.one('body').prepend(obj);
});
});
</script>
You can do
<script>
document.write('<!-- Google Tag Manager --><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-KPT4S5" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>'+'<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({\'gtm.start\':new Date().getTime(),event:\'gtm.js\'});var f=d.getElementsByTagName(s)[0],'+'j=d.createElement(s),dl=l!=\'dataLayer\'?\'&l=\'+l:\'\';j.async=true;j.src=\'//www.googletagmanager.com/gtm.js?id=\'+i+dl;f.parentNode.insertBefore(j,f);'+'})(window,document,\'script\',\'dataLayer\',\'GTM-KPT4S5\');<\/script><!-- End Google Tag Manager -->');
</script>
Edit: If the JS is from a third party source that you don't have access to, you need to execute the inline JS code yourself through eval. You can do something similar to this
<script>
Y.use('node', function() {
Y.on('domready', function() {
obj = Y.Node.create('<!-- Google Tag Manager --><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-KPT4S5" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>'+'<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({\'gtm.start\':new Date().getTime(),event:\'gtm.js\'});var f=d.getElementsByTagName(s)[0],'+'j=d.createElement(s),dl=l!=\'dataLayer\'?\'&l=\'+l:\'\';j.async=true;j.src=\'//www.googletagmanager.com/gtm.js?id=\'+i+dl;f.parentNode.insertBefore(j,f);'+'})(window,document,\'script\',\'dataLayer\',\'GTM-KPT4S5\');<\/script><!-- End Google Tag Manager -->');
obj.id="googleTag";
Y.one('body').prepend(obj);
Y.one('#googleTag').all('script').each(function(s, k) {
var scriptSrc = s.getHTML();
eval(scriptSrc);
});
});
});
</script>
Though this question is a bit older, it is possible to add Google Tag Manager's code in the Code Injection section of Squarespace in the "footer" area.
With administrator access, choose:
Settings -> Advanced -> Code Injection
Place your GTM script in the header and the <noscript> stuff in the footer.
I know this doesn't solve the particular point about getting it immediately after the opening <body> tag, but I have seen this proposed (and used it myself on a few client sites that were done in Squarespace).

unable to set fixed position for a DOM element using Html Service

I created a script to publish the following html page using Html Service:
<html>
<div id="fixeddiv"></div>
<script>
var div=document.getElementById("fixeddiv");
div.style.position="fixed";
alert(div.style.position);
</script>
</html>
The alert window shows an empty string.
Isn't possible to set a fixed position for a div element?
I just ran into the same thing and the answer appears to be NO. Apparently they're worried fixed divs are a security exposure.
Next thing they'll be wanting to remove the keys from our keyboards too ;-)
I used this to get a 'fixed' effect for a global navbar at the top. It might be of use to you or others.
$(document).ready(function() {
$( window ).scroll(function() {
$( '.fixed' ).css('top', $( this ).scrollTop());
});
});
Note: in GAS the $( window ).scroll() wasn't working for me so I instead created a div block the size of the view port with a scroll bar overflow and used that instead.
I've found another 'solution' for this:
I created 2 divs, fixedHeader and content
<div id="fixedHeader"></div>
<div id="content"></div>
The css code, where we set #fixedHeader to be always on top and for #content we set a padding-top matching the height of #fixedHeader so the elements won't get under #fixedHeader:
#fixedHeader {position:absolute; top:0;}
#content {padding-top:50px; overflow:auto;}
And finally javascript to make #contet match the height of the viewport when document loads:
$(function(){ $("#content").css('height',window.innerHeight); }
Hope it helps
It appears that position:fixed is not allowed due to security concerns: http://code.google.com/p/google-apps-script-issues/issues/detail?id=1840

Is there a simple way to embed a MathJax formula to webpage?

If MathJax can export formula as image, I can use to insert it to a webpage easily. Unfortunately, current MathJax don't support to export image! :(
Is there a simple way to create a embeded code to show formula just like Twitter above? If you have, could you show me some sample codes? Thanks!
< href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="my">Tweet
< script type="text/javascript" src="//platform.twitter.com/widgets.js">
See my response to this question on the MathJax user's forum.
MathJax does not have image creation capabilities, and I don't know of a way to
make that possible from Javascript (a quick web search suggests it is not readily doable).
If you are looking to convert TeX to images, there are plenty of tools for doing that
already. You could, for example, use TeX with dvipng, or one of the tools designed for
that like the LaTeX Equation Editor or Laeqed applications. There are a number of
on-line tools for doing this as well.
This question is already kinda old. But was searching for something like this myself. Apparently there are some Tex Rendering Services Available.
Take a look at this Answer:
https://meta.stackexchange.com/questions/53436/implement-an-api-call-to-display-latex-as-inline-image
Try this
<html>
<head>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</head>
<body>
$$e = mc^2$$
</body>
</html>
http://jsfiddle.net/16h1hjot

setting width of column - sharepoint

I have a sharepoint list and the phone number field is in the format ###-###-#### and it ends up going to 2 lines. How can I set a width on that particular column? Do I need to do it from sharepoint designer?
there is no way to do this out of the box. Have to use sharepoint designer or jquery. Check out this msdn post
http://social.msdn.microsoft.com/Forums/en-US/sharepointcustomization/thread/f99303bb-6a95-4c05-951c-ff0185c4e864
This can be done via the xsltlistform webpart. drop it into the page in sharepoint and connect it to your list and move the columns around as needed.
Note: this is not the same as modifying the view, which as titan said is not available out of the box without opening the view page in sharepoint designer and modifying the xslt directly.
Best way is to use Alt+0160 Hard Space. Just type it once and copy this "Space" and paste as many you want!! Bingo!!
In SharePoint Designer 2010 I was able to modify column widths by opening the view I wanted to adjust, then lengthening the with of the column Title Field simply by dragging the field's box bigger.
This worked for what I was doing, but I noticed with some columns it affected others, I guess because they shared the same styling? I don't know enough to be certain.
<style>
/* new class created */
.ms-longg
{
width:500px
}
</style>
<script type="text/javascript">
$(document).ready(function(){
//removed existing class
$('input[title^="State"]').removeClass('ms-long');
//add New class for that textbox
$('input[title^="State"]').addClass('ms-longg');
});
</script>
Click here see more details
you can also use the below script to expand the width of specific column. Just edit the page then add script editor web part and add below code.
note: the column name is the internal name.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">/script>
<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
var el = document.getElementsByName("<internal column name>");
el[0].style.width ="<size>";
});
</script>

Resources