I tried to develop an electronic newspaper app i generate the embed html code. it show but all attempts to make it zoom prove abortive.
pls below is the source code if any one can HELP
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/icons.min.css">
<title>Blank App Designer Packaged Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, usre-scalable=yes">
</style>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="js/app.js"></script>
<!-- for your event code, see README and file comments for details -->
<script src="js/init-app.js"></script>
<!-- for your init code, see README and file comments for details -->
<script src="xdk/init-dev.js"></script>
<!-- normalizes device and document ready events, see file for details -->
<script type="application/javascript" src="app_framework/2.1/appframework.js"></script>
<script type="application/javascript" src="app_framework/2.1/appframework.ui.js" data-ver="1"></script>
</head>
<body id="afui">
<header class="wrapping-col wrap-element uib_w_1 with-back" data-uib="app_framework/header" data-ver="2" id="af-header-0">
<a class="button backButton">Back</a>
<h1>ETRIBUNE</h1>
</header>
<div id="content" class="uwrap">
<div class="upage vertical-col panel" id="mainpage" data-header="af-header-0" data-footer="none">
<iframe id="bloxFrame" src="http://static.issuu.com/widgets/shelf/index.html?folderId=e9a9ca5f-d74f-49e8-8b3d-e57b7e383f76&theme=theme2&rows=2&thumbSize=medium&roundedCorners=false&showTitle=true&showAuthor=true&shadow=true&effect3d=true"
name="bloxFrame" width="300px" height="400px" frameborder="0" scrolling="auto">
</div> </div> </body>
</iframe>
</div>
</div>
</body>
</html>
Here is a fiddle showing how to zoom an HTML element. This code can easily be applied to your situation by simply targeting an element inside the iframe (probably the body of the document).
https://jsfiddle.net/xzn1s7ks/1/
here is the relevant function:
function zoom(element, level){
if (element.style){
if (element.style.zoom != undefined)
element.style.zoom = level;
if (element.style.MozTransform != undefined)
element.style.MozTransform = 'scale(' + level + ')';
if (element.style.WebkitTransform != undefined)
element.style.WebkitTransform = 'scale(' + level + ')';
}
}
The element should be the element you want to zoom and the level is a decimal value. 1.0 is the default size, 1.5 is 150%.
Related
I am trying to make a basic rectangle inside of my webpage using svg.js. I have the library installed via npm and i have refrenced the source file in a script tag, but my SVG drawing will not show up.
The console provides the error, "Uncaught ReferenceError: SVG is not defined",
Here is a snippet of my project
var draw = SVG('drawing').size(300, 300);
var rect = draw.rect(100, 100).attr({
fill: '#f06'
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="main.css">
<title>Breathe</title>
</head>
<body>
<div class="container">
<div class="header-container">
<div class="title-container">
<div>Title</div>
<div></div>
<div></div>
</div>
</div>
<div class="main-container">
<div id="drawing"></div>
</div>
<div class="footer-container">
</div>
</div>
<script src="main.js" type="text/javascript"></script>
<script src="node_modules\svg.js\dist\svg.js"></script>
</body>
</html>
You loaded the main.js file first and then svg.js. Try reversing the order.
<script src="node_modules\svg.js\dist\svg.js"></script>
<script src="main.js" type="text/javascript"></script>
I am currently working o a quote APP, Jquery getJson to inflate the elementes. I'm having trouble integrating twitter's share button into my code. For some reason I cannot get it to pick up the text values from the API source when I use the attr function to change the tweet URL data-text value.When I click the tweet button all I got is a new tweet window with the hardcoded text. My intention is to set the quote + author in the text field. Any ideas to make it work? I did a lot of research and experimentation with the tweet event binds but no success
My HTML code:
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="js/vendor/html5-3.6-respond-1.4.2.min.js"></script>
<![endif]-->
</head>
<body>
<div id="btn-container" class="container">
<p><a id="btn1" class="btn btn-primary btn-lg" href="#" role="button">Quote Me</a></p>
</div>
<div id="quote-container" class="container">
<blockquote id="quote">Never do anything yourself that you can hire someone else to do, especially if they can do it better.
</blockquote>
<footer id="author">Bill Bernback</footer>
</div>
<div id="share-container" class="container">
Tweet it
</div>
<script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
My JS code:
<pre><code>var quote;
var author
$(document).ready(function(){
$(".btn").click(function(){
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(getQuote) {
quote = getQuote[0].content;
author = getQuote[0].title;
$("#quote").html(quote);
$("#author").text(author);
$('.twitter-share-button').attr('data-text',author); // not working
});});});
Not sure why my fancy box isn't working. Hoping someone can help
HTML Code:
<div class ="homeimage">
<a class ="fancybox" rel="group" href ="images\image9.jpg"><img src ="images\image9.jpg" alt ="Photo by Tom Harper"/></a>
</div>
Import and JavaScript Code:
<head>
<title>Tom Harper - Videographer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
The folder which contains all the fancybox files is in the same directory as the webpage. All that happens when I click the image is that the image opens in a new page because of the <a> tags that are now reference the image.
First: Download the Fancybox plugin here
secondly: unzip fancybox plugin and implement into your header.
exp...: link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" "fancybox" is my
unpacked plugin directory.
thirdly: Follow this Documentation or just copy and paste HTML and JavaScript part.
and it will work.
<script type="text/javascript">
$(document).ready(function() {
$("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Tom Harper - Videographer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Add jQuery library -->
<!-- Add mousewheel plugin (this is optional) -->
<!-- Add fancyBox -->
<!-- Optionally add helpers - button, thumbnail and/or media -->
</head>
<script type="text/javascript">
$(document).ready(function() {
$("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
});
</script>
<body>
<a id="single_1" href="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_b.jpg" title="Bos 3 (p.vanhaastrecht)">
<img src="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_m.jpg" alt="" />
</a>
</body>
</html>
I thought I had the same problem as in these two posts:
Fancybox width not applying
fancybox width doesn't apply
But I have been through the solutions on both and still the issue remains.
Essentially When I click on the image link the width and height properties are ignored and instead a box circa 30 x30 is shown. The video is loading and the close windows button etc all work.
I'm using I.E 8 / 9
My code is as follows:
<b>
<%# Page Language="C#" %>
<html dir="ltr">
<head runat="server">
<META name="WebPartPageExpansion" content="full">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled 1</title>
<meta name="Microsoft Theme" content="Lacquer 1011, default">
<!-- J Query Includes -->
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/JavaScript/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/JavaScript/jquery.SPServices-0.7.1a.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="http://mynationwideteam/sites/financial_performance/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="http://mynationwideteam/sites/financial_performance/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="http://mynationwideteam/sites/financial_performance/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script>
$(document).ready(function() {
$(".fancyvideo").fancybox({
width : 600,
height : 498,
fitToView : false,
autoSize : false,
type : 'swf'
});
});
</script>
</head>
<body>
<a class="fancyvideo" ID="vid1" href="http://www.youtube.com/v/92c3dX-AoXs"><img src="images/Templates/Financial_Performance/banner001.jpg" width="475" height="69" style="border-style: solid; border-width: 2px"></a>
</body>
</html>
</b>
Try to force the with of your content, for example you can do somethink like this (in the file that you want to include):
<div style="width:600px">
//your fancy content
</div>
It's working for me!
Unless you're using an older version having that property, autoSize doesn't exist. Try with autoDimensions: false and/or autoScale: false
So I am working on a simple image cropping function using pre-built Yahoo UI. However, it seems the cropping box or whatever it is called lies under the image, or maybe it's just transparent.
Here is my code, you can just copy and paste to inspect.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/resize.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/imagecropper.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/imagecropper/assets/skins/sam/imagecropper.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/resize/resize-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/imagecropper/imagecropper-min.js"></script>
<img id="yui_img" src="http://developer.yahoo.com/yui/examples/imagecropper/assets/yui.jpg">
<script>
(function(){var crop = new YAHOO.widget.ImageCropper('yui_img');})();
</script>
Here is the URL to the demo Yahoo provides
http://developer.yahoo.com/yui/examples/imagecropper/simple_crop_clean.html
Please help me. Thanks in advance!
This is the code that was working for me
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Simple Crop Interface</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/imagecropper/assets/skins/sam/imagecropper.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/resize/resize-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/imagecropper/imagecropper-min.js"></script>
<!--there is no custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Simple Crop Interface</h1>
<div class="exampleIntro">
<p>This example shows how to make an image croppable.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<img id="yui_img" src="http://developer.yahoo.com/yui/examples/imagecropper/assets/yui.jpg">
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var crop = new YAHOO.widget.ImageCropper('yui_img');
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>
When I removed the last script ie
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var crop = new YAHOO.widget.ImageCropper('yui_img');
})();
</script>
This code then the box dissappeared please check with your code. Maybe the javascript is essential or maybe ur missing some thing else. Better to keep all the js and css and try debugging removing one by one. You will get to know the specific point. And my code is hopefully working please let me know if it isn't. :)