Is there a solution to have the background audio/music play across multiple page on a website, WITHOUT restarting on every page load.
The website currently uses a frameset, but I'm looking for an alternative.
Without making the whole site AJAX I think frames are the only way.
Here's a tutorial for making an ajax site if you need it.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
It will give you separate addresses for each page.. sorta.
The only other alternative is to use site-wide AJAX. Each link would dynamically change the page content without navigating away.
Implementing this is time-consuming. Each dynamically loaded page must be stripped of headers and each link must contain a Javascript event that calls an AJAX request.
Related
I am currently trying to make a transition between pages on a website.
Eg: If a user were on www.example.com/About and they clicked on a link to go to www.example.com/Contact, the about page would fly out to the left, whilst the contact page would fly in from the right.
So far all I could find online was how to do this on the same page with hashtags. But I want to do this with separate pages.
is it possible?
if not is there an alternative and how to do it?
UPDATE
Ok so I did a bit more research and I found this thing called barba.js(http://barbajs.org) that seemed to do what I'm looking for. So I installed the js script file followed the instructions on the site...and it didn't work! All it did was not load my pages correctly and didn't do what it was supposed to do. Anyone know how I can use this(or if there is a better option than barba.js).
-Thanks!
I don't think you can do that with pure html & js, as you load the entire page each time you click on a link if it's not an anchor.
However you can load just a part of the page, and so apply a transition of your choice with Ajax and js
But in the end, you won't really switch from page to page, but only load the parts that you want to update. This is approximately how modern front end frameworks like Angular, React,... are working
Here is a pure js example http://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_first
Here is a jQuery example http://www.w3schools.com/jquery/ajax_ajax.asp
You are talking about is page transition and it normally happens in SPA (Single Page Application) where there is no hard refresh.
If you are not working in a SPA application I don't think you can do that where you are moving from one page to another by link/button click and a hard refresh happens.
You can choose angularjs one of the famous spa/mvc framework in jvascript and us ui-router to move from one page to another. there are many other you can explore.
I'm trying to capture div#map-canvas from my site, www.RichBlocksPoorBlocks.com, to make an iframe that people can embed anywhere.
Here's my iframe
<iframe src="http://www.richblockspoorblocks.com#map-canvas" style="width:600px; height:400px;"></iframe>
It goes to div#map-canvas, but it also loads the rest of the page as well. I'd like that div to be the only thing in the iframe.
Is this possible with an iframe?
To achieve this, it would be easier to create a separate .php or .html document which contains only the parts that you want to show in the iframe and exclude everything else.
So, instead of the iframe pointing to "http://www.richblockspoorblocks.com#map-canvas", it would point to something like : "http://www.richblockspoorblocks.com/map-canvas.php".
This would be a very quick and efficient way of doing what you want, and doesn't require any outside libraries or javascript.
When you call http://www.richblockspoorblocks.com#map-canvas the hash will probably cause the browser to look for a corresponding <a name="foo">bar</a> so this won't work using an iFrame.
What I would recommend doing is writing a script which you call from your iFrame which accepts the name of the page fragment to load. I know using jQuery's $.load() you can call an element ID to load a page fragment, and I think it's also possible in PHP too...
You cannot use hash links in iframes.
You can and should use, few lines of you'r favorite server side language to create the specific content you want to render and then link to it. in that way, you'r server will send out to the end user only the desired data and also it saves bandwith and loading time.
I have a personal website, which I have made (to the best of my ability) without a template. I am not very experience in HTML so am not entirely sure if this is bad practice or not, but here is my issue.
My website consists of a frameset, which has 3 frames. Two do not change (banner and nav panel), and the other is content. The way I display my content in the main frame is through an iframe. Here's where the trouble comes. I have suggested my website to the crawler, and it crawls all the pages for content, of course. When I click on one of my links suggested by google (say, a project), the browser loads that individual .html file, without any of the rest of my frames. In other words, it does not link to the page through my index.html which sets up the formatting and page frames, but simply loads the html as a stand-alone page.
Is there a way I can avoid this, so that if a link for my website is clicked from an external link (not from my domain), the page first loads my index.html, and then the page of interest, so that it appears as if it were accessed normally from my index? I am not sure whether I should find a new way of displaying my content in the main frame so that it avoids iframes, or just need a simple script to redirect the user.
Not sure if it's useful but I've attached a photo of my page just to better explain what the frame layout is that I am working with.
Many thanks!!!
iFrames are definitely not the route to take when you are displaying consistent content... Which from what appears to be the Navigation, Header, and of course, the Content. Of course there will be an issue when a "Search Engine Spider" crawls your page... From my understanding, seeing as you are calling "content" from another page, the spider will crawl that page but will not crawl the index.html page we are currently viewing. When a "Spider" crawls a page it looks for STATIC HTML Tags/Content/Keywords/etc, and seeing as you are calling all of your content from other pages the "Spider" will treat that content as being on another page as well.
You want me recommendation? Avoid using an iFrame at all times. The point of an iFrame is to display content from another location (external), and or display static content on a page without having to scroll the current page you are viewing the iFrame on.
It is bad practice to use an iFrame, I would suggest using DIVs. Within these DIVs you may place content, images, links... Virtually anything you want, with all of the benefits of having people view your website, along with Search Engine Spiders.
I hope this helps!
Thanks,
Aaron
iFrames are a bad choice. AJAX is VERY simple these days. Just replace the big iFrame with a Div, and AJAX a page, putting the contents into that Div.
Replace your anchors with tags, and replace href with name, like so:
<div name='main.html' class='link' />
You need a div with the id 'loadHere':
Then include jQuery (it's pretty easy, google it) and at the end of your HTML put this:
$('.link').click(function(){
$.post(this.name,function(dat){
$('#loadHere').html(dat); }); });
Hello I'm creating a site at the moment (asp.net mvc) which has a div at the bottom side of the page that works as a messenger.
I would like to find a way to make the site work like facebook's chat. In other words, when a user clicks on a link on the site to load the content on the back however the messenger to stay in tact without loading again.
Will I have to change the site so every page is loaded with an ajax request? Also, I don't want to use iframes.
The only way to have elements to stay on screen from page to page without using iframes to use ajax requests, something like load() if you're uisng jQuery.
Most sites that do it use some variation of hashbangs, so a page can be loaded by directly entering it's url, rather than necessitating a path through other pages.
To do what you propose has fundamental implications to the structure of the entire site, so if this messenger box isn't anything more than a gimmick, I wouldn't bother. I'd even go so far as to say that if you're not sure how you'd do this one thing, you shouldn't be trying to build a site around it.
Well if you dont want your chat to disappear even for a moment with full site refresh, then yes, you have to change your page to ajax loading. It is not such a pain as it looks - for example use jquery to intercept all clicks on anchors, make ajax call to their href, and replace some "all-wrapping" placeholder div with the returned content.. Not very pretty usage of ajax, but it works, and your chat stays in place.
Is it legal to have an IFrame on a website which inside has an external website?
In an IFrame is it possible to only show a section of the src that isn't the top left of the site (for instance if there was a chart in the middle of a website, could u have just the chart in your Iframe, or at least start it centred there)
Is there any way to stop my IFrame from auto redirecting me to the external site
for 3: ie
<iframe src="http://fifa.com"></iframe>
Just sends me to fifa instead of actually showing that site in a frame.
Instead of using an iframe is it possible to copy the chart and source it back to where you got it from?
Fifa is probably using javascript to prevent you from placing the site in an iframe... and it's generally a pretty shady thing to do.
This depends on the rules of the external website. You should at least ask them for permission and only do it if they are OK with it (no replay does not mean they agree!)
No, an IFrame is like a new browser.
If the external site uses JavaScript to break out of frames, then the only way to prevent this is to disable JavaScript in your browser.
I guess it's legal, but it isn't decent.
Ah, so you only wanna show the scores i.e., I guess there should be a way, but again it's not decent, you just don't use such constructions, you just don't!
No! That's exactly the point of that redirect. The only way to do that will be with javascript disabled.