CSS3 Transitions: replace them entirely on mobile?

Question

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.

Solution

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/

Comments

[digitxp]

As a general note, 0 antivirus = bad, 1 antivirus = good, 2+ antiviruses = really bad.

[r0ca]

thanks digitxp I will be removing the extra Avs, hope it will help in fixing my issue

[Jan Henckens]

Could you start a command prompt, run ipconfig /all and post the output?

[rgthree]

href="javascript:;" doesn't do anything. What are you trying to link to?

[user3491271]

In my code when that link is clicked it runs a script associated with the ID.

[Syed Shoaib Abidi]

Try removing href and placing onclick in your <a> tag and instead of javascript: , call some function.

[user3491271]

These codes work fine separately, but my problem is implementing one or the other depending on @media screen size.

[r0ca]

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]

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]

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]

Are you going to follow my directions above?

[r0ca]

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]

I have tried what you suggested but still no luck :(

[Moab]

In device manager, expand Network, highlight the wireless adapter, right click and choose uninstall, reboot when done.

[r0ca]

Do I have to download new adapter ? how would I know do one I need ? thanks

[r0ca]

I tied all not working :( ifpconfig/renew does not work also and the ping still give 1231

[r0ca]

I looked in my registry I hav eno winsock I have only winsock2 any idea how to install winsock

[MaQleod]

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]

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

@r0ca = Just reinstall Windows.