I have CKeditor in
E:\XAMPP\htdocs\projekt2\ck
Wheh on Page with CKeditor I go to browser server
It opens wrong location to script in a popup
I don't know how is this even possible.
Everything is not on http://localhost/projekt2/admin/ckeditor/plugins/....
But on
http://localhost/projekt2/ck.....
And from there script is called
In PHP i called this by <script src="<?= base_url('ck/ckeditor.js') ?>"></script> which takes it from http://localhost/projekt2/ck
The imageuploader plugin you are using has default value for filebrowserBrowseUrl config option (you can see it in the plugin source code - https://github.com/xsmo/Image-Uploader-and-Browser-for-CKEditor/blob/master/plugin.js).
To use different upload dir, change filebrowserBrowseUrl config, e.g:
CKEDITOR.replace( 'editor', {
filebrowserBrowseUrl = 'http://localhost/projekt2/ck/.../imgbrowser.php';
} );
Related
I have a js file called menu.js in the following path on my webhost
public_html/oc-content/themes/bender_black/js
$(document).ready(function(){
$("#nav-mobile").html($("#nav-main").html());
$("#nav-trigger span").click(function(){
if ($("nav#nav-mobile ul").hasClass("expanded")) {
$("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
$(this).removeClass("open");
} else {
$("nav#nav-mobile ul").addClass("expanded").slideDown(250);
$(this).addClass("open");
}
});
This code is a responsive menu, I want it to be reciprocated on all my pages. I therefore tried to call it from my header.php file which is located in
public_html/oc-content/themes/bender_black
Here is part of what I put in header.php
<head>
<script type="text/javascript" src="js/menu.js"></script>
</head>
The menu is supposed to release a drop-down on smaller screens however nothing happens. Am I calling the js properly?
How can I fix this?
Script tags placed in the browser are loaded by the browser. You therefore need to provide a DocumentRoot relative path to the js file
<script type="text/javascript" src="oc-content/themes/bender_black/js/menu.js"></script>
It needs absolute path like:
<script type="text/javascript" src="http://mywebsite.com/oc-content/themes/bender_black/js/menu.js"></script>
But in Osclass case, you can register javascripts by internal PHP functions, which look like this:
Register the script:
osc_register_script('menu', osc_current_web_theme_url('js/menu.js'), 'jquery');
Enqueue:
osc_enqueue_script('menu');
If it uses jQuery, make sure you call the file after jQuery has been called.
I have recently discovered the new trend of including all .js script at the end of the page.
From what i have read so far seems pretty ok and doable with an exception.
The way I am working is using a template like:
<html>
<head>
<!-- tags, css's -->
</head>
<body>
<!-- header -->
<div id="wrapper">
<?php
include('pages/'.$page.'.php');
?>
</div>
<!-- footer -->
<!-- include all .js -->
</body>
</html>
Now, if I want to use this example on my page http://www.bootply.com/71401 , I would have to add the folowing code under my jquery inclusion.
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
But that would mean I either use that in every page - even if I do not have use for it, either generate it with php in the $page.'php' file and echoing it in the template file, after the js inclusion.
I am sure though, better methods exist and I don't want to start off by using a maybe compromised one.
Thanks!
Please avoid using inline scripts as they are not good maintainable and prevent the browser from caching them. Swap your inline scripts in external files.
Fore example you could put all your JavaScript in one file an check the presence of a specific element before initialize the whole code. E.g.:
$(document).ready(function(){
if($('.thumbnail').length) {
// your thumbnail code
}
});
A better way to execute "page specific" JavaScript is to work with a modular library like requirejs. You can modularize your scripts depending on their functionality (like thumbnails.js, gallery.js etc.) and then load the necessary script(s) depending e.g. on the existence of an element:
if($('.thumbnail').length) {
require(['ThumbnailScript'], function(ThumbnailScript){
ThumbnailScript.init();
});
}
The best way you can go is create a separate file for this code.
Let's name it app.js. Now you can include it under the jQuery inclusion.
<script type="text/javascript" src="app.js"></script>
This will prevent code repeat.
One more thing, pull all the code in $(document).ready(). Here is an example. So your app.js file will look like this:
$(document).ready(function(){
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
})
I'm trying to load a google maps function into the functions.php file of my wordpress theme.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js"></script>
<script type="text/javascript" >
< !-- updatepage(); //-->< /script >
< /script >
I've been told by the creator of the theme to call it out using the wp_enqueue_script() function in this .php file.
My problem is that when I try to call it out, the < are causing problems...apparently I don't know how to call it out in the right format....how can I insert this correctly so that my fullscreen google maps works correctly?
You should create a .js file for the jQuery code you want to run.
For the purposes of this example i'm going to name this file customjquery.js. You can name it whatever you want, but be sure to edit the code below to reflect the new filename if you do.
1] Create a customjquery.js file:
(function($) {
updatepage();
})(jQuery);
2] Then you need to place that customjquery.js file into the /js/ directory of your theme.
3] Add this code to your themes functions.php file:
function my_custom_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('google-maps-api', '//maps.googleapis.com/maps/api/js?sensor=false&extension=.js', array('jquery'));
wp_enqueue_script('my-custom-jquery', get_template_directory_uri() . '/js/customjquery.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');
If you would like to place the customjquery.js file somewhere else in your theme folder, just update the path in the code above to reflect the file's new location.
If you just want to include it on your web page, then you may just echo it using proper add_action(). But, if you want to run it with your functions.php then I recommend converting the code to php or wp_enqueue_script().
I have been trying to load the html page genereated by swiffy into my site banner. I tried iframes as was suggested in the google FAQ, but when links are clicked they only open in the iframe as per usual, but I need them to open on the current page so I tried breaking up the swiffy code into a javascript file and calling it in as shown below. I am currently using word press, which means this is all being loaded from a header.php file, and have been trying the following code with no luck. Any suggestions?
<div id="home-banner" width="916px" height="200px">
</div>
<script src="http://www.gstatic.com/swiffy/v3.9/runtime.js"></script>
<script type="text/javascript" src="http://www.goaefis.com/Banner.js">
var stage = new swiffy.Stage(document.getElementById('home-banner'), swiffyobject);
stage.start();
</script>
You need to deregister the WordPress jquery so you can use the google code. You can save the script inside the <script></script>tags as a separate document. For this example I'll call it swiftfyobject.js. It will need to go in the theme folder inside a folder named js. You can then call the script from within the themes function.php file.
Here is how it should look:
The swiffyobject.js file that goes in the js folder:
var stage = new swiffy.Stage(document.getElementById('home-banner'), swiffyobject);
stage.start();
The code for the functions.php file:
function add_themescript(){
if(!is_admin()){
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://www.goaefis.com/Banner.js');
wp_enqueue_script( 'swiffyobject', get_template_directory_uri() . '/js/swiffyobject.js', array('jquery'));
}
}
add_action('init','add_themescript');
That should get you going if there aren't any conflicts with other code in the theme or plug-ins you use.
I'm trying to insert this code:
<script type="text/javascript">
some Javascript codes comes here
</script>
to WordPress' <head></head> section in front end and in admin panel
E.g., Joomla! 1.6 has an API that allows this:
$doc =& JFactory::getDocument();
$doc->addCustomTag($headTag);
I need to add different things for different pages. For example:
Page 1
I need to add
<link rel="alternate" type="application/rss+xml" title="feed title" href="feed url" />
For a few pages
Page 2
I need to add
<script type=\"text/javascript\" src=\"" . LIVE_SITE .
"/wp-content/plugins/jobs/lknlibrary/js/ajax.js\"></script>
<script type=\"text/javascript\">
var ajax = new sack();
var currentClientID=false;
function getClientData()
{
var clientId = document.getElementById('db_country_id').value.replace(/[^0-9]/g,'');
ajax.requestFile = '" .BASE_PATH . "/wp-content/plugins/jobs/com_jobs_admin/tasks/get_location_data.php?task=get_location_data&name=db_parent_id&getClientId='+clientId; // Specifying which file to get
ajax.onCompletion = showClientData; // Specify function that will be executed after file has been found
ajax.runAJAX(); // Execute AJAX function
}
function showClientData()
{
clearJS = ajax.response;
var strTagStrippedText = clearJS.replace(/(<\s*\/?\s*)div(\s*([^>]*)?\s*>)/gi ,'');
document.getElementById('locationsDiv').innerHTML=strTagStrippedText ;
}
function initFormEvents()
{
if (document.getElementById('db_country_id')){
document.getElementById('db_country_id').onchange = getClientData;
document.getElementById('db_country_id').focus();
}
}
window.onload = initFormEvents;
</script>
for a few pages
Page 3
I need to add
<link rel="stylesheet" type="text/css" href="/wordpress/wp-content/plugins/jobs/lknlibrary/js/tabs/tab.webfx.css" />
for a few pages
I have 70+ pages in admin panel like those above.
Trying to manage the header of the WordPress with the example is a bit difficult.
In your theme's functions.php:
function my_custom_js() {
echo '<script type="text/javascript" src="myscript.js"></script>';
}
// Add hook for admin <head></head>
add_action( 'admin_head', 'my_custom_js' );
// Add hook for front-end <head></head>
add_action( 'wp_head', 'my_custom_js' );
For anyone else who comes here looking, I'm afraid I'm with #usama sulaiman here.
Using the enqueue function provides a safe way to load style sheets and scripts according to the script dependencies and is WordPress' recommended method of achieving what the original poster was trying to achieve. Just think of all the plugins trying to load their own copy of jQuery for instance; you better hope they're using enqueue :D.
Also, wherever possible create a plugin; as adding custom code to your functions file can be pita if you don't have a back-up and you upgrade your theme and overwrite your functions file in the process.
Having a plugin handle this and other custom functions also means you can switch them off if you think their code is clashing with some other plugin or functionality.
Something along the following in a plugin file is what you are looking for:
<?php
/*
Plugin Name: Your plugin name
Description: Your description
Version: 1.0
Author: Your name
Author URI:
Plugin URI:
*/
function $yourJS() {
wp_enqueue_script(
'custom_script',
plugins_url( '/js/your-script.js', __FILE__ ),
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', '$yourJS' );
add_action( 'wp_enqueue_scripts', 'prefix_add_my_stylesheet' );
function prefix_add_my_stylesheet() {
wp_register_style( 'prefix-style', plugins_url( '/css/your-stylesheet.css', __FILE__ ) );
wp_enqueue_style( 'prefix-style' );
}
?>
Structure your folders as follows:
Plugin Folder
|_ css folder
|_ js folder
|_ plugin.php ...contains the above code - modified of course ;D
Then zip it up and upload it to your WordPress installation using your add plugins interface, activate it and Bob's your uncle.
Elaborating on the previous answer, you can gather all the required snippets before outputting the header, and only then use an action hook to inject all you need on the head.
In your functions.php file, add
$inject_required_scripts = array();
/**
* Call this function before calling get_header() to request custom js code to be injected on head.
*
* #param code the javascript code to be injected.
*/
function require_script($code) {
global $inject_required_scripts;
$inject_required_scripts[] = $code; // store code snippet for later injection
}
function inject_required_scripts() {
global $inject_required_scripts;
foreach($inject_required_scripts as $script)
// inject all code snippets, if any
echo '<script type="text/javascript">'.$script.'</script>';
}
add_action('wp_head', 'inject_required_scripts');
And then in your page or template, use it like
<?php
/* Template Name: coolstuff */
require_script(<<<JS
jQuery(function(){jQuery('div').wrap('<blink/>')});
JS
);
require_script(<<<JS
jQuery(function(){jQuery('p,span,a').html('Internet is cool')});
JS
);
get_header();
[...]
I made it for javascript because it's the most common use, but it can be easily adapted to any tag in the head, and either with inline code or by passing a href/src to an external URL.
If you are ok using an external plugin to do that you can use Header and Footer Scripts plugin
From the description:
Many WordPress Themes do not have any options to insert header and
footer scripts in your site or . It helps you to keep
yourself from theme lock. But, sometimes it also causes some pain for
many. like where should I insert Google Analytics code (or any other
web-analytics codes). This plugin is one stop and lightweight solution
for that. With this "Header and Footer Script" plugin will be able to
inject HTML tags, JS and CSS codes to and easily.
One way I like to use is Vanilla JavaScript with template literal:
var templateLiteral = [`
<!-- HTML_CODE_COMES_HERE -->
`]
var head = document.querySelector("head");
head.innerHTML = templateLiteral;