Develop Reference

Odd behavior in jquery `.on('click')`

I've made a slider that displays media files (img,video and pdf), and those media files can be selected to do some operations with them (deleting & attaching), so anyways, initially I made a class called selected-media which had a shadow, this worked ok, but it was pretty ugly (you know, media files can change in aspect ratio and whatnot, and this shadow was applied on the div containing the actual <img>, <video>, not the media itself). So I decided to google some ways to make this shadow dynamic, so that it was applied not on the div but around the img itself.
To do that I followed the SO answer and did this:
.selected-media{
-webkit-filter: drop-shadow(12px 12px 25px darkturquoise);
filter: url(an_url);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}
Now funnily, even though the url is always the same, this shadow IS dynamic somehow, and it does exactly what I wanted it to. This is good because I'm using flask for the backend and dynamically feeding an url into css is a big pain in the butt.
However there was a problem, a weird one as well, and that presented itself when I added the pdf support.
Here is the structure of the slider:
<div id="media-slider">
<div class="selectable selected-media" id="single-media-5">
<img class="single-media" src="img-url">
</div>
<div class="selectable selected-media" id="single-media-26">
<div style="height: 100px; text-align:center">
<img class="single-media" src="\\static\\resources\\pdf-placeholder-icon.png" >
<p>'+ pdf_name +'</p>
</div>
</div>
</div>
And this is the weird behavior i am talking about:
This is the expected result
However if I click on the text this consistently happens (not sure if you can see it, but the shadow is applied to the text as well)
And this is the code that handles those events:
$(document).on("click","#media-slider > div.selectable", function (event) {
if (!event.currentTarget.classList.contains("selected-media")){
event.currentTarget.classList.add("selected-media");
}
else {
event.currentTarget.classList.remove("selected-media");
}
});
Now, the funny thing is that jQuery is not adding any class to the <p> element, the html looks identical in the two cases shown above. I'm not sure what is happening here, of course if you click on the text it should still apply the effect on the img, but just there.

javascript drag and drop page builder

I'm in the process of building an A4 size drag and drop page builder.
The elements this builder can contain are images and text boxes.
I am after for some advice on what frameworks are available that can be used to build this type of front-end functionality.
Example of what I'm after, see here canva.com
The two frameworks I tried are so far are fabric js and greensock draggable, which didn’t meet my needs or are pretty difficult to create a complete page builder.
ideally i don't want to use canvas for this.
edit:
Basic Feature:
cropping
rotation
re-sizing
change font style/color/size for textboxes
add backgrounds
frames/ masking images (square image can become star shape with a overlay)

As of my understanding you want to create dashboard which can be configurable.
I would suggest use a table structure Table merge and split in which each cell should have a dropable component like
<table id="mainTable">
<tbody>
<tr>
<td class="set-as-droppable"></td>
<td class="set-as-droppable"></td>
<td class="set-as-droppable"></td>
<td class="set-as-droppable"></td>
</tr>
<tr>
<td class="set-as-droppable"></td>
<td class="set-as-droppable"></td>
<td class="set-as-droppable"></td>
<td class="set-as-droppable"></td>
</tr>
</tbody>
</table>
Like
Then on drop write your own logic
$( ".set-as-droppable" ).droppable({
accept: "div.Dragable",
drop: function( event, ui ) {
}
});
And dragable component can be TEXT or IMAGE and on drop you can give any operation

Most of your goals can be achieved by css 2/3 + some pure js
clipping/masking
http://www.html5rocks.com/en/tutorials/masking/adobe/
re-sizing, change font style/color/size for textboxes, add backgrounds
pure js/css2
rotation
css3 transform property http://www.w3schools.com/cssref/css3_pr_transform.asp
dragging
Can be pretty easily done, using pure js or you can try some open-source plugins, or something like jquery draggable.
As for your current list, I don't actually see, why do you want some framework for this, when most of it can be achieved by pure js/css with a little effort/googling.
In my humble opininon, jquery or something similar is all you really need. Just check jquery's "interactions" section here https://jqueryui.com/draggable/ to see if it can help you with building your builder interface. There are various examples for each interaction (right sidebar).
UPD:
Here is some dirty code example for you (using jquery UI) http://jsfiddle.net/tbpxnxrm/2/. Doubleclick in #main to create additional elements. No collision/overlapping checks implemented, forked from http://jsfiddle.net/4Vfm5/1095/
drag_defaults = {grid: [50,50], containment: "parent"};
resize_defaults = {
aspectRatio: true,
handles: 'ne, se, sw, nw',
grid: [50,50],
minHeight: 50,
minWidth: 50
}
$('.draggable').draggable(drag_defaults);
$('.resizable').resizable(resize_defaults);
UPD2: After a couple of years my example stopped working at all on jsfiddle. Can't surely tell why, yet the main answer is still credible.

