Usage of pointer-events:none; with HTML CANVAS - javascript

in my web page , I need to display the google map. But my web page also contains canvas elements.
Now if I make the z:index of canvas higher than map I cannot zoom in or pan to left/right.
If i make the z:index of map higher than canvas element,it covers the whole of page as a result i can not see the triangle drawn through the canvas.
I used the css property pointer-events:none; but it only works properly in chrome,and in Mozilla (to good extent). But IE (10) is not using supporting it.
How do I achieve the same .i.e zoom and pan in IE as well.
This is the hmtl part
<section id="intro3" data-navigation-tag="Plan" style="display: block; background-position: 50% 44.866px;">
<canvas id="amenitycanvas" style="display:none;z-index:2;pointer-events:none;"></canvas>
<div id="link" style="position:absolute;">
LOCATION<br>
</div>
<div class="image-display" id="displaylocate" style=" width:100%; height:100%;right:0%;top:0%;position:absolute;display:none;z-index:1;">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.co.in/maps?t=m&q=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu&ie=UTF8&hq=&hnear=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu,+Mumbai,+Mumbai+Suburban,+Maharashtra&z=14&ll=19.104093,72.840396&output=embed"></iframe><br /><small>View in Google Map</small>
</div>
</section>
and the javascript
function HideAndShowFunc(name)
{
if(name=="LOCATION")
{
$("#intro3canvas").hide();
$("#intro3logo50").hide();
$("#essence-luxury").hide();
$("#displayamenity").hide();
$("#projlogodiv").hide();
$("#link").hide();
$("#intro3Ongoing").hide();
$("#intro3Upgoing").hide();
$("#intro3Completed").hide();
$("#arrow").hide();
$("#table-frame").hide();
$("#intro3bg").hide();
$("#amenitycanvas").show();
$("#displaylocate").show();
}
}

You should try Hand.js. It's polyfill for pointer-events and this article might be help you to use Hand.js

Related

How to change the size of this iframe?

I want to embed this iframe into my webpage:
<iframe height="600px" width="600px" src="https://ionicabizau.github.io/github-profile-languages/api.html?damienAllonsius" frameborder="0"></iframe>
EDIT
I get this cool result but unfortunately the iframe is too big.
So how can I rescale it ? Let's say I want it 50% smaller.
When I change attributes height and width from 600 to 300, I get this result
How can I fix that ? Changing the width and heigh with a CSS class does not change the result. Any idea ?
Just apply CSS properties transform and transform-origin to the iframe:
transform will change the size of the whole DOM object tree (Also font size and so on)
transform-origin will specify that the resize should start from top left. Otherwise, it would resize from the center and the resized iframe would flow in the middle.
#frame {
border: 1px solid black;
transform: scale(0.5);
transform-origin: top left;
}
<iframe id="frame" src="http://google.at" frameborder="0"></iframe>
You may take one div and try to put iframe inside that div.
Apply width:50% to newly created div.
.container-wrapper {
width:50%;
}
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>
<div class="container-wrapper">
<iframe src="https://ionicabizau.github.io/github-profile-languages/" height="100%" width="100%">
</iframe>
</div>
</body>
</html>
Your iframe content should be responsive enough to display.

positioning pop-up iframe according scrollTop of top window

I'm developing plugin which has some pop-up. Plugin is included on some page like iframe but with different domain. There is not allowed to do any other changes on that page except to add this iframe.
<iframe class="frame" style="width:100%" src="another-domain.com" frameborder="0" scrolling="no" height="4500px"></iframe>
Pay attention that scrolling="no" and height is much bigger then heigh of page.
Pop-up should be vertically centered on the page when it appears, doesn't matter how much user scrolled down the page. See the pic
I tried $(top.window).scrollTop() but there is Cross-domain problem.
Is there any css trick to do this?
Thank you in advance.
You can try with transform: translate() function CSS
iframe {
top: 50%;
position: absolute;
transform: translateY(-50%);
}
<iframe class="frame" style="width:100%" src="another-domain.com" frameborder="0" scrolling="no" height="4500px"></iframe>

How to align text and buttons next to canvas (WebGL + JavaScript + CSS)

