Load on page inside another onClick - php

I need to include the content, scripts, forms and dynamic abilities of one page in another onClick.
Take a look at http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/dahab-master-scuba-diver.html
Then follow one of the links that says 'Beginner' 'Open Water Diver' etc....
You will find a PHP page with a series of options. It is an adaption of the wordpress blog system to produce only specific options for specific programmes by considering each type of each diving programme a category and then displaying only results from that category.
You will see that each option is also a collapsible panel and there are also several javascripts that calculate durations, quantities and prices. There is also a validating webform at the end.
Now go back to the first page. What I would like to do is include all the content from the second page after the main header inside tabbed panels on the first page so that the customers can immidietly see everything that is included. Essentially the options on the first page would become a series of tabs.
The only way I can see to do this is with an iFrame as each option would need a unique URL ending (that is .php?cat=26 or .php?cat=27). THe problem is that the collapsible panels will not work with an iFrame as the iFrame will not resize when the panels open. There were also some calculation problems, but I think that was more down to me staring at the screen for the last 3 hours not remembering to include everything.
I have tried it with resizing iframe SSI scripts and have got nowhere.
I tried actually embedding it in the page better with a ajax script, but that left behind all the scripts that make it work. I checked with full URL's on everything and it would not take work with any scripts.
I know that you could just make the whole page reload but then the user would be at the top of the page again, and even if another script was applied to slowly bring them down again it would not be anything near as easy to use as if it was like tabbed panels.
Any ideas.
Kind Regards,

Definitely no need for iframes. AJAX will do the trick here.
Here's a link with a demo + code:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Related

Loading more images when reached bottom

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.

Change the URL also when changing the content of DIV with JQuery?

I want to achieve something like Facebook, where the top bar stays there and only the content underneath it changes for different pages. At the same time the URL at the top also changes, for example /messages or /events.
I'm not completely sure if this is how Facebook works but I'm trying to achieve something like this... Right now I can't figure out how this could be done...
Does anyone know how this could be achieved or if there is a name for it?
You could do this with a fixed header that is on all of your current pages, so that whenever a new page loads it appears the header is still there, or you could do the more complex way of putting all your pages in separate divs on one page, and hiding/showing the appropriate divs when a link is clicked. I'd recommend the first way personally, but those are some options.
I'm sure there are other ways to go about this.
If that isn't what you want then I apologize.
Edit: Also, my first suggestion will load a whole new page, so if you want the seamless transition effect then the second option will be the better route to go
Templates perhaps? You can't change urls without navigating to a different page as far as I know. If you want consistent elements on the page with varying content that basically is the function of templates.
If you're looking for dynamic elements to show up on the page then you should look into AJAX and DOM manipulation. jQuery is the defacto library to help with both of those. Take a look at http://api.jquery.com/ and maybe search for a template engine. Most web frameworks include a template system to create consistent styles and allow code reuse.
You can use #anchors, that won't reload the page. For newer browsers, you can use https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history to update the url without reloading the page

php, ajax : Is it better to load everything at the beginning if possible?

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.

Drupal: Loading AJAX content in Drupal

I've recently been told to use Panels to dynamically load content into different sections with Drupal. However, I've just realized that there is an easy way to do it, I've added this jQuery code to all menu items:
$('.menu a').click(function(){
$('#content').load($(this).attr('href') + " #content");
return false; //to avoid refresh
});
In this way I can easily update anyblock from any link without having to use Panels.
Is this approach a good one ?
Do you also think Panels is not necessary to simply load html into website sections dynamically ?
thanks
Panels main usage, is not loading content without page loads. It's primarily used
to create different page layouts that depends on certain criteria, that you can setup with code, or in the AI.
Let the content of the page, be aware of which content is being viewed, and tying to different content together.
Your current script will work, but it's a bit crude in it's current form. Fx, what will happen if a user clicks several times. If you want to dynamically update your content, you should only change the parts that needs changing instead of loading/changing the whole page. Then you might as well just load the new page instead. I guess this is where Panels can help you, but I haven't tried using Panels like that.

PHP / jQuery page change transition

Basically I want to replicate the page changing effect found here, at http://timvandamme.com/
But instead of using #values I want to use PHP includes, mainly because I want the site to be as uber-seo-friendly as possible... but still have this nice effect.
So is there a way of doing this? I have a main index file which includes other php files in the centre using the usual 'GET' method, so my pages look like: "index.php?page=about"
In my jQuery code I want to have a declaration where if I click the navigation, the content scrolls up, then once the relevant PHP file has loaded, have the content scroll back down and show the new page content (whilst also of navigated to the new page in the address bar, so if the user clicks the back button in their browser, they return to the previous page).
I know how to code the scrolling bits, it's just literally the ajax loading includes / page navigation parts I'm struggling to work out :\
Any help would be MUCH appreciated! Thanks in advance.
Use standard links in your navigation. In your onClick function, use event.preventDefault() to prevent the pages from redirecting your actual users (but they still appear as normal links to search engines).
Foo
<script>$("a").click(function(event){
event.preventDefault();
navigate($(this).attr('href'));
});</script>
Use the onClick function of the links to change the page's content with AJAX (just like it appears on the site you linked), but additionally set up each "page" (using error documents, mod_rewrite or something) to display its content, but allow navigation in this same way. By doing so, you will have the same functionality with the search-friendliness you desire.
To add to the others, some search engines understand this problem and offer site map utilities. You can check out google's site map solutions here:
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156184
The site map will allow you to explicitly inform google about certain uri's (like http://timvandamme.com/#about).

Categories