We Keep Coding

How to crop and save an image underneath a div with a clip-path in CSS?

Basically, I'm working on a freelance project right now where an image is uploaded on a website and is clipped on a path that is already defined. I'll give you an example:
As you can see, I placed the img tag just underneath a div tag
<div style="clip-path: xxx">
<img src="xxxxx.xxx">
</div>
Now, I used the JQuery UI Draggable widget to move the image around. Got that covered, no problems there.
The problem is, how do I capture and save that image? I tried using Html2Canvas to 'screenshot' it but it kept resulting in a square instead of a heart image.

Using jQuery to target an image before page loads

I have a website I am working on that has an image gallery, and the user is uploading huge images. The div I have the image gallery containing is set to a certain 400px width to match the layout. The issue I am running into is on page load, for a split second, the first image in the gallery loads on the page at normal size (huge), and then the css kicks in and resizes the image to 400px. I am wondering if there is a way to target and change image size before the site code is rendered. Something like:
jQuery( window ).load(function($) {
//step 1: find the image using the unique css class it is inside
//step 2: resize image to 400px
//step 3: let rest of site html/css/jquery load
});
I am using $(window).load instead of $(document).ready in an attempt to target the image before html/css/jquery kicks in. Any insight/help on this topic would be greatly appreciated.

Try adding the width and height attributes to the image element. Your CSS will override these properties when applying styles to a specific class. Furthermore, you don't need to mess with JS.
<img src="image.jpg" width="400" height="auto">

Click an image to open a slideshow with static text

I'm building a website with a portfolio, and would like to be able to click on a single image for each project, which would then dim the page, and open a slideshow with multiple images of the project, as well as a description. Basically this would be a lightbox, but instead of just opening the single image, each different lightbox would contain a slideshow on the left, and static text on the right. Is this possible? I thought maybe it would be done by implementing something with http://noelboss.github.io/featherlight/
Thanks so much for your help, you guys are amazing!

Instead of opening up a single image using the default implementation:
<span data-featherlight="myimage.png">Open image in lightbox</a>
You could try instead to use FeatherLight's iFrame feature and call an external Div:
Open element in lightbox
<div id="mylightbox"><img src="myimage.jpg" /><p>This div will be opened in a lightbox</p></div>
You could then style this to have the image float left, the text float right etc.
Unsure as to whether this will work with FeatherLight's gallery extension though!

Make image link override background image on top of it

I have this div block which shows a preview image to a video (YouTube), the problem is that this preview thumbnail generated by CMS, it doesn't give the YouTube play icon in the middle of it, so it doesn't look like a video, but just a plain image.
So I came up with a solution (top answer CSS show div background image on top of other contained elements), by adding an empty span and giving it a background, that YouTube play icon and position absolute and positioning it in the middle of that image preview thumbnail. All looks great, now the problem is that background is not a link, the thumbnail is a link to the video, so that transparent icon hides the thumbnail link below it.

According to this post:
Click through a div to underlying elements
It works, if you add the following CSS attribute:
pointer-events: none;
Here is also a post about the IE compatibility: fromanegg

Flash inside a scrolling div - IE6 bug

I have div containing a list of flash objects. The list is long so I've set the div height to 400 and overflow to auto.
This works fine on FF but on IE6 only the first 5 flash objects that are visible work. The rest of the flash objects that are initially outside the viewable area are empty when I scroll down. The swfs are loaded ok because I don't get the "movie not loaded". They also seem to be embedded correctly they are just empty ie. the content is never drawn.
Any ideas on how to fix this?
ps. The html elements involved are mainly floating in case that has an impact on this. The flash objects are embedded using the popular swfObject.
EDIT: It seems that the bug only occurs with the flash plugin "WIN 8,0,24,0"
Since I cant post a link I'll summarize the relevant code here:
<div style="overflow:auto; height:400px; float:left;">
<div id="item_1" style="float:left; clear:left; height:100px;">
<!-- swfObject Embed here -->
</div>
...
<div id="item_7" style="float:left; clear:left; height:100px;">
<!-- swfObject Embed here -->
</div>
</div>
EDIT:
After trying to recreate this problem in a separate page I found that the bug is some how related to the flash objects being hidden initially. My container div has "display:none; visibility:hidden" when page is loaded. Later on the style is changed via javascript to visible. If I load the page so that everything is visible from the start all is fine.

When I'm testing this sort of stuff in IE6, the first thing I do is start removing style information. Begin by removing all the floats and clears from both the parent DIV and children DIVs. If that doesn't work, remove all padding and margins, and give the parent DIV and children DIVs each a width of 100% (leaving in your height of 100px). If that doesn't work, then post back here. If I had to venture a guess I would say it is because none of your DIVs have a width, but that is a wild guess based upon what I know of the "peekaboo bug".

A few things that I'd try:
remove all CSS temporarily to determine whether the issue is CSS-specific
add pixel widths to the floated elements as well as their parent element
add the wmode transparent param to swfobject
add position:relative
I've heard of a bug in Flash that apparently only occurs if the flash loads with portions of it outside of the screen (i.e. body > #flash {margin-top:-50px}). Your problem could potentially be a variation of that.
Alternatively, you could drop the div with overflow altogether and try creating a container in flash with a scrollbar and load the individual SWFs into that one container flash file.

This is just a workaround, but you could try to create placeholders initially for the Flash objects (like div's with the corresponding height and width) and only load the movie (via something like swfobject) when it first becomes visible. This can create some problems (ie movies not preloading before they are visible), but it may be acceptable.

I think I have a solution for this. I can't be absolutely sure as the page in question was restructured (because of this bug). Later on I stumbled on a similar issue with the same flash component on a different page.
The issue there was that sometimes flash gives a Stage.height=0 and Stage.width=0. This is most likely to happen when the flash is initiated outside the browser viewport. We are using the Stage dimensions to scale the contents (to width=0 and height=0 in this case).
The solution was to add an onEnterFrame handler that checks for Stage dimensions and only proceeds once they are > 0.