Before you down vote, I know this question has been asked but I have a different twist to the question. Here is the original stack-overflow question, once read, I will post my twist at the end.
"I'm hoping that there's a relatively simple way to rotate a webpage a little bit, 30 degrees or so, while still leaving it fully functional and usable.
I completely control the page, and can modify it to make this easier if needed. I'd rather not re-write the whole thing in SVG, though, but perhaps javascript and CSS/HTML will work?
Is there a way using CSS, Javascript, or some other cross browser method that would allow me to accomplish this?"
Twist: I have the code that rotates only -30 degrees once (which is written in HTML). I will like to have a button where once you press it, it will rotate the webpage by -30 degrees more than what it is currently at. Appreciate it.
Code (that is static in turning the webpage):
<html>
<head>
<style type="text/css" media="screen">
body {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.0, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand');
-moz-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
-webkit-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
-o-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
}
</style>
</head>
<body>
<p>Testing</p>
<p>Matrix calculator here</p>
</body>
</html>
You can use javascript for rotation on button click.
Hope below code will help you.
<html>
<body onLoad="rotate()">
<div class="rot">
<p>Testing</p>
<p>Matrix calculator here</p>
<button id="btn">Rotate</button>
</div>
<script>
var initial_rotation=0;
var btn=document.getElementById("btn");
var rotateDiv=document.querySelector(".rot");
btn.addEventListener("click",rotate);
function rotate(){
initial_rotation -=30;
rotateDiv.style.WebkitTransform="rotate(" + initial_rotation + "deg)";
rotateDiv.style.msTransform="rotate(" + initial_rotation + "deg)";
rotateDiv.style.transform="rotate(" + initial_rotation + "deg)";
}
</script>
</body>
</html>
Related
I'm using animate.css to add some transistions to my meteor app. However, there is this problem that animate.css creates an almost transparant overlay over my buttons/images etc.
I have a main div where the animate.css class is added depending on changing page views etc. Very simplified this is my HTML.
<body>
<header class="header></header>
<div class="animate-holder {{animated class}}>
<div class="class1></div>
<div class="class2></div>
</div>
</body>
From what I've tested this will happen all the time and it doesn't matter how I use transistions. Is there a simple way to NOT have this overlay?
EDIT:
I can hack it like this, but this is very very ugly. But maybe it creates more insight into the problem:
Template.DetailsSubmit.rendered = function() {
Meteor.setTimeout(function() {
var classes = $('div.animated').attr('class');
$('div.animated').removeClass(classes);
}, 1000)
}
You can make this specific div clickable through using the very useful (and not famous enough) pointer-events css property:
div.animated {
pointer-events: none;
}
If I were to write an application that controls another application which I don't have the binaries to,
For example, an application that by itself would open Google Earth and place the camera in a specific point my application would tell it, say -24,131, and then command google earth to save the image to a specific folder.
What is the approach to this?
How can I know the functions that are being executed and fire them on behalf of a control program like that?
Also, I will also need to know that downloading of images was finished so I can grab the image.
I saw there is an API for google earth, but I don't know if I can use it to control google-earth (the application itself)
You can use the Google Earth API (developers.google.com/earth/) to control a Google Earth globe instance.
See Javascript code snapshot here:
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
ge.getOptions().setStatusBarVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
var lookAt = ge.createLookAt('');
lookAt.setLatitude(41.26);
lookAt.setLongitude(-100.00);
lookAt.setRange(800000.0);
ge.getView().setAbstractView(lookAt);
}
function failureCB(errorCode) {
alert(errorCode);
}
google.setOnLoadCallback(init);
See HTML code here:
<!DOCTYPE html>
<head>
<script src="http://www.google.com/jsapi"></script>
</head>
<style>
body {
margin:20px;
height:100%;
width:98%;
}
#map3d {
width:75%;
float:right;
}
</style>
<body>
<div id="map3d"></div>
</body>
</html>
The you can use wkhtml2pdf (code.google.com/p/wkhtmltopdf/) function wkhtmltoimage, or PhantomJs (github.com/ariya/phantomjs/wiki/Screen-Capture) to get an image version.
Hope it helps!
Cheers,
Mihai
I would like to make a good performance hit test for png images and other shapes. I don't really care what shapes they are because with this technique there is no performance issues at checking (not setup).
I intent to collect all the images on the screen in a secondary canvas just for hit test. For each image drawn I will create a new color which is attached to that particular image. Then I draw all of them in the canvas, each image will have a different fill color.
When I click on a pixel (x, y) it will get the color (r, g, b). Every color is mapped to a image, so I get the image clicked with no error (I don't waste with finding what was hit with that click).
I know it will be limited to 256*256*256=16 777 216 items because those are all the colors but I don't think it will be a problem for now...
So what I really need is to know how to put those fill colors on the secondary canvas which is based only on the visible pixels for each image.
UPDATE
As you can see to the right it's the hit test map. So if I click on the black shade (c) I instantly know I've clicked on the blue box without any other calculation.
One improvement it would be to cache the alpha data. Also reuse the same alpha data for each image instance (we must take care about scaling and rotation...).
thanks
Here’s how you would color-mask the non-transparent pixels of a canvas image.
Be sure you replace "PutYourImageHere.png" with your own image url.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid blue;}
</style>
<script>
$(function(){
var img=new Image();
img.onload=function(){
var red=255;
var blue=0;
var green=0;
var canvasCopy=document.getElementById("canvasCopy");
var ctxCopy=canvasCopy.getContext("2d");
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.drawImage(this,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
for (var i=0;i<imgData.data.length;i+=4)
{
if(imgData.data[i+3]>0){
imgData.data[i]=red;
imgData.data[i+1]=green;
imgData.data[i+2]=blue;
imgData.data[i+3]=255;
}
}
ctxCopy.putImageData(imgData,0,0);
}
img.src = "PutYourImageHere.png";
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<canvas id="canvasCopy" width="300" height="300"></canvas>
</body>
</html>
Recently I successfully integrate vertical iScroll to my mobile web. It has pull to refresh feature. However, Im currently stack at the part which I need to implement the same feature into a horizontal iScroll. Does anyone knows where can I see any sample that uses the same feature? I really need the help. All I need is to know how to do it because as of now, i have no idea with it.
Regards,
Askhole :)
iScroll by default does not support Pull to Refresh from a horizontal standpoint. I'm sure it could be done with some CSS and code tweaks, but you might be better off asking in the iScroll forums: https://groups.google.com/forum/#!forum/iscroll
i guess you implement vertical refresh by using a non-official iscroll.js (i.e., a modified-for-refresh iscroll). If this is your situation, this answer may helps:
i implemented vertical refresh with the official iscroll.js, by adding a little trick:
1. keep sth very very tiny at the next-bottom, use its position().top to detect the actual height of ur page
keep you "onloading" ath the bottom, set it invisible
Math.abs(myScroll.y) + wrapper.height === $(yourTiny).position().top
when scroll starts, if scroll upwards, check the condition in 3.
for tolerance in 4, you may use, for example: if(Math.abs(myScroll.y - wrapper.height + $(yourTiny).position().top) < 11){ //your code to refresh}
Here are the sample codes:
1.html
<sapn id="theTinyThing"> </span>
<table id="bottomRefreshImg" style="display:none">
<tr><td><img src="refreshGreen.gif" /></td></tr>
<tr><td>loading...</td></tr>
</table>
</div> //close scroller
</div> //close wrapper
<div id="footer"></div>
<script src="./jquery-2.2.3.min.js"></script>
<script src="./iscroll.js"></script>
<script src="./mrPage.js"></script>
</body>
2.css
#theTinyThing{
height:1px; //it's ivisible
font-size:1px;
}
3.js
var myScroll;
var myScroolHasCausedAddNew=0;
function loaded () {
myScroll = new IScroll('#wrapper', {
scrollbars: true,
scrollbars: 'custom',
mouseWheel: true,
click:true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true,
snap:true,
snap:'table',
});
myScroll.on('scrollStart',function(){
if($("#theTinyThing").position().top + myScroll.y-myScroll.wrapperHeight<11){
if(myScroll.directionY==1){
$("#bottomRefreshImg").show();
myScroolHasCausedAddNew=1;
}
}
return false;
});
myScroll.on('scrollEnd',function(){
if(myScroolHasCausedAddNew==1){
myScroolHasCausedAddNew=0;
$("#bottomRefreshImg").hide();
loadMore();
}
return false;
});
}
I have simplified a problem I faced in Firefox (the original code is generated by server side controls). Open the following snippet in IE and in Firefox:
<html>
<style>
.AllInline, .AllInline * { display: inline; }
</style>
<span class="AllInline">
Test
<script type="text/javascript">
<!-- var obj = {}; //-->
</script>
</span>
</html>
In IE, I get:
Test
While in Firefox, I get:
Test <!-- var obj = {}; //-->
The content of the script block becomes visible somehow.
I was not expecting the styling rules to be applied to script blocks (can't really see a reason why one would want this either).
Would anyone have an explanation ?
base, basefont, datalist, head, meta, script, style, title, noembed and param tags are hidden by the simple expedient of setting display: none; in html.css (which is a UA stylesheet). So they are subject to being unhidden by page CSS such as your example. area on the other hand has display: none ! important; because it has special internal handling (the image effectively owns the area).
Don't put JavaScript there. Insert it just before </body></html>.
Test your HTMl in the Echochamber.
fascinating bug!
you can add .AllInline script {display: none;} to your css to hide it.