Sharepoint 2010: Controlling the WYSIWYG with script - javascript

SharePoint is a beast and seems to stomp on everything. Customizing the front-end with javascript has gone well, but now I would like to provide my content owners with more back-end controls. However, any changes made to objects in the WYSIWYG editable area at $(document).ready are immediately reverted by SharePoint.
I imagine this has to do with that "content" not really existing there, but being a copy of hidden input fields. Does anyone know how to get some control of this area? I would love to be able to insert or modify "page content" under the control of scripts, but SharePoint documentation is so terrifyingly sparse.
*EDIT: It appears as though content which is inserted "late" (as in html which is inserted by a click event well after page load) will stick. Anything done at doc.ready or window.load however is rinsed before the area is relinquished to user control.

Sharepoint does a lot of "Sanitizing" of Content entered into some HTML Fields or Content Editor Web Parts sadly. Can you edit the Master Page through SharePoint designer and stick your JavaScript in there?
Also look at ExecuteOrDelayUntilScriptLoaded or _spBodyOnLoadFunctionNames.push()

Related

Excerpt of client-side javascript shows up as text in body of Wordpress page

We're developing a plugin for a client on a Wordpress site. And, for some reason, an excerpt of the clientside javascript of the plugin appears as raw text in the body of the page.
Here is an image of the page with its markdown:
Entire shortcode script:
<?php
/*
Plugin Name: Cata Employee
Plugin URI:
description: Employee Viewer
...
https://pastebin.com/iFiJT0rM
strangely enough, even when removing the clientside javascript, the script still appears as text on the page after a couple refreshes. My guess is it's something cached, and my coworker suggested it's being caused by SEO stuff of some sort.
What we've tried:
Changing the plugin from a Cornerstone Element to a Shortcode
Adding a function to the script that hides the text (only some of the lines of the text are in targetable elements, and they share a direct parent with the plugin itself, so we can't just hide the whole tree)
Making the plugin the only element on the page
Might seem redundant, but desired behavior needs to be explicitly stated:
Observed Behavior:
A snip of the clientside javascript appears as text on the page
Desired Behavior:
Not having a snip of the clientside javascript appear as text on the page
Any advice or solutions would be greatly appreciated; we really have no idea what's causing this

how to add custom javascript to google sites?

How do I get the ability to add/edit the JS on a google sites site? This way I want to use jQuery and jQuery UI to manipulate the look and feel of the site.
To be clear, I am not talking about all google sites, just the create-your-own system google has made, called "Google Sites" -> https://sites.google.com/.
On the howto page, there is this:
Unsupported features
The HTML Box tool currently doesn't support the following features:
iframes JavaScript code can't create any script, image or link tags
Document/window onload and onready functions. You can place any
JavaScript at the end of code that needs to load after the document
loads.
Does that mean HTML tool cannot create tags? even though they are in the demo above?
The Google Sites help explains how to add custom HTML/CSS/JS content:
Go to the Google Sites page that you’d like to embed HTML in.
Go to the Insert menu and select HTML Box.
In the dialog that opens, add HTML, CSS and/or Javascript code.
When you’re done, click Save.
To preview your embedded HTML, click Save on the Google Site page.
It goes on to note that "code from one HTML box can’t interact with or refer to code outside of the HTML box, including other HTML boxes" -- presumably, each "HTML box" is a separately sandboxed iframe element. As such, your ability to use JS to "manipulate the look and feel of the site" will be pretty limited.
Another alternative is writing your own Gadget
"Gadgets are small web applications that can be added to web pages. Gadgets are XML files that typically wrap HTML and JavaScript" as explained by a Google Sites Guru that goes by the name Mori.
https://sites.google.com/site/mori79/html-gadgets
You can also find more information in Google Developers site:
https://developers.google.com/google-apps/sites/gadgets/site_gadgets?hl=en
Hope it helps.
Google Site has a good documentation, and you cannot use any JavaScript against their program policy.
Please read the documentation, it lists details of the steps for inserting custom CSS, JavaScript and general HTML.

Javascript render (visitors) and html render (bots). Is legal? SEO

I have an aspx application.
In every GET the server respond with a "basic" html containing everything except table grids.
This "grid information" is contained in a input type hidden (json format) in the page.
This is by design and cannot be changed.
A normal visitor wil see the page HTML:
head, body, scripts, meta tags
text, labels, inputs...
<div id='gridcontainer'></div>
more html
more html
Then onpage load I render dynamically by using javascript a table inside div (gridcontainer).
So after onload event is executed, the user see also the table grid inside div.
In this situation google is not indexing the information in tabular grids, because it is rendered by javascript after page load.
The application has the ability to render the exact same content in HTML without using javascript (loosing some functionality). When I say the same exact content I really mean the same page (same content, same headers, same metatags, same title), but not being render by javascript.
The content length may be diferent if we compare both responses because HTML responses might be bigger than html + json + javascript.
This is what I want the spider to see:
head, body, scripts, meta tags
text, labels, inputs...
<div id='gridcontainer'>
<table> table row 1, table row2.....<table>
</div>
more html
more html
To sum up, I want to deliver the "HTML" version to spiders and the other (javascript rendered) to visitors.
Is this cloaking?
This may be dangerous to search engines or is a total legal method if the content I am displaying is totally the same (no tricks).
Thanks in advance!
If the content is basically the same and a human viewer would say that it's the same content, then it's legal. I know of a fairly major site that does this with Google's blessing. Any site that has a page that is largely generated with client-side JS has to do something like this for Google to see anything useful. Since Google doesn't currently evaluate Javascript, there is no other choice for a page that use JS-generated HTML.
I don't know if there's a way to get Google's blessing to avoid any accidental penalty.
The important point is that the actual content of the page needs to be the same. The details of the formatting does not have to be identical.
Note: For legal advice, contact a lawyer.
Yes, this is 'cloaking'.
Yes, it's morally questionable.
But No, it isn't illegal. *(subject to the disclaimer at the top of this answer)
But either way don't do it, because Yes, Google will kill your rankings if they catch you trying to serve content to them which the user doesn't get to see.
If you use progressive enhancement you won't have any issues at all. What you would do is serve the HTML version so users who don't have JavaScript enabled can still see the content. Then add JavaScript that, when the page loads, removes the current HTML and adds the enhanced version of that same content. They key is that the content is the same, just the experience is different due to lack of JavaScript capabilities. This will never get you in trouble with the search engines and is great accessibility. Accessibility is one of the main tenants of SEO.

Facebook likes Not Working when javascript add

So i am trying to add a like to my individual posts. So i added this to each of the posts. The posts are generated from database output then assembled with the properly styling in a javascript file.So i added this to the creation mix.
<fb:like href="my_not_so_sweet_website" layout="button_count" show_faces="true" width="200"></fb:like>
Weird part is... None of them show up. THEN i try taking that code that i generated for each post and just copy and paste it to the top of my website, and low and behold A like Button!!!. Any clues? Need more info? Help?
You are using what's called FBML. The like button is rendered on the fly (well, on page load) by a facebook javascript libabry you include on the page- it needs the FBML tags to know what to render.
The problem is that the FB library isn't smart enough to know that you've dynamically added these FBML tags to the DOM.
There is another type of like button that's an iframe, that one should work if you put it in the DOM dynamically. Docs for that are here: http://developers.facebook.com/docs/reference/plugins/like/
-when you enter your info into the widget there will be an option for iframe.
There is also a FBML render function in the FB javascript SDK. Docs are here: http://developers.facebook.com/docs/reference/javascript/fb.xfbml.parse/

Editing Facebook Like-Box Css on The FLy?

I am not a coder but, i am able to get my way around code most of the time. However, i found that this is the best place to ask questions relating to code stuff.
I have been working on a website for a client and i am at 95% - the only problem i have is facebook like-box. i have found several tutorials on the web to modify the like box css, and i have implemented most of the recommendations but, i have no favorable results.
Please - stackoverflow help!
I know jquery/javascript is a very powerful language. And facebook like uses javascript iframe/xfbml.
what code would you use, if you were to modify the like box css elements before loading them .
I say load cos i am loading my like box via ".load" ajax. So, when a user clicks the facebook button jquery loads it.
In short: how would i edit a css file on the fly, and then load the edited version afterwards.
thanks
The key problem that you'll have here is that FB's Like button is loaded inside an iframe - a self-contained HTML document within your page (if you use firebug or webkit inspector to inspect the like button, you'll see it's within <body>, <html>, then <iframe>).
The thing about these self-contained pages is that you can't access or manipulate them from the surrounding document (your page). You can change the 'src' attribute (telling the iframe to load a new page), but you can't apply or change styles on the elements inside the page. This is a security limitation that browsers have.
I know that it is possible to have a custom-styled like button, but I don't think it's done with the iframe method.

Categories