Develop Reference

featherlight.js - possible to use it together with img-zoom WITHIN the lightbox?

I´ve been trying (and searching) since days, but didn´t got my idea work...
I use the featherlight lightbox to display HTML content (text with some images). Because of some pics are very small, i´d like to have an image-zoom on them.
Example of the zoom here: jquery.elevatezoom.js #6:inner-zoom
The elevatezoom.js works well outside the lightbox, but unfortunately not inside. Did/does anyone get this working together? Or do I need another javascript(?) I tried several.. Thanks for help!

The problem seems to be in the way the ElevateZoom plugin is calculating the position and dimensions of the image.
If you do try to put a picture inside the featherlight hidden div, you'll see that ElevateZoom does create a zoomContainer and everything is working, except this is its generated css:
left: 0px;
top: 0px;
height: 0px;
width: 0px;
This seems to happen because when you call $('#image_element').offset() it returns {top:0,left:0} I assume because when it's inside the featherlight container, its position is fixed.
I think the easiest way to fix this, if you haven't already found another image zooming library, is to just make this effect yourself. You would simple have two divs in the featherlight container, one hidden containing the larger picture, and one smaller containing the normal picture. When the mouse enters the picture, you hide the small and show the big. That would be the first step.
The second step is making it scroll. The way elevateZoom handles this is by setting the background-image to the large image, and moving it around using the background-position attribute. Here's what the elevateZoom generates as an example:
<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; width: 411px; height: 274px; float: left; cursor: crosshair; position: absolute; top: 0px; left: 0px; display: block; opacity: 0; background-image: url("images/large/image1.jpg"); background-position: -152.651px -545.577px; background-repeat: no-repeat;" class="zoomWindow"> </div>
Notice the background-image and background-repeat. You can move that around with Javascript as the cursor moves relative to where the image is positioned.
I hope this helps!

Add header to any page with Javascript

I'd like to create a bit of embeddable code that a user can drop into their website that will load some Javascript. If some conditions are met, I'd like to add a small header to the top of the site, pushing down the rest of the content. Is there a simple way to do this that'll work on most websites?
I understand how to load and execute the JS - I guess I'm just wondering what the HTML/CSS would look like on both my header, and what would need to be altered on the user's site.

Have you considered using a floating header on top of their websites as opposed to shifting their entire website down? I think that'd be significantly easier.
That way you could just smack a div anywhere like so:
<div id="header">Whatever content</div>
<style>
#header {
left: 0px;
top: 0px;
width: 100%;
height: 30px;
background-color: black;
z-index: 1;
overflow:hidden;
min-width:280px;
position: fixed;
}
</style>
Or you could remove the position: fixed if that's too annoying and just make sure your div is on top.
jsFiddle

There is the bootsrap navbar: http://getbootstrap.com/examples/navbar/
Maybe solve your problem.

how to avoid user to click outside popup window javascript?

How to avoid user to click outside popup window javascript ?

If you want to avoid clicking of the content you can place a div with a fixed position over all the content. That prevents the user from clicking on everything that is not inside this div. I use this for some error reporting on a site.
Html:
<div id="error_wrapper">
<div id="site_error">
Error:
</div>
</div>
Css:
div#error_wrapper {
position: fixed;
width: 100%;
height: 100%;
background-color: #000000;
top: 0px;
left: 0px;
opacity: 0.7;
filter: alpha(opacity=70);
}
div#site_error {
position: fixed;
top: 200px;
width: 400px;
left: 50%;
margin-left: -200px;
}

I think you're asking about a modal dialog box. If so, have a look at the jQuery UI modal dialog.
It will open up a dialog box with custom HTML content, and the rest of the page will be grayed-out and un-clickable. Is that what you want?

If you meant to ask "can you prevent users from clicking outside a popup window", no, you can't. At least not with JavaScript. Just imagine how annoying that would be.
You need "deeper" access to the browser than what a bunch of JavaScript sitting on a webpage has in order to do this.

Just make a popup div follow the cursor with a mousemoveevent! I can see some flaws with the method, though.

jQueryUI or BlockUI modal dialog over PART of a page

I want to have a modal dialog over part of a web page, just a div container. I know a bespoke solution is likely the answer but I'm wondering if BlockUI can apply it's modal overlay to a specific div only.
Google/stackoverflow has bared no fruit when asking if this is possible with jQueryUI or BlockUI.
Is modifying an existing overlay solution the only answer?

You can create a div with the particular dimensions and position, and then block that.
JS
$('body').append('<div id="blocker"></div>');
$('#blocker').block({message: null});
CSS
#blocker {
position: absolute;
top: 50px;
left: 100px;
height: 75px;
width: 150px;
}
Demo →

Puzzle: different domain iframe needs to dynamically "overlap" parent content

This should be a fun puzzle for you Stack Overflow geniuses:
I'm building a browser plugin that will inject a div, script, and iframe into the markup of whatever page the client is viewing. The purpose is to anchor a toolbar onto the bottom of every page (StumbleUpon does this for Chrome). Here's the code that is placed before </body>:
<div id="someID1" style="position: fixed; bottom: 0px; left: 0px; width: 100%; height: 100%; background-color: transparent;">
<iframe id="someID2" src="http://www.example.com/iframeContent.html" frameBorder="0" scrolling="no" style="background-color: transparent; margin: 0px; height: 100%; width: 100%; padding: 0px;"/>
</div>
This toolbar (iframe) will be hosted on our server and has pop-out panels. When a user clicks to open a menu, the menu vertically extends the toolbar (e.g., toolbar height is 35px; with panel is 100px).
I can accomplish this in Safari, Firefox, and Chrome by having my toolbar sit on top of everything on a transparent background (i.e., height: 100% and background-color: transparent for both the div and iframe). But this doesn't work for IE7, IE8, IE9.
I've tried (1) doing background: blank.gif instead of background-color: transparent, and (2) injecting a script into the parent with a resizing function that I could call on with parent.resizeFunction(height) ("resource denied")
Any ideas on how to solve this?? Thanks so much!

I have to run so I can't test it, but IE seems to listen to the non-standard ALLOWTRANSPARENCY property.
When the property is set to false, the backgroundColor property of the object can only be that of the window. When the property is set to true, the backgroundColor property of the object can be set to any value, including the default value of transparent.