Anyone knows if there is a way without the use of webfonts to embed font into an Adobe Edge Animate composition so that the fonts can be seen when I create a Phonegap iOS app with the html file i get from Edge Animate?
All i can find so far is custom fonts for Edge Animate that uses webfonts which means I can only add links rather then embedded directly into the file or custom fonts for Phonegap where using font-family in css but that doesn't seems to be read by Edge.
I was thinking there is some way in the edge.js file that is output where they use
var fonts = {};
fonts['londrina-shadow, sans-serif']='<script src=\"http://use.edgefonts.net/londrina-shadow:n4:all.js\"></script>';
fonts['cabin-sketch, sans-serif']='<script src=\"http://use.edgefonts.net/cabin-sketch:n4,n7:all.js\"></script>';
fonts['coming-soon, sans-serif']='<script src=\"http://use.edgefonts.net/coming-soon:n4:all.js\"></script>';
to embed webfonts. Can I do something to it to embed the fonts with a path like src:"fonts/coming-soon.ttf"
Hope there is an answer to this or is there simply no way to do this cos Adobe decide to only link webfonts and screw us up.
Does the css work if you add that class to the div you are animating. If you save out the edge project, the open it in dreamweaver you can attach a css stylesheet. When you go back to edge and add that style it should show up in the animation. I know this works if you want to add png's to an animation. Not sure if it will work but could. I will look into it now and see if I can figure it out.
Related
I want to write an app based on JavaScript that enables users to drag&drop images on a site into a <canvas>. There is a code example here and it's working quite well - with a mouse. The same effect doesn't work when I use a stylus or digital pen as an input device. Adding "-webkit-user-drag" property or "draggable" attribute to the image didn't help.
How can I achieve this (I'm using either Chrome or Edge)?
I have created a website that has expand-collapse icons. In my localhost, it works fine. however, once online, the images are not displayed in mozilla (displayed in IE). in my image sources, I have used absolute links src="http://example/icons/expand.png" instead of relative src="/icons/expand.png. I do not understand why images are not displayed in mozilla.
I do not know if using absolute links for images sources is a good practice, so I need your help.
Usually, is best practice to use relative links, because you can resize and minimize the images to let users load the page faster. You can use softwares like Gimp or Photoshop to minimize them and then upload to your online space.
Hope to help you :)
This is a regular webpage using Javascript, PHP, CSS, and HTML. Is there a way to have a live web feed or img element execute a zoom like feature (pretty much exactly how google earth or google maps does) when double clicking or double tapping?
If so, is it possible to specify the zoom rate per double click? This is not iOS, but a regular webpage that is optimized for mobile devices.
SO far I've tried using the zoom property with CSS & javascript (targeting the HTML element in question). No luck.
You should try some jQuery plugins for that like http://codecanyon.net/item/pinch-zoomer-jquery-plugin/full_screen_preview/6623080?ref=designrazzi .
You can check other plugins for image zoom here http://www.webdesignrazzi.com/2014/jquery-zoom-effect-plugins/
my goal is to build a short HTML/CSS3/JavaScript animation that will be plugged into an iPad web app. What I'm essentially after is a canvas (image) that will have several regions the user can tap to zoom to and get additional info in a popup (overlay box) for each.
I can code HTML/CSS prety well but my JavaScript skills a a bit behind.
I was wondering if there is any sort of software/toolkit that I can use to achieve what I'm after. I did look into Sencha Animator (the interractivity I'm after seems to be missing), PhoneGap and jQTouch dont have the animation capabilities (except for few sliding/fading transitions).
Any suggestions?
Indeed! Adobe released one in DW CS5. I've personally never tried it but here is the link to the announcement:
http://blogs.adobe.com/designandweb/2010/05/moving_the_web_forward.html
I'm trying to use a link to open an overlay instead of in a separate popup window. This overlay should consist of a semi-transparent div layer that blocks the whole screen from being clicked on. I also aim to disable scrolling at this point. Not matter where you are on the main page, when the link is clicked, the overlay should be in the center of the screen's X and Y origins. Inside of this overlay div, should be an iframe configured such that 3 sizes of content can be loaded.
Shadowbox is a nice script for inline "popups". It can work with any of the usual JS libraries if you use any (jQuery, Prototype, etc) or on its own, has a pretty comprehensive skinning system so you can adapt the looks without having to go into the source code itself.
It is also the only such script (there are dozens) I've tried that would work reliably across all usual browsers.
It won't disable scrolling for you (you can still see the normal page background scroll by through the dark overlay), but the "popup" will in any case stay fixed on the screen.
http://onehackoranother.com/projects/jquery/boxy/
jQuery.boxy is another nice, lightweight modal dialog plugin.
You might want to check out an old JS lib I wrote, called SubModal.
Easy to understand and modify. Go to town ;)
Once you've modded it, use Minify in combination with gzip on your server. The lib size will be teeny tiny.
I usually use ThickBox for this. It works really well and degrades nicely if the user does not have JS turned on.
It does use jQuery, but you can load it from Google: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js and maybe get the benefit of caching.
Grab the javascript ext library. It has functionality for overlays that are modal.
ThickBox (no longer developed) led me to this library which seems to work very well:
http://fancybox.net