How can I customise jquery loupe to have a circular lens? - javascript

I would appreciate the thoughts of any javascript / css ninjas on how I can customise:
https://github.com/jdbartlett/loupe/blob/master/jquery.loupe.js
To have a circular zoom area instead of rectangular one? There is an option to set a css class for the loupe.
Please note that this is a question about the library linked above. I have already googled for other libraries. I want to keep the js as small as possible.

I guess the easiest way to do this is to use CSS3 border-radius, which is supported by the modern versions of all web-browsers (no IE lower than version 9).
If you have this in your javascript
$('selector').loupe({
width: 150, // width of magnifier
height: 150, // height of magnifier
loupe: 'loupe' // css class for magnifier
});
Just put this in your css:
.loupe {
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
}
... and all old versions of IE will just show a square, which is maybe OK in your case?

From the developer of loupe.js:
you may want to look at chris iufer's loupe, which is only a bit
bigger than mine and includes a few samples that use css3 to achieve a
round loupe:
http://chrisiufer.com/loupe/sample.html
whereas mine uses an absolutely positioned image within a div, his
uses background-image on the div and background-position to move the
image, so css3 border-radius works.

Related

Is it possible to make a see-through window using HTML/JS/CSS?

I need to make a see-through window when user click in a given position of the screen, something like this:
It is, I need to highlight an arbitrary area in the screen (with a fixed width and height) in the position where the user clicks.
I have two options:
Use a plugin to take screenshots (like these).
Create 4 grayed boxes.
I don't like none of these options for different reasons:
The use of these plugins exceds my needs and adds an extra page load time and undesired complexity.
Manage these boxes may be complex in a future and browser compatibility may be an issue.
So, my question is, is there any way to do this in a simple manner using HTML (HTML5 and canvas is ok), CSS and Javascript/Jquery? A specific Jquery plugin will be an option due I could forget the maintenance of this code.
I did this once, I am not sure everyone will agree with my implementation but it worked for me at the time:
Create a div in the location you want, set height and width (for window effect);
position the div in the place you wish and then just add outline to it.
body {
background-image: url(http://lorempixel.com/800/800/nature/5/);
background-size: cover;
}
.windowDiv {
position: absolute;
top: 100px;
left: 100px;
height: 300px;
width: 300px;
outline: 4000px solid rgba(0, 0, 0, 0.5);
}
<div class="windowDiv"></div>
EDIT: use background-color rather than opacity.
2nd EDIT: as A.Wolf suggested you should use outline instead of border for easier positioning.

Showing div at the center of the webpage

I have a div showing "Please wait". The markup for the div is
<div id="pleaseWait" class="divOuterPleaseWait" style="left:expression((documentElement.clientWidth-this.offsetWidth)/2);top:expression(documentElement.scrollTop+((documentElement.clientHeight-this.clientHeight)/2 ));">Please Wait...</div>
This is working fine with IE7. In IE7 the div is show at the center of the page. But excepted behariour is not optained in other browsers (ie. IE8,IE9,FireFox,Google Chrome etc). What should i give to get this working in all browsers? Also can I move the inline style to the my CSS?
A good way to center a div is to use fixed positioning, top and left set to 50% and left and top margin to the negative of half of the width/height:
http://jsfiddle.net/fLa4S/
See this SO answer, or this jsfiddle (press the 'confirm' button). The css you showed in your question is browser specific (especially: IE). In javascript you can center an element by determining the 'viewport' dimensions (height/width of the available screen) and position your element relative to those dimension. The links here demonstrate a way to do that.
It doesn't work in "other browsers" because you are using expressions in your CSS which are 1) incredibly bad for a variety of reasons (slow, deprecated, non-standard) and 2) unnecessary.
You can use pure CSS positioning (percentages and negative margins) or a little JavaScript (jQuery makes this very easy) to accomplish the same thing in all browsers.
Another approach:
<div style="text-align:center;width=200px;margin-left:auto;margin-right:auto">Please wait...</div>
CSS expressions are only working in IE. However, it´s generally not a good idea to use them because they are not W3C conform and in addition they can be very slow when you make heavy use of them.
The CSS attribute position: fixed could help you here:
#pleaseWait {
width: 400px;
height: 200px;
position: fixed; /* IE8+ */
left: 50%;
top: 50%;
margin-left: -200px; /* half of width*/
margin-top: -100px; /* half of height*/
}
If you have to still support <=IE7 you have to use JavaScript (but not within the CSS definition!)
Using auto as margins and defining a width and hight should be enough
<div style="width:200px;height:50px;margin:auto;text-align:center">Please wait ...</div>
If you only want to center verticaly, use margin: 0 auto;
PS: if you want to be more XHTML-correct, put your CSS in a CSS-file and use a class or a id to define the css-styling
I've answered this before: How to set the div in center of the page

