Adding html codes to SharePoint Online - javascript

is it possible to add html codes to SharePoint Online?
I would like to add a html code from Statista such as the following:
<img src="https://www.statista.com/graphic/1/262861/uk-brent-crude-oil-monthly-price-development.jpg" alt="Statistic: Average monthly Brent crude oil price from July 2018 to July 2019 (in U.S. dollars per barrel)* | Statista" style="width: 100%; height: auto !important; max-width:1000px;-ms-interpolation-mode: bicubic;"/><br />Find more statistics at Statista
As far as I know only iframe based codes can get entered to SP Online. However, Statista only provides the above mentioned version.
Is there any possibility to add these codes to SP Online?
Please note that I am really not familiar with such codes.`
Thanks in advance
Markus

Only way you can do this OTB is by saving your HTML code as a .aspx page, uploading it into a document library and then using the 'Embed' webpart.
terribly annoying as you have to edit your code separately, but this will allow any/all completely custom code (HTML/CSS/JS) to be inserted into the page.

It's not supported to add html codes in SharePoint modern page. However, you could achieve this in classic page.
Go to Pages library, create a classic page.Click Edit Source in the ribbon and add the code.

We can deploy react script editor web part to your site, then add the HTML code into this web part in modern site page. In classic site page, we can use the OOTB script editor web part to achieve it.

If you have a standard Sharepoint page - click the add button to add a new element and then select "Code Snippet". You can then paste the code there. You may run into some permission issues depending on your setup however.

Related

How to make a link between Javascript put in the HTML code with Style.css?

Creating an application allowing to calculate the heart rate thanks to a connected watch. I use the Tizen studio software to make this project and I used the model "HeartRateSensor". I then modified lines to make him correspond with my project. I need to post the hour and for it I integrated an end of code into Javascript in the HTML code:
My question is how to personalize this hour? (Position on the screen).
How to make a link of this code in Javascript put in the HTML code with Style.css?
You can try creating an empty element in your HTML. Set an ID for it.
For example div id="hours"
Then edit first line of your JS code to
var today = document.getElementById("hours");
Then in your style.css you can edit the "#hours"
The same way as with any HTML based project. Add CSS files and reference those in your index.html.
Alternatively you can put style declarations in your DOM elements, such as style="background-color: black" and so on.
There is no difference between Tizen and any other HTML page with respect to this question. If you do not know how to use CSS, then read up on it. Google is your friend.

how to scrape a page with javascript effects

I am new to web scraping and so far I only know how to scrape basic html page using python beautiful soup. What I want is to extract the information on this page. Specifically, I would like to get the following data from all the fellows (around 700 of them)
name
background
insight project
current employer
However, that page is rendered by javascript and the desired information only show up as a separate box when mouseover event is triggered on each fellows picture.
How to extract text in this case? Any information (books, web resources) is appreciated. Python solutions are preferred if possible. Many thanks.
Check the page source of the website.
The information is already present in the in the DOM, just hidden using CSS. On a first glance, it seems like the JavaScript logic is only doing CSS manipulations.
The fact that the information is hidden by CSS will not prevent you from scraping it from the source using a web scraping tool.

editable picture and text in dashboard

I'm developing a dashboard that end-users can edit specific web page by uploading different picture and editing text in the page. The similar ideas is here.
I'd already done with web page design and I'm looking for suitable js library to make editable dashboard for end-users. Anyone has suggestions for that or if no current solution => how to implement these features? no idea about that ...
Very Thanks!
You can have a look on :
http://madebymany.github.io/sir-trevor-js/
http://innovastudio.com/content-builder.aspx
http://etchjs.com/
http://jakiestfu.github.io/Medium.js/docs/
http://createjs.org/
http://www.jqueryrain.com/demo/jquery-wysiwyg-editor/
and use the one(s) that most suit you. In case you did not find the one that completely suits to your project then you can make additions (such as adding modal windows or css styling) to hte one(s) which is more preferable.
Hope this was helpfull.

Display live HTML/Javascript demo in web page embedded

I have a blog hosted freely on blogger. I want to show some html live demo, as my tutorial is about javascript and html. Can anyone suggest, how it can be done, i have to display sample javascipt page based on Extjs.
It should be embedded inside the post, like how we paste the code using code syntax highlighter.
Something similar to this demo: http://docs.sencha.com/touch/2-0/#!/api/Ext.form.Panel
Edit-1
As per #Circadian, i have used jsFiddle.net but it is giving entire code too, as shown in the image attached. But I don't want to share my entire code. Any other better suggestions? .
Thanks in advance.
jsfiddle offers iframe embedding and supports Extjs
edit:
then have a look at using github gists

Hot to build a SEO friendly JavaScript menu that is used in over 20 pages

I built a javascript menu list from a xml file and has used it as the navigation menu in over 20 pages.I used jQuery's ajax functoinality to implement this,the reason I used this technique was because if there is an update in the menu list I only have to edit the xml file for the changes to reflect in the menu list. I only realized later the technique I have used is not SEO friendly,since SE doesnt index dynamic Javascript content.Saying that I have provided a fall back for users that have diabled their java script by linking the xml file to a object tag in a noscript tag
<noscript>
<div>
<object data="menu/Menu.xml" type="all"></object>
</div>
</noscript>
Im not too sure if this is SEO friendly.
So my question really is how do one go about creating a menu list that is user friendly and that can be updated easily? If questions similar to mine have been answered before please point me to the links.I have done some searching and was not happy with the results I found but Im still looking for answers.
JavaScript is not SEO friendly. Anyway, you should be using a server side programming language like PHP's includes or Server Side Includes to do this.

Categories

Resources