CSS3 Transitions: replace them entirely on mobile?

54

You might be better off using modernizer for this.

if ( Modernizr.touch ) {
    $('.top_half,.bottom_half,.hover_info').hide();
    $('.hover_block img').click(function() {
         alert('I was clicked');
    }).css('cursor','pointer');
}

Here is a fiddle to demonstrate the functionality. http://jsfiddle.net/LHLHG/

Share:
54
user3491271
Author by

user3491271

Updated on November 26, 2022

Comments

  • user3491271
    user3491271 12 months

    I am building a responsive web site and would like to use this effect for desktop versions only (where the screen is big enough).

    The code looks like this:

            <div class="block_holder">
                <div class="hover_block block_4">
                    <img src="images/thumbnail.png" />
                    <div class="top_half">Top Div that slides down on hover</div>
                    <div class="bottom_half">Bottom Div that slides up on hover</div> 
                    <div class="hover_info">Caption text content</div>
                </div>
            </div>
    

    Transitions take place in these classes: .block_4 .top_half .block_4 .bottom_half and all content in .hover_info to produce the hover effect.

    For mobile, I would just like the photo to just be clickable, without any transitions since there is no hover. Is there a way to replace the entire block of code with something like this:

                <p>
                    <a id="fancybox-manual-b" href="javascript:;" class="link"><img src="images/patterns_thumb.png" alt="pattern" class="portfolio"/></a>
                    Patterns made in Adobe Illustrator
                </p>
    

    I've tried setting .top_half .bottom_half and .hover_info to "display: none;" in the @media section designated for mobile and tablet and then making the img a link, but the image is not clickable using the first code provided. Why is this?

    I apologize if there is an obvious solution for this, I have not found or thought of any.

    • digitxp
      digitxp almost 13 years
      As a general note, 0 antivirus = bad, 1 antivirus = good, 2+ antiviruses = really bad.
    • r0ca
      r0ca almost 13 years
      thanks digitxp I will be removing the extra Avs, hope it will help in fixing my issue
    • Jan Henckens
      Jan Henckens almost 12 years
      Could you start a command prompt, run ipconfig /all and post the output?
    • rgthree
      rgthree over 9 years
      href="javascript:;" doesn't do anything. What are you trying to link to?
    • user3491271
      user3491271 over 9 years
      In my code when that link is clicked it runs a script associated with the ID.
    • Syed Shoaib Abidi
      Syed Shoaib Abidi over 9 years
      Try removing href and placing onclick in your <a> tag and instead of javascript: , call some function.
    • user3491271
      user3491271 over 9 years
      These codes work fine separately, but my problem is implementing one or the other depending on @media screen size.
  • r0ca
    r0ca almost 13 years
    Hello Moab I will try your suggestions of resetting IE and flushing the DNS cash, I want you to know that other computers at home are working fine so the problem is within my laptop, it has windows vista. Sometimes it says check your security setting for connecting to wireless network. I also don’t see my wireless connection when I go to network sharing center. I hope this information can help you in giving some recipe. when i coonect it tells me I am connected with limited access, I have been installing these AVG, Avast, Then norton as I had some malware,now I will remove them I guess Thanks
  • Moab
    Moab almost 13 years
    You cannot have more then 1 AV installed at a time, this could be the problem. Follow my suggestions above to properly clean the PC of infections. Some malware is really malicious and can cause enough damage that you may consider a clean install.
  • r0ca
    r0ca almost 13 years
    I forget to tell you about one thing i had removed winsock and winsock2 from registry then I reinstalled TCP/IP on network connection when I was trying to fix that malware before, I will remove all those AVs , you think that my laptop is useless now, is there chance to fix it thanks
  • Moab
    Moab almost 13 years
    Are you going to follow my directions above?
  • r0ca
    r0ca almost 13 years
    sure, I will follow your directions, I will get home in two hours if you have any other suggestions. I will take notes, thanks
  • r0ca
    r0ca almost 13 years
    I have tried what you suggested but still no luck :(
  • Moab
    Moab almost 13 years
    In device manager, expand Network, highlight the wireless adapter, right click and choose uninstall, reboot when done.
  • r0ca
    r0ca almost 13 years
    Do I have to download new adapter ? how would I know do one I need ? thanks
  • r0ca
    r0ca almost 13 years
    I tied all not working :( ifpconfig/renew does not work also and the ping still give 1231
  • r0ca
    r0ca almost 13 years
    I looked in my registry I hav eno winsock I have only winsock2 any idea how to install winsock
  • MaQleod
    MaQleod almost 12 years
    You don't need to disable adapters you aren't currently using. Also, you can set the preference of order for network adapters when multiple are connected: windowsreference.com/windows-vista/…
  • White Phoenix
    White Phoenix almost 12 years
    @MaQleod - Yeah, I'm aware of that. However, I think taking an extra step to make absolutely sure that Windows is not using extra adapters (despite the order that is dictated through that dialog box) is a good idea regardless.
  • Ramhound
    Ramhound almost 12 years
    @r0ca = Just reinstall Windows.