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!
Related
I have been looking for a way to change a main image without using javascript AND not refreshing the page. By reading the title I am sure you will be thinking 'this chap is an idiot an minimum of refreshing the page is required, however, I have seen on ASOS e.g. http://www.asos.com/ASOS/ASOS-2-In-1-Fishtail-Parka/Prod/pgeproduct.aspx?iid=3132737&cid=12931&sh=0&pge=0&pgesize=36&sort=-1&clr=Black#ctl00_ContentMainPage_mainImage2
they have managed to achieve this by what appears to be to load the main images as well as the thumbnail, then hide the unused main images and then once it is clicked to show the main image.
I have no idea how they are doing this as I am definitely not an expert but I hope someone can help and tell me how I can achieve the same functionality. I guess it is some CSS stuff but not a clue really.
A JSFiddle with explanation would be the worlds most ideal answer
Thanks
I'm building a site where there will be four tiles on the front page. When a tile is selected, I want the content to pop up in like a window that will be a bit transparent so you can see the main page behind it.
I've successfully coded just that, getting the link to bring up another div that is otherwise hidden and I've even gotten it to load another html document. I accomplished this with XMLHttpRequest();. My question is, is there a more efficient way to do this? I know I've done something similar in PHP before in school and when I google, I do see that being a way to do it, but I'm also seeing jQuery and AJAX being mentioned. My overall goal is to get it to where if I want to update the CSS of the screens, that I only have to do that for the main page, and it affects the content pop-ups.
I hope I explained this well enough. Thank you for any advice!
It's very simple to do in jQuery:
$("#yourDivsId").load("/UrlOfYourIntendedMarkupDelivery?anyarguments=true");
What has been known for a while, is that a "fast navigation" works easily for http://example.com/#1 --> http://example.com/#2.
However, there is a new technique out there. It enables fast navigation between http://example.com/1 --> http://example.com/2.
EXAMPLE: http://rageslide.com/
As you can see in the example, the navigation between http://rageslide.com/1 and http://rageslide.com/2 etc. via swiping apparantly DOES NOT FORCE THE ENTIRE SITE TO RELOAD.
I'd like to do the same for my site, but I have no idea how to do this. All pages served by my site are dynamic (via PHP and MYSQL).
I have this idea:
Cache the generated output of a page (http://example.com/2) for 60 seconds.
When the user is on http://example.com/1 preload (http://example.com/2) via Javascript.
The user navigates from http://example.com/1 to http://example.com/2. Since the content is preloaded and cached, the content will be served to the user instantly.
Different idea:
Somehow, http://example.com/1 is being interpreted as http://example.com/content.php#1 through a .htaccess. But I have no idea if this is possible or not.
Will this work? Or what would be the best way to solve this problem?
No, the url you see there is not used to load another page. There are AJAX requests in the javascript code contained in the website, that load the new content to display and update the URL bar.
You can read more about it in this article and in the following questions asked in the past:
Modify the URL without reloading the page
Updating address bar with new URL without hash or reloading the page
i can think of two possible thing you can try out.
first is simply use iframes to load the next and previous page of each page, and when someone swipes to the next page load the next page to a new iframe or a div with ajax or any other html element for that matter.
the other is to use the rel attribute, here is an explanation about it.
hope this helps you out
you can get pretty close without scripting anything or degrading the site by letting the browser cache the expected navigation point resources
for caching images, put dummies at the end of the body
<img .... height="0" width="0">
and for pages
<link rel=”prefetch” href=”url” /> there is also a rel attribute for next and previous for slide viewer type pages
Note: the url can be a javascript resource
Note2: the transition may be slightly less clean than dynamically populating from javascript especially on larger complex pages, but will still work with noscript or javascript turned off, so maybe a good fallback
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
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