I am building a chat application using Meteor for Android. I have included "Add Image" option using cordova camera plugin. Now, after the image is uploaded and is seen by the users, I want to click on it and zoom it. How to proceed?
Here's my image rendering code :
<div class="message">
<img src="{{t.img}}"
data-action="zoom"
class="showImage"
>
</div>
I've tried using the inno:zoom package but was unsuccessful. Any insights?
In the html head, i have the following code :
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
I’d suggest using a touch library such as Hammerjs: http://hammerjs.github.io/
There are a lot of ways to work with touch in JavaScript, but they can be difficult if you aren’t experienced with them.
You may have to put the uploaded image in its own template and use reactive variables to re-initialize the image element in order to enact the zoom feature. This is likely also true of the package you already tried.
If you could share more code samples, I (or others) might be able to give a more specific answer.
Related
I'm trying to use font awesome in dompdf/laravel but no matter what I try the icons don't show up, I've seen a bunch threads with similar or the same issue and their answers don't work for me. In my project I'm using vue.js for everything except the pdf where as far as I know I can only use a blade.
I've added this to the top of my HTML blade file
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<meta charset="utf-8">
<link rel="stylesheet" href="{!! url('css/pdf.css') !!}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<header></header>
<main></main>
</body>
</html>
Still no luck, the icons show up as question marks (?)
How can I fix this?
Im not sure, but try installing font-awesome with NPM in the console, npm install font-awesome and then import them into your app.scss; "#import "node_modules/font-awesome/scss/font-awesome";
You can download, customize, and use the icons and default styling manually: Download Link font-awesome Version 4.7.0
Using CSS:
Copy the entire font-awesome directory into your project.
In the <head> of your HTML, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
More Info: font-awesome
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="scripts/modernizr-custom.js"></script>
</head>
I used the Development Build option on their front page that selects all of the options and I tried minified and not minified but got the same error. I am just downloading the file and placing it in a local folder. I tried it with just selecting the canvas element in thier selection options and it works fine.
This bit of code is what is added in the full feature one and is the line that is giving the error on line 29.
;
define("test/network/beacon", function(){});
Thanks.
Ok they helped me out over there. I was using Ublock and it messed something up.
I have problem with CKEditor. I download lastest version and implement on my CMS. All buttons and textarea are disabled and I can't do anything. I searched and find solutions like CKEditor.inline or readOnly but it just doesn't work...
My code looks just like:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea name="editor" class="text" rows="4" cols="115">Some text</textarea>
<script type="text/javascript">
CKEDITOR.replace("editor");
</script>
</body>
</html>
And here is live version: http://www.hbmedia.pl/test.php
I finally figured this one out. Thought I'd post an answer in case anybody else comes across this question.
In order for the "Classic Editor" to function within a custom ckeditor4 package, you need to make sure the "wysiwygarea" feature is added to the package. This is named "iFrame editing area" in the feature list.
If you don't do this, only the inline editor is available, even though the classic editor shows up as disabled.
If you don't want to use iframe as a content container you might want to use Div editing area. The behaviour is described in IFrame Editing Area page in the notes section:
This is the core functionality of the classic, iframe-based editor which can only be disabled if it is backfilled by an alternative plugin (such as Div Editing Area) or if only inline editor is used.
Zurb Foundation 3 says is compatible with IE8. This is the reason I'm using F3.
I have problems getting to work F3 on IE8.
I tried the official http://foundation.zurb.com/docs/v/3.2.5/grid.php which seems to have the same problems on IE8 which I found on my own site.
More specifically:
Navigation is messed up (The sticky menu is comming like an unstyled
vertical ul/li)
Orbit Javascript slider component doesn't work
Initially accordition looks fine visually. However when clicked it
doen't work as expected
Reveal modals don't work
The same problems are happening on both my site and the official F3 docs page - http://foundation.zurb.com/docs/v/3.2.5/grid.php
What could be the problem?
I suspect it might be something related with including things like html5shiv, etc. However I try to stick as much as possible with how the official F3 is showing. In the demo index.html of Foundation 3 following things are included:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<script src="javascripts/modernizr.foundation.js"></script>
<!-- Included JS Files (Compressed) -->
<script src="javascripts/jquery.js"></script>
<script src="javascripts/foundation.min.js"></script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"></script>
<script>
$(window).load(function(){
$("#featured").orbit();
});
</script>
Do I need to include something else? html5shiv would be enough or I need other things also?
Adding html5shiv.html solved most of the issues.
The only one remaining is that images (transparent PNGs) remain and accumulate on screen (one on top of the other) while the Orbit slider is running.
So, I have been asked to fix an issue where a favicon isn't appearing in IE8 at work, but can't seem to figure out why it isn't working. I've even read the official Microsoft documentation on the subject, but haven't managed to get anywhere with this.
I have included the following in head of the site template, where $sitebase is set to http://www.slinkynote.com/ in the config file. The favicon image is a 32px by 32px .ico file.
<link href="<?php echo $site_base;?>favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<link href="<?php echo $site_base;?>favicon.ico" rel="icon" type="image/vnd.microsoft.icon" />
Does anyone have any experience with this issue? It appears fine in FF and Chrome.
Thanks,
Dan.
The problem seems to be that IE8 caches the icon in the browsing history (and NOT its temporary Internet files) ... if it fails once in IE, it will not try again for a while (I don't know how long, but long enough to be very annoying) ... anyway, the following simple header links work fine:
<link rel="shortcut icon" type="image/icon" href="/favicon.ico">
<link rel="icon" type="image/icon" href="/favicon.ico">
I'm not sure why you need them both, probably cross-browser compatibility. But the href does NOT need a hostname with www in it, or any hostname at all. It works even on a local machine
However, if IE8 has messed up its cache then this will drive you crazy. Luckily the solution is simple: change the links to the following (just add x) and make sure the icon will load first time (or else you will just mess up the cache again) ...
<link rel="shortcut icon" type="image/icon" href="/xfavicon.ico">
<link rel="icon" type="image/icon" href="/xfavicon.ico">
Afterwards change the links back to what you wanted originally, then the icon will reload the next time and thereafter be cached successfully.
You are using PNG image in ICO file, and setting wrong mime type. Make another icon but ACTUAL icon file and put it in the place of current one.