Develop Reference

OpenLayers 3 - Opacity slider in layer tree does not work

I included a layer tree according to http://www.acuriousanimal.com/thebookofopenlayers3/chapter02_03_layer_groups.html and http://jsfiddle.net/joshuadickerson92/mtwbs2dg/ (JSFiddle - cannot post more than 2 links due to insufficient reputation) in my Openlayers 3 map.
I cannot get the opacity slider to work. Moving it from right to left and vice versa has no effect on the opacity of the layers at all, regardless of these parameters: data-slider-min='0' data-slider-max='1' data-slider-step='0.1'
This bit
$('input.opacity').slider().on('slide', function (ev) {
var layername = $(this).closest('li').data('layerid');
var layer = findBy(map.getLayerGroup(), 'name', layername);
layer.setOpacity(ev.value);
});
seems to be skipped over when checking the page in Firefox's debugger tool.
I've been searching for solutions for days now, but still couldn't find anything. Any help appreciated!
JSFiddle here: http://jsfiddle.net/kidalex/j34xzaa3/5/
Update: I added this chunk of JS code, and now it works! Updated fiddle here: http://jsfiddle.net/kidalex/j34xzaa3/5/
Now I'm going to investigate which ones of those 8914 lines of (tidied up) code are the cause for that.

Try publishing your whole code so we can help better.
More probably your issue is related to javascript than to OL3, because of this I can't give you a concrete solution.
Ensure your $('input.opacity').slider().on('slide', function (ev) {... function returns a good ev.value when you move the slider.
Check too your findBy function works fine a the layername variable is getting the right value.
Use your browser debugger or simply the console to check all that.
Cheers.

Automate page turning with jFlip

I want to have a page turn effect like the one seen on this page: jFlip demo except I want to automate the page turning, like make it happen every second, 20 times (or however many images I have). I want to be able to trigger this animation to run either on page load, when a button is clicked, etc.
Unfortunately I don't understand jQuery all that well and the plugin's events seem rather complicated to me, probably mostly due to my inexperience with jQuery. Any help on which direction I should go, methods I should try? I am not limiting myself to jQuery or even Javascript, this is just the example I have found that achieves my desired effect.

You can find the updated code here. replace this with old one.
Usage :
var jFlip = new Flip("#g1",300,300,{background:"green",cornersTop:true,scale:"fit"});
// here #g1 is a jquery selector (make sure it returns only one).
// The structure is Flip(JQselector,width,height,options)
then use the jFlip object to flip slides/pages
jFlip.flipMe() // for next slide
jFlip.flipMe(true) // for prev slide
for binding a function to slide change event you can use
$("#g1").bind("flip.jflip",function(event,index,total){
$("#l1").html("Image "+(index+1)+" of "+total);
});
// here the selector is same as the one passed inside jFlip function.
Try this and let me know the feedback.

css3pie messes up DOM, results in jQuery selector errors

In order to get CSS3 effects (border-radius, box-shadow...) on IE 6/7/8, I'm using css3pie.
However, css3pie generates some css3-container (v1) / css3pie (v2) tags in DOM, which disorders the expected architecture. Here is an example:
CSS
pre {
border: 1px solid #aaa;
border-radius: 5px;
behavior: url(pie.htc);
}
HTML
<div class="foo">bar</div>
<p class="getme">paragraph</p>
<pre>preformatted</pre>
jQuery
// undefined expected: getme
alert($("pre").prev().attr("class"));
// css3-container expected: p
alert($("pre").prev()[0].tagName);
// getme expected: foo
alert($("pre").prev().prev().attr("class"));
// 4 expected: 3
alert($("body").children().size());
// will not set expected: Impact
$("p+pre").css({fontFamily: "Impact"});
// it almost affects all such jQuery selctors
The actual generated source is like this:
<DIV class="foo">bar</DIV>
<P class="paragraph">paragraph</P>
<css3-container...>
<border...>
<shape...><stroke></stroke><stroke></stroke></shape>
</border>
</css3-container>
<PRE>preformatted</PRE>
Has anyone encountered this kind of problems? Any workaround? Is there an alternative to css3pie to get CSS3 working on IE 6/7/8?

I tried using CSS3PIE too, and faced similar problems (mostly with jquery and mediaqueries). I found no easy/practical solution for all the problems it causes, indeed.
My advice would be to use Modernizr's load to progressively enhance older IE's user experience. It requires an harder/longer process, as you've to setup a single polyfill for each and every CSS3 feature. As mario.tco already told you, there's a list of cross-browser polyfills on Modernizr's repo. And here's a list of feature detection snippets.
Also have a look at html5please and caniuse.
In regard to IE6 and 7, unless your site statistics indicate something different, usage rates are below 1% on average (with some exceptions, check ie6countdown), so you can almost ignore them. However, with conditional comments you can target each IE<10 version with specific fallbacks.
Keep in mind that you don't really need to have box-shadows and other visual decorations (unless they are needed for usability) on IE<9. Indeed, any fallback will probably cause a huge performance problem (think about what hardware an IE7 user could have). Websites don't need to look exactly the same in any browser.

CSS3PIE is a very useful and powerful way to simulate CSS3 rounded corners - and in my company it is the one that we chose, but there are many other ways to do it.
The way CSS3PIE creates the rounded corners it will create the <css3-container> tag as the previous sibling to the element that has the behavior attribute, so it will change DOM structure and break your prev() calls. The css-container is important because it is a VML drawing of the rounded corner background behind your <pre> tag.
One way you could do this would be to wrap your <pre> tag in something else like a <div> and then use that <div> to navigate the DOM using the prev() function.
Another way you could do this would be to create a jQuery plugin like this
/* This adds a plugin prevPie and nextPie - it is the same as the
existing prev and next, but it will ignore css3-containers. */
(function($){
function addPlugin(name) {
$.fn[name + 'Pie'] = function() {
var result = [];
this[name]().each(function(i,el){
if (el.tagName == 'css3-container') {
var val = $(el)[name]()[0];
val && result.push(val);
} else {
result.push(el);
}
});
return $(result);
}
}
addPlugin('prev');
addPlugin('next');
})(jQuery);
Now the following should work like you wanted it to in all browsers.
// undefined expected: getme
alert($("pre").prevPie().attr("class"));
// css3-container expected: p
alert($("pre").prevPie()[0].tagName);
// getme expected: foo
alert($("pre").prevPie().prevPie().attr("class"));
// P expected: div
alert($("pre").prevPie().prevPie()[0].tagName));

Have you tried this:
http://blog.reybango.com/2010/10/11/how-polyfills-fill-in-the-gaps-to-make-html5-and-css3-usable-today/
Here is a list of polyfills you can use for other features:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

This is probably not the answer you're looking for, but instead of trying to get jQuery to ignore PIE's injected elements, I recommend (re)writing your jQuery to use classes / IDs more and be less dependent on page structure. This has the benefit of making your code more resilient against other page structure changes, as well as making your code a bit more portable and reusable.
When you must traverse the DOM, most (if not all) of jQuery's traversal methods include a filter selector argument that you can use to exclude PIE's elements, for example:
$("pre").prevUntil('*', 'not(css3-container)')
$("body").children('not(css3-container)')

Instead of just using the raw prev() add a CSS selector to it to narrow down the search
$("pre").prevUntil('p').attr("class");
// OR
$("pre").prevUntil('.paragraph').attr("class");
If you are going to use a CSS3 "hack" to make IE 6/7/8 behave correctly don't try and rely on expected DOM structure when walking the DOM try to be more specific.
EDIT
changed the prev() function call to prevUntil()

Have jquery filter inside live event

Hi I have this following code with jquery , so it will alternate colors on each row of a table:
$("tr").filter(':nth-child(2n+1)').addClass('odd').next().addClass('even');
but unfortunately it doesnt work when the table comes from an ajax call .. is there a way to put this into a $("tr").live... and make it work like that? .. I have tried different aproaches like this: ( I know the syntax may not be correct ).
$("tr").live({
$("this").filter(':nth-child(2n+1)').addClass('odd').next().addClass('even')
});
But doestn seem to work

live isn't a catch-all solution for problems that come from dynamic content. It only works with events. Normally, you listen for events with bind; when your content is dynamic, live is a way to capture events reliably. So you need another solution for styles...
The simplest solution is to define your CSS using nth-child:
tr:nth-child(2n+1) {
// whatever the odd styles are
}
tr:nth-child(2n) {
// whatever the even styles are
}
This won't work in all browsers, since it's CSS3. (In particular, it won't work in Firefox 3 or Internet Explorer before version 9.)
The other solution is to update all the tr elements on the page after every AJAX call using ajaxComplete:
$(document).ajaxComplete(function() {
$('tr:nth-child(2n+1)').addClass('odd').next().addClass('even');
});
This won't have great performance, but it probably won't be a particular drain as it will always happen asynchronously. This will, obviously, work cross-browser.

Its possible to use the :odd and :even tags for example
JSfiddle example

How to prevent child from one element to be on top of another element

(Okay, I know the questions probably sounds rancid bad, so someone edit if they they know how to reformulate it).
So, basically I have this: jsFiddle
And as you can probably see, I'm trying to re-create a basic windows 7 aero effect (curiosity, fun, learning, etc nothing big), but I stumbled into a few problems.
(I will explain only vaguely, since you can see it on the fiddle and otherwise it would be a textathon)
The text is stuck on top of the parent's(div) parent(div) element.
The text somehow leaks out of the duplicate element(div), even thought it doesn't from the original.
I know this all sounds odd, but you'll probably best see it on the fiddle.
Thank you.

I think the problem you're having is stemming from this:
$(container).find('*').each(function() {
var e_clone = $(this).clone(false).appendTo(processor);
// etc etc
});
By using the * selector then running .each you are cloning more markup into #processor than I think you might have intended to. You get two copies of span.lol in there because first it clones #box (including all its children) and then on the next iteration through the each it copies over span.lol on it own.
As for the "leaking" of text out of the parent, it does happen in the original... at least that's what I see in Chrome if I comment out the call to glass('#container', '#processor').