Working on a project which involves crawling some legislation sites and hit a puzzler
This url https://www.legislation.gov.au/Details/F2018L00530
has a base setting of https://www.legislation.gov.au/Details/F2018L00530/Html/Text
in its header but images on the page resolve relative to https://www.legislation.gov.au/Details/F2018L00530/Html/ and I cannot determine why. Its not a frame and I cannot see something else which would change the path.
Apparently if you use the base tag, the browser ignores everything after the last slash. So a base of https://www.legislation.gov.au/Details/F2018L00530/Html/Text
is equivalent to https://www.legislation.gov.au/Details/F2018L00530/Html/
which corresponds to what we are seeing.
Weird, but I tried it with a test page with similar results.
Related
I created a new repo and uploaded all the files but the images in my div id="Container" inside my index files are not showing up. https://github.com/hkhan194/tres-chic/tree/gh-pages
I looked into all other questions regarding this matter and tried them but still no image showing.
#Hkhan I have tried the link in IE and Google Chrome,
In IE:
Your website is working fine, the images are getting displayed.
In Google Chrome:
The images are not getting displayed and when i checked the console ,I am getting this error
Error:
Mixed Content: The page at 'https://hkhan194.github.io/tres-chic/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution:
It seems that Google chrome is not allowing acceptance of the script from the url you have mentioned for the JS.
So the "mixItUp is not a function" error is getting thrown since the mixItUp function is from the former JS file.
So you could save that javascript file as "jquery.mixitup.min.js" in your github in a specific path and then include the javascript in the tag in your index file as shown below,
<script src="Your path/jquery.mixitup.min.js"></script>
First off, this isn't really a GitHub pages question. GitHub pages simply hosts your files. This is really a question about the HTML.
Secondly, you'll have much better luck if you post a MCVE. In your case this would be a smaller test page that only displays a single image.
That being said, I recommend going to the resulting HTML file: https://hkhan194.github.io/tres-chic/
Right-click anywhere in that page, and then go to "Inspect Element". That will open up a window that lets you explore the page elements, see any errors you're getting, and see what's going on over the network. I'm using Chrome, but every browser should have something very similar.
On the Network tab, notice that some of your image files aren't being found. These seem to be the result of misspellings: JPG or jpeg instead of jpg, that kind of thing.
Then on the Elements tab, find your products grid. Notice that its height is 0, which doesn't seem right. Then go into the div class="mix category-*" tags and notice that they all have a display of none!
The problem is that your CSS is setting #Container .mix to display:none, which is going to prevent them from being shown.
Please try to get into the habit of exploring your page using this window, and try to understand the difference between what GitHub Pages is doing and what your HTML is doing. If you have further questions, please try to narrow your problem down to a smaller example page. Good luck.
I have a grid of images on my website, but some of the images randomly don't work. All the image sources are links, which are all generated from the same place. I'll show an example, with an image that works and one that doesn't:
http://codepen.io/anon/pen/mJmaZE
As you can see the second image doesn't work, but if you visit the source link the image is there. Why is this happening?
The second image is missing the http:// part. That means, the browser doesn't know it should look at a different server, but tries to access it at the same server, where the HTML file is hosted.
the content of the src attribute is lacking the prefix http:// . when addint it, it displays the image correctly. otherwise, it interprets the URL as a relative URL in the context of the embedding web page.
The syntax of source URL is wrong.
Current syntax
src="steamcommunity-a.akamaihd.net/xx"
This is a relative path which will point to http://codepen.io/anon/pen/mJmaZE/steamcommunity-a.akamaihd.net/xx
Correct syntax
src="http://steamcommunity-a.akamaihd.net/xx"
which will request the intended CDN url.
I have some links in a page which only need to change the querystring portion of the current URL.
E.g. the current page is:
http://demo.com/bigreport?page=13
and I want to link to
http://demo.com/bigreport?page=14
Can I use Next as a relative link for this?
I was surprised to find it works in Chrome. I've never seen it documented or mentioned anywhere, so I'm keen to know if anyone uses this, and if there is wider browser support.
Further research reveals that Next is a valid relative URL.
It's documented as part of WHATWG's URL spec
http://url.spec.whatwg.org/#relative-state
The new URL will inherit the base URL's scheme, host, port and path.
Tested to work on:
Chrome
IE 7
Next works because browsers interpret that as a relative URL. Similar to how linking images on your site might work <img src="logo.gif"/> Relative urls work this way (link is relative to the current page), you don't need to use the full absolute URL.
Browsers have been supporting this for long long time. People might not be aware of it because browser automatically handles it.
I'm trying to parse a page to find all valid urls, but here is a problem. There are 3 types of links on a page: url (_http://site.com/dir/page.html), absolute uri (/dir/page.html) and relative uri (dir/page.html without starting slash). Probably i'm wrong about terminology, i'm not an html coder. But that's not the case in any way.
I need to find and collect all urls (i.e. _http://site.com/dir/subdir/page.html and so on). And here is the problem. If there is a page _http://site.com/dir/page.html with a link like link it's supposed to bring us to _http://site.com/dir/subdir/page.html. But if there is <base href="/"> in the head section of a page, same link leads to _http://site.com/subdir/page.html i.e. different from _http://site.com/dir/subdir/page.html.
The question is if there can be anything else in html code on a page that can influence target url.
Thanks in advance.
In HTML as such there is nothing else beside the href base You mentioned
What could become tricky and should be considered is that there might be linkage on page made by script execution, so things like window.location.href = something. This would be easy if the links are clearly stated, but they might be also computed by the script and then You could miss the link or mis-read it by using simple parsing.
Your problem is actually how url linking in html works, please read: http://www.webdevelopersnotes.com/design/relative_and_absolute_urls.php3 . So say you're in /admin/ and you need /admin/login.aspx . My relative URL is login.aspx, while my absolute is /admin/login.aspx make sense?
So basically what I'm saying is consider which directory your link is being served out of. That will determine the type and content of the url link to use.
Other than that, as stated already, jscript and server side code can also do linking.
**** EDIT: SOLVED HERE Relative paths from file for img, a and header ****
Somewhat new to web design.
I just finished creating a dynamic site. It can read domain/category, domain/category/this-article-about-x, all redirecting to domain/index.php and working well.
However, I quickly learned that whenever I used a relative path such as ./include, the relative path was taking in account the current URL, and not the actual url where the php file is at.
I have 2 questions that I couldn't answer when browsing the internet for a long time:
1) If domain/index.php is trying to show an image with ./thumbnails/science/image.jpg, it won't work if the actual url is domain/category/, but it WILL work if its just domain/category(no slash at the end). Why this inconsistency? The HTML code is showing the src to the image is the same on both cases.
2) My header has a dropdown menu with categories. Once its submitted, it will call itself (header.php), see which category the user chose and redirect to domain/category. All works well. You can then rechange the dropdown menu to another category and everything loads again. But again, if you access directly domain/cateory/ (with the slash at the end), the CSS won't load, the images won't load as said on question 1, and submitting the form will cause a problem because it will look for header.php on domain/category/, and not just on domain where the header.php file actually is.
I have successfully used dirname(FILE) to make sure my includes all work (as far as my testing has gone, no errors). But I could not use dirname(FILE) to generate links or images 'img src=' that will always point to the images regardless of the URL.
On localhost, the HTML is coming as img src=c:\path\htdocs\thumbnails\img, which is right, but the image does not display anyway. Same with the 'a href' links. Trying to create links with dirname(FILE) created links on localhost as c:\correctpath, but clicking on them did absolutely nothing. Also, using header with dirname(FILE) to handle the redirection from the dropdown menu caused it to cease working as well (but if I used ./ . dropDownMenuValue, it would again correctly change the url to domain/categoryChosen)
How can I use a consistent method for relative urls that allow me to work on localhost and then upload to my web host without the need make changes to the files, AND that works with dynamic websites that have pretty name urls through htaccess?
Thank you,
This is all very puzzling for me how getting a relative path from the current file path is being so hard and generating so many different issues, and why only include statements seem to work well with dirname(FILE)
Edit: http://board.phpbuilder.com/showthread.php?10374336-RESOLVED-mod_rewrite-for-SEO-Friendly-URLs-and-relative-path-issue-fixes
I've found this on other sites, but it requires you to change the base everytime you want to go from localhost to the web. I'm trying to avoid that. Clearly there has to be a simple way to do something so basic. I can't believe google and everybody else are changing paths when they are ready to make something live.
You should just always use absolute paths for public files like media. If you don't want to do that for some reason or your site is just too involved at this point you'll have to create rewrite rules for the other file types so they can also be included from the correct path.