I have a webpage with a canvas for implementing graphics rendering, and would like to align some text and buttons to the left of it. My HTML code is as follows:
<body onload="webGLStart();">
<canvas id="canvas" style="border: none;" width="800" height="450" align="center"></canvas>
<div class="controls">
<h2>Controls</h2>
<button class="btn" onclick="initBuffers(1)">Man</button>
<br><br>Use the mouse to rotate the view.
</div>
</body>
So what I want to align to the left is everything in the 'controls' class. Currently it is being displayed below the canvas on a new line. I want it to be aligned to the left starting on the same line as the canvas, with the canvas remaining centered.
I am using a stylesheet and would like to know how to implement this using css.
My site can be seen here. It is the Controls section I want to move up towards the top of the page.
Any help would be much appreciated, thank you.
I would suggest you wrap it all in a wrapper div which is centered and has position relative. Then you can position the controls absolute like this:
<div class="wrapper" style="margin: 0 auto; width: 800px; position: relative;">
<canvas id="canvas" style="border: none;" width="800" height="450" align="center"></canvas>
<div class="controls" style="position: absolute; top:0; left:0;">
<h2>Controls</h2>
<button class="btn" onclick="initBuffers(1)">Man</button>
<br><br>Use the mouse to rotate the view.
</div>
</div>
Here is a makeshift answer. I would use bootstrap for positioning though.
You can use bootstrap.
JSFiddle
is that what you are looking for? use col-sm-{x/12} to size and resize your positions.

Embed PDF on webpage and scroll horizontally to center it

I have added a PDF to a webpage using the embed tag. The width of the embed window is smaller than the width of the PDF. So, A horizontal scroll bar appears. However, there are wide margins on the left and the right of the PDF document itself. If user scrolls center to the PDF, the PDF's content fits perfectly.
I would like to have this scrolling happen automatically if possible.
The code is here http://shop.stelladoradus.com/product/gsm-repeater/
You must click on the specification tab to see the PDF.
For google chrome I did the following:
I used an Iframe instead of the embed
<iframe id='pdf_embed' height='1300' style='width: 734px; margin-left: -40px;' src='iframe_url?pdf=pdf_url.'></iframe>
on the iframe page I have:
<style>
object{
width: 200%;
margin-left: -370px;
margin-top: -150px;
}
embed{
width:100%;
height:95%;
}
</style>
<html>
<body >
<object height='1430' data="<?php echo $_GET['pdf']; ?>" type="application/pdf">
<embed height='1430' src="<?php echo $_GET['pdf']; ?>" type="application/pdf" />
</object>
</body>
</html>
This solution is actually exactly what I was looking for, as the pdf is zoomed in so the margins aren't showing, and its easier to read (bigger text). I couldn't get it to work for firefox or IE, for that you can use #Infer-On solution below.
Ok I think you have only to pass some paramenters to your PDF, as specified from documentation:
You could try something like this:
zoom=scale
Sets the zoom and scroll factors, using float or integer values. For
example, a scale value of 100 indicates a zoom value of 100%.
or else
view=Fit
Set the view of the displayed page, using the keyword values defined
in the PDF language specification. For more information, see the PDF
Reference.
See the related documentation to find the parameter will better fit for you
http://example.org/doc.pdf#zoom=50
http://example.org/doc.pdf#view=Fit,100
EDIT
What i already tried:
<object data="http://www.stelladoradus.com/wp-content/uploads/2014/03/en_spec_RP1000G3.pdf"
type="application/pdf"
width="300" height="500">
<param name="view" value="fit" />
</object>
http://jsfiddle.net/InferOn/wVaGa/23/
this works, but not in Chrome...

How Can I Position a Clickable Image to Top of Browser in jQuery

Obviously I am a novice coder :( This seems like it should be easy, but I can't figure it out.
CSS
div {
display: none;
}
BODY
<div id="div" style="width:100%;height:1750px;z-index:1;">
<iframe src="mypage.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="1750px" ALIGN="left">
</iframe>
</div>
<iframe src="http://www.website.com" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="1750px" ALIGN="left">
</iframe>
jQuery
$('#hover').mouseenter(function() {
$('#div').show();
}).click(function(e) {
e.preventDefault();
$('#div').hide();
});
This webpage code displays the clickable image "30x1800clear.gif" at the top of the page that opens the "mypage.html" iframe content on hover and closes the ifame content on clicking the image. Which is exactly what I want it to do.
I want the image to stay fixed at the top of the page on scroll. If I try to use ANY styling at all, or surround the code in a DIV with any position styling the image disappears completely.
Can someone show me how to make the image stay fixed at the top of the browser window on scrolling the page?
add position is fixed to image tag. like this
<img src="30x1800clear.gif" width="100%" height="20px" border="0" alt="" style="position: fixed;">
There are several issues here:
You have a div with id div. This is very confusing, so lets change the id to mydiv. In your css, you apply your display:none to div, so to all divs. I guess you want to apply it only to the div in question, so yo should change it to:
#mydiv {
display: none;
}
You're mixing inline style and separate file for the same element, so let's combine everything into the css file:
#mydiv {
width:100%;
height:1750px;
z-index:1;
}
And the first line of your html becomes:
<div id="mydiv">
Now, for the real question: You want to fix the position of the image to the top. Let's add this lines to the #mydiv css block:
position: fixed;
top: 4px; /* You can change this to any number of pixels you want, including 0 */
left: 4px; /* Same thing */

Categories