I am trying to embed swf file into my html code. I am using swfobject 2 JS lib.
The code looks like following:
<script type="text/javascript" src="/site_media/js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.scale = "noborder";
params.bgcolor = "#ffffff";
var attributes = {};
attributes.id = "plist";
attributes.align = "top";
params.seamlesstabbing = "true";
swfobject.embedSWF("/site_media/goapp/usersList.swf", "myAlternativeContent", "1000", "800", "9.0.0", false, flashvars, params, attributes);
</script>
I expected the background color of the app to became white, but actually, nothing happens to loaded application, and it has it's default color themes. Also alignment dosn't do anything as well.
Please help my to understand how to change bg color of swf application, and make it look like a part of the page (e.g. scale without scrollbars, etc)
I am afraid yoiu are missing the install swf file
swfobject.embedSWF("/site_media/goapp/usersList.swf", "myAlternativeContent",
"1000", "800", "9.0.0","expressInstall.swf",
flashvars, params, attributes);
otherwise you might want to set that parameter to null. Quickly check the doc for swfObject
Related
I'm having some trouble getting removeFormat to work as it should. Funnily, I thought I had this working a couple days ago; but now when I check it it's not right. It is removing the block-level formatting regardless of where the selection is. A simple example, using the Quill Quickstart with a few modifications:
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
let Block = Quill.import('blots/block');
let Parchment = Quill.import('parchment');
class BlockquoteBlot extends Block { }
BlockquoteBlot.scope = Parchment.Scope.BLOCK;
BlockquoteBlot.blotName = 'blockquote';
BlockquoteBlot.tagName = 'blockquote';
Quill.register(BlockquoteBlot);
let quill = new Quill('#editor');
$('#italic-button').click(function() {
quill.format('italic', true);
});
$('#bold-button').click(function() {
quill.format('bold', true);
});
$('#blockquote-button').click(function() {
quill.format('blockquote', true);
});
$('.cust-clear').click(function(ev) {
var range = quill.getSelection();
quill.removeFormat(range.index, range.length);
});
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>
<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Create the toolbar container -->
<div id="toolbar">
<button id="bold-button" class="ql-bold">Bold</button>
<button id="italic-button" class="ql-italic">Italic</button>
<button id="blockquote-button" class="ql-blockquote">Blockquote</button>
<button class="cust-clear" title="Clear Formatting">X</button>
</div>
<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
</div>
In this example, if I apply bold to "Hello" and make the entire line a blockquote, all looks as it should. If I then select "Hello" and click my X button to remove the formatting, it removes the blockquote formatting even though I'm nowhere near a "\n" character. Am I misunderstanding removeFormat, or is there an error in how I've created my BlockquoteBlot? I took that code mostly from the Medium demo on the Quill site, but I found in some cases I needed to specifically define the scope so that the tag would be recognized as block (that may not be necessary for this demo, but I'm including it in case it poses an issue).
The way removeFormat is supposed to work currently does remove all block formats a user highlights, even if it is not across the "\n" character. This makes more sense when the user is selecting multiple lines Issue #649 but perhaps it should not work this way when there is only one line partially selected. I've created a Github Issue to discuss this. Please feel free to chime in.
I am aware that this is an old thread - as an additional to your code in case someone hasn't selected anything - works on Quilljs 1.2.6
$('.cust-clear').click(function(ev) {
var range = quill.getSelection();
if (range.length ===0) {
let leaf, offset = quill.getLeaf(range.index);
quill.removeFormat(range.index - offset, range.index + leaf.domNode.length);
} else {
quill.removeFormat(range.index, range.length);
}
});
This should work
$('.cust-clear').click(function()
{
var range = editor.getSelection();
if (range){
if (range.length > 0) {
editor.removeFormat(range, Quill.sources.USER);
}
}
});
following up on
https://stackoverflow.com/questions/27975991/neptune-theme-buttons-unreadable- with-light-grey-backgrounds-on-visualforce-page
The sf css extended.css is loading after neptune.css and therefore overriding neptune for body button, body .x-btn etc.
I found this:
https://salesforce.stackexchange.com/questions/24575/how-to-ignore-salesforce-css-on-vf-page-with-header
in which the first answer with the jQuery link seems to be the most elegant. However I need help on this -
$("head").append("link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'"); and
$("head link[rel='stylesheet']").last().after("link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'");
are standard html css, not the sf way of
apex:stylesheet value="{!URLFOR($Resource.ExtJS42, '/ExtJS42/resources/ext-theme-neptune-all.css')}"
How is Bob Buzzard implementing this in apex-speak? tia.
removed the "<>" out of above code to get it to display
The code snippets that you have posted, e.g.
$("head").append("link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'");
are JavaScript that relies on the JQuery library being present, so you'd actually need something like the following:
At the top of the file include jQuery - this is from a CDN, but you might want it as a static resource:
<apex:includescript value="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" />
Then in the body
<script>
$(document).ready(function(){
$("head").append("link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'");
});
</script>
putting this inside the ready handler means it will run as soon as the page is loaded.
<script type="text/javascript" >
j$ = jQuery.noConflict();
j$(document).ready(function() {
var stylesheet = document.styleSheets[(document.styleSheets.length - 1)];
for( var i in document.styleSheets ){
if( document.styleSheets[i].href && document.styleSheets[i].href.indexOf("extended.css")>0 ) {
stylesheet = document.styleSheets[i];
stylesheet.id = "cmnSheet"; // id would allow dynamic mods?
stylesheet.disabled = true;
break;
}
};
});
extjs css is loaded in apex page tag with
'<'apex:stylesheet value="{!URLFOR($Resource.ExtJS42, '/ExtJS42/resources/ext-theme-neptune-all.css')}" /'>'
(typing jQuery stuff from memory and notes so will correct later if needed but concept is there)
I've just started learning AngularJS and I'm approaching directives. I'd need to create a directive named f.e. "thumbnail" which takes as input a "src" (the image) and create a thumbnail of it.
So far I've coded the javascript function to create the thumbnail which does its job correctly:
function readURL(input) {
var imageSize = 50;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var blah = $('#myimage');
blah.attr('src', e.target.result);
var height = blah.height();
var width = blah.width();
if (height < imageSize && width < imageSize) {
if (width > height) {
blah.width(imageSize);
}
else {
blah.height(imageSize)
}
}
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<body onload="readURL(this);">
<img id="myimage" src="../picture.gif" width="50" alt="your image" />
However I have not been able to find a simple example which produces (in AngularJS) an Element, based on a JS function. Any help ?
Thanks!
It depends on what you want to achieve. If your purpose of creating a thumbnail at client-side is to:
Upload in a smaller size in a web application: perhaps you can make use of a library like http://www.plupload.com.
Display only: you should just use CSS resizing with width and height properties.
<img src="/original/320x320.jpg" style="width: 100px; height: 100px">
Reading/storing in an Ionic/PhoneGap app: try make use of angular-thumbnail (disclaimer: I wrote it)
Doing image manipulation of this kind on the client side is not a very good idea , because, as of now there isn't a good support for Filereader in IE.
You can delegate this either to server(you will find lot of node module for image manipulation) or you can use external services like cloudinay
I am trying to integrate Sencha 4.1 (ExtJS) with the Leaflet mapping library while using Sencha Architect.
When the page loads, the tiles are mixed up and appear offset. I need to drag the page up to be able to see the tiles.
The full project is available here: https://github.com/breizo/SenchaLeaflet.
Here is an excerpt of the custom component created (see full code here: https://github.com/breizo/SenchaLeaflet/blob/master/ux/LeafletMap.js).
constructor: function () {
this.callParent(arguments);
this.on({
resize: 'doResize',
scope: this
});
var ll = window.L;
if (!ll) {
this.setHtml('Leaflet library is required');
}
}
onRender: function() {
this.callParent(arguments);
var renderTo = arguments[0].dom.id;
debugger;
var me = this,
ll = window.L,
element = me.mapContainer,
mapOptions = me.getMapOptions(),
map,
tileLayer;
if (ll) {
// if no center property is given -> use default position
if (!mapOptions.hasOwnProperty('center') || !(mapOptions.center instanceof ll.LatLng)) {
mapOptions.center = new ll.LatLng(47.36865, 8.539183); // default: Zuerich
}
me.setTileLayer(new ll.TileLayer(me.getTileLayerUrl(), me.getTileLayerOptions()));
tileLayer = me.getTileLayer();
mapOptions.layers = [tileLayer];
me.setMap(new ll.Map(renderTo, mapOptions));
map = me.getMap();
// track map events
map.on('zoomend', me.onZoomEnd, me);
map.on('movestart', me.onMoveStart, me);
map.on('moveend', me.onMoveEnd, me);
me.fireEvent('maprender', me, map, tileLayer);
}
},
When debugging it appears that when onRender is called, the parent container of the map is not properly sized yet, in particular its height is only enough to contain the attrib text, about 16 pix. WHen the doResize is called, the container is properly sized, but it doesn't change the end result: the tiles are mixed up and offset.
I tried various changes to the container, but nothing worked...
1) Problem with mixed layers is caused by CSS. Your leaflet.css has wrong path in html, so it's not attached in the document. To fix mixing issue set correct path to css file, or attach it from CDN:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
2) Wrong map offset is caused by extjs generated div:
<div class="x-llmap x-fit-item x-llmap-default" ...></div>
It pushes map container to the bottom and wrong offset calculations are made. You can also fix this using inline style or CSS:
.leaflet-map-pane {
top: 0;
}
I have spent two days puzzling this and failed. Any assistance will be greatly appreciated.
I need a map centered on -18.975750, 32.669184 in a canvas of 1500px x 900px. I then to need to overlay coverage PNGs (obtained form www.heywhatsthat.com) with set code- transparency.
I have eventually arrived at the following code and it fails. I would like to add more than one PNG bound by it's co-ords, but cant even get one to work.
<script src="http://maps.google.com/maps?file=api&v=3&key=AIzaSyAGbZjXr2wr7dT2P3O5pNo5wvVF3JiaopU&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new google.maps.MAP(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-18.975750, 32.669184), 13);
map.setUIToDefault();
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-19.000417,30.999583),
new google.maps.LatLng(-17.999583,32.000417));
var oldmap = new google.maps.GroundOverlay(
"http://www.earthstation.mobi/cloakpS19E031.png",imageBounds);
oldmap.setMap(map);
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 1500px; height: 900px"></div>
</body>
</html>
What am I mssing and please point me in the right direction add multiple png overlays with transparency in the options.
Thanks
Brian
Zimbabwe
You have a lot of issues with your code. It looks like you're trying to migrate from V2 to V3, and you still have V2 methods and objects in your code. You're also not loading the JS APi correctly when you call in the of your HTML.
Here is functional code that displays the overlay using the V3 API, but it looks like the original center coordinates that you used do not place the map at the center of the overlay (you'll need to figure that out yourself). I've added comments where relevant so that you can see where you went astray. Note the call to the API library in the first script tag.
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAGbZjXr2wr7dT2P3O5pNo5wvVF3JiaopU&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
//You don't need to use GBrowserIsCompatible, it's only for V2 of the API
//if (GBrowserIsCompatible()) {
//You need to set up options for the map that you reference when you
//instantiate the map object
var myOptions = {
center: new google.maps.LatLng(-18.975750, 32.669184),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Your code references google.maps.MAP; it's google.maps.Map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-19.000417,30.999583),
new google.maps.LatLng(-17.999583,32.000417));
var oldmap = new google.maps.GroundOverlay(
"http://www.earthstation.mobi/cloakpS19E031.png",imageBounds);
oldmap.setMap(map);
//} <--Your code was missing this closing bracket for the conditional
//But the conditional is not even needed, since GBrowserCompatible is a V2 thing
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 1500px; height: 900px"></div>
</body>
</html>