I've got an express.js app currently using ejs (using jade for newer projects) and I'm trying to solve a problem in a clean and appropriate manner.
I've got a layout.ejs file with my header and footer in it. Most of my site so far has been one layer deep http://innovationbound.com/about or /services or /amy and so on....
I'm beginning to created online courses at http://innovationbound.com/courses/course-name and the issue I'm having is that these course pages can't reference the images the same way. <img src="images/linknedin.png" alt="LinkedIn Icon"> for instance.
From the course-name page it tries <img src="courses/images/LinkedIn.png" alt="LinkedIn Icon"> and obviously can't grab the image there.
Is there a setting in express, or something obvious I'm missing? I hope I don't have to use absolute urls, that just makes developing on the local machine insane.
Just use site root–relative paths. For example <img src="/images/linknedin.png" alt="LinkedIn Icon">. Note the / makes the difference.
There are three types of link paths:
Absolute paths (such as http://www.adobe.com/support/dreamweaver/contents.html).
Document-relative paths (such as dreamweaver/contents.html).
Site root–relative paths (such as /support/dreamweaver/contents.html).
From Adobe.
You might consider it, but you can use "../images/link(n?)edin.png". However, I'd recommend to use absolute path, because images should be stored in /public (in general jade setup) and your path depth could be varied by your route rule.
As a tip, if you lost in relative path of image, right click on broken image and see a URL in properties on web browser. It'll give you a hint of where the image is.
I am creating a hook in which i want to add my image in custom jsp.
I have added image inside docroot/images/1.jpg
in jsp i am trying to access it using
<img src="<%=request.getContextPath()%>/images/1.jpg" />
but i am not able to get image.
Additionally when i am trying to print <%=request.getContextPath()%> is only prints "/"
Thanks !!!
Instead of taking images from your war (docroot folder), suggest you to place the images in a Web server so that in future you can easily replace them if you want to change images.
You could use below code in your jsp page to retrieve from Web server,
<div class="yourCSSClass">
<liferay-ui:icon src="/yourWebServerPath/1.jpg" label="" message=""/>
</div>
Another flavour of it,
In your JSP page if you have below code,
<nav class="yourCSSClass"><br/><br/></nav>
Then, in the CSS file that you are importing in your JSP page, use this,
.yourCSSClass{
background: url(yourWebServerPath/1.jpg) no-repeat;
}
P.S : In both the above examples, decide properly the value for yourWebServerPath
Very old question, but still worth answering.
Your hook replaces portal’s JSPs with your owns but that doesn’t mean that the context of the new JSPs is your hook’s one.
What actually happens is that JSPs are replaced at the File System level, and called by other Liferay JSPs and configuration as they were the original one.
The request you have access to, therefore, is the main and original one.
As far as I know, there’s no clean way to get the context path of the hook that is providing an overriding JSPs.
I have created a file upload function which saves all the uploads to a certain place:
private String destination = "D:/Documents/NetBeansProjects/FileUpload/uploadedDocuments/";
Is this a good place to store it? Should I store it some where else?
Is it possible that once the upload is complete for a page to be displayed showing the user what they have just uploaded, like a box below showing a preview? And how would I go about doing this? I am new.
I have figured it out how to display a plain txt file and an image, however it is the pdf that is confusing me.
As to the upload location, which seems to be the IDE project folder, that's absolutely not right. You should choose a configureable and fixed location somewhere outside the IDE project folder. You should not rely on using getRealPath() or relative paths in java.io.File. It would make your webapp unportable. See also this related question: Uploaded image only available after refreshing the page.
Whatever way you choose based on the information provided in the answer of the aforementioned question (and all links therein), you should ultimately end up having a valid URL pointing to the PDF file in question such as http://example.com/files/some.pdf.
Then, you can serve the PDF file on a webpage using either an <iframe>:
<iframe src="/files/some.pdf" width="600" height="400"></iframe>
Or an <object>:
<object data="/files/some.pdf" type="application/pdf" width="600" height="400">
some.pdf <!-- This link will only show up when the browser doesn't support showing PDF. -->
</object>
Keep in mind that showing PDFs in a browser is only supported in browsers having Adobe Reader plugin. Note that the <object> approach will gracefully degrade to a link when the browser doesn't support displaying application/pdf content.
I am trying to create an interactive map where users can click on different provinces in the map to get info specific to that province.
Example:
archived: http://www.todospelaeducacao.org.br/
archived: http://code.google.com/p/svg2imap/
So far I've only found solutions that have limited functionality. I've only really searched for this using an SVG file, but I would be open to other file types if it is possible.
If anyone knows of a fully functioning way to do this (jQuery plug-in, PHP script, vector images) or a tutorial on how to do it manually please do share.
jQuery plugin for decorating image maps (highlights, select areas, tooltips):
http://www.outsharked.com/imagemapster/
Disclosure: I wrote it.
Sounds like you want a simple imagemap, I'd recommend to not make it more complex than it needs to be. Here's an article on how to improve imagemaps with svg. It's very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable.
A couple of options if you need something more advanced:
http://jqvmap.com/
http://jvectormap.com/
http://polymaps.org/
I think it's better to divide my answer to 2 parts:
A-Create everything from scratch (using SVG, JavaScript, and HTML5):
Create a new HTML5 page
Create a new SVG file, each clickable area (province) should be a separate SVG Polygon in your SVG file,
(I'm using Adobe Illustrator for creating SVG files but you can find many alternative software products too, for example Inkscape)
Add mouseover and click events to your polygons one by one
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"
onmouseover="mouseOverHandler(evt)"
onclick="clickHandler(evt)" />
Add a handler for each event in your JavaScript code and add your desired code to the handler
function mouseOverHandler(evt) {};
function clickHandler(evt) {};
Add the SVG file to your HTML page (I prefer inline SVG but you can use linked SVG file too)
Upload the files to your server
B-Use a software like FLDraw Interactive Image Creator (only if you have a map image and want to make it interactive):
Create an empty project and choose your map image as your base image when creating the new project
Add a Polygon element (from the Shape menu) for each province
For each polygon double click it to open the Properties window where you can choose an event type for mouse-over and click,
also change the shape opacity to 0 to make it invisible
Save your project and Publish it to HTML5, FLDraw will create a new folder that contains all of the required files for your project that you can upload to your server.
Option (A) is very good if you are programmer or you have someone to create the required code and SVG file for you,
Option (B) is good if you don't want to hire someone or spend your own time for creating everything from scratch
You have some other options too, for example using HTML5 Canvas instead of SVG, but it's not very easy to create a Zoomable map using HTML5 Canvas,
maybe there are some other ways too that I'm not aware of.
Just in case anyone will search for it - I used it on several sites, always the customization and RD possibilities were a perfect fit for what I needed. Simple and it is free to use:
Clickable CSS Maps
One note for more scripts on a site: I had some annoying problems with getting to work a map (that worked as a graphic menu) in Drupal 7. There where many other script used, and after handling them, I got stuck with the map - it still didn't work, although the jquery.cssmap.js, CSS (both local) and the script in the where in the right place. Firebug showed me an error and I suddenly eureka - a simple oversight, I left the script code as it was in the example and there was a conflict. Just change the front function "$" to "jQuery" (or other handler) and it works perfect. :]
Here's what I ment (of course you can put it before instead of the ):
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
Go to SVG to Script
with your SVG the default output is the map in SVG
Code which adds events is also added but is easily identified and can be altered as required.
I have been using makeaclickablemap for my province maps for some time now and it turned out to be a really good fit.
I had the same requirements and finally this Map converter worked for me. It is the best plugin for any map generation.
Here is another image map plugin I wrote to enhance image maps: https://github.com/gestixi/pictarea
It makes it easy to highlight all the area and let you specify different styles depending on the state of the zone: normal, hover, active, disable.
You can also specify how many zones can be selected at the same time.
The following code may help you:
$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
alert($(this).attr("id"));
});
Source
You have quite a few options for this:
1 - If you can find an SVG file for the map you want, you can use something like RaphaelJS or SnapSVG to add click listeners for your states/regions, this solution is the most customizable...
2 - You can use dedicated tools such as clickablemapbuilder (free) or makeaclickablemap (i think free also).
[disclaimer] Im the author of clickablemapbuilder.com :)
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
strong text
This may be a bit long, but thank you in advance for any assistance.
I am trying to develop a web app that will allow the user to interact with a wireframe 'drawing' of a chosen product and customize each path with either an uploaded image, color/pattern or add whatever text...or all, if they choose (something similar to customizing a greeting card)...for THIS question, I will start with the image part....
Here is what I have so far: http://jsfiddle.net/rednevednav/C9aDm/
What's the most effective way to able to use any image...one that has been uploaded by the user...to append the fill of a selected path and then be able to drag it around, resize it and rotate BEHIND the selected path (so they can control the part of their image that gets 'cropped'? (*Note: I've searched for months and haven't found anyone else doing this outside of Flash....MyPublisher.com gets really close, but it's all squares and no SVG...I've looked at using ImageMagick and 'dst_in' on the server side...but after hard coding an image into svg...like on my jsfiddle...it seems that this could be done client side)
Should I be using Raphael for this application in the first place? Or?
**Hoping to stay within the Raphael framework (if using at all) in order to maintain the IE support afforded out-of-the-box that it provides; I understand that too much java hacking kills this. Of course, the 'finished' product will need to be downloaded as a .pdf....but that's another question for another time.
EDITED: # Thanks to an answer to my question HERE, I've update my JSFiddle with how to get URL from an uploaded image and use to fill path in Raphael paper. So that leaves 2 questions on this subject that I'm still struggling to resolve:
1. How to use this uploaded image to be able to drag and drop onto path to update fill?
2. How to first select which path I want the uploaded image to fill? (for when drag/drop is not available)
Thank you again in advance of any assistance!