Enbedded fonts without src in static html - javascript

I generate an HTML-file which I want to send to other people. But i don't want to send a complete folder but only the pure html.
Therefore the generator should include everything in this HTML-file without linking to other sources. That means the HTML-file is "stand-alone".
Because of that i can't use images but want to use symbols of font.
Is there possibility to embedded all required information into that html for a font like "GLYPHICONS Halflings" without linking to any external (means outsite of the HTML) source?
I tried to use typeface-js already but i didn't worked.
Thanks a lot for your help!

short answer no. you can send pure HTML with images, just put image links from the internet into the HTML tags to show image.

Related

Copy website including images and styles

I wrote a chrome extension, that allows me to copy the DOM of a webite and upload it to a server for analysis (dont worry, nothing illegal). Doing so does not provide the images or css scripts of the page.
Is there an "easy way" to get transfer the images and scripts that are used in the DOM as well? Currently I am using document.all[0].outerHTML for reading the HTML itself.
I found a quite nice way to upload the images in one package with the HTML / DOM:
Using this post, I had a very easy way to convert almost any image in Base64. I replaced the src attribute of the img tag using jQuery and uploaded the complete DOM. Like that all the images are already implemented.

Programmatically add all Css stlyings from external CSS stylesheets to the html's <head> tag

I am using a python library to convert HTML page into PDF.
It does it correctly, except it only handles inline styling. It does not reflect the styling applied to DOM elements using external style sheets.
So, as a solution I am thinking of adding those CSS styling from all the external CSS stylesheets into the head tag of the html file and then send it to get converted into pdf.
But, I am not sure how? Can anyone give me any ideas or atleast suggestion on how to go around fixing that? Or, if they know a better solution.
Much appreciate
Is the python running outside or client-side? You can examine the solution here # http://www.xportability.com/XEPOnline/FOTestSuite.html. While this does a lot more, you can reach through that page to the included Javascript. Look for flattenstyle.js for inspiration.
Because our handling is different, we actually copy a selected div element to another hidden div and "flatten" the style by extracting styles we want. What you could do is run such a javascript on page load and save out the div and not destroy it, then you have most all the print styling in the HTML.

Big Cartel - JQuery Upload/Location

Here is a link to my site, http://johnathonpowers.bigcartel.com
Trying to play around with images on my product pages...well actually created a test page.
Unable to figure out a few things:
Where does one host a jquery file?
Do I need to have the jquery src for both jquery.min.js (many use the one hosted by google, if I am understanding any of this correctly) and jquery.elevatezoom.js?
If I end up not liking the zoom is this still an appropriate way to have a large image with small thumbnails beneath (perhaps I will explore how to click on the big image to open a full-screen version).
Should all my pictures be the same size? Right now I have square format photos and rectangle...it might end up looking horrible.
Do I put any code into CSS or just the layout and the specific page I want the images to take place?
Will these images replace the ones I upload through bigcartel's system?
There is already a jquery entry in the layout...do I just add to the end of this same section the additional src?
This is what I added to layout:
<script src="http://s000.tinyupload.com/index.php?file_id=24823496361920795072" type="text/javascript"></script>
This is my test page:
<img id="zoom_01" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg"/>
$("#img_01").elevateZoom();
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script></head>
<img id="product_zoom" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg" class="fade_in">
Thanks again for all the help and honestly probably biting off more than I can chew. I just wanted to play around with it and see if it would work/was something I liked, but seems like I have gone down a rabbit hole into a whole other world, way above my rudimentary html skillset.
Here is where I first saw the jquery stuff:
Can I integrate an Internal zoom on my products in my big cartel store?
The best place to host your javascript files is on a server that you have control over -but if you don't have any webspace, you can easily host files with a service like Dropbox or Google Drive.
The Luna theme you're using already loads jQuery in the <head> portion of your Layout, so you don't need to include that script again (and you'll get errors in your browser's javascript console if you try).
Since you're using a separate image zooming library that has a bunch of custom CSS, you'll probably want to have your CSS file hosted on a separate server as well. It's a good idea to put any files you're including in the Layout section, following the same format as the existing theme files.
It looks like the javascript file you're hosting on tinyupload.com is just bringing up a download page instead of actually loading the javascript content into the page, so you'll definitely need to change how that's loaded. Otherwise the HTML code you're using looks like it should work.

How to read xml in anchor tags of html page

How can I read XML file on html page.
i want my XML link value to go in anchor
tags href attribute and Name of the website
between the anchor tags
I just know very basic Javascript.
I am trying to change value in footer of my website using XML because i have more than 100 pages and every time I change something in footer I have to change all 100 pages manually that's why i want to change the footer links through XML.
Please explain by showing code page should look like this
<div>
<a href "this value should be read by xml">and this value should also be read by xml</a>
</div>
Thanks guys for your answers but after a lot of search i found exactly what i wanted. I wanted to change multiple pages footer section using single file without changing my pages name (from .html pages to other like .aspx,.php,.asp) I thought using xml would be a good way but i am really novice in this field and xml didnt work for me (or say i am unable to use it in proper way) therefore i found out an alternative to change to content of multiple html pages using single file. All i needed to do was use SSI aka server side includes. The only thing you need to do is check if your server supports SSI or not and then make an individual html footer page that you want to include on every page. In order to include that external footer page just type.
<!--#include file="footer.html" -->
in the area,div,table wherever you want your footer to load and its done .
For detailed article pls go to following link http://httpd.apache.org/docs/2.2/howto/ssi.html

Downloaded aspx website does not display well

I have downloaded a aspx webpage and saved it as html. I open it in IE and chrome and it takes time to load + some parts are missing. All the text is there but the onmouseover is not working properly and some css is not displaying correctly. Was the content not downloaded completely? i.e is it missing sme javascript, css or else?
I have done what you describe on many occasions for the purposes of putting together a prototype of new functionality in an existing application.
You will likely need to do a couple of things:
Ensure the paths to your JS and CSS resources are right (removing the unneccessary JS files, if any)
Also, you will likely need to update the paths in your CSS to any image resources in your page

Categories