Github Pages don't like relative links - javascript

I have some relative links in a development.md and all links are on the same site.
For example:
* [Scripts](#scripts)
##Scripts
here commes an lot of text
After pushing to github, the links works. Then I pushed the site to Github
Pages and the links don't work anymore.
On Github I see the path in the browser
https://github.com/name/project/blob/master/docs/development.md#scripts
On Github Pages I see this path in the browser
http://ux.example.com/#scripts
How can I solve this problem? I don't use Jekyll.
I got this answer from github. As this is a React app, and not something to do with GitHub Pages, I'm not sure how much we will be able to support it. However, it looks like whatever router you're using to configure your page may be getting confused. Because your router is using a # character I believe it's trying to change the page, but no page for #scripts exists. Finally, it looks like your scripts section is missing the id="scripts" required to make anchor links work.
I found this solution
The solution is very simple
* [Scripts](#scripts)
##Scripts <a id="scripts"></a>
here commes an lot of text

Related

HTML sub-pages (using a domain)

I've been thinking about purchasing a domain and putting a website on it, but I'm not sure how I would add sub-pages. I'm probably using the wrong words, but I'll try to explain what I mean.
For example, the main page is stackoverflow.com. When you go to another page, it goes to stackoverflow.com/questions. Is this achieved using Javascript, or is it set up manually where you link an HTML file to the sub-page?
I'm not too sure where to start here, so any help is appreciated.
One of the simplest ways to set up a website with multiple pages is to create a folder for each page and an index.html file for each page. These can then be linked together using HTML anchors or JavaScript code. For detailed instructions on how to do this, I suggest checking out tutorials from W3Schools like how to make a website

Angular2, links not working with lazy loaded modules, but worked on page refresh

I have Angular2 project built with Angular-CLI. I'm using lazy loading for modules which I guess causing my problem.
After I load project with Module A on browser, and I click navigation link which load Module B (with lazy loading) then clicking on simple link, ie.
Click me
it doesn't work, nothing happened, but when I refresh page on Module B, same links start working.
Does anyone have a clue why this is happening?
I checked on network tab and in both cases, all requests look the same, only difference that when switching between modules page is loading whole application with Module A, and then just loads required files for Module B.
I know this is not a very detailed description but for now I don't know what to say more.
Thanks for any help.
Finally, I found the solution. The problem was about how I've inserted HTML chunk in angular template.
Before I was using [innerHTML]="fullDescription" property which prevents from clicking in links.
Solution
<div innerHTML="{{fullDescription}}"></div>
Also I had to omit bypassSecurityTrustHtml from DomSanitizer.
Hope this will help someone.

How to use iframes in github

I ran into some problems with my iframes in github. I am making an incremental game which uses iframes to display different pages for each section of a bannner I have on top of the page. It works with textastic currently but not pages. The repository is here: https://github.com/VSquidDevV/IdleMiner
GitHub Page:
http://vsquiddevv.github.io/IdleMiner/
.. you reference the iframe outside of the repo, so it goes to
https://raw.githubusercontent.com/…/pages/mainGame.html
instead of to a relative path pages/mainGame.html.
Change it in index.html in your github repo as was said by #hopkins-matt.
Using https://raw.githubusercontent.com/ doesn't work because of the X-Frame-Options problem, just use relative path is ok.

Multiple og:image tags not being displayed by share dialog or update status box

I am currently working a new feature to allow users to select the thumbnail they would like to use when sharing an page on Facebook. The user should be able to use the Facebook widgets like the send dialog or share buttons as well as simply cutting and pasting the URL into their udpate status dialog on Facebook.
I have read much of the documentation, which seems to indicate that I simply need to add multiple og:image tags in the page being shared. I have done this and run the page through the linter so the cache gets updated.
When passing the page to the share.php directly, effectively removing any of my client side code and letting the dialog present what it is scraping, I am seeing 3 images from the page available.
I am not sure what I am doing wrong here.
Here is the linter result, the graph object, the sharer.php link and the page. Anyone have ideas of what I could be doing incorrectly?
I have confirmed that at least the og:title tag is being respected by the share dialog. I have also tested the size of the images, and included file extensions as suggested below.
I know this works because buzzfeed has the exact functionality I am going for. I have reduced my example down to only the core pieces I think should work. You can find the full source here.
Could it be the XML namespace in the top HTML tag?
In the BuzzFeed article, it's:
xmlns:og="http://opengraphprotocol.org/schema/"
In your page its:
xmlns:og="http://ogp.me/ns#"
On the Buzzfeed article, the content attributes in the og:image links point to named .jpg files, vs your links which do not have a filename/extension at the end.
It may be required to include a filename in the links, especially if it's basing image detection on the file extension.
EG:
Buzzfeed:
<meta property="og:image" content="http://s3-ak.buzzfeed.com/static/campaign_images/webdr02/2013/3/18/11/10-lifechanging-ways-to-make-your-day-more-effici-1-2774-1363621197-4_big.jpg" />
Yours:
<meta property="og:image" content="http://statics.stage3.cheezdev.com/mediumSquare/3845/4AC356E3/1"/>
After some tests, I guess it's a caching issue.
Looks like the sharer is caching the graph, using the og:url as a key, so that different querystrings in the sharer won't bypass the cache, if they do not impact the og:url value.
Obviously, the debug tool don't use such cache.
If I'm right (this is just an insight), you can either wait that the cache entry expires or try with a different og:url. Moreover, to ease the test, keep the new og:url equal to the new page location.
So funny story, I'm a developer at BuzzFeed and came across this while trying to figure out why our share dialogs suddenly stopped showing the thumbnail picker.
It looks like Facebook disabled the functionality. It briefly made a reappearance on 1/14/2014 but they introduced a bug that prevented sharing from any pages with multiple og:image tags defined. (See: https://developers.facebook.com/bugs/1393578360896606/)
They fixed the bug, but as of 1/22/2014 it still looks like the thumbnail picker is disabled.
The Sharer.php script on the Facebook site doesn't support all the OG tags as far as I know. The images are scraped from the page content itself, so if you want your three images to appear on the Sharer.php script, include them in your content.
Sharer.php has been officially deprecated by Facebook, so I wouldn't be surprised if certain functionality does not work with it. While it still works, it was always the simplest option and I'm guessing they never built the link image scraping from the og items into it.
I was able to find this article, which shows one way that you can specify exactly what images are available to the sharer.php share page. You can specify one (or multiple) images to share with a URL structure like the following:
http://www.facebook.com/sharer.php?s=100
&p[url]=http://bit.ly/myelection
&p[images][0]=http://election.gv.my/assets/vote.png
&p[title]=My customized title
&p[summary]=My customized summary

jQuery 1.7.1 slider not working except on homepage

I have tried to place the slider on every page on this website: http://atripathi.com
It works on the homepage, but doesn't work on any of the other pages (About, Services, etc.)
I know it's probably an easy fix, but I can't get it at the moment.
Thank you for any help or suggestions!
Looks like the original suggestion above is correct. I'm seeing slider javascript includes at the top of your homepage that aren't on the other pages.
Generally, a good way of troubleshooting is to make copies of both pages, index-c.php and about-c.php perhaps, and start removing everything that isn't pertinent to the trouble you're having (other HTML, css includes, etc.) until you get down to only the slider on the page. Once you've done that, you might notice that the one page is slightly different than the other, making it work. You can copy back and forth until it does.
The other possibility is that there's a relative path problem somewhere, because your one page is inside a folder (though I'm guessing you have a .htaccess redirect to a root folder page)? So if all else fails, move the reduced about-c.php to the root folder and see if that then works. If so, you know it's a path problem.
Hope these suggestions help.
I see that jQuery is being included on all your pages but the cycle plugin is only included on the home page. You should be able to update your template(s) to fix this.

Categories

Resources