Lightbox with IFrame is flickering when clicking on links - javascript

I've got the same problem with this post:
How to fix flickering in IFrames?
Unfortunately, there's no solution (and I'm afraid of negative ratings too :) ).
I can't provide a page where you can see the behaviour (as it's intranet) - but I'll try to explain it:
When I open an external page via lightbox, I get a disturbing 'flickering' when clicking on links... i.e. I try to open an image gallery located on an internal server - clicking on the "next" link lets the page flicker before moving on to the next page.
If I open any other web page (google, some newspaper, ...) I do not get this behaviour - it's much faster, so it seems like the content of the first page is replaced by the content of the next one. In my image gallery it's much slower: the first page disappears, then the next page appears. I get this flickering only with lightbox-popup, not, if I load the page in another window.
I tried differend JavaScript frameworks (jQuery, Scriptaculous, Standalone) - so I guess it's my image gallery which causes this behaviour... any ideas?
It would be really (!) appreciated... thanks!
Best regards,
Stefan

As Max mentions, source would be useful.
Also, try using Fiddler or Firebug's Net panel to look at the actual HTTP requests that are being made - perhaps your image gallery is POSTing to itself before redirecting to another page?

Related

How to load only the content area, skip header and footer loading again in new pages over clicking links

Im using Basecamp, and when I click on the menu links, it just loads the inner body content alone, but still the URL changes, I wonder, Ive examined in network tab, and I see there for each link click it triggers an request and it only gets body part, no headers/footer are loading, amazed with the flow.
Where as in other sites(even in stackoverflow) it loads the page from the beginning, but with cache or some other stuff it loads quickly but there is a lil flicker if we could examine clearly.
Do you guys have any idea how it works, are there any frameworks that helps this way? because this really works extremely fast and no flicker at all in header menus, and specially while browsing in mobile it gives a feel like using an application(mobile app that loads just the content)
Please let me if you have any idea how this flow works.
Thanks in advance
Here's a full explanation of why this is so fast:
Stacker: a Turbolinks/PJAX technique for instant page loads
Russian-doll caching: a low-hassle, automated way to do aggressive caching

Fancybox - implementing backward and forward for iFrames

I'm using Fancybox to display webpages through an iFrame. Those webpages are like a little information network: they're calling each other via links, and the user can circle through them.
I wanted to implement back et forth buttons: I did it by putting those buttons directly inside the displayed page, and working with the history (history.go(-1)) : that works, as long as the browser behaves in the way they do with iFrames.
However, there's a problem: if the user clicks on the back button and is on the first page of his navigation, it will bring him back out of the website itself (as, out of the fancy box, it's a one-page website).
As for security purpose you cannot have access to the history and test it to avoid that, is there a way to find out if the user will get out of the domain if he does a step more? Document.referent doesn't seem to work in the context of Fancybox and iFrames…
Thanks A LOT, I tried many (mainly stupid things), including a javascript session with window.name (see how desperate I am ?) !

How to keep audio playing while navigating through pages?

I am making a website for my friends band. I would like to know if its possible (apart from using Ajax) to keep audio playing after clicking on a link to another page on the site?
I currently have it set up using Ajax to reload the content, but I am having a few issues with it, and I'd rather not deal with the bother unless I really have to.
If not possible, is there a way to minimise the disruption (pausing then playing again) while navigating? It would be possible for the new page to continue playing the track from where the last page stopped, but I would like to minimise the pause. Or, on this subject, is it possible to keep certain page elements loaded after changing the URL (without using # urls), like facebook does (as in, you click on it, but the banner never disappears during loading)
Thanks for any help :)
Use Ajax to load content and History API’s pushState() to alter URL without page reload.
For consistent behavior across browsers, consider using a wrapper library like History.js.
Sites like Facebook use JavaScript/AJAX for these kind of things. If you don't want to use it, you can use frames (not recommended). Divide the page in two frames: the player and the website itself. This way you can easily turn it off too, just open the site without frames.
Good luck!
Of course you could also pop up the player in another window/tab.
(For now) It won't be possible without frames or javascript.
It might be troublesome to implement it differently than via AJAX, however you can either use IFrames, where the music would be played in the main one and the content is displayed in the child on or you can always make it a Flash webpage.
Build it in Wordpress and use the AnythingSlider plugin to have the pages shift within the main page. This way you can have tabbed navigation and never leave the actual page. No need to write too much code. The AnythingSlider uses html for the slides.
You can also not use wordpress and just use the AnythingSlider code.
http://css-tricks.com/anythingslider-jquery-plugin/
and
http://wordpress.org/extend/plugins/anythingslider-for-wordpress/
and
http://css-tricks.com/examples/AnythingSlider/

How to implement a persistent (non-refreshing) page element?

What would be the best approcah to have a div containg a flash player, that does not refresh when you mavigate to another page on the same site. This would mean the player would not stop. I have 2 examples:
The first is http://www.djtunes.com/ unfortunately this adds a # to the url and all navigation after invoking the player is appended to the the site url with the # in between.
The second example is http://hypem.com/ this constructs the url in a more friendly fashion. I have noticed that clicking the refresh button reloads the entire page but this is to be expected. Any assistance with this problem would be appreciated.
I believe you'll require ajax to load the rest of the pages, with the flash player running. To get the URLs like hypem.com, you can try manipulating the browser history. Read up on this article

Do links with javascript slow down a page?

Due to an issue that came up with a website I have to use javascript for all of the links on the page.
like so...
<img src="image.png"/>
Will having many links with javascript on the webpage slow it down significantly?
Does the Javascript run when the page initially loads or only when a link is clicked?
EDIT: For those asking why I'm doing this. I'm creating an iPad site, when you use the 'add to home page' button to add the site as an icon, it allows users to view the site with no address bar.
However everytime a link is clicked it reopens Safari in a new window with the address bar back.
The only solution I could find was using javascript instead of an html based link to open the page.
For further reference see...
iPad WebApp Full Screen in Safari
2nd answer
"It only opens the first (bookmarked) page full screen. Any next page will be opened WITH the address bar visible again. Whatever meta tag you put into your page header..."
3rd answer down
"If you want to stay in a browser without launching a new window use this HTML code:
a href="javascript:this.location = 'index.php?page=1'"
"
I can see this adding to the bandwidth needs of a site marginally (very marginally), but the render time and the response time on clicking shouldn't be noticeable.
If it is a large concern I would recommend benchmarking the two different approaches to compare the real impact.
What do you mean by slow it down?
Page load time? Depends on the number of links on your page. It would have to be a LOT to be noticeable. Execution time? Again, not noticeable.
The better question to ask is are you o.k. with effectively deleting your website for those without javascript?
Also, if you are worried about SEO, you will need to take additional measures to ensure your site can still be indexed. (I doubt Google follows those kinds of URLs... could be wrong I guess).
EDIT: Now that you explained your situation above, you could easily just "hide" the address bar. See this SO question.

Categories