I have encountered an issue that I cannot seem to work out in regards to loading page content which contains a google map. Below is the index.php page containing the parent header and the google api information.
<html>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.2.min.js"></script>
<!-- Google Maps -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("location-wedding"),
mapOptions);
}
</script>
<!-- Switch Layout -->
<script type="text/javascript">
$(document).ready(function() {
$('.Theme_Page').load("test.php");
});
</script>
</head>
<body onload="initialize()">
<!-- Page Change -->
<div class="theme_holder">
</div>
<div class="Theme_Page">
<!-- Content To Go Here -->
</div>
</body>
The page being loaded in is the following:
<div id="location-wedding" style="width:700px; height:250px"></div>
The problem is if the above div is within the index.php then the map is present, as soon as it place it in the to be loaded page it does not show at all. The reason as to why I am wanting it to be in the .load() page is because I'm going to use Jquery to change the contents on this page (with an onclick event)
Any help or guidance would be most appreciated.
Cheers Lee.
As yoda said your initialize function kicks in before load.php is loaded. so there will be no div where javascript can put map in instead of calling initialize function from body onload you should call this function in load.php ..... try this:: remove onload function from body and place following javascript code on load.php
<script type="text/javascript">
$(document).ready(function() {
initialize()
});
</script>
At a guess, because the onload="initialize()" kicks in before the test.php div is loaded. Put the initialize() statement in the loaded page.
Related
<html>
<head>
<script src="js/jquery-1_9_1_js.js"></script>
<script>
$(function() {
$("#mainDiv").load("two.php");
});
</script>
</head>
<body>
<div class="main" id="mainDiv"></div>
</body>
</html>
Hi, I have above code in one.php. It loads data from two.php into mainDiv.
The contents of two.php are overlapping out of the div instead of the scrolling inside the div in one.php. Please help me insert a script/code that will scroll the contents inside mainDiv instead of overlapping.
try this :
<div id="" style="overflow-y: scroll; height:'your height';">
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#mainDiv').load('home.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>
it will refresh every 5 seconds
I have a php page and I am trying to scroll user to section automatically after entire page is loaded. Right now it takes directly to that section on page load, I want entire page to be loaded and then scroll the page to that div. What I am doing is.
<script type="text/javascript">
<!--
function gotoit()
{
window.location="#gohere";
}
//-->
</script>
<body onload="gotoit()">
some code here
<a name="gohere"><div class="I want to scroll to this div"></a>
Please help me what should I do to scroll smoothly to that section automatically after page load.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(window).load(function() {
var theHash = "#go-here";
$("html, body").animate({scrollTop:$(theHash).offset().top}, 800);
});
</script>
</head>
<body>
<p>Lots of content here...</p>
<p>More content...</p>
<p>etc...</p>
<p id="go-here">Scroll down to here automagically</p>
<p>Some more content</p>
</body>
</html>
$(window).load() ensures the page starts to scroll after all your other assets have loaded (images, for example).
Here is a jQuery function I use to achieve this:
function scrollToStart(){
$("#scrollToStart").click(function (){
$('html, body').animate({
scrollTop: $("#startHere").offset().top
}, 2000);
});
};
I have a simple php if statement that checks for an error return on a form submit basically.
<?php if ($this->session->flashdata('error')): ?>
×
<div class="alert alert-error" id="error"><?php echo $this->session->flashdata('error'); ?></div>
<?php endif ?>
And I have this script that I want to put into this php so when the php is true the login box or account-container will shake.
$("#account-container").addClass("animated shake");
I tried echoing the script inside the php but all that was give me echo ; displayed on the page when the if was true.
Maybe you can use this script, I'm not at ease with jquery and you would have to adapt the code:
$(function(){
if ($("#error").length !== 0) {
$("#account-container").addClass("animated shake");
}
});
Place it in the header as javascript source or embedded in a script tag
The $().load hook the containing handler to the onload event in the page*
The function simply check if there is an element in the page with id error and
add the class to the #account-container element if is the case.
I won't use $().ready() as the dom can still be partially rendered
References:
http://api.jquery.com/ready/ Says to use .load() function for onload event and
alert that a <body onload="something"> tag is not compatible with the jquery event management
http://api.jquery.com/load/ Can be useful
I think that you are using Jquery for the javascript shake, you should call the javascript routine when the page is ready to load
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>shake demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<p>Click anywhere to shake the box.</p>
<div id="toggle">This is rendered by PHP</div>
<script>
$( document ).ready(function() {
$( "#toggle" ).effect( "shake" );
});
</script>
</body>
</html>
Note that the whole page is rendered by PHP, and the script will work when the document render is ready.
i want that when we click on Ajax 1 then content of ajax1 is change but Ajax 2 will remain same and vice verse plz help i want to do that with jquery
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pas").click(function(){
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$("#pas").html(result);
}});
});});
</script>
</head>
<body>
<div id="pas"><h2>AJAX 1</h2></div>
<div id="pas"><h2> AJAX2 </h2></div>
</body>
</html>
Two elements cannot have the same id. You should change to using classes.
<div class="pas"><h2>AJAX 1</h2></div>
<div class="pas"><h2> AJAX2 </h2></div>
Once you've done that, you can use this to target the correct item.
$(document).ready(function(){
$(".pas").click(function(){
var $this = $(this); // "this" is the clicked element
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$this.html(result);
}});
});
});
you have to differentiate div's ids: give them two different id (i.e. pas1 and pas2 ) and same class 'pas', then fire actions on div.pas
Don't use duplicated id's, use class instead. Use a refference to the clicked object to update your content. Here is your modified code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function(){
var _this = this;
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$(_this).html(result);
}});
});});
</script>
</head>
<body>
<div><h2>AJAX 1</h2></div>
<div><h2> AJAX2 </h2></div>
</body>
</html>
In header.php file , below is used
<script type="text/javascript" src="http://example.com/library/includes/jQuery142.js">
</script> // jquery
<script type="text/javascript" src="http://example.com/library/includes/jqueryautoiframe.js">
</script> // plugin iFrame Sizing
in view file below code, How do i put below in to zend ?I used below code but not working.
<iframe src="blabla"></iframe>
<script>
$('iframe').iframeAutoHeight(); //iframeAutoHeight is the function in jqueryautoiframe.js
</script>
You need to wait until the document is ready before you can use any js
try this:
<script>
$(function() {
$('iframe').iframeAutoHeight(); //iframeAutoHeight is the function in jqueryautoiframe.js
});
</script>
try
<iframe src="http://google.com"></iframe>
<script type="text/javascript">
$('iframe').iframeAutoHeight(); //iframeAutoHeight is the function in jqueryautoiframe.js
</script>
Your iframe source is 'blabla' did you put it intentionally ??
try
<?php
$this->headScript()
->appendScript(
<<<'BODY'
$('iframe').iframeAutoHeight();
});
BODY
);
?>