So i'm trying to do an effect similar to this http://www.hffm.co.uk/
When you click on another page the entire page Does NOT reload just the main content in the center But the link at in the navigation does
I.e http://www.hffm.co.uk/contact after contact page is clicked
What i want to know is how is this done? I don't like using jquery but can convert it if you can only explain it that way. I figure it's AJAX related but can't be sure. Does this kind of loading have a name?
I need to know what to search so i can find it google to figure it out myself but i have no idea where to go looking.
yes it's possible with ajax.
it's call asynchronous load. Im not realy skilled to explain so here is a link
http://www.w3schools.com/php/php_ajax_poll.asp
I hope it helped
Related
I looked on many posts but I've never found out such a context like the one I have so I'm requesting you some help.
Here is my development context :
I had in mind to build a single-page based PHP Application and I then chose to set-up a global container page embedding a side navbar-menu on the left for navigation control and an iframe on the right for related content.
The iframe is updated following the navigation navbar to display the selected content to the user.
First, I'm not saying that this is the right way to do this kind of PHP Application and would be ears opened to different way to achieve this.
For now, it's working out but I rose up a problem since I would like to reload only A PART of my content iframe. Indeed, there is a div box inside it that should be updated when the rest shouldn't (or at least it looks strange during navigation).
I was wondering if setting-up a listener on the iframe to look on mysql database updates and then trigger a JS function would be memory cost efficient ?
What would you guys think ? Maybe there's a different way to solve this problem (I was thinking of a big AJAX rendering instead of an iframe for example) ?
Thanks a lot for your answers,
Martin
Okay so for those who would face the same situation I ended up trigerring an ajax function in my child iframe from the parent main page via the instruction document.getElementbyId("myIframe").contentWindow.myAjaxFunction() that run the search script in background (with post parameters from the parent page).
Then I got the reload of only a section of the iframe.
I'm hoping someone can help to answer my question...
I am currently using an accordion on my Shopify site to display some pretty extensive content. You can see a demo of what I'm using here: http://www.snyderplace.com/demos/accordion.html
I'm wanting to be able to create a link on my webpage that will take the customer to, say the 3rd panel of the accordion OPEN, but I just can't figure out what JS I need to be using to do this! Can someone help! Please?
First thing that comes to my mind is passing a a meaningless # along with the link, like you would be going to a anchor. Then on page load check to see if the URL contains the hashtag, if true trigger the panel you want to open.
Link on initial page:
<a href="/newpag#panel-3" >link</a>
jQuery:
if(window.location.href.indexOf('#panel-3')){
$('.thirdSection').trigger('click')}
I haven't tested this at all but with a bit of tweaking it should do the trick.
I'm trying to help a good friend out with his site. I did not make this site so I'm diving into the deep, I am also new with WP. He wants a new audio player and Ajax pagination.
So far I did everything manually. It's a rough start though. I just load the next page with Ajax and fetch a div from that page.
My problem is: all posts contain a Facebook Like button and a Tweet button at the bottom. Now when I load the next page of posts (the div), those buttons disappear. I guess it has to do with plugins that are being loaded when the page itself is loaded. It is also missing the number of comments. These are Facebook comments also. To be honest I have no idea how to fix this...
Edit: Ok, I'm pretty sure I somehow need to reload that plugin in the Javascript chain... is that possible?
You can check it out at
Is there a better way? Am I actually doing it right? Is there a plugin that makes this easier? Again, I did not make this site and it's my first time using WP. I have no idea where to find the page settings (which might contain the max posts per page etc.)
Thanks in advance, I hope I am clear, if not, please say.
What you need to do is refresh the Facebook plugins after loading dynamic content with Ajax. Here's a snippet of code I used on a project:
// Run this on your Ajax callback
try{
// This code reloads the Facebook plugins
FB.XFBML.parse();
}
catch(ex){
// Something went wrong
}
The code requires you to load the Facebook API (duh!).
I am attempting to have a link load an article from my domain in to an iframe. I understand that it is usually easy to link using:
Google
But when it comes to Iframes I am having difficulty formatting the code correctly so that it will display inside the iframe.
This leads in to my next question. If this is easily remedied then is it possible to also execute code that will fill in the URL of an anchor in the same mouse click.
Finally, in that same mouseclick would you be able to execute code similar to:
$('#abc').click(function() {
$('#xyz').load('content.html');
});
In order to populate a sidebar with information from a second link?
Thank you for taking the time to read over this. I am sorry if it is truly elementary, but this is my first bona fide webpage, and my limited knowledge is really delaying the execution of my ideas.
Special thanks to wdm for allowing me to progress to this stage of questioning by answering my earlier concerns.
To target your iframe, change to:
Google
for the 2nd part, the above thing can be reused instead of using jQuery.
im a backend programmer who wants to have a window that appears in front of the current window when clicking "register".
so that you dont have to redirect to another page.
i think u guys know what i mean.
how do i do that? is it with jquery or javascript? is ajax involved?
and what is that kind of popup box called?
You want to write a div into your HTML that contains your login fields (i.e. the popup window). Set it to position:absolute; and position with CSS so it floats above the page contents and doesn't interrupt the flow when it appears. Get it all nice and positioned where you want it, then set it to display: none; so it will wait for javascript to make it appear.
Then (using jQuery), write something like this:
$('#register').click(function() {
$('#popup').show();
});
where #register is whatever gets clicked (can be most anything with id="register").
What happens whenever that form is submitted is up to you, and not any different from the options you'd have with any other HTML form. jQuery can help with AJAX if you decide to go that route and not send the surfer to another page to process the form.
It can be done using quite a few totally different approaches. As Sam said it's the concept of modal boxes.
You could do it completely on the client side using CSS and JavaScript (alternative), or via AJAX and some third-party libs.
Try being a bit more specific - what's the the backend/frontend environment? Is performance an issue (eg. minimal client-server communication)?
I believe you're referring to a modal form. You can search for modal popup javascript. There is a good javascript component called Lightbox that will help as well.
EDIT:
I mentioned Lightbox, but Lightbox Gone Wild is the one I meant. As others have pointed out, using a modal tool like this all you do is write the html you want to be displayed in the modal popup. That link is a good tutorial on the concept and explains things well.