background image not visible in iPad Safari

I have a background image for an input box..It works fine in IE/FF, but for some reasons it is not visible in iPad Safari..Below is the CSS for the same;
#rightContent .inputBox{
background:transparent url(images/keyback.gif) no-repeat scroll center 6px;
border:0pt none;
float:left;
height:40px;
#height:37px;
margin-left:10px;
width:450px;
overflow: hidden;
}
Please help. Thank you.
I would suggest splitting out the background style into seperate parts. Not all browsers support transparent (and possibly other parts of that style).
When a browser sees a style they don't know what to do with, they usually ignore the whole style. Putting the background-image onto it's own line (eg. it's own style) will let that property get picked up by browsers that can deal with it, rather than getting missed because it is lumped in with things the browser doesn't know about.
I believe the default value of background-color is transparent. Have you tried not setting a color? Also, since you have a set image with no-repeat, why not make the image a jpg/png and set a color to match the background-color you want.
I've had the same problem and have managed to get a working solution using jQuery
$(document).ready(function () {
var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';
$('.commands .command').css({
background: 'url(' + buttonsFilename + ')',
width: '55px',
height: '55px',
display: 'inline-block'
});
});
I'm using this within an ASP.NET MVC website, hence the <% %> tag.
I could only get it to work using the background shortcut css property. I couldn't get any of the following to work ...
background-image
backgroundImage
'background-image'
... when using the object notation. Unfortunately that wipes out any other background settings you may have. But I got around that by using another piece of jQuery to set my background-position property.
I am having the same problem, but I found that the image slice I was using was too thin to display on iPad. It is a texture, so I was using a 15px slice and an x-repeat, which is fine in all browsers but not iPad. After some experimenting I found that the threshold for iPad seems to be 130px.

Why does graphics have ugly black borders in IE after alpha animation?

The site I'm working on opens with a fancy jQuery opacity animation. Currently It's working in all browsers, but in IE all text and alpha images are left with ugly black borders that makes the text practically unreadable.
Is there some clever javascript command i can run to refresh/update the graphics?
Any other way to fix this?
My problem is entirely css and javascript related, so all source code can be found following the link.
Thanks for any help!
http://xistence.org/dev/
After an animation involving the opacity, you will want to clear the opacity value (back to a default of no value) to fix this mangled antialiasing in IE. Try this jQuery on the section in question after the animation is complete (e.g. in a callback):
$('.item').css('filter','');
This question probably has the answer you are looking for:
jquery cycle IE7 transparent png problem
from #darkoz's answer:
The way to get around this is to nest your png inside a container and then fade the container. Sort of like this:
<div id="fadeMe">
<img src="transparent.png" alt="" />
</div>
This snippet of jQuery code has served me well when dealing with opacity issues in IE.
$(function() {
if (jQuery.browser.msie)
$('img[src$=.png]').each(function() {
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
});
})
Define a solid background color to your image:
.container img {
background-color: white;
}
Define the background-image css property of your image to its src attribute:
$('.holder-thumbs li a img').each(function() {
$(this).css('background-image', $(this).attr('src'));
});
Advantage: you don't need to change your markup
Disadvantage: sometimes applying a solid background color is not an acceptable solution. It normally is for me.

CSS or jQuery problem: Website not behaving correctly

Go to this beta of my new website (link redacted). If you hover over one of the colored squares, a popup box à la Panic's Coda pops up, except there are two problems:
a) The text inside the popup does not show up. It is programmatically set to :) using the following code:
http://grab.by/syM http://grab.by/syM
$('td.middle', this).text(':)');
     td.middle is the class of the middle cell
     this is a reference to $('.info').each()
Use may want to use an inspector tool like Firebug for Firefox or the one included one in Safari or Google Chrome.
b) The sides are clipped off:
http://grab.by/syE http://grab.by/syE
I think it is due to this:
http://grab.by/syW http://grab.by/syW
For some reason, the sides have computed widths of 1px, as opposed to
.bubbleInfo .popup td.corner {
position: inherit;
height: 15px;
width: 19px;
}
19px as defined in (link redacted)
You can grab a ZIP archive of all the files here (link redacted).
Thanks so much. I know this is a lot to ask.
The width of the container div for the :) table is clipping the sides of the :) table popup. If you edit the width of the .info class up from 32 to something bigger (I did width:80px) you see the whole popup. Alternately, you can change the width (or min-width) of .popup to about 50px, which fixes them without distorting the size of the colored boxes.
As for the :) being missing, I was able to make it appear by setting text-indent:0 in the .middle class. This had no ill effects on FireFox and fixed it in Chrome.

Categories

Resources