Support for touch devices

[Black Mamba]

Some weird stuff is going on.
I was trying to post on the other thread, I’d click ‘submit’ but the post comment would never show up. Now it says I’ve posted a few minutes ago, but there’s nothing there. The last post is not mine… weird.

Let’s see if this one sticks.

Answering to Soronbe’s post

You might want to read this:

https://css-tricks.com/forums/topic/conditional-css-for-touch-screen-devices/#post-178475

I read it, but I’m not sure I get it…

This is what I was trying to do.

It would solve the hover effect. Wouldn’t it?

I’d test it, but I currently don’t have a touch device with me.

[nixnerd]

OMG! @TheDoc changed his photo. No more football ay?

[nixnerd]

Same here dude. I see we both went with a Unix beard and side-part. I like your style ;)

…

Oh, sorry. Carry on.

[Paulie_D]

Some weird stuff is going on.
I was trying to post on the other thread, I’d click ‘submit’ but the post comment would never show up. Now it says I’ve posted a few minutes ago, but there’s nothing there.

It was getting picked up by CSS-Tricks’s filters for ESS EEE OHH reasons and put into ‘Pending’.

Frankly, I don’t know why but if you try reposting many times the same link would be repeated over and over in several posts and it might just think you were spamming.

Perhaps the filter is a little sensitive but better safe than sorry.

[Black Mamba]

@Soronbe

You’ve seen from that page how:

a) You can drag that box around.
b) Those black bars fade in/out as you hover over the image.

I’m simply trying to find a workaround to touch-based interfaces.

Basically translating hover and onmousedown to touch events.
I’m not saying it’s this simple, but you get the point, right?

It could be something like:

• Tap the box one time to make the black bars fade in, and they stay on until you tap a second time. So, with one tap they fade in, with a 2nd tap they fade out, with a 3rd tap they fade in again, and so on…
  http://i.imgur.com/zcanyNA.jpg

• Place a finger on a box and move it in the desired direction without lifting it from the screen to drag it.
  http://i.imgur.com/w7zQO9y.jpg

I think everything else like links, that readmore/readless toggle and the slider you’ve helped me with, should work just fine.

Thanks.

[Black Mamba]

@Paulie_D

I can see how that could be the case when I tried to post it for the 2nd, 3rd, 4th, …. time, but the first time I tried to post it there had to be some other reason…

Anyway, it was definably the link, so if there’s a next time, I’ll know…

Thanks for your feedback.

[Black Mamba]

Thank you so much!
Unfortunately I don’t have one either at the moment.

[Black Mamba]

There’s another kind of box (with the image slider – you didn’t edit it ’cause it wasn’t on that page) that’s being controlled by the following javascript:

$(function () {
    $("#panel8").hover(function () {
        $(this).children("#title8, .nav").fadeToggle(1000);
    });
});

From what you did to the other one I came up with this:

$(function () {
    $("#panel8").hover(function () {
        $(this).children("#title8, .nav").fadeToggle(1000);
    });

    $("#panel8").on('touchstart',function () {
        $(this).children("#title8, .nav").fadeToggle(1000);
    });
});

Did I get it right?

I also noticed you added ‘touchstart’ to the read-more/read-less “button”? Do I need to do the same to the slider javascript?

It looks like this at the moment:

$(document).ready(function(){
    $('.pictures').first().addClass('current').css({left: 0});

    $('#next').click(function(){
        var old = $('.current').removeClass('current');  
        if ( old.is(':last-child')) {
            old.animate({left: "-100%"});
            $('.pictures').first().css({left: "100%"}).addClass('current').animate({left: 0});
        }else{
           old.animate({left: "-100%"});
           old.next().css({left: "100%"}).addClass('current').animate({left: 0});
        }        
    });

    $('#previous').click(function(){
        var old = $('.current').removeClass('current');   
        if ( old.is(':first-child')) {
            old.animate({left: "100%"});
            $('.pictures').last().css({left: "-100%"}).addClass('current').animate({left: 0});
        }else{
            old.animate({left: "100%"});
            old.prev().css({left: "-100%"}).addClass('current').animate({left: 0});
        }
    });
});

Thanks.

[Black Mamba]

I haven’t had the chance yet.
I’m making these changes assuming it does.
If it doesn’t I’ll revert back to the previous state.
I’ve got plenty of backups, so that’s no problem.
In the meantime I’m at least doing something… :)

[Black Mamba]

I’m using Walter Zorn’s javascript because I saw it being used, along with the script that sets objects to a random position on load, somewhere else. I was looking for a combo like that so I decided to use them…

I’ve tried jQuery’s draggable functionality but it stopped working when I linked the “randomizer” and since I had the other method working I simply gave up…

I’m open to go back to the jQuery’s solution if we can get the “randomizer” (doesn’t have to be that exact script) to work.

In fact, I think that could be the best (and easiest) solution. The issue is with the script to sets objects to a random position on load.

What do you think?

[Black Mamba]

Any idea?

[Black Mamba]

The js code that sets objects to a random position on load?

[Black Mamba]

Here it is.

I removed Walter Zorn’s javascript and implemented the jQuery solution.
The draggable functionality works… what no longer works is the script that sets objects to a random position on load.

Thanks a lot for your help!

[Soronbe]

function setRandomPos(elements,x,dx){
    elements.each(function(){
        fixLeft=(Math.floor(Math.random()*x)*10) + dx;
        fixTop = (Math.floor(Math.random()*30)*10) + 170;
        $(this).offset({
            left: fixLeft,
            top: fixTop
        });     
    });
}

Should be your entire setRandomPos.js file. Then do call setRandomPos($(".panels"),80,40);. I did not make the function extend the jQuery object, but if you want me to I can.
This would allow $(".panels").setRandomPos(80,40).

[Black Mamba]

It’s working!

What do you mean by “did not make the function extend the jQuery object”?

The purpose of switching from Walter Zorn’s javascript to jQuery’s draggable functionality was to make the whole thing a bit more touch friendly… how do we acomplish that?

Now that I’m using jQuery’s solution will something like this work? It can’t be this simple, can it?

Thanks!

[Author]

Posts