In the past I was using iframe but it displayed all the webpage urls contents in full.
For example: I have saved the following code in a file named "trial.html" :
<iframe src="http://stackoverflow.com/unanswered" width=1100 height=1500></iframe>
<iframe src="http://stackoverflow.com/questions" width=1100 height=1500></iframe>
When I load my file "trial.html" in firefox it shows the two urls properly. ;)
But, for instance, I would like that my webpage show me only the top right "vote" part (gray color) for the first url. I notice that it has the following code :
<div class="module">
<div class="summarycount" style="text-align: left;">11,308</div>
<p>questions with <b style="color: maroon;">no upvoted answers</b></p>
<p>The highest voted unanswered questions appear first, then the most recent ones. </p>
</div>
Is it possible to display only the part <div class="summarycount" or the <div class="module"> part?
Thanks in advance ;)
Frames are just another viewport, same as your basic browser window, and all a viewport does is provide a place to display documents. Whole documents.
If you want to parse a document, or indeed many documents, to pick and choose sections of them and merge into another document, you'll have to engage a server-side language to load those documents up and do the surgery for you. As always, I recommend XSLT for this where the documents are well formed, but every language is capable of doing this.
If you really really wanted a guerilla option, IF you have control over the documents AND you don't have x-domain worries, you could do some JS DOM manipulation to read from iframe loaded documents and copy the important nodes into the parent document, deleting the iframe as you go, but it's nothing like as clean or reliable.
I think this can also do the trick (but it won't do it imho for robot-no-follow html file websites):
Build a Web Page Monitor with Google Docs and Track Changes Automatically
http://www.labnol.org/internet/monitor-web-pages-changes-with-google-docs/4536/
Related
I am trying to automate a workflow for automatically creating HTML newsletters based on information stored in a spreadsheet.
Currently, I am using a newsletter drag and drop tool, in which several pre-programmed blocks are available (e.g. full column block, 2 column block etc). When creating a newsletter, I drag and drop a block and fill in my content (e.g. uploading an image, inserting a url). This is all well and good, however, since I have to create the same newsletter in 10 different languages, this process is quiet time consuming and prone to human error. While all newsletters are the same in terms of layout, the images and urls differ.
To solve this issue, I would like to get rid of the drag and drop process, and instead automate the workflow in some other way.
One idea that I have already tried, but that doesn't seem like the perfect option to me, is to dynamically create the needed HTMLs in Excel. Basically, the idea is to take the existing block template structure, and put it into Excel with some formulas.
I could then copy and paste the links to the images (in a simple format, such as EN1.jpg, ES1.jpg, etc.), as well as to urls (url.com, url.es).
This is some example block:
<img alt="" align="center" width="700" style="max-width:700px;" class="resetWidth" border="0" src="IMAGE" />
My final expected result is something like this:
I define the layout in a very quick manner (e.g. writing fullcolumn, half column, fullcolumn). The corresponding code is taken from the template. I then provide the attributes (image url, link url) in the form of a list or so. The end result should then be 10 html files that I simply have to upload to the newsletter software.
I would appreciate it very much if anyone had any ideas on this.
Another option for translating the page is to do something like this https://www.w3schools.com/howto/howto_google_translate.asp
it adds a selection for languages to translate into.
As for automating the images, you could set up folders for each langauge and reuse the name of images based on where you want them so they would be placed in the correct location.
All you'll have to do it replace the images with the same file names and swap the default language on the Google Translator.
So something like this that the html will stay the same with regards to the image names
For the link variables you may be able to write some JS or another language to take advantage of the
<html lang="">
and based on which lang is set, insert a set of links to the file.
So, I was taking a look at some websites that display video on their front page, and I came across this website. I wanted to know how they had accomplished such a remarkable result, so I inspected the element that contained the video. To my surprise, I encountered html attributes I had never seen before.
My question is: If this is not standard html, then what is it?, and how can I use it?
Here is a snippet of the code they are using:
<div class="frontpage-head-wrapper" data-has-video="1" data-video-mp4="http://d27shkkua6xyjc.cloudfront.net/videos/maaemo-film-2.mp4?mtime=20141113185431" data-video-ogv="http://d27shkkua6xyjc.cloudfront.net/videos/maaemo-film-2.ogv?mtime=20141113185421">
</div>
A point before I answer your question is that the data attributes are custom attributes in which user can store any data. These were introduced in HTML5. For more information please refer to this
From what I understand looking at the code link https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes
Now to your question
what happens is that the website is using custom data attributes and the custom attributes specifies the url where the video is stored. And when I dug further in the code, I found that they are displaying video using ajax calls
Those are data attributes. They are useful because they are standardized, and
allow easy JavaScript access:
ch = document.querySelector('div').dataset;
// 1
ch.hasVideo;
// http://d27shkkua6xyjc.cloudfront.net/videos/maaemo-film-2.mp4?mtime=20141113185431
ch.videoMp4;
// http://d27shkkua6xyjc.cloudfront.net/videos/maaemo-film-2.ogv?mtime=20141113185421
ch.videoOgv;
Using data attributes
I'd like to achieve the following and I'm looking for ideas. I have a document and I want to represent/transform this content in/to a nice SAPUI5 framework. My idea is the following: a split app with having the paragraph titles in the master view (plus a search function on top) and the respective content in the detail view.
I'd like to know from you if
a) you might want to share your ideas and hints on alternatives.
b) this can be achieved within one single file (i.e. all the code for the split app and document content in one html) and maybe using pure html code (xml also feasible) - against the background of easily handing a large amount of text available in html.
c) if you happen to have/know a reusable template.
Thanks in advance!
An interesting question. I went through a similar exercise once, re-presenting my site with UI5.
To your questions:
(a) I would think that the approach you suggest is a good one
(b) You can indeed include all the app in a single file, I do that often by using script templates, even with XML Views. You can see some examples in my sapui5bin repository, in particular in the SinglePageExamples folder. Have a look at this html file for example: https://github.com/qmacro/sapui5bin/blob/master/SinglePageExamples/SAP-Inside-Track-Sheffield-2014/end.html
What I would suggest is, rather than intermingle the document content and the app & view definitions, maintain the content of your document separately, for example, in XML or JSON, and use a client side model to load it in and bind the parts to the right places.
I am trying to implement a c# idml to html converter. I've managed to produce a single flat html file similar to the one produced by the indesign export.
What I would like to do is to produce html that will be as similar as possible to the indesign view like an html idml viewer. To do this, I need to find the text that can fit into a textframe, I can extract the story text content but I can't really find a way to split this content into frames/pages.
Is there any way I can achieve that?
Just extracting the text from a story isn't enough. The way the text is laid out is controlled by TextFrames in the Spread documents. Each TextFrame has a ParentStory attribute, showing which story it loads text from, and each frame has dimensions which determine the layout. For unthreaded text frames (ie. one story <> one frame), that's all you need.
For threaded frames, you need to use the PreviousTextFrame and NextTextFrame attributes to create the chain. There is nothing in the IDML to tell you how much text fits in each frame in a threaded chain, you need to do the calculation yourself based on the calculated text dimensions (or using brute force trial and error).
You can find the spreads in the main designmap.xml:
<idPkg:Spread src="Spreads/Spread_udd.xml" />
And the spread will contain one or more TextFrame nodes:
<Spread Self="udd" ...>
<TextFrame Self="uf7" ParentStory="ue5" PreviousTextFrame="n" NextTextFrame="n" ContentType="TextType">...</>
...
</Spread>
Which will in turn link to a specific story:
<Story Self="ue5" AppliedTOCStyle="n" TrackChanges="false" StoryTitle="$ID/" AppliedNamedGrid="n">...</>
(In this example the frames are not threaded, hence the 'n' values.
All this is in the IDML documentation, which you can find with the other InDesign developer docs here: http://www.adobe.com/devnet/indesign/documentation.html
Microsoft and Adobe have proposed a new module for css named Regions which allow you to do flow tekst into multiple containers. Keep in mind that you will never be able to create an html page that looks exactly like an Indesign document.
http://www.w3.org/TR/css3-regions/
For now only IE10 and webkit nightly support it: http://caniuse.com/#feat=css-regions
I have an HTML page which needs to display some HTML generated by the user on the Administration area (like a blog, for instance). The problem is that the user sometimes needs to copy-paste tables and other "garbage" content from Word/Excel to the WYSIWYG editor (that has the proper "paste from Word" function). This causes the resulting HTML code to be very dirty.
It wouldn't be a problem unless some of these pages are shown totally wrong: other divs AFTER user's HTML code are not in their supposed position, floats are not respected... etc...
I tried putting a div:
<div style="clear: both;"></div>
without success. I even tried with iFrames, but iFrames accept only external webpages (if applicable...).
The question is: is there any tag or method to put a part of an HTML code inside a webpage discarding all formatting AFTER this code?
Thank you.
To my knowledge, you simply want to end all divs. HTML is a very simple code, with very simple options. Your example doesn't work because HTML isn't that advances. You can either start a function <...> or end a function .
Ideally what you want is a piece of code that puts their work in a separate frame entirely, so as soon as the page passes their code, it goes back to the correct formatting.
Or, you could be really sloppy and put one hundred 's in, just in case.