I'd like to improve the "help" page of my website by adding screenshots of various sections of the site. I'm hesitant to make these static images since the site is still in development and is cosmetically changing constantly. In fact, I'm even thinking that creating images at all may be overkill.
Is it possible to load (via PHP or JQuery) a small section (with static size and x y) of another page and display it in a div?
We're doing a thing like that in our Help section, but I think that dynamically loading live screenshots is a waiste of resources.
Actually, we're doing this in our build process, just after our tests. A headless browser (selenium under xvfb) is used to take a full screen screenshot of our different pages, on our pre-deployed application.
Then, we a modification occured, the build process take care of including the modifications...
Load the Page you want the "screenshot" of into an <iframe> with the desired size and use an anchor or http://api.jquery.com/scroll/ to move the contents to the position, you want to show.
if you don't want the user to scroll away or interact with the iframe, just put a transparent layer over it.
It is also very helpful to make a GIF of the screen to show the user how to do something fast, instead of written explanations, so if there are cosmetics changes, the user can continue seeing how to do something, you can create the Screen recording GIFs with http://www.getcloudapp.com
Related
I have a page on a Laravel application that shows a list of sign-ups ordered by date created desc. The information displays an avatar thumbnail and then some other related fields.
For now, I would like to restrict viewing of that list by blurring it until certain criteria have been met by the user who has signed up. But I also want to show the user that the page exists - so it is kind of a teaser to encourage them to complete signup in that once they have done so they will be able to access the complete list.
This is easy to do using blur functionality in CSS but the issue is that can easily be bypassed using browser dev tools.
I am currently using a static image in place of real-time results but it is obvious to the user that their info is not included as their avatar is not showing (even though it is blurred it would still be slightly recognizable to them considering they would just have uploaded it).
I had considered generating the page and then screen scraping it (using something like spatie/browsershot) to create the static image but actually am not sure if that is the best option. Especially as this is only a temporary scenario as once we have enough signups we won't want to blur out the results page.
Any ideas on how to achieve the results I need? Or would screen scraping be the preferred option?
EDIT:
Just to be clear; I am not going the CSS route - that is why this question was posted. I am looking for server-side alternatives to that.
I've created a website with only one page. On this page, i can click on images and i show or hide popup (with jquery).
It works fine.
All these popup contains text, images (i use php to generate this content).
<div id="pop_up_1>
<!-- content : text / images -->
<div/>
<div id="pop_up_2>
<!-- content : text / images -->
<div/>
and so on
It's like i have 10 pages inside one page. It's a lot of content.
Do you think it's better to load everything at the beginning or load the content with jquery ajax :
$("#myDiv").load("ajax/video-mur-images.php");
I've tested the 2 solutions and i'm not sure which one to choose.
The first one : everything is loaded and no more query after but a lot of source code and elements.
The 2nd one, less elements and less source code but i have to load the content when the user click on a button.
I guess it depends on how much data i need to load. So what is the limit i should consider ?
This is an interesting philosophical question. Often, as you do now, developers start with data volume, but in the end it's all about user experience.
Does your page load slowly? If so, have followed the best practices to speed up page loads? And what would annoy the user more -- initial load or to have to wait on each interaction?
Also note that while web crawlers for search engines are getting better, they do not load your AJAX content. When you decide to go on this path, use a framework that gives you bookmark capability and also makes internal links understandable to the crawlers.
It's definitely better to use AJAX (or even better PJAX) to load the content. Simply because you don't know how many pages there will be in the future. Serving all pages in a single request means that you might do 50 database queries, while the user only needed the page that does 0 queries.
I have a bit of a challenging question (well it is for me anyway :) )
I am developing a Joomla template for a client who would like to include a jQuery slideshow, I am also using responsive design for upto 480, upto 800 and over 801px.
What I would like to do is setup 3 slideshow modules (for ease of use for the client, one for images 480 wide, one for images 740 wide and one for images 940 wide, then I would like to call that module depending on the users screen size. I know that this needs to be done with php in Joomla and that it is a server side script only and I'm not a fan on UA sniffing.
This is what I'm thinking, please comment on what you think.
Include PHP function that detects if the $screenWidth variable isset
If not, run javascript that detects users screen width, sets this variable to the URL (or another way that it will hold the variable).
Run an AJAX page reload
Pull the $screenWidth variable from the URL.
The original isset will now return true so the page continues to load.
Then run PHP code using that variable to load the appropriate slide show.
What do you think? will it slow the page down too much? Will the reload work and keep the URL in joomla?
Please let me know you thoughts and offer any suggestions.
Thanks
Lee
Are you sure you need to reload the page? Once you get the screenWidth from the client via an AJAX call, can't you generate the slideshow HTML and send it back? The client can then insert it into the DOM directly without having to reload the page, and you won't have to mess around with maintaining state.
There are many possibilities but i think simpler is better.
I think you should perform following steps
Write a startup javascript function that checks the screen width and height (screen.availWidth and screen.availHeight) and send it to server and create slide show accordingly and send back to client
Not sure the best way to describe what I mean, the best way is to look at Facebook whilst I explain.
The bar at the bottom of Facebook will always stay the same, with all chat windows open, and no flicking when you change a page, however, the webpage and the address bar will all change to the new page that you requested, to me that seems like the webpage doesn't actually change at all, and instead, the address bars' URL changes as well as the page content.
I am working on a music player for a bands website, that I want to keep static across all the pages on the site, without reloading and starting again every new page.
The bottom bar is positioned with position: fixed which makes it relative to the viewport, not the document.
The other pages are loaded with XHR, or AJAX.
The changing URL is probably the fragment identifier, unless you have a cutting edge browser, which appears to be using the HTML5 history API (GitHub currently is too).
Zach Rait, an engineer on our infrastructure team, implemented the History API to enable selective loading of page content via AJAX while preserving readable URLs. Previously, current application state was stored in the URL fragment which resulted in unseemly URLs like “profile.php?id=1586010043#!/pages/Haskell/401573824771”. Now, because HTML5 allows us to decouple the currently displayed URL from the actual state of the application, we’re able to display pages more quickly, save bandwidth, and avoid polluting users’ location bars.
Source.
sounds like you want a template and using JQuery or a similar language to dynamically load new content on a portion of the site?
In this way, JQuery will use ajax to load new content in part of the main window without you ever experiencing much of the main page reloading.
You can use css to style a bar at the bottom
#somelink{
position:absolute;
bottom:0px;
}
HTML
click me
<div id="news">Replace me with new content</div>
JQuery
$("#somelink").click(function(){
$("#news").get("album.html",function(data){$(this).html(data);});
});
I want to include a page preloader for all pages on my application. Something like what Gmail displays when its loading the entire page in the background. I don't want a prelaoding bar just the mechanism to display immediately a preloading message while the entire page loads in the background and upon successful load is displayed.
Take for an example the site: http://www.emirates.com/ae/english/ just run a search for any flight - you see a preloading message after which teh page is loaded. I don't see any redirects here.
How do I implement this - my site is built using php and tonnes of javascript.
Your HTML writes out a pre-loading message, and you then set up a javascript onload event. This event calls JavaScript code to load whatever data you need via AJAX, then finally hide the loading message and shows the actual page.
Of course, this means people with no JavaScript will have problems - you have to sort something for them or decide you can live without them.
ADD: Oh, and you may want to check the disability laws in your country before deciding you can live without them - you may have a legal responsibility to make your site accessible to the disabled. I've only ever used this technique on sites that rely on JS so heavily they can't run without it. Note GMail has 2 interfaces - one JS and one plain HTML. This is how they make their service accessible.
ADD: http://code.google.com/p/bobchess/ is some code I've done that does this. A loading message and then an onload event to start the application.
I would use a wrapper DIV element for all the content of your <body> element and hide it via CSS visibility property. Did work with javascript and at the end I would display the DIV element. The preloader would be absolutely positioned and hiden when DIV element would be displayed.
Visibility property has the advantage that the layout will be ready when you change it to value visible (not as with the property display)
EDIT: I think that you can almost always avoid pre-loaders. You can speed up your sql queries by indexes. Display less results and so on. I personally don't like to wait and preloader doesn't comfort me much.
I agree with MartyIX but the problem is the number of queries your system can handle, indexing is an option but it depends on volume of transactions on your servers. I do think we missed the whole point though, pre-loaders we meant to beautify the site, so the customers don't see ugly blank page while they wait :)