ThemeShaper Forums » Thematic

[closed]

Message box when page is accessed by an iPad

(11 posts)
  • Started 12 years ago by chris_s
  • Latest reply from Jonny Janiero
  • This topic is not resolved

  1. chris_s
    Member

    Sorry, see below.

    Posted 12 years ago #

  2. chris_s
    Member

    Since you cannot upload images from an iPad through a webpage, I need to alert users that in order to upload their pictures, they need to visit the page on a computer. So I need a conditional statement that alerts the user via a message box only when viewing from the iPad. Here's what I have so far, it's not much, but I just need some guidance on how to execute this. And also where I should hook it.

    function ipad_alert() {
    if(preg_match('/ipad/i',$_SERVER['HTTP_USER_AGENT'])) {?
    ...link to .js file?
    <?php }
    }
    add_action('init','ipad_alert');

    I also have not found a good message alert box yet so if anyone has any suggestions, fire away. Thanks.

    Posted 12 years ago #

  3. joperron
    Member

    Haven't had to deal with user agent detection in a while, but it looks good to me. Have you tried it?

    Also a good modal box if you are on an ipad or whatever mobile device: http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-dialogs.html

    Posted 12 years ago #

  4. middlesister
    Member

    Why not take advantage of the built in wordpress notices? See some example/instructions here
    http://brassblogs.com/cms-platforms/wordpress/client-instructions-through-the-wordpress-admin

    That strategy is to hook your code to the admin_notices hook, which in turn is hooked to the pages where you want to display your notice. I think you could also hook the whole function to admin_notices and use some kind of conditional within that function to find the right page to display it on, but I haven't tried either so I don't know which method is best.

    Give your div a class of "error" if you want it to be styled like the wordpress standard error box. I think the class "updated" is the normal yellow box and "fade" can also be used if you want that effect. There might be other classes I don't know about but these are the ones I have seen plugins use.

    Posted 12 years ago #

  5. chris_s
    Member

    Does anyone else have any thoughts on this? Should I include the .js file in my header and create a function to fire it if it's from the iPad on that particular page? I'm just not clear on how to write that function... I'm trying to get my head around php more but I'm having a hell of a time.

    Posted 12 years ago #

  6. chris_s
    Member

    Here's a question that I can't seem to get answered. Can a .js file be hooked to an HTML ID that is inline in the wordpress editor? I can't create a template page for this, because I am using a contact 7 form shortcode on the page, and I'm not sure how I would display that in a template. I can't for the life of me get this popup to fire when someone accesses this page from an iPad. I don't know how many more times I can bang my head against the wall...

    Posted 12 years ago #

  7. middlesister
    Member

    I must have misunderstood. Since you spoke about uploading, I thought you wanted to show the alert on the post editing page on the admin side. But it seems that visitors can upload images through a page on your site? Where did you want to hook your file exactly?

    Posted 12 years ago #

  8. chris_s
    Member

    Yes. Using Contact 7, I have a form that visitors can upload an image. However, on the iPad you cannot. So I need the message popup to fire when visitors are accessing it from an iPad. I currently have the HTML markup in the post editor.

    <!-- #dialog is the id of a DIV defined in the code below -->
<a name="modal" href="#dialog"></a>Simple Modal Window
<div id="boxes">

<div id="dialog" class="window"><strong>Testing of Modal Window</strong>|<!-- close button is defined as close class -->
<a class="close" href="#">Close it</a></div>
<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
<div id="mask"></div>

</div>

    And I want to hook the .js file to that HTML.

    Here's a link to the code.

    http://pastebin.com/rLbnWnJ2

    This is what I currently have in my functions.php

    function ipad_alert() {
    if( preg_match('/ipad/i',$_SERVER['HTTP_USER_AGENT']) && is_page(391) ) {
        wp_enqueue_script('ipad_message', get_bloginfo('template_directory') . '/js/ipad_message.js');
    }
}
add_action('wp_enqueue_scripts','ipad_alert');
    Posted 12 years ago #

  9. middlesister
    Member

    Unfortunately I don't know much javascript, so I can't really help with that one. I am a copy/paster in that area myself. :-) But there is no reason you can't attach the alert to whichever html you want - no matter if it comes from contact 7 or elsewhere.

    What I can suggest is to change "get_bloginfo('template_directory')" to "get_bloginfo('stylesheet_directory')". When using child themes, template_directory is referring to the parent theme and stylesheet_directory to the child theme. And to hook your code to something like init or template_redirect.

    function ipad_alert() {
    if( preg_match('/ipad/i',$_SERVER['HTTP_USER_AGENT']) && is_page(391) ) {
        wp_enqueue_script('ipad_message', get_bloginfo('stylesheet_directory') . '/js/ipad_message.js');
    }
}
add_action('init','ipad_alert');
    Posted 12 years ago #

  10. chris_s
    Member

    Alright, well I can't seem to get this to work. I think I need to create a function, that inputs the HTML into that page if it's being accessed from the iPad. Any clues on where to start with this one?

    Posted 12 years ago #

  11. Jonny Janiero
    Member

    i may need to do this for a client job coming up next week. if i work it out, i'll post the results here

    Posted 12 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.