I've create a Wordpress Theme with Bootstrap & have been trying to load just the basic red square from the tutorial onto the canvas in my html.
// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');
// create a rectangle object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
// "add" rectangle onto canvas
canvas.add(rect);
The script is loaded & when I console.log the canvas object it outputs the canvas object & it's properties. But, nothing will appear on the canvas. I've made sure my id's match & that my canvas is between a wrapper & has 1000 / 1000 px space set, which is centered.
Below is my Template Code
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="test-header">Test Your Ad Here!</h1>
</div>
</div>
</div>
<div>
<canvas id="c" width="1000" height="1000"> </canvas>
</div>
<hr/>
<?php get_footer(); ?>
Thanks!
Not sure why it's not rendering but one thing to try is calling canvas.renderAll() to make sure fanric knows it's time to render it's data to the canvas.
Related
I've this AngularJS demo app using Highcharts:
http://jsfiddle.net/dennismadsen/dpw8b8vv/1/
<div ng-app="myapp">
<div ng-controller="myctrl">
<button ng-click="hideView()">1. Hide</button>
<button ng-click="showView()">2. Show</button>
<div id="container" ng-show="show">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
</div>
</div>
If you change the width of the result view in JSFiddle, the Highchart will automatically resize it's width to the size of the container (the div with black border).
I've noticed that if Highchart is hidden, and the window is resized, it is not resized automatically (like iPad changing Landscape/Portrait orientation). Try this out by first clicing the "1. hide" button, change size of the result view, and then press the "2. show" button. See this example:
How can I force the highchart to resize even if it's not visible?
As per the documentation, we need to trigger the reflow method in scenarios where resize event cannot be captured by the chart.
Triggering reflow method in $timeout will render the chart properly.
$scope.showView = function () {
$scope.show = true;
$timeout(function () {
$scope.highchartsNG.getHighcharts().reflow()
});
}
Working Fiddle
I think it's a correct behaviour.
But considering that the resize event event fix the graph size, you can trigger a resize after the graph is shown, like:
setTimeout(function () {
$(window).trigger('resize');
}, 1);
It's the jQuery way, I think there's an angular too, but I'm not familiar with it.
See http://jsfiddle.net/u9qj0k9t/10/ for an example.
I'm trying to create a context-menu tied to a generic element on a page. I have no control over how that element is laid out on the page however. The context menu works fine if whatever element wrapping it does not have a position:absolute/relative attached to it, but when it does the popup shows up relative to the top-left corner of the element instead of the page. I realize this is by design, but I was hoping there was some css trick to absolutely position an element on a page REGARDLESS of how how it is contained.
<div>
Comment<br/>
Comment<br/>
Comment<br/>
<div style="position:relative;"> <!-- have no control over this-->
<div id="customUIElement">
<span id="placeHolder">Click Me</span>
</div>
</div>
</div>
$("#placeHolder").bind("click", function(e){
var m = $("#popup");
if(!m.length){
var m = $("<div id='popup'></div>");
$("#customUIElement").append(m);
}
m.css("height",100);
m.css("width",100);
m.css("background-color","#ff0000");
m.css("zindex",9999999);
m.css("position","absolute");
m.css("top", e.pageY);
m.css("left", e.pageX);
m.html("Hello, world");
m.fadeIn("fast");
});
fiddle demo
I would simply not append the popup to that element,
but to the page:
$("#placeHolder").on("click", function(e){
var m = $("#popup");
if(!m.length){
m = $("<div id='popup' />");
$('body').append(m);
}
m.css({
height:100,
width:100,
backgroundColor:"red",
zIndex:9999999,
position:"absolute",
top: e.pageY,
left: e.pageX
}).html("Hello, world").fadeIn("fast");
});
I added an opt-in form/freebie sign up in the header area on the following site: http://www.clearcreativecoaching.com/ This site is using the Mantra Wordpress theme.
When you minimize your browser window you will see that the opt-in form moves out of place. Is there a code I can put in to make the opt-in form responsive so that it stays in its proper place on any sized screen/window.
Before I got this project, a plugin was installed to create a mobile site for this website. I don't believe it adds "responsive" code to the site because it specifically creates a mobile app looking site on mobile devices. The plugin is called Duda Mobile and the header area is totally different on mobile sites using this plugin, the opt-in doesn't even show. So I don't think that this has anything to do with my problem.
I need specific code that will speak to the header opt-in as it is seen on regular computers/laptops and I want it to stay in its proper place no matter how big or small the screen or browser window is. Is this possible?
I've searched for answers to this in two different Mantra and Wordpress forums with no help yet. Any advice you can give will be greatly appreciated.
Change your .wholeoptinform styles to
.wholeoptinform {
width: 536px;
position: absolute;
top: 305px;
left: 50%;
margin-left: -268px;
}
On your .topmenu, remove
.topmenu {
margin-top: -360px;
}
A quick explanation:
The rest of the site is basically made to be centered in the middle of the browser window:
This tells it to make the main part of the site 1100px wide, and then divide the free space evenly to the left and right of it. This is flexible and adapts to any screen wider than 1100px.
You told your .wholeoptinform on the other hand
"place me so there is always 530px to the left of me and 305px above me, no matter what happens." So it is locked firmly in place, no matter how small or big the screen is.
This is why your form and the rest of the site didn't match up when the browser window shrunk.
I have recently created a responsive and automated opt-in form.
I'm using jQuery to Resize and Reposition my Opt-In form on smaller/larger device.
var mct_optin = {
container: jQuery(".mct_optin"),
expir_day: 1,
max_width: 600,
max_scroll: 500,
hide_optin: false,
init: function(){
this.adjust();
this.close();
},
//Some More Codes......
resize: function(){
var d = jQuery(window),
w = d.width(),
h = d.height(),
co = this.container,
c = co.find(".mct_optin_content"),
cw = c.width(),
ch = c.find(".mct_optin_inner_content")[0].scrollHeight;
if(w<=600){
var calw = w-40; //Calculated Width
c.css("width",calw+"px");
}else{
c.css("width","600px");
}
if(h<=ch){
var calh = h-40;
c.css("height",calh+"px");
}
},
reposition: function(){
var d = jQuery(window),
w = d.width(),
h = d.height(),
c = this.container.find(".mct_optin_content"),
p = c.position(),
cw = c.width() || 600,
ch = c[0].scrollHeight || 340;
var pt = (h/2)-(ch/2),
pw = (w/2)-(cw/2);
c.css("top",pt+"px").css("left",pw+"px");
if(h<=ch){
c.css("top","20px");
}
if(w<cw){
c.css("left","20px");
}
},
adjust: function(){
this.resize();
this.reposition();
}
//Some More Codes......
}
<div class="mct_optin">
<div class="mct_optin_overlay animate"></div>
<div class="mct_optin_content animate">
<span>×</span>
<div class="mct_optin_inner_content">
<div class="mct_optin_upper_border">
<div></div><div></div><div></div><div></div>
</div>
<div class="mct_optin_upper_content">
<h1>Wants to Learn Programming?</h1>
<h3>Do you Want to Learn How to Create Website? How to Create WordPress Theme?</h3>
</div>
<div class="mct_optin_form_content">
<form action="//blogspot.us2.list-manage.com/subscribe/post?u=e973df9b569596781fd93ec6d&id=d70b821ae0" target="_blank" method="post" name="mc-embedded-subscribe-form">
<input type="hidden" name="b_e973df9b569596781fd93ec6d_d70b821ae0" tabindex="-1" value="">
<input type="email" placeholder="Enter your Email" name="EMAIL">
<input type="submit" name="subscribe" value="Get Full Access...">
</form>
</div>
<h3 class="mct_optin_close_text">No Thanks. I'm a Genius.</h3>
</div>
</div>
</div>
I'm using the mct_optin.resize() and mct_optin.reposition() to place MCT Optin form in centre of the window.
I Hope it will help you.
In my page I use ajax loader gif. When the button is clicked the ajax loader is shown, however the text below it moves to upwards and I want them to be constant I mean not to move.
Is there a way to do this? Thanks for help.
It can be seen from here as well:
http://www.dilyurdu.com
function AjaxLoader()
{
document.getElementById("translation").innerHTML="<img src='ajax-loader.gif' />"
$.ajax({
type: "POST",
url: "test1.php",
success: function(response) {
$("#translation").html("hello");
}
});
}
<div class="informationArea">
<h2><span id="infoaream">caballo</span></h2>
<div id="wordDetailArea">
<h2>Translation:</h2><p><span id="translation">dog</span></p>
<h2>Context:</h2><p><span id="context">I have got a dog.</span></p>
</div>
</div>
This is because the height of <p> tag changes according to its content.
The fix is to use a fixed height.
<p style="height: 25px;"><span id="translation">dog</span></p>
Note: As of ajax request the length of your content may not be consistent. So you should choose a highest value for height
What happens is that your #translation span has a height of 18px, however the ajax-loader.gif has a height of 16px causing the jump, spans and p are inline elements and expand and contract depending on the information that's in them
<div id="translation" style="height: 18px;">hello</div>
or
<span id="translation" style="display:block;height: 18px;">hello</span>
should do the trick.
I'm trying to display an iframe in my mobile web application, but I'm having trouble restricting the size of the iframe to the dimensions of the iPhone screen. The height and width attributes on the iframe element seem to have no effect, strangely. Surrounding it with a div manages to constrain it, but then I'm unable to scroll within the iframe.
Has anyone tackled iframes in mobile safari before? Any ideas where to start?
Yeah, you can't constrain the iframe itself with height and width. You should put a div around it. If you control the content in the iframe, you can put some JS within the iframe content that will tell the parent to scroll the div when the touch event is received.
like this:
The JS:
setTimeout(function () {
var startY = 0;
var startX = 0;
var b = document.body;
b.addEventListener('touchstart', function (event) {
parent.window.scrollTo(0, 1);
startY = event.targetTouches[0].pageY;
startX = event.targetTouches[0].pageX;
});
b.addEventListener('touchmove', function (event) {
event.preventDefault();
var posy = event.targetTouches[0].pageY;
var h = parent.document.getElementById("scroller");
var sty = h.scrollTop;
var posx = event.targetTouches[0].pageX;
var stx = h.scrollLeft;
h.scrollTop = sty - (posy - startY);
h.scrollLeft = stx - (posx - startX);
startY = posy;
startX = posx;
});
}, 1000);
The HTML:
<div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="url" />
</div>
If you don't control the iframe content, you can use an overlay over the iframe in a similar manner, but then you can't interact with the iframe contents other than to scroll it - so you can't, for example, click links in the iframe.
It used to be that you could use two fingers to scroll within an iframe, but that doesn't work anymore.
Update: iOS 6 broke this solution for us. I've been attempting to get a new fix for it, but nothing has worked yet. In addition, it is no longer possible to debug javascript on the device since they introduced Remote Web Inspector, which requires a Mac to use.
If the iFrame content is not yours then the solution below will not work.
With Android all you need to do is to surround the iframe with a DIV and set the height on the div to document.documentElement.clientHeight. IOS, however, is a different animal. Although I have not yet tried Sharon's solution it does seem like a good solution. I did find a simpler solution but it only works with IOS 5.+.
Surround your iframe element with a DIV (lets call it scroller), set the height of the DIV and make sure that the new DIV has the following styling:
$('#scroller').css({'overflow' : 'auto', '-webkit-overflow-scrolling' : 'touch'});
This alone will work but you will notice that in most implementations the content in the iframe goes blank when scrolling and is basically rendered useless. My understanding is that this behavior has been reported as a bug to Apple as early as iOS 5.0. To get around that problem, find the body element in the iframe and add -webkit-transform', 'translate3d(0, 0, 0) like so:
$('#contentIframe').contents().find('body').css('-webkit-transform', 'translate3d(0, 0, 0)');
If your app or iframe is heavy on memory usage you might get a hitchy scroll for which you might need to use Sharon's solution.
This only works if you control both the outside page and the iframe page.
On the outside page, make the iframe unscrollable.
<iframe src="" height=200 scrolling=no></iframe>
On the iframe page, add this.
<!doctype html>
...
<style>
html, body {height:100%; overflow:hidden}
body {overflow:auto; -webkit-overflow-scrolling:touch}
</style>
This works because modern browsers uses html to determine the height, so we just give that a fixed height and turn the body into a scrollable node.
I have put #Sharon's code together into the following, which works for me on the iPad with two-finger scrolling. The only thing you should have to change to get it working is the src attribute on the iframe (I used a PDF document).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pdf Scrolling in mobile Safari</title>
</head>
<body>
<div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="data/testdocument.pdf" />
</div>
<script type="text/javascript">
setTimeout(function () {
var startY = 0;
var startX = 0;
var b = document.body;
b.addEventListener('touchstart', function (event) {
parent.window.scrollTo(0, 1);
startY = event.targetTouches[0].pageY;
startX = event.targetTouches[0].pageX;
});
b.addEventListener('touchmove', function (event) {
event.preventDefault();
var posy = event.targetTouches[0].pageY;
var h = parent.document.getElementById("scroller");
var sty = h.scrollTop;
var posx = event.targetTouches[0].pageX;
var stx = h.scrollLeft;
h.scrollTop = sty - (posy - startY);
h.scrollLeft = stx - (posx - startX);
startY = posy;
startX = posx;
});
}, 1000);
</script>
</body>
</html>
<div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" src="url" />
</div>
I'm building my first site and this helped me get this working for all sites that I use iframe embededding for.
Thanks!
Sharon's method worked for me, however when a link in the iframe is followed and then the browser back button is pressed, the cached version of the page is loaded and the iframe is no longer scrollable. To overcome this I used some code to refresh the page as follows:
if ('ontouchstart' in document.documentElement)
{
document.getElementById('Scrolling').src = document.getElementById('SCrolling').src;
}
I implemented the following and it works well. Basically, I set the body dimensions according to the size of the iFrame content. It does mean that our non-iFrame menu can be scrolled off the screen, but otherwise, this makes our sites functional with iPad and iPhone. "workbox" is the ID of our iFrame.
// Configure for scrolling peculiarities of iPad and iPhone
if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1)
{
document.body.style.width = "100%";
document.body.style.height = "100%";
$("#workbox").load(function (){ // Wait until iFrame content is loaded before checking dimensions of the content
iframeWidth = $("#workbox").contents().width();
if (iframeWidth > 400)
document.body.style.width = (iframeWidth + 182) + 'px';
iframeHeight = $("#workbox").contents().height();
if (iframeHeight>200)
document.body.style.height = iframeHeight + 'px';
});
}
Purely using MSchimpf and Ahmad's code, I made adjustments so I could have the iframe within a div, therefore keeping a header and footer for back button and branding on my page. Updated code:
<script type="text/javascript">
$("#webview").bind('pagebeforeshow', function(event){
$("#iframe").attr('src',cwebview);
});
if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1)
{
$("#webview-content").css("width","100%");
$("#webview-content").css("height","100%");
$("#iframe").load(function (){ // Wait until iFrame content is loaded before checking dimensions of the content
iframeWidth = $("#iframe").contents().width();
if (iframeWidth > 400)
$("#webview-content").css("width",(iframeWidth + 182) + 'px');
iframeHeight = $("#iframe").contents().height();
if (iframeHeight>200)
$("#webview-content").css("height",iframeHeight + 'px');
});
}
</script>
and the html
<div class="header" data-role="header" data-position="fixed">
</div>
<div id="webview-content" data-role="content" style="height:380px;">
<iframe id="iframe"></iframe>
</div><!-- /content -->
<div class="footer" data-role="footer" data-position="fixed">
</div><!-- /footer -->
Don't scroll the IFrame page or its content, scroll the parent page. If you control the IFrame content, you can use the iframe-resizer library to turn the iframe element itself into a proper block level element, with a natural/correct/native height. Also, don't attempt to position (fixed, absolute) your iframe in the parent page, or present an iframe in a modal window, especially if it has form elements.
I also suspect that iOS Safari has a non-standards behavior that expands your iframe's height to its natural height, much like the iframe-resizer library will do for desktop browsers, which seem to render responsive iframe content at height 0px or 150px or some other not useful default. If you need to contrain width, try a max-width style inside the iframe.
The solution is to use Scrolling="no" on the iframe.
That's it.