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
Related
I want to load more images in my website when I reach the bottom of my page. I'm using php and postgresql as my database.
For this post I simply load some text instead of image. I can write the code for it's equivalent.
So currently, I'm using a button at the bottom of my page, which when pressed re-loads the page and gives you more images(I'm displaying 50 images at a time).
But there are 2 problems with it, one being that the user will have to press the button again and again while I want it to happen automatically.
And the second one being that when new images are loaded, the previous ones are gone. I don't want to happen. For eg., if currently 1-50 images are present, my page later changes it to 51-100 while I want it to have all 1-100. I'm unable to solve this.
Please help. Thanks!
What you are looking for is commonly referred to as "infinite scroll pagination", while what you're asking for is techniclly possible using only PHP it would be a terrible user experience, as each reload would take the user to the top, and they would constantly have to continuously scroll further and further just to reach the location they were previously at.
Alternatively, handle this with JavaScript, an example: https://infinite-scroll.com/demo/full-page.
Doing simple Google searches reveals a plethora of options for JavaScript and JQuery plugins to achieve this.
An alternative, without the need for a plugin you can implement the answer to this:infinite-scroll jquery plugin
Simply call your PHP code in the form of an AJAX request when the bottom of the page is reached and append your new results. (this could be easily achieved with vanilla javascript as well).
Hope this helps.
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
Simple question.
If I loop through PHP and create several images set to display:none and then use Jquery to access their visibility, does this increase page load time and such as if the images were actually displayed on the page?
If so, is there a simple way to load images dynamically, say if a user selects and option and another image gallery appears but the page does not refresh (ajax?)
Thanks!
Nope. This will actually take longer since you have to set display:none and then show them with jQuery than if you just showed them as they were downloaded.
In the second part of your question I think you're referring to lazy loading, where the images are loaded on demand from the user, instead of all up front.
Yes they would still download and slow things down even with visibility set to none (test it with livehttpheaders [or related] and see).
And yes, you can load them dynamically upon request with jquery in a number of ways. Have an onclick set the src, use an iframe, or create the element from an ajax call etc, etc.
I'm wondering if there is any way with PHP to detect the dimensions of a cross-domain Web page that you have no control over, so as to (initially) set an iframe in your own site to the right size to display it without scrollbars.
In this question:
Get height of iframe with external URL
The poster states "I can get the height of the first page loaded into the iframe (using PHP), but no way of getting subsequent page heights because no way of knowing what the url/location changes to in the iframe."
Does anyone know if that is really possible and how to do it?
In that other question, the poster states:
I can get the height of the first page loaded into the iframe (using PHP), but no way of getting subsequent page heights because no way of knowing what the url/location changes to in the iframe
Reading between the lines, that first page loaded into the iframe must be on the same domain, or possibly a different domain but (crucially) under the control of the same developer as the containing page. It's not possible to read the size of the rendered page using PHP - JavaScript is needed client side to obtain the dimensions of what the browser actually renders which is outside the control of any server-side code. So I'm not sure what was meant by "using PHP".
I'm afraid my answer still holds: It is not possible to get the dimensions of a cross-domain web page that you have no control over, because of the browser's security model. If it was possible, that would be a security problem and would have to be fixed. More details here.
I have website on php which have customization facilities for user.
When user change any layout the page will refresh and take much time to load.
I want to speed up the change in page layout.
The containts of page will be same but font -size ,back ground can be change without much time spending.
Please help me.
Regards.
Hm. I don't really have enough information about the system to answer this question.
If it's just a font size or background change, shouldn't this be handled using CSS and not actually change any content?
If no content changes, then the user shouldn't have to reload the page at all. Just apply the new style rules to the document without reloading, and then either set a cookie to save it, or use an AJAX command to let the server know of the change so it can be saved.
A few links that might be useful:
Manipulating CSS style sheets with Javascript
Introduction to Javascript AJAX requests
Hope your site works out!