I am building a website on Drupal 7 and want to add an audio player on the front page, and when the user goes to another page, I want the music to remain uninterrupted (to continue playing).
Is this possible without using frames tag?
You can do this by using javascript (more likely jQuery etc.) to load your content (via AJAX) into the page and insert it into a content block. This will allow you to avoid frames but adds new problems. For one you will need to change the way that most of what Drupal does for you to allow for this AJAX loading of content. That means the menus will need to trigger javascript not load a page. The same goes for links in the content.
With some clever jQuery you can bind much of that linking functionality with some live() events, but if you've never done that before it will be a bit tricky. To be more specific with this I'd need to see how your code really looked.
A plugin like jQuery BBQ can take some of the pain out of this technique but it isn't going to be a magical solution, just a powerful tool so you can do it yourself. http://benalman.com/projects/jquery-bbq-plugin/
Related
I'm working on a project that requires previews for related websites. We've been playing with a couple ideas, and two that have come up are using a service to render the website and send back a screenshot, or fetching the website and loading it in iframes as a 'live preview'.
The team is convinced that the iframes are the better option, since they would be interactive, and allow for dynamic visuals to be previewed, but I have some performance concerns.
Just wondering if anyone could offer some insights here, without coding up a server to fetch the website content and forward it to the site. The designs would have about 5 images/iframes, relatively small ~300x500 pixels. Would loading the 5 iframes be analogous to opening those sites in 5 tabs?
To answer your question, yes, it is analogous to opening those sites in 5 tabs. iFrames build an entirely new page in memory, then add it to the page.
Besides this, iFrames have huge security issues, as you are accepting the providers code without question. You're always better off using ajax and injecting the code into your own DOM after some parsing, but I realize that sometimes options are limited.
Check out performance specs offered here.
I think the important piece of the above article is this:
Iframes Block Onload
It’s important that the window’s onload event fire as soon as
possible. This causes the browser’s busy indicators to stop, letting
the user know that the page is done loading. When the onload event is
delayed, it gives the user the perception that the page is slower.
The window’s onload event doesn’t fire until all its iframes, and all
the resources in these iframes, have fully loaded. In Safari and
Chrome, setting the iframe’s SRC dynamically via JavaScript avoids
this blocking behavior.
I am developing an HTML5 web app that is mostly being used on mobile devices. It's basically a link discovery app: It shows the user some hopefully interesing links, which the user then can visit. I would like to keep the user in our app though, so that our menu bar always remains at top.
Standard links of course take the users away from our page completely, with no option to return:
The Cheshire Cheese Cat
frames and iframes are discouraged in HTML5. What other options are there?
(What we try to achieve is similar to what Facebook or Twitter are doing. Lots of links are being passed around there, which the user can visit. But he alsway can go back to his news feed, with the Facebook or Twitter menu bar.
If you just want to make links open in a new tab (which is what I would recommend), you can simply use target="_blank":
<!-- opens in a new tab/window (depending on the user's browser) -->
The Cheshire Cheese Cat
Man I think you have to make a good research about HTML5
Html 5 is only a upgrade (in quotes) to the existence html and javascript, iframes are totally valid element and frame you are right they are deprecated. But for at least you dont want to use them or other, iframe are a good way to go for what you want to achieve. If you are going in the iOS or Android plataform I dont sure but I guess should exist some kind of browser object which is what use facebook.
I think you have problems with the cross domain control policy and not because the iframe tag
take a look to this answer
Alternative to iFrames with HTML5
best
And HTML5 is no a new framework is just html and javascript.
Is there any standard way (or library) to superimpose one HTML5 browser window on top of another?
One purpose of this would be when upgrading the code of any existing HTML frontend while keeping the appearance exactly like the old one: you could load up the old frontend and then load up your in-progress new frontend "on top" of it and either make one of them translucent like tracing paper, or toggle one of them on and off.
Doing this with static HTML/CSS and no javascript is not too hard, but I have no idea how you would do it while maintaining all the cookies, localstorage, using javascript, etc for each "version".
I'm really looking for a way to do this in just HTML/CSS/JS (inside one actual browser), but if it can't be done, I'm interested in browser extensions that can do this.
Have you considered loading the new frontend in an iframe? You might have to attach version numbers to your cookies and localstorage, depends on the exact implementation.
I have a busy photo website that is currently making a new page request every time a user wants to load another page of results. I would now like to implement an AJAX/AJAX style paging effect, to only the gallery part of the page.
I can do this in jQuery/JS loading the different pages via AJAX but is this also possible, as a cheat, to use an iFrame? So when a user searches, post the input to the iFrame target and when they select a page number, post that to the iFrame target.
I ask this because I know there are some good uses of iFrames and bad ones. I would like to make sure this isn't one of the bad ones. I have read about browser back buttons causing issues with using iFrames. Will this be an issue here, if it's a good idea of course?
You could look into jQuery's .load() function here. That's what I'd recommend. the iFrame will still make a new page request. As well, .load() actually builds the content into your page, not just in a framed page. Looks a little more professional, works a little better, and isn't as heavy on the server (though 1 page load isn't much to it)
Hi I want to create a website which has the following structure:
The idea is to have a menu in the left and border images in the left and right frames. the header will contain the page title and also user information (i.e. logged in, log out button etc). The content region is the one where the site content is displayed. I want to only update this as buttons are pressed in the menu in the left frame...
How can I achieve this using iframes? Sorry I am a HTML noob.... Are frames the best approach? I just want to have a part of the page that updates as opposed to the entire page redrawing each time..
Actually frames are NOT a good approach. You should avoid frames and completely forget about their existence if possible. Frames are evil.
Better approach is use of a preprocessor (PHP, ASP, Python,..) to include parts of the page into HTML. There are many frameworks and templating systems which will do the hard work for you. E.g. for PHP see Smarty temlating engine.
If you don't want browsers to reload all page but only content in the middle of the page AJAX is much better solution.
Update:
In jQuery you could use jQuery.click() and jQuery.load() functions to load and place new content into page when a user clicks on a menu item.
Best practice when using ajax to load new content dynamically is to provide also alternative for machines with disabled JavaScript (e.g. search engines crawlers). However it's bit more complicated to implement this properly from a scratch, but there are some frameworks which can help you. Personally I prefer Nette Framework because it's lightweight and efficient in comparison to other frameworks.