How to use iframes in github - javascript

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.

Related

Github Pages don't like relative links

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

Embed d3.js to a Jekyll Post

Exactly as this question, I want to embed this particular example on my blog.
I tried using <iframe> but bl.ocks.org isn't supporting it anymore. I tried with <iframe> using rawgit but this too didn't work. I tried using the method given here and it works! but for my example it doesn't.
I have inspected both of these sites (this one) and (this too), and found out that in my case the d3 script isn't appending any svg element in my custom div. ( Please look at this answer for the method I used )
Please suggest me how to proceed with this.
I solved this by:
creating another folder in _includes in the main Jekyll
directory and placing my custom .js files in it.
Then change d3.select("body").selectAll("svg") to
d3.select("div#example").append("svg").
Finally it renders the custom .js files alright.

Iframe resize and cross site scripting

Here is the problem! I have an iframe that loads an external website. I want the iframe to resize to 100% based on the content height, so that I don't get a scrollbar. Setting iframe height to 100% does not work.
I came up with two solutions:
Set the document.domain property at both ends to the same domain,
which gives the iframe content access to the parent window. The the
resize method can be initiated from within the iframe.
Use HTML5 postMessage API to take appropriate action. I use to communicate between the two iframes.
Both these approaches are complex. Is there a simpler approach to this problem?
You could embed another iframe into your iframe. If the source of that iframe is from the same domain,protocol and port as the top level iframe then it can access it through parent.parent
I encountered the same problem last year and found a solution that worked for me on this blog:
http://solidgone.org/Set-IFRAME-height-based-on-size-of-remotely-loaded-content
An updated version of that method can be found in his follow-up article: http://solidgone.org/Redux-Set-IFRAME-height-based-on-size-of-remotely-loaded-content
Like jack describes, the implementation requires an embedded iframe into your page with a source of the same parent domain.
I did have a small issue in FF. The solution can be found in the comments of the follow-up article.
Hope this helps!
A simpler solution would be to use this little project on github.
https://github.com/davidjbradshaw/iframe-resizer

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.

javascript in masterpages ASP.NET 2.0

I am trying to set up a masterpage that contains a javascript popup subroutine that can be used in multiple web pages. The popup already works in a single page environment. I now want to migrate it to a master page. Any ideas will be greatly appreciated. I already searched this site and tried a couple of the suggestions to no avail. W small working example would help.
Thanks
Bill
Just take what you have in your single page and place it in the master page. It is really that simple. :) Then just replace the main body of the HTML in the master page with the content sections and you should be ready to go.
One thing I did discover was that for some reason the derived page had to be in the same folder as the master page.
Most likely caused by the master page referencing a subdirectory that works for the master page, but not the internal pages themselves. One workaround would be using
ScriptManager.RegisterClientScriptInclude(string Key, string URL)
like so:
ScriptManager.RegisterClientScriptInclude("uniqueIdentifier", "~/javascript/myjs.js");
Alternatively, you can embed the file as a resource and use
ScriptManager.RegisterClientScriptResource(Page, Type, Key);
like so:
ScriptManager.RegisterClientScriptResource(this.Page, typeOf(Page), "resourceKey");
this is my current favourite, seems to be most robust and flexible. Simply include the js files in your master then create an isntance on your pages
be sure to use the scriptmanager class to add the javascript

Categories

Resources