Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

WordPress how to stimulate  body onload

Posted on 2016-08-17
6
158 Views
Last Modified: 2016-08-18
Hi

I wish to display an openlayers map within Wordpress

Usually the openlayers JavaScript is fired from
<body onload="init()" >

Open in new window

 

How do I stimulate this in WordPress?

So A [Shortcode] on my page will point to the PHP / html markup where I will enqueue the necessary scripts but how do I trigger the "init()" function?
0
Comment
Question by:trevor1940
  • 3
  • 2
6 Comments
 
LVL 8

Accepted Solution

by:
James Bilous earned 500 total points
ID: 41759539
If you have jquery installed you can simply insert a script tag that fires init on document ready.

<script type="text/javascript">$(document).ready(function() { init(); });</script>

Open in new window

0
 
LVL 1

Author Comment

by:trevor1940
ID: 41759573
OK that would work
I Assume I would need to will enqueue JQUERY before my script?
0
 
LVL 8

Expert Comment

by:James Bilous
ID: 41759596
Thats correct
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 13

Expert Comment

by:Abhijeet Rananaware
ID: 41759846
You add Custom Js code using following plugins.

https://wordpress.org/plugins/custom-css-js/
https://wordpress.org/plugins/css-javascript-toolbox/

You can add code given by James using above simple plugins
0
 
LVL 1

Author Comment

by:trevor1940
ID: 41760129
@James Thanx I've been scratching my head for days on this

If interested this is how I've achieved  a test map now on to the actual

PHP
<?php

/*
Plugin Name: Open Layers
Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
Description: A brief description of the Plugin.
Version: 1.0
Author: Trevor1940
Author URI: http://URI_Of_The_Plugin_Author
License: A "Slug" license name e.g. GPL2
*/
function load_ol_stuff(){
      wp_enqueue_script("jquery");
      
    wp_enqueue_script('openlayers',
        "//openlayers.org/api/OpenLayers.js","2.0",false);
    wp_enqueue_script('OSM',
        WP_PLUGIN_URL. "/OpenLayers/js/ol.js",
        array('openlayers'),'1.0',false);
} // end load stuff



// load scripts required for plugin

add_action('get_header',load_ol_stuff);

function get_map(){
    $html = <<<HTML
<div style="width:400px;height:400px;" id="draw-map-here"></div>
HTML;

    echo $html;


}

add_shortcode( 'get-ol-map', 'get_map' );

Open in new window



ol.js
 jQuery(function($){
  init();
 });
 
function init(){
//    alert("Hello word");
    map = new OpenLayers.Map('draw-map-here');
    originalOSM = new OpenLayers.Layer.OSM("OpenStreetMap");
    map.addLayers([originalOSM]);
    map.setCenter(new OpenLayers.LonLat(96.33899700000126,2.4700000000000246).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()), 10);
;}

Open in new window

0
 
LVL 1

Author Closing Comment

by:trevor1940
ID: 41761580
Thank you
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question