I have a formation homework to do, consisting in working with a "WORLD" database with cities, countries and languages tables. I want to point out that I don't need this to validate the module, it's just personnal enhancement of my project. I can do (and have already done) it with a classic map area, it's just that I want to work some more interesting options.
One of the items is making a clickable map of the world to generate accesses to the database. Well, I followed this link to do this with this Wikipedia file. There is in this file everything I need... Except that I don't know how to insert it to have full control of its features.
It is said in the tutorial that I should include the file inside a div, like this :
<div class="svg-container">
<?php echo file_get_contents("World Map.svg"); ?>
</div>
this works fine. Then I have to include in the svg file a "class" statment :
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="2754" height="1398" class="svg-content">
Problem is, when I do this, the image disapear :-(
I have tried a huge number of methods, for example including the file in an img (don't have access to the intern features of the svg, for example the links I would add), an object (image is all black, and the css part is typeset above the image...), nothing works, and the image itself doesn't scale correctely...
Could anyone help me use the map in my project ?
Thanks in advance.
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.
Currently I am working in a project in which Admin is saving the html code as a whole as a string which will later be used in the front end. It is saved so that user can put their own custom css like placing of whole div, size etc. It was working for some time, but now they want the saving part as it is, but when viewing it should look little differently. Like placement of images(it's just a part of whole div), grid system.
Following is a part of html admin saves:
<img src="http://localhost:3001/api/v1/images/image_454812039.jpeg" style="float:none;height:170.17142857142858px;width:301px;" /><p><span style="color:rgb(0,0,0);background-color:rgb(237,237,237);">Other names of Marshall Bruce Matters</span></p>
as you can see, that's what I get from backend. Now in the front when user is viewing, the span should be at the top, and image should be at bottom of it in a grid.
First of all to answer your question I will propose you to go and look at this loader react-jsx-parser -> https://github.com/TroyAlford/react-jsx-parser
But I would like to warn you that this method is not really recommended. It is better to have the structure in the code. Then call the source to the backend and then integrate it into your DOM.
This will make your frontend and backend easier to understand and therefore maintain
The only problem there is that the styles are not like jsx styles. They should be like:
style={{float:'none', height: '170.17142857142858px', width:'301px'}}
or
style={{float:'none', height: 170.17142857142858, width:301}}
But there is a npm package which helps getting the job done. react-html-parser
Hope it helps!
I am pulling the content of a bunch of customer reviews from a website using a tiny piece of PHP, though the title of each review contains the URL to the original review on the website that it comes from, which is great, except that the URL that is pulled does not contain to originating websites full address.
So on my website, the link does not work. You can see it in action here:
http://www.clearpandb.co.uk/new2016/feedback.php try clicking one of the review titles.
Is there any way to fix this with CSS? I think all it needs is a prefix to the original site. What is pulled from the originating site is just e.g. "/job/view/1971050", which when clicked tries to find this on my site (obviously won't find it). So I need to prefix it with "www.mybuilder.com" so that it works.
If the above isn't possible, a last resort might be to just disable the URL (without removing the title text itself) just so that there isn't a bunch of broken links.
PHP being used:
<?php
include_once('simple_html_dom.php');
$target_url = "https://www.mybuilder.com/profile/view/clear_plumbing_and_building_ltd/feedback";
$html = new simple_html_dom();
$html->load_file($target_url);
foreach($html->find('li[class=job-view-feedback]') as $jobviewfeedback){
echo $jobviewfeedback;
}
?>
I'm using a modified version of this tutorial for this:
http://www.makeuseof.com/tag/build-webcrawler-part-2
Which makes use of the a "helper" called "Simple HTML DOM".
Any help or pointers in the right direction are much appreciated, thanks in advance!
Can you edit that PHP? If so, do a PHP string replace on $jobviewfeedback... search for href="/ and replace with href="http://www.mybuilder.com/
so instead of
echo $jobviewfeedback;
you'd have
echo str_replace('href="/', 'href="http://www.mybuilder.com/', $jobviewfeedback);
I have a bunch of SVG assets I'm currently storing each in their own file for my site. I want to use these SVG files as part of an iconset in polymer, so I can do stuff like <core-icon icon="tubers:potato">
The problem is that there seems to be no way to say something like
<core-iconset-svg id="tubers">
<svg id="potato">
... import svg file here without copy-paste ...
</svg>
</core-iconset-svg>
Which effectively means I have to take my SVG resource and wrap the polymer code around it. This isn't the end of the world, strictly speaking, but is is a little annoying (I want to treat SVG files as framework-independent resources like font or PNG resource).
However, the other problem I have found is that if I try to define my icons in different html files with this kind of structure:
/tuber-icons
/tuber-icons.html
/potato-icon.html
/parsnip-icon.html
and then have a distinct <core-iconset-svg id="tubers"> inside both icon.html files, and a <link rel="import"> directive in tuber-icons to bind it all together, it fails. It looks like you can only define a single core-iconset-svg directive with any given id value. This makes sense, but it means I cannot do icon="tubers:potato", but instead need to have a different top-level namespace for each icon.
The alternative is to concatenate all the SVG files into one big file, but that feels even worse, when it comes to copypasta errors, since then I end up with One Big File, which also has lots of copy-pasta'd SVG directives, each of which needs to be slightly massaged to fit the polymer process.
So, back to the question: is there any reasonable way to import an existing SVG directive that I'm serving as a static resource into a polymer core-iconset-svg directive?
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/