Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Support for touch devices

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #178862
    Black Mamba
    Participant

    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.

    #178942
    nixnerd
    Participant

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

    #178944
    nixnerd
    Participant

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

    Oh, sorry. Carry on.

    #178992
    Paulie_D
    Member

    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.

    #179011
    Black Mamba
    Participant

    @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.

    #179015
    Black Mamba
    Participant

    @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.

    #179084
    Black Mamba
    Participant

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

    #179215
    Black Mamba
    Participant

    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.

    #179220
    Black Mamba
    Participant

    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… :)

    #179498
    Black Mamba
    Participant

    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?

    #180904
    Black Mamba
    Participant

    Any idea?

    #181007
    Black Mamba
    Participant

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

    #181499
    Black Mamba
    Participant

    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!

    #181583
    Soronbe
    Participant
    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).

    #181586
    Black Mamba
    Participant

    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!

Viewing 15 posts - 1 through 15 (of 25 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.