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.
Related
The Situation:
My Script creates a weekplanner with the masterpage as template.
What's happening in the script is:
Create Page
Apply Masterpage
Override each item
Change content of each item
do this for the whole dates-array length
The Problem:
The position of the masterPageItems after overriding gets messed up.
I've made two screenshots as demonstration.
Now the real weirdness about this is, that it gets messed up on a "custom-size" document, but it doesn't get messed up on A4-Format...
I've already tried to restore the geometricBounds of each item after overriding it, but this doesnt seem to work either...
Do you have any idea what could be causing this behaviour?
The masterpage: http://i.imgur.com/T0ApzZj.png?1
Messed up after overriding: http://i.imgur.com/Lx6rZup.png?1
EDIT:
As proof that restoring the geometricBounds doesn't work, I did the following:
function OverrideMasterItems(currPage) {
var allItems = currPage.masterPageItems;
var itemPos;
for(var i=0;i<allItems.length;i++){
try{
itemPos = allItems[i].geometricBounds;
allItems[i].override(currPage);
allItems[i].geometricBounds = itemPos;
$.writeln("Original itemPos: " + itemPos);
$.writeln("New itemPos: " + allItems[i].geometricBounds);
if(itemPos == allItems[i].geometricBounds) {
$.writeln("same position");
}
}
catch(e){}
}
}
As you see I assign the items original geometric bounds again and in the console it says that it's the same value - but it looks like in the screenshots. Also it doesn't write "same position" - which means the if-statement isn't true...
I solved it! For future reference:
It wasn't a programming bug, but some awkward InDesign "Bug(?!)" that lead to this weird behaviour:
I copied the elements of the Masterpage from a different document, that had different dimensions, and I just resized the textfields to fit the new format.
That's what caused the behaviour - it seems like the textfields still have some information from the other document I got it from and that this information wasn't removable/editable.
Because even deleting the paragraph styles etc. didn't change the weird behaviour...
As I'm pretty new to InDesign scripting I don't know if this a common thing you guys know about, but this gave me headaches... ;)
EDIT 1: I didn't solve it! Still not working sometimes!
Okay, it's still happening, and I just don't understand why... As the script executes the "override" on an item, the item gets repositioned to a completely wrong position...
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.
I am currently designing a website for a university project based around the open source project. My website is based around an infinite scroll layout, the idea is for each section to have a terminal that looks like the command line and to have the text print to these screens.
I have implemented realistic-typewriter.js (https://github.com/fardjad/realistic-typewriter.js) for the self-typing text. To have the animations triggered at pre-defined moments (when the user is at that section of the page) I have been told to use waypoint.js (https://github.com/imakewebthings/jquery-waypoints)
Now my problem is implementing the 2 together.
Typewriter.js is implemented something like this.
var typewriter = require('typewriter');
var twSpan = document.getElementById('typewriter');
var tw = typewriter(targetDomElement).withAccuracy(90)
.withMinimumSpeed(5)
.withMaximumSpeed(10)
.build();
tw.clear()
.type('TEXT GOES IN HERE')
});
What I don't understand here is the syntax of the variables at the start, it seems a bit convulted to my amateur eye.
The tw.clear() line - I assume the tw is the variable and the .clear does what?
Now the waypoint library - I was previously using this fine with the typed.js library, but its functionality was a bit limited and I was advised to move over to realistic-typewriter.js, the code doesn't seem to work in the same way with realistic-typewriter.js.
Here is the example code for waypoint.js from its documentation.
$('.thing').waypoint(function() {
// i tried to put the above code in here but it doesn't seem to work
); offset: '50%'
});
Basically I need to know how to combine waypoint.js and realistic-typewriter.js, but any explanations of the working processes of these would also be really helpful.
tw is an object that is accessing the "clear" method, which I am guessing clears out the element so it can type in it.
Also, looks like your waypoints code something is off. Should be something like:
$('.thing').waypoint(function() {
//code goes here
}, { offset: '50%' });
If you place the realistic-typewriter code there it should run it once you've reached that element.
I have created the following image gallery.
http://jsfiddle.net/sfiddle/Nf7yR/7/
I think the thing is, that even though I can get a hand on the paragraphs css, the currentIndex won't update, i.e. an event listener seems to be missing.
var thumb = document.getElementById("thumb");
myParagraphs = thumb.getElementsByTagName("p");
console.log(myParagraphs[1]);
function thumby(){
$(myParagraphs[currentIndex]).css("background-color", "red");
}
thumby();
The thing is that I can not manage to link the image index with the index of the pagination dot (which has a normal p tag).
I want to code it in that way that if the first picture is displayed the first dot is red, if the second image is displayed the second ...
How could I approach this?
Thanks for any good advice as I invested a few hours already but can not get my head around it.
PS: no, I want no plugin or ready made imagegallery, I want my approach to work :-)
You made a function thumby() but you are calling it only once (during script start). You just need to call it when you change currentIndex. Here you have fixed code: http://jsfiddle.net/Nf7yR/10/ (I commented my edits).
BTW your code looks terrible. You should indent it properly to make it easier to read :)
I'm a rookie designer having a few troubles with this page: http://www.resolvegroup.co.nz/javasurvey.php
There are problems with the javascript operation of the expanded questions. For Internet Explorer (Version 7) the first question when expanded gets partly hidden under question 2. This happens to varying degrees with all questions, at times making the next question completely hidden and other problems.
Firefox (Version 3.03) does not have the problem as above, but you cannot get access to the explanations or select next question as in IE7.
Does anyone know what's going on with this, and how to fix it?
I'd recommend looking at using a pre-built Accordion script, like that built into the jQuery UI library: http://docs.jquery.com/UI/Accordion
Also, there's a few things I could suggest. This code of yours:
$(".score-list").slideUp(speed);
$(".score-list").removeClass("open");
$("a.open-answer").removeClass("hidden");
$(this).parent().children(".score-list").slideDown(speed);
$(this).parent().children(".score-list").toggleClass("open");
$(this).toggleClass("hidden");
could be made a lot more efficient by storing the results from a jQuery query, as well as taking advantage of jQuery's chaining abilities: quite a lot of jQuery's functions return the jQuery object itself, which means you can call a number of functions in a row without having to reference the object again and again. Here's what I mean:
$(".score-list") // my own preference is to split the calls onto
.slideUp(speed) // multiple lines to make it easier to read.
.removeClass("open")
;
$("a.open-answer").removeClass("hidden");
var $this = $(this); // store the result from a query in an object so you
// don't have to go through that again.
$this
.parent()
.children(".score-list")
.slideDown(speed);
.toggleClass("open")
;
$this.toggleClass("hidden");
If I'm not mistaken, your CSS has some wonkiness. ".question-container h3" and ".question-container h3 span" have relative and absolute positioning, respectively. Internet Explorer does not handle out-of-flow positioning very well. In result, it gets confused and tries to place these elements in weird places.
Construct the accordion without relative or absolute positioning and it should work fine.