Solved

WordPress how to stimulate  body onload

Posted on 2016-08-17
6
329 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
[X]
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
  • 3
  • 2
6 Comments
 
LVL 9

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 9

Expert Comment

by:James Bilous
ID: 41759596
Thats correct
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

623 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