html page as a widget - javascript

Let's say I have a widget that is like a simple interest calculator it is in a file index.html and it has a javascript part (with logic and style). The code uses javascript, html, bootstrap, ajax and chartjs.
How do I make it into a one line widget that i can copy and paste into my wordpress site ?
something like inside a div. So that I can copy a div and a link to script file and thus put my calculator on a page in multiple sites.
elements to embed is in a html file named-index.html
the html file is also on a site like someexamplesite.com/pages.html
logic and style in a js file: simpleinterest.js

You could use an iframe to embed your calculator on other sites like this:
<iframe src="https://someexamplesite.com/pages.html"></iframe>

Related

How to build a web widget with PHP, Java Script and give custom CSS controls to external sites?

I am trying to create a web widget that can be easily integrated into any website by just copying a small piece of code but most importantly give the user custom CSS controls like changing the font or button color, etc. My code consists of JavaScript and PHP. I tried to do this with <iframe> but it just copies the whole page with menu and footer. I couldn't find any solution on how to remove it. Please help, thank you.

How to inherit CSS of parent site and apply it on HTML rendered using Javascript?

I would like to develop a Javascript code which would get data from a Web Service and render html for displaying details.
Users need to just place this Javascript on any page on their Website to use this feature.
The problem I will face is that the html generated by my Javascript will have a different CSS to that of the Website which is using my Javascript. Is there any way that the html generated by my Javascript would inherit the CSS of the Website where my Javascript is being used.
If you are creating a script to run on any websites, you should expect the developer of that website to work on the styling of your generated HTML. Just simply display the HTML there, maybe with basic class names and styles.
A lot of cookie legals displaying that way on multiple websites.
Example: https://policy.app.cookieinformation.com/6f7f86/cubiscan.dk/declaration-da.js
That script is to put on any websites, to display few tables of cookie usage information.
If you want to overwrite their CSS, use iframe or inline styles, inline CSS.

Insert html pages into wordpress

I have an html site with a page of info for each county in the US. I want to convert this into a new wordpress site. I can do this one by one but my issue comes when I have mass changes to affiliate code or common text. I would have to got to each page and manually change it. but with over 3000 pages it would be way to time consuming. I dont want to use Iframes but would like to know if there is a way to call the html pages into the wordpress page that makes sense seo wise.
I am open to creating a page for each county or have one page with text or buttons on it with each county listed and when clicked will insert the info below. I know alot about static html coding but am new to php.
If you dont want Iframes, I think there only remain two options. I don't know if they will work in WordPress though.
1. PHP Include
With the very simple PHP include() statement, you can include the old html files in your new website. If you have a HTML-file for example, name your file yourname.php and add this in the position you want your old page to appear:
<?php include(path_to_old_page/name.html); ?>
This will include the full old page, but the file needs to be on the same server.
2. AJAX
With JavaScript you can perform XHTTP-requests to load files from the server. This is easiest when using jQuery. Here you can use the $(selector).load(path_to_old_page/name.html) statement. This will load the file in the HTML elements to which the selector applies.
(The selector works the same as CSS selectors, see the w3schools page for more)
This will also include the full old page, when it is on the same server
You can have your static pages in WordPress as well. Like if you want to create a new county named "example" you can create new WordPress page named "example" by entering title " example" .... now come to content. Just copy page content (only "example" county related html code from your static website) and place that code inside newly created WordPress "example" page. Make sure you add this html content inside 'text' tab in editor. Your page will be created with all your existing data ... now you can view this page and can use this page's URL where ever you want.

Get certain element from webpage as embed code

I would like to know if it's possible to rip the Meta Slider element from a WordPress post as an embed code to place on a different HTML file of different host?
Particular Page
The link above will be the exact source and the meta slider element there is the one I would like to have the embed code. Thanks in advance.
This is basically a WP wrapper for the FlexSlider jQuery plugin. Get it here: http://flexslider.woothemes.com/

Putting wisepop up on my html page without editing HTML code

I have 10-20 html pages in my work-space with different names. How I can put a wise pop up to all/specific HTML pages without changing the actual HTML page code. Basically I want to code this advertisement pop-up on any other file and wanted to publish on all html page.
I want to put this type of add not on main HTML page but at some other place and publish on all pages. Any answer?

Categories