I need to implement on my php page map. I have container <div id="map"></div> which is inside other div, and I put this code inside <head> tag but it doesn't show at all. Can anybody help me?
<script type="text/javascript" src="javascript/jquery-1.4.3.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
(function() {
window.onload = function() {
var mapDiv = document.getElementById('map');
var latlng = new google.maps.LatLng(37.09, -95.71);
var options = {
center: latlng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapDiv, options);
}
})();
</script>
Did you specify size for your div? eg:
<div id="map" style="width: 300px; height: 300px;"></div>
If this doesn't work you might have to post a snippet of your HTML and CSS..
I had some thing like that happen and all I had to do was use jquery compliance code.
jQuery(document).ready(function($) {
$(function() {
// Your map code here.
});
});
Your code does work for me even though the last line, when you close that anonymous function, gave me an error like you were using some illegal character, so I had to retype it. Once I did, it worked perfectly showing a road map of all of the United States.
Other than that possible illegal character you could also try:
giving your #map element a height and width or else it won't be visible.
putting all your javascript inside $(document).ready() so it's only execute when the document is ready.
you say that you include your scripts in the head tag of your document, but maybe you should try putting them at the end of your body to speed up loading.
Hope that helps.
Check the validity of your HTML and the doctype declaration. It has been an issue on several Google Maps I've setup.
See this
If any one using google map code from javascript or jquery or any language,
He/She should use for local host https://localhost/test/ or in server https://example.com.
Means use secure url like https
Related
I have a problem, and I would like you to guide me to solve it if you do not mind ...
In my HTML source code had several pieces of css codes here and there. So I decided to put together into a file called principal.css and do the following in the head section
<link href="css/principal.css" rel="stylesheet" type="text/css" />
This has worked wonderfully!
My idea was to do the same with the javascript code in my HTML, but it has not worked. This is one of them:
$("[data-slider]")
.each(function () {
var input = $(this);
$("<span>")
.addClass("output")
.insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output:first")
.html(data.value);
});
Is there some special way to do this?
My goal is that the page has the least amount of code, I leave well indented, documented and clean.
Greetings, I will await your answers in!
Please, excuse my english...
You need to wrap this in $(document).ready(...)
Also, it has unusual indentation. It would probably be better to format it like this:
$(document).ready(function() {
$("[data-slider]").each(function () {
var input = $(this);
$("<span>").addClass("output").insertAfter($(this));
}).bind("slider:ready slider:changed", function (event, data) {
$(this).nextAll(".output:first").html(data.value);
});
});
I personally don't like chaining so many commands like this in a row. It might be SLIGHTLY more efficient, but it makes it much more difficult to debug and fix problems. I personally would break the .each() and the .bind() into separate statements. But I suppose it's a matter of preference.
.ready() documentation
$(document).ready(function(){
// your code here
});
or
.load() documentation
$(window).on('load', function(){
// your code here
});
Place your js code in a separate .js file. Similar to how CSS is also placed in a separate file and then link it to your html file.
like so, in your html file:
<script src="somejsfile.js"></script>
And yes, you have to wrap your js code in a document.ready function so it can execute when the documents elements are finished loading.
For example:
$(document).ready(function() {
// Your JS code here
});
This is because the browsers HTML interpreter reads code from TOP to BOTTOM, so if your not setting a document.ready, the JavaScript will run before any of your document elements are loaded.
Head:
<head>
<link href="css/principal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="myscript.js"></script>
</head>
myscript.js
$(function() {
$("[data-slider]")
.each(function () {
var input = $(this);
$("<span>")
.addClass("output")
.insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output:first")
.html(data.value);
});
});
I would like to add that if you plan on putting your js code in a separate file which is a good idea. You should be aware that you will not have to use the...
<script>
//js code
</script>
...the script tags in a separate js file.
I have been making a website that has lots of pages. Hence decided to put the navigation bar in a separate php file to reduce re-work in all those pages in case of changes. So in my index.php I have included the navigation bar like:
<?php include 'navbar.php'; ?>
And the navbar.php looks like:
<div id="nav">
<ul>
<li pg="#home" >home</li>
<li pg="#pack" >packages</li>
<li pg="#about" >about</li>
</ul>
</div>
In the index.php, I have a javascript onClick function to select the <li> from navbar:
<script type="text/javascript">
var oldpg = "#home";
$(document).ready(function() {
$('#nav ul li').click(function() {
//here are the codes to hide/show divs });
});
</script>
But when you click those <li> nothing happens. I think the js is not picking up the elements from the php. How can I refer to those elements in a separate php file?
You need to fix your JavaScript:
$(document).ready(function() {
$('#nav ul li').click(function() {
//here are the codes to hide/show divs });
});
}); // you left off this closing
You can use Chrome DevTools or Firebug to view the console.
Use on and try. Not tested but that may be the problem here. Try
$(document).ready(function() {
$(document).on('click', '#nav ul li', function(e) {
//Your code
});
});
Also make sure that you included jQuery library
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
The code you showed us is correct. As long as the div with id "nav" is indeed being displayed, make sure you are including the jQuery library correctly. If it is, your error must reside inside whatever you did inside the click event handler $.click (in //here are the codes to hide/show divs).
Thanks for replying #Retsam #Campari #Chris #Ankit
As #Retsam said, I tried with Chrome console and found the error to be
Uncaught reference error: $ not defined (Firebug console didn't give any error/message)
The reason was because I had put my code before linking with the jQuery library.
So I moved my
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
above the onClick function and it worked.
Silly me ...
Thanks guys
I want to show loading animation if browser supports JS. if JavaScript is disabled then the image will show but never be hidden, in this case. For this purpose I wrote this code directly after the <body> tag:
<?php
$results = get_browser();
if ($results["javascript"] == 1) {
echo '<div id="loading"><img src="core/design/img/load/load.gif"/></div>';
}
?>
And my js looks like that
$(window).load(function(){
$('#loading').fadeOut(600);
});
Got error message browscap ini directive not set in. How can I realize my idea?
You can just use:
<body>
//set the div to hidden by default
<div id="loading" style="display:none"><img src="core/design/img/load/load.gif"/></div>
//place this code directly below the loading div, it will run before page/dom is loaded
<script type="text/javascript">
document.getElementById('loading').style.display = 'block';
</script>
<script type="text/javascript">
$(function() {
//this will run after the page has loaded
$('#loading').fadeOut(600);
});
</script>
...
If you want to do exactly what aquastyle.az does (though the above solution is faster), You can do this:
<body>
<script type="text/javascript">
//if JavaScript is enabled, append the loading div to be body
$('body').append('<div id="loading"><img src="core/design/img/load/load.gif" /></div>');
</script>
<script type="text/javascript">
$(function() {
//this will run after the page has loaded
$('#loading').fadeOut(600);
});
</script>
...
In your HTML, you could do something like this:
<html class="no-js">
...
Then, once the page loads, replace the no-js class with a js class via JavaScript.
$(window).load(function(){
$('html').removeClass('no-js').addClass('js');
});
Finally, in your CSS, show the loading image if the browser supports js and hide it if it doesn't.
.js #loading {
display: block;
}
.no-js #loading {
display: none;
}
Does that make sense?
The get_browser function must be download the appropriate INI file and include it in your PHP.ini file.
Instead of trying to figure out if the user has javascript enabled, why don't you build out the site from the perspective of progressive enhancement, so it works for all users regardless of their browser settings.
Alternatively, you could ask javascript to set a cookie, and then check that the cookie exists in PHP, it's by no means 100% foolproof method but could work for your situation.
I have a php iFrame inside an html page. I have to do it this way because its a 3rd party site. I am trying to call the some url vals with $_GET[] but its not working. Then I figured out its a path problem.
How can I call the url vars from a php iFrame in html?
Thanks
Php is server side, but to manage you frames you need something like javascipt which works on client side. I'm affraid that you mix those two things.
http://www.tek-tips.com/viewthread.cfm?qid=1281918&page=6
<script type="text/javascript" language="javascript">
<!--
function refreshIframe(){
var iframeid = "sessionlog";
var h = parent.window.getElementById(iframeid).src;
parent.window.getElementById(iframeid).src = h;
}
//-->
</script>
Plus you need code which performs redirect:
<SCRIPT language="JavaScript">
<!--
window.location="http://someplace.com";
//-->
</SCRIPT>
I have got this code
/* Popup for hot news */
$(document).ready(function() {
var $dialog = $('<div></div>')
.html('text to be shown')
.dialog({
autoOpen: false,
title: 'Table'
});
This code is in my JavaScript files which are included by header.php.
How to pass PHP output to this function?
Inputing <?php echo($mydata)?> in .html('') above does not solve anything.
Any reason why this gives an error?
Thanks for helping!
First of all your code is having some problem, $ in php is a prefix of variable and $ in jQuery is a selection sign. You can view the html source(the output) on browser for debug.
I can think of three ways to do so:
(1)The way you have mentioned should work, see the code below
<?php $foo='hi'?>
<script>
alert("<?php echo $foo?>");
</script>
(2)Another way is to separate server side and client slide code clearly for better maintenance
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<?php echo"<div id='foo' style='visibility:hidden;'>HI</div>"?>
<script>
alert($('#foo').text());
</script>
(3)The last way is by passing variable from the URL http://example.com/example.php#hi
<script>
var foo= location.href.split('#')[1];
alert(foo);
</script>
Adding <?php //code?> to your JS files do nothing because JS files are not executed by Apache. You can either use Ajax to request for data once your page loads (if the data doesn't need to be there at start) or you can add those PHP code blocks to your HTML code.
Using Ajax (goes in your JS file)
$(document).ready(function(){
var u = 'data.php';
var d = {};//data
$.get(u, d, function(data){
//got by data. lets invoke some methods here
});
});
Putting it in your HTML (goes in your HTML file)
var __DATA = '<?php //output some data I prepared earlier ?>';
//I'm using __ and capitol case to denote a global variable. Just personal preference
<script src='myjsfile.js' type='text/javascript'></script>
//the variable __DATA is available to your JS file and you can use it