Hi,
I have an app that is almost done that uses the Raphael Colorpicker (the picker on the left: http://raphaeljs.com/picker.html) Here is the entire site: ([URL=“http://raphaeljs.com”]http://raphaeljs.com). Please see attached. I am using jQuery Mobile. This app will ONLY have to work on an iPad and on no other platform, thank goodness. I do have 2 different style sheets for portrait and landscape, but though the color picker can LOOK like it is placed OK, it does not pick color correctly when put into portrait. You press on a color and another color shows up on the slider.
Here is my HTML code:
<div class="ui-block-b columns-40-60">
<div id="canvas" ><!--THIS IS THE COLORPICKER CONTAINER--></div>
</div>
The code above works fine in Landscape however, the user needs to use this app also in Portrait and that is when the coordinates do not work.
What is strange is that either of these lines of code work the same.
Line 26 of the color picker.js file:
colourPicker = Raphael.colorpicker(602, 130, 370, “#eee”, “canvas”)
OR
colourPicker = Raphael.colorpicker(602, 130, 370, “#eee”, “canvas”)
So changing the code to:
colourPicker = Raphael.colorpicker(x, y, 370, “#eee”, “canvas”)
I tried putting in a bit of code at the top of the colorpicker.js file (Color Picker 0.1.0 - Raphael plugin), (I don’t know Javascript so I am my own worst enemy here, but this at least made the color picker appear, but now it doesn’t work well in either Landscape or Portrait).
var x = 0
var y = 0
if(navigator.platform === ‘iPad’) {
window.onorientationchange = function() {
var orientation = window.orientation;
// Look at the value of window.orientation:
if (orientation === 0) {
// iPad is in Portrait mode.
x=0,
y=0
} else if (orientation === 90) {
// iPad is in Landscape mode. The screen is turned to the left.
x=602,
y=130
} else if (orientation === -90) {
// iPad is in Landscape mode. The screen is turned to the right.
} else if (orientation === 180) {
// Upside down portrait.
}
}
}
Has anyone run across this problem? I have done a search & posted on the Google Groups Raphael Forum ([URL=“https://groups.google.com/forum/#!topic/raphaeljs/8_Rlg3osZJQ”]) and search generally on Google, but nothing seems to come up.
I would be so grateful with some help on this. I have to believe others have run into this problem.
Thanks so much,
Janell