I need to include a small form from a reservation PHP module that I downloaded to my website. Its documentation says that it has to be included with iFrame. However the place is restricted, so the iFrame overflows when the date picker is opened and scrolling bars are shown.
To solve this, I tried using jQuery so that the div would be overflowed.
<div id="siteloader">
<script>
$(function(){
$('#siteloader').load('<?php echo base_url('booking/form_homepage.php')?>');
});
</script>
</div>
However, it results that it loads only the HTML. This is not necessary for me, since the page I want to load comes from a complete module, so I need it to be loaded complete, basically what the iFrame would do.
Is there any way to achieve this with Ajax/jQuery?
Thanks in advance
Related
So I'm trying to build an informational page on my website that is fairly expansive, enough so that it has it's own Nav and Sub-nav.
The nav is currently built and now I need to introduce and link the content to appear the way that I want it to, but that's where I'm beginning to get lost in how I should structure it efficiently. I'll try to give as detailed a run-down of the structure it lives is as possible.
First of all, all of this must happen on one page of the site. The links in the navigation should trigger different content, but in interacting with this Nav one should never leave the page (I suppose reloading it is okay, but not preferable).
The page is loaded from a "template.php" that basically just has different div's that contain a function $definepage to load their content.
Something like:
<div class="middleArea" id="infoPage">
<div id="Nav" class="content">
<?php require($definepage); ?>
</div>
<div class="returnNav"><img>backbutton</img></div>
</div>
I want to add a separate div in this template that will be for showing the user's desired content dynamically without leaving the page. So if "Item 6a" is chosen this div will be loaded with the item's corresponding content, then if "Item2b" is chosen the div instead is loaded with that item's content - with the previous content no longer there.
I have about eight Main Nav items and six of them have multi-item subnavs. So there's a lot of content which is why I didn't want to have it all existing on the page and simply hidden and shown with the links for page load reasons.
But I need the links from the first div (in the template) to load the correct .php in the (to be) content area div, as well as stay "active" while the corresponding php is loaded to remain highlighted - show that that link's info is currently being shown.
Can this be accomplished through a href="#anchors"? Or can I somehow have the content area exist in the same div of the template, but still load from external php so all of it doesn't have to load with the page? (I figured php within php within php was a bad idea)
If you want to load some content without reloading the page, you may use AJAX.
You should use JavaScript to change the content of the page without reloading it/changing the URL, using AJAX calls as mentioned by #antoyo to transfer data between the server and client as needed.
Here's an example for an ajax request with jQuery:
http://jsfiddle.net/dj50uev5/1/
HTML:
<div id="placeholder">
</div>
<input type="button" value="Ajax Call Test" />
Javascript:
$('input').click(function() {
$.ajax({
url: "internalUrlOrFile.txt",
context: document.body
}).success(function(data) {
$('#placeholder').html( data );
});
});
I can't really provide a working sample where the content is added automatically due to cross domain origin policies.
Let me know if you need further clarification.
Possible Solution:
What if I use iframe to load a "separate site" as a separate directory in my site's root folder whose pages would contain the needed content. The links in the Nav would then be URLs pointing to the corresponding page in the "content site"?
Any glaring functionality issues here? On paper it looks like it would work.
*(Please disregard the previous idiom's ironic use for the web medium)
I am fetching tweets and showing them into the slider . now when i open the page it shows me all the tweets one above another which create a mess. and after page fully loaded it shows me tweets as i wanted . so is there any way to show tweets or run php code when page is fully loaded ?
PHP code can not be run once the page has loaded, however you can run an AJAX call to a php script.
Although, I would suggest you can run Javascript/jQuery once the page is loaded. Your best bet is to use https://dev.twitter.com/docs/embedded-timelines
This will provide all the code you should need.
It sounds like all your tweets are output via php, and then styled into a slider with javascript, so in between the data being output and the javascript loading, you see the unstyled data.
A simple solution would be to give the containing element a style of display:none, then show it via javascript when the page has loaded:
css
#tweet-holder{
display:none;
}
php / html
<div id="tweet-holder">
//all your tweets go here
</div>
js
$(function(){
$('#tweet-holder').show();
});
Hello fellow code ninjas, I have been playing around with this nifty jQuery price range slider
and once I implemented it, it caused my text boxes, choose image function, and Jquery drag & drop elements to stop working :(
I looked through the code and can't seem to find what went wrong.
The page I put it on is here: https://www.picklify.com/feed/beta/
And you will see the price range slider in the "Seller's Search" box at the bottom. If you view my page source you can see all the code there.
Help me from pulling out my hair, and thank you! :)
You are including jQuery.js twice in page. Second version wipes out plugins that are registered to first version which throws error since those plugin functions no longer exist. Delete second version so jQuery loads before all plugns
Below your comment <!-- BEGIN jquery price range slider -->, you are re-including jQuery and jQuery UI. Remove those references and combine the inline script in your head.
I need to create a website with an audio player that plays as users traverse through the site. At the same time, the content section needs to fade out and back in while this is still going on. So bring in another piece of HTML without reloading the page. The question I have is, how can i get all those to run correctly, while at the same time, running different Jquery plugins on different pages?
Essentially, I need to website to run like this one but with a continuous audio player in the corner or something.
http://www.chalicerecording.com/
If you notice, the page never reloads and the name of the actual file doesnt display on the browser top. This gives me the idea thats its using PHP for the page.
So with that idea, I ended up finding this.
http://www.youtube.com/watch?v=ytKc0QsVRY4
The problem im having with that is that I cant seem to figure out a way to run individual Jquery plugins on each individual PHP page without reloading the entire page. I hope this is enough info for you guys to work with.
you will need to use ajax calls to do so
jQuery.ajax
jQuery.post
jQuery.get
you also need to use jQuery fadeIn , jQuery fadeOut
I would like to force my page to load all data before anything is shown...
This is my site:
http://vinarakar.si/sl/
I would like do this in php, but I'm open to other suggestion :)
Thanks for helping me
You need to do this using Javascript, not PHP.
PHP is a serverside language so it cannot change what the user experience is once output has been sent to the browser.
Try something like this, use visibility: hidden of the body to hide it from the start. Then onload() will be fired once the page is loaded (I think) and then set it to visibility: visible
<body style="visibility:hidden" onload="this.style.visibility = 'visible' ">
A bigger issue here is why oh why! This just means the user has to wait longer to start using your site? It is not a big site, it does not have loads of Js libs that needed to be loaded before the user can start using the site either.
Can I give a suggestion you won't like?
If you seriously want your Page to display faster, then cut down on the JavaScript gimmicks. You are including 13 JavaScript files and most time in loading is lost for them to initialize.
More importantly your page is completely broken for users without JavaScript.
Be aware, that using javascript in any manner may not work for every visiter exactly the same. You should use a cross-browser JS engine like jQuery or MooTools.
That way, you can at least try to be cross-browser valid.
Secondly, and because of what I already said, I would not advise you to use the solution jakenoble gave you. If a user has disabled JS for whatsoever reasons, he will never be able to see your page at all.
If you want user that have disabled JS to see your site, you will have to both hide and show your page using JS. Using a full page overlay may be a good approach, but be sure to check your page still works without activated JS.
e.g. you could write a CSS code into a tag that will hide the overlay and display the page if the user has disabled JS.
Some code examples
<body class="body">
<div class="overlay">
<!-- Your page content -->
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".overlay").css("visibility", "hidden");
$(".body").css("visibility", "visible");
});
</script>
<noscript>
<style type="text/css">
.body { visibility: visible; }
.overlay { visibility: hidden; }
</style>
</noscript>
Short Answer, DON'T DELAY IT
First, I would advise against it. We live in a very fast paced community on the internet. If you take to long to display the website (or the user feels like nothing is happening) they may leave. That would be an adverse affect to what you are trying to accomplish.
Better to ask: How do I speed up page loading for my website?
The better question is How do I speed up my website? Here is some advice that will help you. Follow these guidelines for improved performance. http://developer.yahoo.com/yslow/help/
You actually need CSS, you have to put a full page overlay that hides content (maybe it wil show "loading" to make user aware that the page is loading), then hide that onload so it shoes content beneath. take a look at the solution here
You can do this actually by using Ajax actually.
Consider if you have to load index.php just write body tag and call Ajax function on body load and get the Ajax response inside body tag .Using this practice will take twice the time for you page to load .