I included a navigation element in multiple pages like this:
<script> $(function(){ $("#includedNavigation").load("navigation.html"); }); </script>
But this works just for html-files in the same directory "subdir". The navigation.html cannot be reached from the index.html in the upper main directory "dir".
If I add the upper pattern to the index.html in the directory above the navigation.html is reached correctly but the relative links do not work anymore. I don't want to replace the relative links by absolute paths.
Is it possible to switch between different links in navigation.htmldepending on wherefrom it is called?
Any other ideas?
Thanks a lot!
Since this is a multiple page website that reuses the same menu on all its pages, there's no functional or logical difference between page1.html and index.html apart from index probably being the first page you see. So I would just put index.html in the same folder and call it a day. It would make sense to have it on an upper level if the index page would load all the other pages into itself. Then the menu would only need to be included on the index page.
A folder structure is a project requirement, not a technical requirement. In development, all pages are likewise divided into sub directories and such to organize the files. But with running the deployment script to copy everything into production, the deploy script concatenates everything into one file anyway and the entire folder structure disappear.
It's perfectly normal to have a clear folder structure for development organised by business needs and also have a completely different folder structure for live code organised by technical needs.
you have to give the path of navigation.html file.
$(function(){ $("#includedNavigation").load("./dir/navigation.html"); });
like this
Can you use something like this
<link rel="import" href="navigation.html">
Or
$(function(){ $("#includedNavigation").load("path/to/navigation.html"); });
Related
i am working on a website and creating my own gallery.
However there seems to be a little problem with the code.
i wanna add my picture from my computer so it has the right width and heihgt.
here is the code.I tried to do cover in css but some images are too big and wont fit.Thank you for reading.
<script type="text/javascript">
$('#button1').click(function()
{
$('#gallery').css("background-image", 'src=C:\Users\Eigenaar\Desktop\Nieuwe map\luffy');
//luffy serieuse kop
}); </script>
and this is my second button wich works perfectly fine but also wanna change because width and height problems
<script type="text/javascript">
$('#button2').click(function()
{
$('#gallery').css("background-image", "url(http://vignette3.wikia.nocookie.net/mvl/images/e/e9/Luffy-One-Piece.png/revision/latest?cb=20140221162732");
//luffy lachende kop
}); </script>
so what i wanna know is how to add my own picture.
The image path you use shouldn't be the actual path of the image on your computer, it should be the path that the specific html file you're in would use to get to the image.
Your link here is the problem:
'src=C:\Users\Eigenaar\Desktop\Nieuwe map\luffy'
For example, if I had a directory that contained:
index.html
img.jpg
index.html could display img.jpg using src='img.jpg'.
However, imagine I have a directory where index.html is on the same level as a directory called "images" which contains your image file, like this:
index.html
images
img.jpg
Then, in order to display the image I would use src='images/img.jpg'.
Most of the time, people have a folder with all of their website images in the same folder as their index.html file so they can pull directly from the folder.
Hope this helps!
Bonus learning note:
.. means "go up a directory". This is useful if you can't directly access the images folder from your html file. For example, if your directories looked like this:
html
index.html
images
img.jpg
You would first have to go up a directory before entering the images folder and displaying img.jpg. Then, your file path would be src='../images/img.jpg'.
I have a question , wondering if it is possible or not !!!
Here Is a link that will prove I am not much of a noob!
collegewebsite.zip
Now the question.
I am creating a project called Coffee Cafe for my tuition assignment.
I will be using a lot of css and html with javascript (only)
I have the project folders as shown below
webfolders
now I open cafe.html
and put a link in it to go to a page say "homepage.html" in "links" folder above.
NOW CAN I DO SOMETHING THAT WHEN I CLICK ON A LINK IN HOMEPAGE.HTML (for eg. Back) I CAN GO BACK TO THE PAGE IN THE ROOT FOLDER cafe.html
There is a way to do it is to use the full path of cafe.html in homepage.html
for eg.
<a href="c:\cafe website\cafe.html"> <==this is full path in c: drive
<a href="cafe.html"> <== this only works when the files are int the same root directory,,,
But in this example they are not !
Can I get a solution for this or shall I put all the files in the root directory as a last resort ?
Thanks in advance!!
You should not set your anchor tag href value to a physical location of the file. It should be relative or absolute url.
So instead of
<a href="c:\cafe website\cafe.html">
You should use <a href="../cafe.html">Cafe</cafe>
or home
When you put ../, It goes back to one level back, that means when you use href="../cafe.html" in a page which resides under the links folder, clicking on that will go one level back (which is root) and look for cafe.html file.
If this is your file structure:
/
/links/homepage.html
/cafe.html
To link from homepage.html to cafe.html, you would use:
<a href="../cafe.html">
The .. denotes: "go back one directory".
You could even combine that, if you had a more complex directory structure. (e.g. href="../../cafe.html").
Another way to link would be as follows:
<a href="/cafe.html">
If you start your url reference with /, you're saying to start from the root.
I've been experimenting with Cordova/Phonegap for iOS, and it has a www directory that is read when the application launches. This directory is readonly meaning I can't add any of my own files into it (it won't let me either.) Does this mean that I should have multiple "pages" of my app from only one index.html file? How would I go about doing this?
UPDATE
If you are using Cordova/Phonegap, just create a separate file in a text editor, save as HTML, and drag it into the /www folder before opening up Xcode.
Hell no!,
I have no idea why your index is read-only, but just turn it off, you are not forced to use multiple pages in the same html, but if you really want to, you can just use jQuery-mobile, then each <div data-role="page"> will be one different page
There are several libraries to accomplish that, like for example JQuery Mobile, or basic javascript scripts.
Here you have an example with Jquery Mobile: Demo of Pages with JQuery Mobile
I have a somewhat annoying issue... I have a JS function which toggles the image of an element on a certain event (click). This function is executed on multiple pages.
In the js, I have a like that goes like so:
img.style.backgroundImage = 'url(../assets/img.png)';
Everything works perfectly fine when the function is being called from a file that exists in a different folder... Folder structure is like so:
/project
/assets
/html
/js
index.html
Notice the index file sitting the parent folder? When I execute the function from this index.html file, the images can't be found (Since the JS is looking outside the parent folder thanks to the '../'), but it works for all other pages inside the html folder, since the relative path finding will go out to the parent folder, and then into assets...
Anyway I can make this smart without having to resort to other completely different approaches? I know I can just rely on some CSS here, add and remove classes to toggle images instead of directly changing the image source...
Its odd though, the relative path works from css where the css behaves as the anchor for the path finder... But if you use JS to change the css property, the html file becomes the anchor...
img.style.backgroundImage = 'url("assets/img.png")';
Make the path relative to site NOT the current page or style sheet.
When including a relative url in CSS the url is relative to CSS's url, which is I assume is in the assets folder.
img.style.backgroundImage = 'url("/assets/img.png")';
Writing an application for a custom gallery, and all the script files are put in a resource folder inside each gallery folder-
is it possible to have a variable enabled that would prevent the page from loading its local JavaScript files but instead load from the main page's resource folder? trying to avoid having to hard-code it as well.
esentially all i really want is for my script files to be able to have a variable starting path- IE
(script src="(path)load.js" type="text/javascript")(/script)
where path is either blank "" or main main site- "http://www.site.com/resources/"
some of the files are CSS files so im not sure the class method would work well-
also- is there a way to refer to the root of a site? similar to using ../ but just to get the root html path.
More Info-----
The layout i have is that each gallery made is a separate folder- (for example, photography, painting, drawings, etc- would all be separate folders). They each would contain their own resources withing their folder. this is so i can just upload 1 gallery to a site and everything would be packaged nicely. But- if im running multiple gallery on one site- as with a portfolio site, each page is loading its own set of resources, which is probably not a great idea.
The resources are - thumbnails, images, xml( which are all specific to individual gallery) but then they also each have a couple javascript files for functions, a css file, and a few images that make the gallery maneuverable(arrows and the like).
I just want to be able to have the scripts which are loaded in the header- load from the root site resource folder if there are multiple gallerys
you can put all the code under a single class name e.g. Mydata.yourvariable
and then check ..
if (Mydata) { //your script has already been loaded }
it's similar to what jQuery does with $
Check out Javascript file dependencies - Selective load resource files & prevent duplicates Also check out this http://toscawidgets.org/documentation/ToscaWidgets/require_once.html
Perhaps you could try something like this:
in index.html (or another html file) you do:
<html>
<head>
<!-- use this if you need custom location, omit for the default one -->
<script type="text/javascript">
var GALLERY_PATH = "/gallery/";
</script>
<!-- ------------------- -->
<script type="text" src="/gallery/gallery.js"></script>
</head>
<body>
...
</body>
</html>
gallery.js:
var GALLERY_PATH = GALLERY_PATH || "http://mysite.com/default-gallery-location/";
document.write('<script type="text/javascript" src="' + GALLERY_PATH + '/js/_gallery.js"></script>')
document.write('<link rel="stylesheet" type="text/css" href="' + GALLERY_PATH + '/css/gallery.css">');
...
This way you easily include all files you need with the 1-liner and all files are loaded once. Hope it helps, of course if I understood the problem correctly ;)
If you found too much hard to handle it with javascript, you can do from server. That depends if the problem is the double call, or the Kb download resource used.
On the last case you can simply enable some cache driver to your web server, like Varnish or MemCache. Once you put a cache you have not to worry about double file loading anymore.
If you want to avoid lot of loads from the same javascript script, you can add a local counter then put 1 when it has loaded once. You will edit the initial call function to test if it's currently loaded, then avoid.
If you have lot of js files, and just wanna avoid calling the same resource twice of more, use session cookie to store the counter.