Background
I have several web sites that are related to the same business and they share the same server and even disk space. An entire directory tree is linked in via the file system, and the pages show up on all the sharing sites, just fine. However, each site has different, unique market segmentations, branding, contact data, and so forth. To accommodate this, I have already developed fetching the look-and-feel data from the server using XMLHttpRequest() or ActiveXObject(), as appropriate, and update of various element attributes is done using JavaScript. For example, the business name, contact links, background color and more are provided this way.
Goal
As it is, none of the shared pages have any "navigation" to speak of, certainly no menus, but some of the sites do have these on their other pages. I'd like to now add in each site's navigational tools - the menus - to these shared pages. I am sure I can get all the data to the page via the same mechanism I'm already using. The question is: What are the appropriate ways I can "drop this in?" (Without parsing, it'll be a wall-of-text, but that's OK, I don't care, so long as it works.)
I already have a pair of <nav></nav> tags in every file, waiting for this eventuality, but now I'm not sure how I do a wholesale plunk of all this stuff right into the page using JavaScript or other on-page technique. ...I'd like to avoid any further "server side" munging of the HTML if I can!
Should I give the <nav> an id and then perhaps there's some basic JavaScript syntax I can use to plop this in?
Of course, I already have .css files and so forth, same name, same spot, so that helps. ... TIA!
Related
Say I have a news website with articles, I have a blank article page with everything BUT the headline, photos, and the text article itself that I would ordinarily fill in manually. Instead of filling it in, say I have the entire div class ripped from a web page already. I want to import this content directly onto the page and publish it with minimal steps.
(I hope I'm giving you the picture. Imagine I have cars fully built aside from missing engines and I want the monkeys I've hired to steal engines to not leave the engines piling up outside, but instead to also bring them inside and install them into the cars and drive them to the car dealer.)
I will be web scraping something like a Wikipedia page on golf and putting that into my page. I don't want to have to copy, paste and click publish over and over. I want the web scraper, which I already know how to build, to go another step and do a find and replace of a certain div class on my blank page website INSTEAD of writing the data on a file on my computer's hard drive (though maybe writing on my hard drive with Python, then having JS or something read the HTML file on my hard drive THEN writing it to my web page would be a way to do it.
Are there programs that will do this? Do you know of modules that will do this through Python? Do you know of anything like this somebody wrote and put up on GitHub?
I'm not planning on ripping off news websites, but just to give a simpler example with one object... If I had the entire div class "content" from here...
http://www.zerohedge.com/news/2017-02-18/merkel-says-there-problem-euro-blames-mario-draghi
saved as an HTML file on my hard drive (which you could look at by clicking 'inspect' anywhere on the text of the main article> right clicking copy> copy as outerHTML> and pasting as an HTML in your text editor (again, something I would have done with a web scraper), how could I get this pasted into a blank 'new article' page and published on my website with the push of a button automatically? I'm fine with having to click a few buttons but not copying and pasting.
I'll be doing this (legally) with parts of web pages over and over and over again and I'm sure this can be automated in some way. I've heard financial news websites have been writing articles from data so something like what I need probably exist. I might be running the text I scrape through a basic neural net or feeding it to GANs. I think some interesting things can be made this way in case you are curious what I'm up to.
If you're using Python to do this, the quickest way I feel would be to have the web crawler save it's findings to either a JSON file or SQL database that your website front-end shares access to (storing the HTML you pulled as a string of text).
If you go the JSON route, just send an AJAX request to it for the website and place it in using innerHTML on the element you're dumping the code into.
If you go the SQL route, just have a python script with the website that you can send a POST request to and have the python script pull the website data you want from the database and return it to the browser as JSON and do the same as the above.
The benefit of going straight to JSON is not having to setup connection to an SQL server and deal with the SQL query to JSON conversion step. However, the benefit of the SQL database is not having to worry about any issues writing to the JSON file if your crawler is working with multiple threads and may have write conflicts if you don't lock the file correctly.
I have a web platform that performs data processing in relation to visits recived by my client's websites.
For capture data I need, in each page to monitor, to insert the call to my javascript that makes the collection of data in a db.
For now, the only thing that came to my mind was to provide the javascript code to be inserted to the customer in the section of specific page like this:
<script src="https://www.example.com/datascan/tk/SL-TK51124897-ME.js"></script>
Google, with analytics, for example, performs a similar operation but in a different way, by providing the javascript code to be inserted at the end of the <body>.
Someone have direct experience in this area? Which solution in terms of safety, performance and comfort you suggest? Is possible to enter the code on one page so that it can handle all the pages in that domain without repeating it in each of them?
Thanks in advance
If the pages are statically generated (each page is hardcoded in different files) you have to include the line in each file between the tags
If the head module is dynamically created (works as a module which is included in each page) you can just put it in the said module.
e.g. Wordpress https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyeleven/header.php
If you provide more info about the structure of the site it will be easier to help.
Given a static HTML file and its accompanying static CSS file that have references to a static server holding images, would it be possible to use JavaScript to prevent the page from loading all images from their src attribute and url() definition and instead replace them with another server?
Trying to do something along the lines of
$('body').html($('body').html().replaceAll('src.example.com', 'target.example.com'));
Doesn't prevent the images from being loaded at the first place. Any ideas?
Background story, in case it helps you suggest something different: I'd like my website to display images inside China from a different local Chinese server. That might help with the throttling that non-Chinese sites experience in China. Choosing a Chinese CDN for serving the whole world seems like a bad idea and relying on a service resolving DNS differently per country seems somewhat risky.
So currently we have the .com and .cn domains and want the .cn domain to be served from the same server but have its images served from a local Chinese CDN. While the website does generate dynamic pages, they are cached statically and trying to generate different pages by domain would means more effort generating the pages. That's why I thought that perhaps JavaScript could help out by replacing all images.
With a combination of tricks like using the base tag and onclick and onsbumit event handlers you could achieve your objective, but I'm almost sure it isn't a nice solution.
Using a javascript at the head or the first thing in your body you could insert a base tag which would change the standard server for all resources linked by your site (forms actions, link href, stylesheets, images) requests (even the CSS ones).
Then to avoid the server change for links and forms you would have to handle click and submit events to fix the server according to the current website url or once the page is ready modify all them at once.
Does this might work? Yes, but I do believe the best solution would be change the URLs in server side or let the CDN handle the geotargeting.
This gets somewhat complex, so first, a little background:
We're redesigning a video platform that we use across internal applications and our customers use as well for video delivery. The goal is for our customers to be able to embed stuff easily to put it on their own sites, as you would expect. Thus far, we've given a one-line script tag to do this, like so, which drops a player on a page:
<script src="http://vod.nimbushd.com/player/player.ashx?mediaItemAssetId=8413adeb-6b15-4606-a771-637527539093&h=480&w=720" type="text/javascript"></script>
Sample Page with the script above
This is just an ASP.NET handler that returns some Javascript, which, in turn renders some HTML for the player.
That works well enough for a player, but now on to the redesign.
We're now targeting different players for different browser types, HTML5 fallback in the absence of Silverlight, and some other bells/whistles. One of our big feature requests is to be able to serve up a player with add'l video gallery, Disqus comments, Twitter/Facebook share/like buttons; basically, regardless of the philosophy that these are things that should live natively on the customer site, we need to be able to design more complex features and serve them up the easiest embed-style possible.
I guess one school of thought is that we almost need an iFrame that behaves like embedded content (no scrollbars, sizing, and so on).
We're tossing around ideas like more complex Javascript-rendering HTML that could get impossible to maintain pretty quickly, whether advanced features should just be Rich content (Silverlight/Flash), or if there's some in-between like a jQuery partial page refresh or something.
Hoping to learn from some folks who have already gone down this road - as an end-user, how would you expect to embed content, and as a content provider, how do you serve that content in embeddable form?
Personally I would prefer a one line script to include for this
<script src="..." type="text/javascript"
data-container="someId"
data-otherParam="..."
data-beforeLoad="someFunction"
...
></script>
Passing all the configuration options in as html5 data attributes would be the most convenient. It would also be great if we can pass in a function name that you would call to give the end-user even more control where necessary.
As for what your actual code does. I would recommend you have the script do all your logic and have it make JSONP calls to a webservice to get any data it needs. As for the HTML rendering I recommend you use any templating engine and reference a templating file directly loading them from your server either directly or over JSONP if neccesary.
As for embedding your actual data/html pick a <div> or create a new one and render partial templates to the children of that <div>.
Alternatively you go down the easy route and just ask the user to embed an <iframe>. This solution isn't as nice.
Here's my problem: I want to build a website, mostly static but with some dynamic parts (a little blog for news, etc..).
My webserver can only do static files (it's actually a public dropbox directory!) but I don't want to repeat the layout in every html page!
Now, I see two possible solutions here: either I create an index.htm page that emulates site navigation with javascript and AJAX or I create all the different html pages and then somehow import the layout bits with javascript..
From you I need ideas and suggestions on how to implement this, which libraries to use, or maybe there exists even something tailored exactly for what I need?
Thanks!!
I would define the site layout in your index.html file, and then use JavaScript and Ajax to load the actual content into a content div on the page. That way your content files (fetched by Ajax) will be more or less plain HTML, with CSS classes defined in index.html. Also, I wouldn't recommend building a blog in pure HTML and JavaScript. It wouldn't be very interactive; no comments, ratings, etc. You could store your blog content in XML and then fetch and display it with Ajax and JavaScript, however.
While on the subject of XML, you could implement all your site content in XML. You should also store the list of pages (for generating navigation) as XML.
Just another one way. You can generate static HTML in your computer and upload result to dropbox. Look at emacs muse.
jQuery allows you to easily load a section of one page into another page. I recommend loading common navigation sections into the different pages, rather than the other way around to avoid back/forward problems. Layout can be done with a separate CSS file rather than with tables to minimize the amount of repeated code. For the blog, you could put each blog entry in a separate file and load each section individually.
However, I would just use something already available. TiddlyWiki, for example, is a self-contained wiki that is all in one file. It's very customizable, and there's already a blog plug-in available for it. You can work on the site on your hard drive or USB drive, and then you can upload it to the web when done. There's nothing more to it.
Have you considered using publishing software on your computer to combine your content with a template, resulting in a set of static pages that you can then upload to the dropbox?
Some options in this regard come to mind:
Movable Type - can output static HTML which can then be uploaded to the server
Adobe Dreamweaver
Apple iWork Pages
To handle comments, you can use Disqus. It inserts a complete comment system into your site using just JavaScript.
You can use the Google Closure templates. It's one of the fastest and most versatile javascript templating solutions around.