I tried to implement this in my free time but its not something that can be done from the ground up using pure js in a couple of after hours. So far I have a jQuery plugin prototype for dropping new dom elements into a page area. I've also been experimenting with making any block component in a page resizable. In the few hours I put into it I had some success.
Resizable block component: (Edit: drag the 4 small handles in the middle of the sides)
Fiddle
Page builder prototype with menu and droppable area (Only the text item can be dropped):
Fiddle
I'll keep updating the fiddles whenever I get to work on it, but I won't have a finished plugin anytime soon.
Too much code to put here! Visit the fiddle

There is a useful jquery plugin for rotation..
Your code:
<div id="product">
<img src="images/01.jpg" />
<img src="images/02.jpg" />
<img src="images/03.jpg" />
<img src="images/04.jpg" />
<img src="images/05.jpg" />
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#product').j360();
});
</script>
This should work.

I think you can't do this with only one framework if your goal is to make it as easy as possible.
If I understand well, what you want to do is to allow your app' user to make some kind of advanced "drawing" made directly in the browser.
First : Without canvas element, their works will have to be exported/generated server-side.
Now, the best way to do this would be to have a javascript object that represents each document and their content, with models included and each properties like position, rotation described. And this object should be rendered making css properties and html elements correspond to the object structure. That is to say AngularJS would be my first choice as it watches almost automatically your models and render the target element in real time as soon as your object is modified. (Angular 2 is better but only documented in TypeScript and Dart)
From here, with html5 & css3, elements can be manipulated with a nice property : transform. It takes values like "translateX(10px)" or "rotateZ(10deg)".
To learn more about it : http://www.w3schools.com/cssref/css3_pr_transform.asp.
Also, for the drag and drop things : http://www.w3schools.com/html/html5_draganddrop.asp.
To crop an image, you should use server-side code. (example with php : http://php.net/manual/fr/function.imagecrop.php)
To play with masks on images, there are also css3 properties that work well :
http://www.w3schools.com/cssref/pr_pos_clip.asp
And for communication between your app and the server, use jQuery functions :
http://api.jquery.com/category/ajax/.
Finally, pick what you want from css3 : http://www.w3schools.com/css/css3_intro.asp.
http://www.w3schools.com/css/css3_images.asp
I hope it'll help you. Good luck !
UPDATE : I found that clip css property is obsolete, now it's clip-path but it works approximatively the same way.
UPDATE 2 : Actually, masks (with images and not paths) can be made through mask css property : https://developer.mozilla.org/en-US/docs/Web/CSS/mask. But be careful, it's still partially supported http://caniuse.com/#search=mask.

CSS and HTML boxes smallest on top but not in order

Right, this is slightly hard to explain but what I'm after is as follows:
I have a database of posts that will go into an HTML page. Obviously all these posts will be different sizes so the boxes containing them will be different sizes too.
What I'm after is a way to make these boxes all appear to fit nicely in with each other, as in the picture below for example. If the first post is a small one then it will begin a line of small boxes for example. And they won't necessarily all be the same height either. In the picture each post is numbered to show where it comes in the array of posts.
See the illustration I made here:
Is this possible? I'm assuming I'll need some Javascript in there probably, and JQuery is preferable.
Thanks for any and all help.

As you're willing to go with a Javascript solution, I've found that the jQuery Masonry plugin works really well for doing a "best fit" of differently shaped rectangles.
You set it up with markup like:
<div id="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
You then float: left your .items, and attach the Masonry handler to the #container:
$(function(){
$('#container').masonry({
// options
itemSelector : '.item',
...
});
});
There's also a no-jQuery version if you're not already using jQuery at all

Creating CSS/JavaScript tab panels -- with each nav item in the same div as its corresponding content

I need to create a set of CSS/JavaScript tab panels.
However, most the examples I have seen put the navigation in a separate DIV from the content. For example:
http://webfx.eae.net/dhtml/tabpane/tabpane.html
http://www.stilbuero.de/jquery/tabs_3/
Is there an CSS tab example where each tab navigation item is in the same div as its corresponding content?
Something like this:
<div id="tab-item=1">
<div id="tab-item-1-nav"> ... </div>
<div id="tab-item-1-content"> ... </div>
<div>
<div id="tab-item=2">
<div id="tab-item-2-nav"> ... </div>
<div id="tab-item-2-content"> ... </div>
<div>
<div id="tab-item=3">
<div id="tab-item-3-nav"> ... </div>
<div id="tab-item-3-content"> ... </div>
<div>

This is possible but, as is, pretty certainly isn't advisable (it's a work in progress and worked like a charm in IE7 yesterday and is broken today in this same browser ...).
The principle is to stick your tab-nav together so you have to remove from the flow your tab-content with position: absolute; (EDIT: you can't float them after the next tab-content).
Thus many problems arise: you can't have other content below your tab-content as you don't know anymore its height (except in JS of course or with max-height/height and a scrollbar created with overflow property). You can have content on the right pretty easily as you control the width of your content.
Here is a functional demo: http://jsfiddle.net/3skpt/1/ (using jQuery and jQueryTools, tested successfully in Fx 3.6.4, Saf 4.0.x, Op 10.54)
I'll update today the results of my IE7 debugging, whether successful or not.
The navigation isn't separated from the content here and is functional out of the box so a body.js class is used not to disrupt display when JS isn't functional.
Links in headings and the .js class shouldn't be hardcoded as in this already too long example but should be added via JS.
Now, though this example work at least in modern browsers with a few constraints (footer?), I'd reorganise the content when JS is functional in order to avoid the absolute positioning. It's pretty fast in jQuery to create a container before the first .tab-item container and then move every h1 in it. I believe it's far more robust ;)

jQuery animation

I'm having some minor problems with some animations I'm trying to set up. I have a couple divs stacked on top of each other kind of like this.
<div id="div1">
Stuff...
</div>
<div id="div2">
More Stuff...
</div>
Each of these divs has a drop shadow applied to it via jQuery plugin (jquery.dropshadow.js).
The problem occurs when I expand one of the divs using some kind of animation. The shadow does not update with the size of the div. I can redraw the shadow in the callback of the animation but still looks pretty joggy.
Is there a way that I can update the status of my shadows periodically throughout the course of the animation or can anyone recommend a better drop shadow library that would fix the problem? It doesn't have to be jQuery plugin.

I think the only way to do this (at least with that particular drop shadow plugin) would be targeting both the element you want and all the drop-shadow "phantom" elements, in your animation. So, for example:
<style type="text/css">
#div1 { width: 50px; }
</style>
<div id="div1">
<p>Here is a lot of stuff. Stuff stuff stuff.</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#div1").dropShadow();
$("#div1").click(function() {
$("#div1, #div1 + .dropShadow .dropShadow").animate({ width: "400px" }, 1500);
});
});
</script>
This is based on the structure of the rendered code that the drop-shadow plugin produces... all the fuzzy copies of your original element get a class of .dropShadow and get grouped into a container element which also has a class of .dropShadow and gets stuck into the document right after the original element (thus the + selector).
As long as you apply whatever animation you're doing to all of these shadow elements, they all get animated (however, it is a bit jerky from all that processing... uffda).

I would suggest using CSS for your drop shadows, and not JS.
I have dealt with this exact problem in the past and I have completely stopped using JS for drop shadows. I have never seen animations with JS shadows look as smooth as pure CSS. Also, using too much JS to alter the page elements can cause performance issues.

Try to apply the same animation effects to the shadow element(s).
I don't know the exact technique used in jquery.dropshadow.js, but I suspect it creates copies of your shadow casting elements and styles them to achieve shadow like appearance. It is possible that these copies are siblings of their source elements, thus don't "follow" animation (as child elements would).

Ok, I still don't know how you animate, but I give you another example:
$('#foo').slideToggle().ready(function(){
$('#foo').dropShadow(options);
});
So, instead of slideToggle, just use whatever animation thingy you got.
Hope that helps.