Solved

WordPress how to stimulate  body onload

Posted on 2016-08-17
6
186 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 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

Question has a verified solution.

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

In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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 add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…

749 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