Client is requesting a single track to be heard across the website. Generally I advise against it, but they insist. So, what is the most straightforward way of having a flash player embedded in a site, and when a user goes to another page there isn't a gap/interruption?
I am thinking an iframe is required.. I am using a flash player that has autoresume, but that only solves picking up where you last left off on the song before going to another page. I tried searching SO for an answer..
If you want it totally uninterrupted, you'll have to embed the whole site in an iframe, or load pages via Ajax.
If you can tolerate a pause in the music, what you could do is modify your Flash music player to keep a cookie with the current position in the song and when it loads checks for the cookie and resumes playing at that place.
Both are kind of ugly hacks, but so is forcing the user to listen to music.
To do something like that you'd need to keep the browser on the same page and load the contents of the page using AJAX. The html you get back from your AJAX requests could be placed in an iFrame but there's no advantage to doing so. Really you'll need to know a bit of Javascript and AJAX. If you haven't done much AJAX I'd start with JQuery as it makes it quite a bit easier.
Of course doing a whole website like this could become very complicated especially if the pages are doing anything more complicated than showing text. Also take into consideration that the address bar will always show the same address so bookmarking pages wouldn't work. Again you could probably find a way around this, but my point is there's a lot of little things you'll have to think about if you decide to go this route.
You can try a popunder. As horrid as that is, you can't really do much worse than playing music on a site anyway, so if the client would be ok with it, it's an option.
Create a hidden iframe behind the current content. Play content there. Have page-to-page navigation happen in the top frame, so the background frame stays in place. As a minus, the URL will stay the same.
Seriously, though, the site's going to suck unless there's a way to turn the crap off.
Related
The default behaviour of a web page is that the browser displays it "from the top". I can request it to be displayed from a specific bookmark if I set for example the id="my_bookmark" attribute to an element in the page and then request the URL mywebsite.com/mypage.html#my_bookmark.
I feel like there has to be a way to change this behaviour so that a page will automatically load at a specified bookmark further down the page, because that seems to me like a no-brainer, yet I can't find anything on that. Maybe I'm looking in the wrong places ?
Specific questions :
Is there a simple HTML5 way to do this ? Like some sort of <meta> tag or other that tells the browser at what bookmark to load a page by default ?
Failing that, I'm curious : how are bookmarks handled at all ? I feel like if they're included in the URL it has to be because the server does something with that information; can I do anything about the bookmarks with PHP ? Or even with the damned .htaccess file ?
If this feature doesn't exist anywhere, is there a good reason that I just don't see ? It does seem to me like it's a very straightforward thing.
If you're wondering, my use case is this : I'm making a web-based game that has the player move through a story by solving puzzles. Every so often the player discovers a new "bit" of the story (a couple of new paragraphs). When they do, they are taken to story.php where all the pieces of the story that they have so far discovered will be displayed, in reading order, from top to bottom. But I want the player to land on story.php directly at the last bit of the story that they discovered, and I want them to scroll up if they want to read the previous stuff. I feel like that has to be doable, and fairly simple.
The stuff I know : Some HTML5, some CSS, some PHP. I don't really want to use a specific new PHP library if it means I have to install it, and I feel like I want to avoid JavaScript, but maybe you can talk me into it.
If you already have the proper anchor tags in place, just point your links at story.php#anchor.
There's no way of identifiying these "Fragments" in PHP or telling the browser to scroll to a specific position from PHP, though. The Fragments are never sent to the webserver and only used internally by the Browser. And the position of the scrollbar is controlled by the browser based on the size of the content corresponding to the size of the Browser Window and screen resolution, neither of which is known to the server-side PHP code.
You can use the window.scrollTo function to scroll to a specific coordinate in your document. (See: https://developer.mozilla.org/de/docs/Web/API/Window/scrollTo)
I have a very large site and it takes pretty long time to load. It takes around 120 seconds. What I'm trying to do is loads 1st half of the site loads 1st. Then user can surf while others parts are being loaded.
What I'm trying to do is below.
1st of all is this possible ?
According to my knowledge Yes since Google PageSpeed does that. But the problem is if I use PageSpeed I would have to change my DNS server settings and etc. I would like to do this myself.
How can I get it done ?
What type of technology should I use ?
Given that pages have the .php extension and written in PHP language.
You can use the concept of lazy loading.
You can load only content that is necessary during the load then using jquery and ajax you can load the remaining content.
In this way user can surf and interact easily with the the part already loaded while the other part will be loading asynchronously.
jQuery ajax or post method can help you on this.
A simple example could be,
If There are 5 parts of contents in your page, 2 needs to be loaded immediately
The page will be loaded with 2 parts loaded, so it will take quite less time than 5 parts loading
After document is loaded you will use ajax to load the remaining 3 parts.
Ajax will send request to the specific page of your website(can be possibly named AjaxRequestHandler.php) with some parameters, and this page will process your request and generate html for this and will send it back to your main page which will just show this returned html and this all be happening asynchronously, so the user will be able to communicate with the initially loaded 2 parts
And even if you are new to web technologies, I suppose you have to have the knowledge of atleast ajax and asynchronous calls etc. to achieve lazy loading.
Edit :
For your this question
Except AJAX Is there way around for this?
I think you can try iframes if they can help.
Loading the main content in the page load without iframe while loading other contents in the iframes after pages is loaded.
This jsFiddle
jsfiddle.net/cGDuV/
can help you understand lazy loading with iframe, mentioned in this post of stackoverflow.
You can use javascript for the same if you want to avoid jquery.
You can manipulate the output buffer such that it flushes early thus achieving what your after in the screenshot you posted in your question.
http://www.stevesouders.com/blog/2013/01/31/http-archive-adding-flush/
You can lazyload all your images. Here's a jquery plugin that does it easily
http://www.appelsiini.net/projects/lazyload
You can combine all your js in one file. Same with your css files. This will help the speed.
You can incorporate caching, expires headers and gzip/deflate compression
https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
I would suggest you load your 3rd party javascript widget garbage (Google+ buttons, fabebook like buttons, social, twitter stuff) in a non blocking asynchronous way so it does not slow down the page in the beginning.
http://css-tricks.com/thinking-async/
Optimize your images as much as possible.
http://kraken.io/
Use a CDN
http://www.maxcdn.com/
Finally test your site and see where is the big bottleneck and where you can improve the site for speed optimization. Use the waterfall chart feature
http://www.webpagetest.org/
One of the things you can do is to load all the essential (top half) of the page normally, then use javascript/ajax to load the second half of the page. This is a very common technique (and is often used to load images).
Here is an excellent tutorial from jQuery for Designers, walking through how to use jQuery to load images asynchronously after the page loads. http://jqueryfordesigners.com/image-loading/
Having said that, a two minute load time seems very excessive. Maybe you should check if there is anything that could be slowing down your server.
You need to determine why the site is loading slow. What is the size of the data you are sending? Google and Firefox have web developer tools to help you determine which elements are taking the longest too load. Once you've determined the culprit, try to load the worst offenders asynchronously.
Check out this article on aync requests: https://segment.io/blog/how-to-make-async-requests-in-php/
in my opinion you need an endless scrolling solution. That is, have a fixed amount of content per "page" (could be an estimated 1500px worth of height). Use jQuery to load another "page" when user scrolls down by a set amount.
If you really want to unconditionally load all the content, just use the same approach, and on document ready trigger the next page to load. The loop the page loader until the whole thing is loaded. That way, you load the first "page", and defer the content "below the fold" to subsequent requests.
What you want is what Facebook does Bigpipe and here is a relevant SO post: Facebook Bigpipe Technique Algorithm
There are other solutions involving all sorts of Javascript but since you want PHP and Facebook uses PHP you should read up on Bigpipe. Juho even has an example written in PHP so that should meet your PHP requirements (but yes it still requires js but not AJAX).
Prefetching Resources the web page require large files for loading can often benefited from changing the order that those files are requested from the server. Sometimes, it makes sense to download files before they are necessary, so that they are instantly available once requested. When the resources required for a page can be loaded in advance, the user-perceived network latency for that page can be significantly reduced or even eliminated. When you run Google pagespeed insights and see the result, you will see how the fix the problems in your website.
Some tips to load site faster:
Make fewer HTTP requests
Add a far-future expires header
Gzip your page's components
Minify your JavaScript, CSS and HTML
One more thing when loading a webpage and if you are using php with smarty you can use this plugin which reduces the number of http requests to you server and makes the site load faster by combining all the js and css resource's request into one single HTTP request.
Alternatively you might be looking for these plugins.
http://masonry.desandro.com/
http://isotope.metafizzy.co/
http://www.wookmark.com/jquery-plugin
Does all this stuff have to be on the same page? Does it make sense to split the content over multiple pages? Can some of it be delayed until the person requests it? Can it be grouped into tabs? Hidden tabs could be lazy loaded for instance.
Give serious thought to restructuring the content in other ways. You might be able to come up with an alternate arrangement that simplifies the problem.
Having in mind all that was mentioned above you may think of caching parts of your data/html code with memcache or in any other way possible so you skip its generation every time. Of course this depends pretty much on how often the data changes.
Don't browsers render the document as it comes in? Whatever you put at the top of the file will be received by the client first, and therefore will be displayed first. For example, when you try to view a very large image file online, it loads from top to bottom. The same is true for web pages. Just put the content you want to load first at the top of the page!
Answer to question one: yes
Answer to question two: above
Answer to question three: Nothing, just put the page in the correct order.
Well the idea is more or less the same as described by Pawan Nogariya above. You will need to fetch views and data asynchronously and then display these. But this means that you will never redirect or post back to any other page rather will get every view via ajaz. This will make you application SPA (Single Page Application) like Gmail. And, this will also mean you need to keep track of what has been renedered and what not, leaving you in a mess. So, instead of doing everything your way there are already developed and popular frameworks available that let you do that but they also make it SPA. Which means that your application doesnt "posts" to the server as in redirection but everything is doen using Ajax.
You can use Backbone (Backbone.js), Knockout (Knockout.js) and may others to achieve this. These are javascript based frameworks that help achieving what you have just asked and may expample and tutorials are also easily available. You can use it with any language as we are using it with C# (MVC) for a relatively large applicaiton.
this is going to be ugly! You should definitely consider using ajax calls to load page fragments AFTER a first content stage is loaded!
This is going to break almost all known web standards, but it might render the website in parts....
this being said: here's the ugly stuff
First: get rid of the <html> tag of your website, start with the <head> DO NOT use a <body> tag either.
Now send your html-code in the order you want it to be loaded (top first) using echo ...
after each closing tag of a group (say </table> or </div>) use flush(); ob_flush(); this will send all known content to the browser immediately.
The browser now decides if it can render the known content or not and if it will (based on the browser specifics and user settings) but with few exceptions it will.
some browsers like to wait for the closing body-tag that's why we dropped it, others even wait for the closing html tag (safari afair) that's why we dropped that too.
If you use the echo-flush scenario wisely you should be able to split the page into renderable parts which most browsers will display without an error.
Again... don't do it this way.. it's bad, ugly and not even near any web standards
But you asked for it.
For your this question
Except AJAX Is there way around for this?
I think you can try iframes if they can help.
Loading the main content in the page load without iframe while loading other contents in the iframes after pages is loaded.
This jsFiddle
jsfiddle.net/cGDuV/
can help you understand lazy loading with iframe, mentioned in this post of stackoverflow.
You can use javascript for the same if you want to avoid jquery.
With pure PHP? Not smart.
$(function() {
$('#body').delay(1).fadeOut();
});
Fiddle example: http://jsfiddle.net/r7MgY/
I see Google doing this all the time. They are able to successfully create a lightbox that can't be ignored... and even though the content behind it is visible (i.e. a form you would otherwise be able to fill out), you cannot do anything with that content-- I've even tried using the Document Inspector to get around the forced lightbox, and it's very, very difficult.
So, I'm not as concerned with the validation of the content BEHIND the box as I am with really nailing home the point that the lightbox is "not to be messed with". In other words, what's the best way to show a box that the user isn't supposed to (or able to) click out of until they've completed the action thereupon, while simultaneously showing a desaturated or partially whitened-out (but still visible) version of the content behind it?
As I said, I can code to make certain that the content behind the box isn't actually usable unless the requisite actions have been completed (so even if they get around it, it won't be functional). I just want to be a bit more stern with the people out there (like me) who will try simple things like a JavaScript blocker to prevent the content from lightboxing properly. Ideally, the solution I'm looking for would be cross-platform compatible and difficult to get around. I'm open to any type of solution that can be done via open-source code.
http://fancybox.net/
has an option hideOnContentClick: false that will only allow the user to click the "X" button in the fancy box to hide it. You could hide the "X" close button through css or take it out completely and have a javascript call when the user has completed all the fields or submitted to close the box.
Hope I read your question right.
Most lightbox features come with this. However, making your own, it's a 2 layer concept. 2 DIV's basically. One which spans to all 4 corners of the open browser. Most people will give it a color or something black and then set a transparency on it. After that you set a high zindex on it. Once you have that one in place you put another DIV inside of that one to mimic your lightbox needs. This way a user can't just click around the box and get to what they want. All in all though, javascript and CSS are easy to work around, all you need is a developer tool in your browser to just turn them off leaving you with only the raw form.
EDIT
Bottom line is, anything in the client side is always fallible. If someone's determined enough they will get around it. And if your doing it as a means of security from bots, that won't work, if someone who controls the bot is smart enough. I'm only saying this cause I hope there's not any false hopes that it will be a means to an end of a problem some how. Don't get me wrong it will detour many to a point, but those with malicious intent will break the concept easily with a little XSS or other various measures designed to break client-side only concepts.
EDIT 2
Both Jquery UI and Bootstrap from Twitter have good Dialog concepts that a normal every day user of your site won't be able to smash around easy.
Let's say I have a plain HTML website. More than 80% of my visitors are usually from search engines like Google, Yahoo, etc. What I want to do is to make my whole website in Flash.
However, search engines can't read information from Flash or JavaScript. That means my web page would lose more than half of the visitors.
So how do I show show HTML pages instead of Flash to the search engines?
Note: you could reach a specific page/category/etc in Flash by using PHP GET function, for example: you can surf trough all the web pages from the homepage and link to a specific web page by typing page?id=1234.
Short answer: don't make your whole site in Flash.
Longer answer: If you show humans one view and the googlebot another, you are potentially guilty of "cloaking". If the Google Gods find you guilty, you will be banned to the Supplemental Index, never to be heard from again.
Also, doing an entire site in Flash breaks the basic contract of the web, namely that you can link to specific content from other sites or in emails. If your site has just one URL and everything else is handled inside of Flash ... well, I don't know what you have, but it isn't a website anymore. Adobe may like you, but many people will not. Oh, and Flash is very unfriendly to people with handicaps.
I recommend using Flash where it is needed (videos, animations, etc.), but make it part of an honest-to-God website.
What I want to do is to make my whole
website in Flash
So how to accomplish this: show HTML
pages instead of Flash?
These two seem a bit contradictory.
Important is to understand the reasoning behind choosing Flash to build your entire website.
More than 80 percent of my visitors
are usually from search engines
You did some analysis but did you look at how many visitors access your website via a mobile device? Because apart from SEO, Flash won't serve on the majority of these devices.
Have you considered HTML5 as an alternative for anything you want to do with Flash?
Facebook requires you to build applications in Flash among others but html, why? I do not know, but that is their policy and there has got to be a reason.
I have been recently developing simple social applications in Flash (*.swf) and my latest app is a website in flash that will display in tab of my company webpage in Facebook; at the same time, I also want to use that website as a regular webpage on the internet for my company. So, the only way I could find out to display html text within a flash file is by changing the properties for the text wherever I can in CHARACTER to "Render text as HTML", look for the symbol "<>". I think that way the search engines will be able to read your content and process your website accordingly. Good luck.
As you say that you can reach the Flash page by get variable using page ID or any other variables. So its good. I hope you will add Flash in each HTML page. Beside this, you can add all other HTML contents in hidden format. So the crawlers could reach the content and your site will look-up in Flash. Isn't it?
Since no-one actually gave you an straight answer (probably because your question is absolute face-palm-esque), i'll try:
Consider using the web-development approach called progressive enhancement. Now, it's fair to say that it probably wasn't intended for Flashification of a website, but you can make use of it's principles.
Start with your standard HTML version of your website
Introduce swfobject to dynamically (important bit) swap out the HTML content for it's Flash equivalent
Introduce swfaddress to allow for deep linking into your Flash movies (pseudo-URLs)
Granted, steps 2 and 3 are a little more advanced that how i've described them and your site size/structure/design may not suit this approach, but at least it's an answer.
All that being said, I agree with the other answers/comments about the need for using Flash to display your entire site - there's very very very few reasons anyone would do that, and there's more reasons than already added as to why not to (iOS devices etc)...
A friend has asked me for help with her website design. Although I know a fair amount about the basics behind HTML, XML, Php, ASP.Net, javascript, etc., I'm not really comfortable sitting down and coding from scratch. All of the work I do is in Java, C++, and so on.
My friend would like to add a vertically scrolling marquee to her site - no problem, there is code for that all over the internet. Here is the tricky part - she would like the text to be dynamically pulled from another website. This isn't like a simple text file, either - it's a list of names from a specific blog post, so there would be a lot of text processing involved to wade through all of the other markup, and extract the relevant info.
The way I see it, here are her options -
1) Write some kind of a perl script or somesuch that is set to run daily. This script will visit the blog and extract the necessary info. It will then update the HTML file's marquee text with its new info.
2) Some sort of active page written in ASP or PHP that will dynamically build the marquee (and the rest of the site) each time the site is visited, basically doing the work of the perl script each time. This seems like it has the potential to be somewhat slow.
Per my understanding, those are her only options. Am I correct? There is no simply way to do this in javascript that I am just missing? I know you can reference an image to be dynamically pulled with the marquee, but this isn't that simple...
Thanks.
EDIT: I guess where I was going with my question was this: Unless I implement this statically, this is going to be fairly involved, right? I believe it is over my head. This is why I would like to simply copy/paste the text list into the html document. It would need to be updated every time the blog does, but that only appears to happen every few months, so that's not a large chore. I realize this is a lazy solution, but this is from someone very inexperienced in web development.
For reference, this is the SPECIFIC blog post which the text will come from, and my friend would ONLY like to display that list of names that begins when you scroll several paragraphs down.
http://truthnottasers.blogspot.com/2008/04/what-follows-are-names-where-known.html
It depends what the list of names looks like, i.e. how much intelligence is needed to parse it. But this could be something that could be fairly easily be pulled, parsed and displayed using Ajax, for example in the jquery flavour.
All the blogs I have ever seen have an RSS feed. Why not just grab the feed?... Google provides javascript that does only this.
Google Ajax Feed API
The RSS suggestion sounds good. If you can't get it in the RSS you could screen scrape the content.
If you could do it with Javascript I think it would suffer the same resource issues as your once a day Perl script and every load asp/php methods since it would still have to fetch the web content by making a call to the web site.
Another option is to use asp.net and enable caching so that when other visitors come to the site instead of getting the page all over again it serves up the cached page. You can set this to cache for 24 hours or so. I'm sure other server languages have similar features. Basically this would be the same as your once a day Perl method but keep it within a web framework.
Another hacky solution would be to use an iframe and frame the content with javascript so that it only shows the content you want to show. Of course you'll have no control over the formatting (background, fonts) of the iframe and if the content gets bigger or changes position you'll have problems.