I want to insert custom html code in document via code button (like this for example taken from bootstrap + some JS code):
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
console.log("Hello world");
});
</script>
I wan't this to be in the source code of the document (not in text) so it can be rendered properly.
I have tried many settings (it would be long list, I spent whole afternoon with this smile) but nothing works, i.e. code is stripped / changed when I close the code window and open again.
for the context, I use TinyMCE as editor for CMS and sometimes there is need to add extra style or javascript library
So I would be very grateful if somebody could post tinymce 4.2 init settings which allows this... or say if it's even possible
You may use the tinymce command mceInsertContent:
my_editor_instance.execCommand('mceInsertContent', ui, '<my>html</my>');
Related
I have an issue getting content inside the projectpages. (I literally tried to figure this out for 4 days now, searching the web - i will give my right arm for solving this)
So I have a simple index.html page with 7 projects (7 thumb images representing each portfolio project). When i click on one of the images i would like to get to the page showing its content - i get to the new page /#/WORK1/ but i can't figure out where/how to insert my content in this new url?
You can see the problem at my site here:
awesth.dk
Here is the code i am using for the 7 projects. WORK1, WORK2 etc.
<div id="projectPages">
<div class="project page-project" data-url="/WORK1/" >
<!-- Will be fetched on-demand -->
</div>
...
(So I don't know how I get it to be "fetched on-demand")
And here is the 7 clickable thumbs:
<div id="projectThumbs" >
<div class="wrapper">
<a class="project "href="/WORK1/" >
<div>
<div class="project-image"><div class="intrinsic"><div class="content-fill"><img data-src="/img/upcoming.png" data-image="/img/upcoming.png" data-image-dimensions="2500x1401" data-image-focal-point="0.5,0.5" alt="work" data-load="false"/><noscript><img src="/img/upcoming.png"></noscript></div></div><div class="project-item-count">0</div></div>
<div class="project-title">Titel1</div>
</div>
</a>
...
Pleaaase help
You need to use write some JavaScript code using JQuery.
There are methods you need:
click() – to add click event handler.
data() – to get value from data attribute.
load() – to load contents from some URL to some element.
UPD
There is an example of using these methods. Does it fit your case?
https://jsfiddle.net/up495fzs/
UPD2
You need to update your HTML code on the server.
Pay attention to data-project-id="1" and id="project-id-1". And update numbers respectively.
In data-url set your relative path. If you want to load WORK1.html file, you should write: data-url='/WORK1.html' (without / at the end).
UPD3
The connection between blocks are made by data-project-id="1" and id="project-id-1" attributes.
I change the way to get url. I leave it in <a href="..."> and removed from <div class="project page-project">.
https://jsfiddle.net/up495fzs/6/
But for now I realised that I don't understand why you need many <div class="project page-project"> elements. Why not to use just one?
https://jsfiddle.net/up495fzs/5/
UPD4
And you need to know about CORS (Cross-origin resource sharing) – https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
You could load contents just from your web site. It'll fail if you will try to load page from external web site.
UPD4
You could use history.pushState(null, null, link.href); to update the URL of the page.
http://diveintohtml5.info/history.html
Updated JSFiddle:
https://jsfiddle.net/up495fzs/8/
You won't see URL changes at JSFiddle because it runs in a frame.
Try it on your page.
UPD5
Add link to JQuery library to the <head> of your page but before my script.
Add my script wrapped with $(function() { /* JS code */ }); to execute it properly.
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
...
<script>
$(function() {
/* JS code from JSFiddle */
});
</script>
I've noticed, that there is large qwerty keypad in some apps(Facebook, Browser), that differs from popup. How do I use it in SDK.
P.S. I have multi-scene app, with ime module included in app.json
I found out from Samsung support, that you can use IMEShell_Common object.
First you include these:
<script type='text/javascript' src='$MANAGER_WIDGET/Common/IME_XT9/ime.js'></script>
<script type='text/javascript' src='$MANAGER_WIDGET/Common/IME_XT9/inputCommon/ime_input.js'></script>
in body tag
After you can use shell like this:
var imeBox = new IMEShell_Common();
document.getElementById('search').focus();
imeBox.onShow();
In Samsung this can be achieved by IME. A very well described step by step procedure is mentioned in the below link. It also has a sample app that demonstrate the full functionality:
http://www.samsungdforum.com/Guide/tut00049/index.html
Here is the small demostration:
Load the plugin js:
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Plugin.js"></script>
Now load the IME js:
<script type="text/javascript" src="$MANAGER_WIDGET/Common/IME_XT9/ime.js"></script>
Create instance of the plugin:
var pluginAPI = new Common.API.Plugin();
Now register you IME key and initialize it for a text field.
pluginAPI.registIMEKey();
imeMail = new IMEShell("messageText", Main.imeInitId, this);
imeMail.setKeySetFunc('qwerty');
Now just focus on the input field:
jQuery("#messageText").focus();
For more details, please check the above mentioned URL.
Happy Coding!
So I have a specific page that spawns a modal dialog to login/register. I am using Colorbox, and this is working nicely for me. What I need to do is open ONLY the form and not the entire page with header links and such. I understand this can be fixed by adding '?tmpl=component' or '&tmpl=component' to the end of the url. My problem is that my form is stripped of all styling and is terribly ugly. Is there any way I can go about adding styling back to this form? Thanks in advance.
Yes you can get all styles,
This is happen due to using with tmpl=component Normally Joomla using this layout for printing purpose(Print layout) it have only basic styling compared to your default template index.php.
So you need to get your proper styling for the forms you have to add those style sheet to the component.php inside your template folder.
templates/your_template/component.php
Add your basic template style sheet at the top of the file using same like index.php.
eg:
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez_20/css/template.css" type="text/css" />
Then tmpl=component view have proper styles applied.
Hope it helps..
I downloaded the entire FTP and did a search for where the basic stylesheets were being included (general.css and system.css) so that I could add my others for style. This can be found/edited in public_html/templates/system/component.php
How do you write the pop-up HTML in a Crossrider extension?
What triggers it and how do you add an image, eg if you want to show a logo in the pop-up with some text, do you leave the extension.js since you will be writing all the codes in the pop-up HTML?
I am so confused here.
In general, Crossrider popups can be created with a few simple steps, as follows:
On the (Settings >) Browser Buttons page, enable the extension button for the browsers you want to support
In the background.js file:
Set the button icon using appAPI.browserAction.setResourceIcon (Note: don't forget to add the icon to the extension's resources)
Set the popup details using appAPI.browserAction.setPopup
appAPI.browserAction.setPopup({resourcePath:'popup.html', height: 300, width: 300});
Create the template popup HTML that is specified as the resourcePath property in step 2.2.
On the Edit Code page, right-click on the Resources folder, point to Create, click Popup, and then specify the name for the popup file (e.g. popup.html).
At this point, you have a fully functional popup button that is triggered whenever the extension button is clicked.
To customize your popup, simply add HTML, CSS, and JS to the popup.html in a similar way to a regular HTML page adding remote resources using standard HTML tags. Use our crossriderMain function, as defined in our popup template, to add files from your extension's Resources folder. For example:
<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {
// Note: don't forget to add the files to the extension's resources
// Load resource CSS
appAPI.resources.includeCSS('style.css');
// Load resource JS
eval(appAPI.resources.get('script.js'));
// Load resource image
$('#myImg').attr('src', appAPI.resources.get('myImg.png'));
}
</script>
</head>
<body>
Hello World!
<img id="myImg">
</body>
</html>
If you need any assistance with any specific issues, please feel free to email our support (support#crossrider.com).
[Disclaimer: I am a Crossrider employee]
After reading a few examples of tinyMCE, the project is like changing every available textarea into a rich-text editor. I never find it init with an element id or selector by any kind. So can I make an ordinary textarea co-exist with a tinyMCE rich-text editor?
<html>
<head>
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "textareas"
});
</script>
</head>
There are two ways you can do this.
You can either set the mode to "exact" and specify the ID's of the textarea(s) you want converted to TinyMCE instances using the elements config item.
Alternatively you can set the mode to "specific_textareas" and specify the CSS class you want to assign to the appropriate textareas that are to be converted to TinyMCE instances using the editor_selector config item.