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]
Related
For example, when I type html + tab,
the html boilerplate automatically loads:
`<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>`
then if I type ol + tab, it automatically loads the opening tag and the closing one:
`<ol></ol>`
and because of this very annoying autocomplete pop up, I can't directly type enter between the tags to get the closing tag under the opening one,
I already tried to change the settings just like it's said in the SublimeCodeIntel Github page :
" Do NOT edit the default SublimeCodeIntel settings. Your changes will be lost when SublimeCodeIntel is updated. ALWAYS edit the user SublimeCodeIntel settings by selecting "Preferences->Package Settings->SublimeCodeIntel->Settings - User". Note that individual settings you include in your user settings will completely replace the corresponding default setting, so you must provide that setting in its entirety. "
and " Live autocomplete can be disabled by setting "codeintel_live"
to false. "
So I did this, okay, no very annoying autocomplete pop up anymore, awesome ! But when I type html + tab, no html boilerplate loading anymore ! Yikes !
I also have to tell I'm an absolute beginner at coding.
Thanks a lot for your help !
It seems like you solved your problem, but at the expense of the HTML boilerplate shortcut.
Try these steps to fix it:
Sublime Text -> Tools -> New Snippet...
Copy-paste the following text into the new snippet file:
--
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>html</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html</scope>
</snippet>
--
Save the new file into your Sublime Text user packages directory.
By default the file should save into this directory, but in case it does not, this is the location for each OS:
OSX: /Users/{user}/Library/Application\ Support/Sublime Text 2/Packages/User/
Windows: C:\Users\{user}\AppData\Roaming\Sublime Text 2\Packages\User
Linux: /home/{user}/.config/sublime-text-2/Packages/User
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>');
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>
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
I'm developing a Tumblr site.
When the user clicks on the "read more", the content is revealed and expanded on the same page,how can I do this?
As Tumblr is reworking the UI for editing, the Read More tool may have been hidden from you. Reset your preferences to use the Rich Text Editor to edit posts. The Read More tool is between the bulleted list tool and the image tool. See the screenshot.
Ok, It's a simple script, but it works. Add this code in your theme before tag (or as it should be):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.spa').click(function(){
$(this).parent().children('div.spb').toggle('normal');
return false;
});
});
</script>
<style type="text/css">
.spb{display:none;}
.spa{cursor:pointer;display:block;}
.spa:after{display:block;content: "{lang:Read more}";margin-bottom:10px;}
</style>
Now, when you write a new text, add to it those things.
Text before Spoiler
<div class="spb">
Text after Spoiler
</div>