Archive for the ‘jQuery’ Category

Context/Tools Menus

December 7, 2011 1 comment

I am continuing to work on my web interface to ISPF and one of the things I wanted to do was add popup tool menus to things like data set and PDS member lists. I found a couple of nice examples on the web but they either broke my web page or I was just not happy with them. So I tried to create my own. Fail! A lot of work and it really was not what I wanted. I guess I ‘could’ write a jQuery plugin to do it but in the end I found this, somewhat old but perfectly adequate example:

The only problem I had was that it only worked for a ‘right click’ and I wanted it to work for a left click. After starting at it for hours I realized that it it is ‘this’ piece of code (the bind in fact) that controls the popup:

    $(this).bind('contextmenu', function(e) {
      // Check if onContextMenu() defined
      var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
      if (bShowContext) display(index, this, e, options);
      return false;

In fact, it is the ‘contexmenu’ event that controls it. So I changed that line to read like this:

    $(this).bind('contextmenu click', function(e) {

And voila, I get the popup menu with both a left and a right click:


Now on to making the tools actually do something….

Categories: Coding, jQuery

ISPF on the web – Version 2

September 15, 2011 2 comments

Just a quick update, more details and info to follow soon.

My initial iteration of ISPF on the web required the user to still log on to TSO/ISPF on a 3270 and then start the web server inside their TSO/ISPF session before accessing it via a browser.

Whilst this was an interesting exercise and learning experience, obviously it’s about as useful as a chocolate fireguard in practice.

Hence the move to version 2!

The UI experience in the browser is the same but the back end is significantly different, running inside the IBM stand alone HTTP web server.

I am still developing this in my spare time, but as soon as I get a demo up and running I shall be adding more information so stay tuned.

Desktop vs Touch

December 15, 2010 2 comments

For my slider control I would ‘like’ it to work on both the desktop and touch environment, if only because it’s much easier to debug the script on the desktop than on the ipod!

I have been trying to figure out how to standardize the mouse and touch events between the desktop and the touch device but after a lot of too-ing and fro-ing I have decided it will be much easier NOT to do that and have, sad to say, two blocks of code, one for the the desktop and one for the ipod. As much as I hate this the differences are just too much for my feeble javascript skills to sort out so this seems the easiest approach. I am not quite sure how I will test the touch part on the desktop yet but I’ll cross that bridge when I come to it although I suspect some ‘test only ‘ code will be a big part of it!

Categories: Coding, iPhone, JQTouch, jQuery

CSS and Mobile Safari…

December 8, 2010 Leave a comment

I continued on my jQuery slider plugin for the iPhone/iPod touch. Having gotten the horizontal slider working OK (at least as much as I have done so far) I thought it might be good idea to get the vertical one working to the same extent. It actually worked pretty well except that it was upside down on the web page. The slider handle and range indicator that follows along behind it grew DOWN from the top of the slider instead of up from the bottom as the value I was setting it to increased.

In the end I found that I had specified ‘top’ in the CSS and if you tie the top to something, the only way it can grow is downwards. That only took me about two hours to find! Talk about frustrating.

Then I wanted to make it so that if you click or touch on the slider bar, the handle would jump to that location and report an appropriate value back to the hosting app. I got all that working fine on the desktop in Safari then moved the code to my server and tried it on the Pod Touch and lo, it did not work. WTF!

Turns out (I have read about this ages ago, I’d just forgotten about it of course) that whilst on a desktop the click location is defined by event.pageX and event.pageY, on a mobile device it is defined by event.touches[n].pageX and pageY because you can of course have multiple touches going on (n is an index into the array of touches). So I had to add a call to the code I used to test if this was a touch device or not when setting up the events to bind on and grab pageX and Y from the appropriate location.

Once I did that, it worked fine.

So, next step is to do the drag stuff for the slider handle itself and I should be good to go!

Here’s a couple of sliders on my test page:

The gaudy colors on the slider are just to make it easier to see the elements for testing, plus I have absolutely no artistic ability either!

Categories: Coding, iPhone, jQuery

jQTouch/jQuery plugin fun

December 6, 2010 Leave a comment

After a couple of days of pissing around trying to create a pugin for JQTouch I gave up. It’s not that the plugin itself is hard but I found it impossible to get it to play nicely with multiple elements on a page. As soon as I tried to create TWO slider elements with different settings things got all screwed up and no matter how much I messed with the code I could not get it to play nice with JQTouch in there.

Then I thought, hang on! Why am I bothering to create q JQTouch plugin, I don’t actually need to interact with JQTouch itself, just the DOM elements on the page and I can do that with jQuery. So I have ended up creating a jQuery plugin that will creates nice sliders on an iPhone/iPod touch that work with touch events instead of just the mouse events like the jQuery UI slider widget. It also won’t need all the jQuery UI framework stuff like mouse and widget to actually work.

Well it will when I am done. Having gotten it working initially I ran into the same problem I had with JQTouch when I tried to create multiple sliders on a page.

After a couple more  of days of reading and experimentation I have finally gotten my framework plugin to actually work correctly now so I just need to port in the other stuff I did for the slider itself which should not be too hard.

Then all I need to do is do the mouse/touch capture stuff and make the slider move. Compared to the hurdles I have just cleared, that should be a piece of cake (ha ha!).

Categories: Coding, JQTouch, jQuery

Reinventing the wheel…

November 30, 2010 Leave a comment

Having spent ages making my own Windows Media Payer OCX, I have just discovered that Microsoft already created one!

On the plus side I learned lot of stuff AND mine does exactly what I want it to do, so it was not all wasted time.


I’ve also decided to try and create my own slider control that will work with JQTouch instead of trying to force the jQuery UI one to work in a touch environment which it ‘almost’ does but not quite. All I have to do is convert the JQuery UI one to accept touch events instead of mouse events. Should be dead easy.

Yeah, right…

Categories: Coding, JQTouch, jQuery, VB6

Well that sucks…

November 21, 2010 Leave a comment

I’ve just spent ages building a web based iPhone UI using jQuery and jQTouch. One of the elements I wanted to use was a slider control and JQuery has a really nice one. I got everything working, got it talking to my back end and updating the back end in real time, pretty cool.

Trouble is I’ve been doing all my testing on Safari on my desktop. Tried it on the iPod touch and you cannot drag the slider control. I can touch the control and the slider jumps to where I touched which is great for coarse control but without the ability to drag the slider itself I have no fine control.

I don’t really want to use a couple of buttons to move the slider, seems a bit daft. I may have to use them though, remove the slider and just display the setting as a value. Not as good visually but it’ll do if I have to go that route.

Not in a happy place right now!

Categories: Coding, iPhone, JQTouch, jQuery Tags:

Interesting little jQuery ajax POST bug with Chrome

April 29, 2010 Leave a comment

After adding support for POST requests to my back end, of course I wanted to make the front end use it. so I switched the ajax requests to use POST instead of get. Worked fine in Firefox so I was happy. Tried it in Google Chrome this morning and I found I was not getting any data with the post request.

After some digging around the jQuery forums I found that adding data:null to the ajax setup helped things along. Something to do with jQuery using an uninitialized variable or something. Whatever, it fixed it!

So now the ajax setup in my index page’s ready function looks like this:

   cache: false,    
   data : null      
Categories: Coding, jQuery Tags: , , , ,

Well that was almost too easy…

April 29, 2010 Leave a comment

My little RYO REXX based web server only handled HTTP GET request which causes problems when browsers cache data to requests that are really dynamic, so I’ve been after changing it to handle POST requests as well for a while but I was concerned about the effort it would take to do it.

Turned out to be about ten lines of additional code.

Of course, the real knack is knowing WHICH ten lines to code!

Fixed my IE issues…

April 28, 2010 Leave a comment

Found an extra comma in the parameter lists I was passing to the dialog function for the confirm delete buttons. Removed that and that got rid of the javascript error.

By adding a DOCTYPE entry to my index page I got the toolbox to position itself correctly.

And by changing the DIVs I was using for the link items in the data set and member lists to SPANs, I was able to remove the forced inline display option I had had to add to make things display on a single line. Seems that DIVs inside anchor (A) tags is not W3C valid anyway. Live and learn!

Gotta love jQuery though for the ease it brings to developing for cross browser platforms. I’ve only ever done a cross browser (IE and FF) application using native javascript once and it was a nightmare to get everything to work correctly.