I am using handlebars for templating on a simple mobile webpage with swipejs. I made a prototype of the webpage without the templating engine and it worked great. I then researched the web for a good templating engine and found handlebars.
I embedded the body of my webpage into a script tag, so handlebars can work. Everything works fine except swipejs (which I'm using for images).
Here's a summarized version of my HTMl:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=no" />
<link media="Screen" href="styles.css" type="text/css" rel="stylesheet" />
<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" />
<script src="scripts/jquery.js"></script>
<script src="scripts/handlebars.js"></script>
<script src="scripts/app.js"></script>
<script src='scripts/swipe.js'></script>
<!--[if IEMobile]>
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen" />
<![endif]-->
</head>
<body>
<script id="description-script" type="text/x-handlebars-template">
<h1>Main Title</h1>
<div id="pictures">
<div id="slider" class="swipe">
<div class="swipe-wrap">
<div><center><img style="width:95%;height:auto;" src="image link 1"/></center></div>
<div><center><img style="width:95%;height:auto;" src="image link 2"/></center></div>
<div><center><img style="width:95%;height:auto;" src="image link 3"/></center></div>
</div>
</div>
</div>
<h2>Description</h2>
<div id="description">
{{description}}
</div>
</script>
<script>
//swipe script
window.mySwipe = Swipe(document.getElementById('slider'),
{
auto: 3000,
speed: 300
});
</script>
</body>
Thank you in advance for the help. Will I have to use a different templating engine or is there something in here that I'm forgetting?
You probably need to bind the swipe event after the template has been rendered. Or try binding it to the entire 'body' element rather than #slider.
document.getElementById('slider')
will fail as it will return null whilst slider sits in the following script tag
<script id="description-script" type="text/x-handlebars-template">
You'll need to move your Swipe(...) code to immedately after you render the description-script template in app.js.
Something like:
// Compile the template
var template = Handlebars.compile($('#description-script').html());
// Render the template
// This makes the #slider DIV appear in the DOM
var data = { description: 'Photos' };
$('body').append(template(data));
// Start Swipe
window.mySwipe = Swipe($('#slider').get(0), {
auto: 3000,
speed: 300
});
See the following JSFiddle (forked from #TommyBs): http://jsfiddle.net/b4ta3/2/
Related
I'm trying to use INK's sticky js module to work. For some reason, it's just not. I also notice that if I take that <div className="ink-sticky">
<div className="ink-alert basic">Hey I stick to the top when you scroll!</div>
</div>
back out of my react component (and of course changing className to class) and past that directly in my index.html, the sticky works fine.
http://ink.sapo.pt/javascript-ui/#InkUISticky_1
My React Component:
const Content = Component({
render(){
var company = this.props.company;
return (
<div className='content padding-bottom-200 margin-top-50'>
<div className="column-group">
<div className="all-20">
<div className="ink-sticky">
<div className="ink-alert basic">Hey I stick to the top when you scroll!</div>
</div>
</div>
<div className="all-80">
</div>
</div>
</div>
)
}
})
export default Content;
When the page renders, I see that the ink-alert has styled my div but the ink-sticky is doing nothing. I have included the js in my index.html as so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/ink-flex.min.css">
<link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/lib/css/master.css" />
</head>
<body>
<div class="wrap">
<div class="ink-grid">
<div id="app"></div>
<script type="text/javascript" src="/scripts/app.bundle.js"></script>
<script type="text/javascript" src="/lib/ink-3.1.10/js/ink-all.min.js"></script>
<script type="text/javascript" src="/lib/ink-3.1.10/js/autoload.min.js"></script>
</div>
</div>
</body>
</html>
This does work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/ink-flex.min.css">
<link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/lib/css/master.css" />
</head>
<body>
<div class="wrap">
<div class="ink-grid">
<div class="ink-sticky">
<div class="ink-alert basic">Hey I stick to the top when you scroll!</div>
</div>
<div id="app"></div>
<script type="text/javascript" src="/scripts/app.bundle.js"></script>
<script type="text/javascript" src="/lib/ink-3.1.10/js/ink-all.min.js"></script>
<script type="text/javascript" src="/lib/ink-3.1.10/js/autoload.min.js"></script>
</div>
</div>
</body>
</html>
It probably has to do with the fact that, to make elements sticky, ink-sticky calls some JS to achieve that. Now, when the page just renders, it tries to find sticky elements by class name and automatically make them that, however your sticky elements are not in the HTML. They are dynamically added into the DOM.
Which means, you have to tell ink to make a certain element sticky, manually.
The most appropriate place to do that is in the componentDidMount lifecycle hook.
As far as I can see, Ink does have an API for making elements sticky: http://ink.sapo.pt/javascript/Ink.UI.Sticky/
Ideally, that behavior should be encapsulated into a component of its own:
const Sticky = React.createClass({
componentDidMount() {
const el = ReactDOM.findDOMNode(this);
new Ink.UI.Sticky(el);
},
render() {
return <div>{this.props.children}</div>
}
});
This approach is what's used to bridge other UI libraries with React, not just this one. It can be used for jQuery UI and plugins, and so on, as well.
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%.
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. :)
http://jspears8.mydevryportfolio.com/gallery1.html
I uploaded to my school portfolio in hopes of giving a real vision of what is taking place. The the first fancybox element you open doesn't work. I'm using a prebuilt fancybox css. I've tried several others. In my actual page, it loads an empty fancybox and will load anything cycled through, but that first click when you wander to the page is blank white each time.
What am I doing wrong? This is the gallery below.
<div id="gallery">
<img src="images/thumbs/AlatheusEberwolf_t.jpg" width="94" height="94" alt="Alatheus Eberwolf">
<img src="images/thumbs/Quentin_II_t.jpg" width="94" height="94" alt="Quentin II">
<img src="images/thumbs/RolithAlinaEngaged_t.jpg" width="94" height="94" alt="Rolith and Alina Get Engaged!">
<img src="images/thumbs/RolithAlinaMarried_t.jpg" width="94" height="94" alt="Rolith and Alina Get Married">
<img src="images/thumbs/Spear-of-the-Ancients_t.jpg" width="94" height="94" alt="Spear of the Ancients">
<img src="images/thumbs/Tep_Itaki_t.jpg" width="94" height="94" alt="Tep Itaki">
</div>
Javascript
$(document).ready(function() {
$('#gallery a').fancybox({
overlayColor: '#0CF',
overlayOpacity: .3,
transitionIn: 'elastic',
transitionOut: 'elastic',
easingIn: 'easeInSine',
easingOut: 'easeOutSine',
titlePosition: 'outside' ,
cyclic: true
});
}); // end ready
In a quick review of your page I can see the following:
You call twice jQuery (_js/jquery-1.7.2.min.js and _js/jquery.js)
Your call to the jQuery must be before the fancybox call
Take a look at the <head> tag in your HTML:
<meta charset="utf-8">
<title>Course Project</title>
<link type="text/css" rel="stylesheet" href="_css/layout.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css">
<script id="twitter-wjs" src="http://platform.twitter.com/widgets.js">
<script src="_js/jquery-1.7.2.min.js">
<script src="_js/jquery.easing.1.3.js">
<script src="fancybox/jquery.fancybox-1.3.4.min.js">
<script src="_js/jquery.js" type="text/javascript">
<script src="_js/interface.js" type="text/javascript">
<style type="text/css">
<script type="text/javascript">
<link type="text/css" rel="stylesheet" href="dockstyle.css">
<style type="text/css">
<link type="text/css" rel="stylesheet" href="navstyle.css">
Your fancybox example works fine if you have only:
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css">
<script src="_js/jquery-1.7.2.min.js">
<script src="fancybox/jquery.fancybox-1.3.4.min.js">
So I believe some javascript methods are overiding.
I hope this helps