Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    rs2
    rs2 is offline
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Mobile Detect - Disable Parts of Script

    Hi everyone,

    My goal is to detect whether the browser is a mobile device, for which I am using Mobile_Detect.php, and then IF it is NOT mobile, then I want to enable two parts of my script below:



    Code:
    //Remove scrollbars
    div.css({
    overflow : 'hidden'
    });
    AND

    Code:
    //When user move mouse over menu
    div.mousemove(function(e) {
    //As images are loaded ul width increases,
    //so we recalculate it each time
    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
    var left = (e.pageX - div.offset().left) * (ulWidth - divWidth) / divWidth;
    div.scrollLeft(left);
    });
    });
    /*]]>*/
    If it is mobile, then I do NOT want those parts of the script to be called in.


    I got this far:

    Code:
    <?php
    // Include and instantiate the class.
    require_once '../include/Mobile_Detect.php';
    $detect = new Mobile_Detect;
     
    // Any mobile device (phones or tablets).
    if ( $detect->isMobile() ) {
     
       echo "You are Mobile!";
     
    }
    
    else {
        
        echo "You are NOT mobile!";
        
        }
    ?>

    But I cannot figure out how to integrate the two pieces of the puzzle...

    This script is part of one which creates a set of thumbnails at the bottom of the page which scroll automatically when you hover your mouse left or right... a function which does not work with touch devices, so my idea is to re-enable scrolling for touch devices (which I have tested and it works perfectly IF I take out the two pieces of code above, but I want that code in there if it is a computer instead of touch device).

    Any help would be greatly appreciated! I am sure it is something simple for you experts, but it has me stumped.

    Thanks in advance!

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,978
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    You'll either need to use a .php for both an included css and js (or use an altered addtype handler of course) so that PHP can parse it, or you'll need to use two sets of checks, one for a CSS block and the other for the JS block.
    I don't like the latter, so the former is what I'd use. Its a simple matter of rewriting a CSS to be a PHP script:
    PHP Code:
    <?php
    header
    ('Content-type: text/css');
    require_once 
    '../include/Mobile_Detect.php';
    $detect = new Mobile_Detect;

    if (
    $detect->isMobile())
    {
        print 
    "//Remove scrollbars
            div.css({
            overflow : 'hidden'
            });"
    ;
    }
    And similar in the JS:
    PHP Code:
    <?php
    header
    ('Content-type: text/javascript');
    require_once 
    '../include/Mobile_Detect.php';
    $detect = new Mobile_Detect;

    if (
    $detect->isMobile())
    {
        print 
    '//When user move mouse over menu
            div.mousemove(function(e) {
            //As images are loaded ul width increases,
            //so we recalculate it each time
            var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
            var left = (e.pageX - div.offset().left) * (ulWidth - divWidth) / divWidth;
            div.scrollLeft(left);
            });
            });
            /*]]>*/'
    ;
    }
    These now either need to be .php files that are included as such in the HTML imports, OR you need to modify the httpd.conf or .htaccess to addtype for both .css and .js to parse as PHP files.
    The pro is you don't need to use two conditional checks and the css and js themselves detect the mobile-ness, and the con includes that .css and .js are not typically parsed as PHP, nor are .php files typically imported in the HTML. This will lead to a little 'wut' moment when you try to modify something and can't figure out exactly why its like that. No issues if its well documented of course.

    Edit:
    Oh yeah, if you just want to embed it, then just the if blocks for both are what you need. Simply place them where you need them to show up in the HTML source (somewhere in the header in the associated style or script blocks).
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 

  • Users who have thanked Fou-Lu for this post:

    rs2 (09-05-2013)

  • #3
    rs2
    rs2 is offline
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Fou-Lu,

    Thank you so much!! The re-written code makes sense to me, but unfortunately I cannot wrap my head around what you were saying regarding having two files called in as include...

    This whole thing is within a .PHP file already.

    I tried the remove scroll-bars part and it worked great (I had to remove the "header..." line and then it worked).

    However, when I try to add the other part, it all falls apart (the scroll bars come back also)... I believe this is because of something you were trying to explain to me which is going a bit over my head.

    I tried putting in just the second script (scrolling one) and it didnt work even on its own.

    This is what I have which works great:

    Code:
    <?php
    require_once '../include/Mobile_Detect.php';
    $detect = new Mobile_Detect;
    
    if ($detect->isMobile())
    {
        
    }
    
    else
    {
        print "//Remove scrollbars
            div.css({
            overflow : 'hidden'
            });";
    }
    
    ?>

    I tried putting the second script in its own .php file and including it in the main one and it again caused an issue with the scrollbar removal script.

    Again, I'm sure what I am missing is what you were trying to explain to me... is there any way to break it down into even more basic terms for a newbie?

    Thank you!!



    If it helps, here is my full code (it was created by someone else who is no longer around):

    Code:
    <?php
    // CONFIGURABLE SETTINGS FOR THIS SCRIPT
    // HERE WE DEFINE THE DIFFERENT SECTIONS WE HAVE: (FOLDER (URL) NAME, DISPLAY NAME)
    $projectSections = array(
        array("Private","Private Commissions"),
        array("Public","Public Commissions"),
        array("Sanctuary-Gardens", "Sanctuary Gardens"),
        array("Art-Installations", "Art Installations"),
        array("In-Progress", "In Progress")
    );
    $artInstallationsDefaultSection = "Exterior-Sculpture";
    $artInstallationsDefaultProject = "07-Vessels-of-Text";
    
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // FROM HERE ON, STUFF THAT SHOULD STAY THE SAME ///////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    $sliderClickable = "}).slideshow();"; // Default the slideshow to advance upon image click
    require_once('functions.php');
    
    
    // WHERE ARE WE??? /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // Let's get our location!
    
    //$_SERVER['PHP_SELF'] = /Commissions/index.php (this file)
    $rootPath = substr($_SERVER['PHP_SELF'],0,strrpos($_SERVER['PHP_SELF'],"/")) . "/";
    
    $page = $_GET['page']; // Turn the URL into a variable to fetch the correct content (via htaccess)
    if (substr($page, -1) == "/") { $page = substr_replace($page, "", -1); } // Remove the trailing slash if it's there.
    $currentPath = $page; //implode ("/", $subFolders);
    
    $subFolders = explode("/", $page); // Separate out the subfolders for the project we're viewing
    
    // First figure out if we're in xxxxxxx.com/Commissions/ or not.  If so, then show the index page allowing user to select
    // which section he/she wants to go to.
    if ($currentPath == "") {
        $locationType = "Root";
    } else {
        $locationType = checkContents($currentPath);
        // $locationType Will either return "Section", "Project", or "Not Found";
        $fileList = listContents($currentPath);
        // Store the contents of the current path in this array
    }
    
    // @ROOT - If locationType == "Root", we output the main commissions page menu (see HTML below)
    
    
    // @SECTION - CREATE THE BOTTOM PROJECT MENU & CHOOSE A DEFAULT PROJECT TO SHOW /////////////////////////////////////////////
    if ($locationType == "Section") {
        if (strpos($currentPath, "Art-Installations") !== false) {
            $subSectionMenu = makeSubSectionMenu("Art-Installations");
            $nextLocationType = checkContents($currentPath . "/" . $fileList[0]); // Check location type of next immediate item
    		if ($nextLocationType == "Section") {
    			$projectMenu = makeMenu($currentPath . "/" . $artInstallationsDefaultSection);
    			$fileList2 = listContents($currentPath . "/" . $artInstallationsDefaultSection);
    			$projectSliderOutput = makeProjectSlider($currentPath . "/" . $artInstallationsDefaultSection . "/" . $artInstallationsDefaultProject);
    		} else {
    			$projectMenu = makeMenu($currentPath);
    			$projectSliderOutput = makeProjectSlider($currentPath . "/" . $fileList[0]);
    		}
        } else {
            $projectMenu = makeMenu($currentPath);
            $projectSliderOutput = makeProjectSlider($currentPath . "/" . $fileList[0]);
        }
    }
    
    /*
    //// start addition
    if (strpos($currentPath, "FineArts") !== false) {
    $subSectionMenu = makeSubSectionMenu("FineArts");
    $nextLocationType = checkContents($currentPath . "/" . $fileList[0]);
        if ($nextLocationType == "Section") {
            $projectMenu = makeMenu($currentPath . "/" . $fileList[4]);
            $fileList2 = listContents($currentPath . "/" . $fileList[4]);
            $projectSliderOutput = makeProjectSlider($currentPath . "/" . $fileList[4] . "/" . $fileList2[4]);
        } else {
            $projectMenu = makeMenu($currentPath);
            $projectSliderOutput = makeProjectSlider($currentPath . "/" . $fileList[0]);
        }
        } else {
            $projectMenu = makeMenu($currentPath);
            $projectSliderOutput = makeProjectSlider($currentPath . "/" . $fileList[0]);
        }
    //// end addition
    */
    
    
    // @PROJECT - CREATE THE BOTTOM PROJECT MENU & SHOW THE PROJECT ////////////////////////////////////////////////////////////////
    if ($locationType == "Project") {
        $projectSliderOutput = makeProjectSlider($currentPath);
    
        // Now let's get the section folder that the project is in so we can make a menu out of its brother/sister items
        $upOne = $subFolders; array_pop($upOne); $upOne = implode("/", $upOne);
        $projectMenu = makeMenu($upOne);
    
        // If we're in art installations, make the sub section menu
        if (strpos($currentPath, "Art-Installations") !== false) {
        $subSectionMenu = makeSubSectionMenu("Art-Installations");
        }
    }
    
    // @NOT FOUND - CREATE OR REDIRECT TO ERROR 404 PAGE ///////////////////////////////////////////////////////////////////////////
    
    if ($locationType == "Not Found") {
        header("Location: http://www.xxxxxxxxx.com/missing.html");
    }
    
    
    // OUTPUT: LET'S START CREATING THE ACTUAL DOCUMENT NOW ////////////////////////////////////////////////////////////////////////////
    
    require_once($_SERVER['DOCUMENT_ROOT'].'/include/header.php');
    
    // MAIN NAVIGATION FOR COMMISSIONS /////////////////////////////////////////////////////////////////////////////////////////////
    // Setup navigation for different sections
    
    if (!isset($active)) { $active = $subFolders[0]; }
    
    $navigationCommissions = "<ul class=\"commissionsnav\">";
    
    foreach ($projectSections as $link) {
        $navigationCommissions .= "<li><a ";
        if ($active == $link[0]) {
            $navigationCommissions .= "class=\"sub_active\" ";
        }
        $theLink = $link[0];
        $theText = $link[1];
        $navigationCommissions .= "href=\"$rootPath$theLink/\" ALT=\"$theText\">$theText</a>";
        $navigationCommissions .= "</li>";
    }
    
    $navigationCommissions .= "</ul>"; // $navigationCommissions is now set and ready to be output in the HTML below.
    
    ?>
    
    <table width="960" border="0" cellspacing="0" align="center">
        <tr>
            <td height="20" align="center"></td>
        </tr>
        <?php if ($locationType != "Root") { ?>
        <tr>
            <td>
                <?php echo $navigationCommissions; ?>
            </td>
        </tr>
        <tr>
            <td width="960">
                <?php echo $projectSliderOutput; ?>
            </td>
        </tr>
        <tr>
            <?php
            if (isset($subSectionMenu)) {
            echo $subSectionMenu;
            } else {
            echo '<td></td>';
            }
            ?>
        </tr>
        <?php } else { ?>
        <tr>
            <td id="commissions_row" height="290" bgcolor="#1d1d1d">
                <ul>
                    <li>
                        <div class="img-desc">
                            <a href="/Commissions/Private/"><img src="/Commissions/Private/thumb.jpg" alt="Private Commissions" border="0" /><cite>Private Commissions</cite></a>
                        </div>
                    </li>
    
                    <li>
                        <div class="img-desc">
                            <a href="/Commissions/Public/"><img src="/Commissions/Public/thumb.jpg" alt="Public Commissions" border="0" /><cite>Public Commissions</cite></a>
                        </div>
                    </li>
    
                    <li>
                        <div class="img-desc">
                            <a href="/Commissions/Sanctuary-Gardens/"><img src="/Commissions/Sanctuary-Gardens/thumb.jpg" alt="Sanctuary Gardens" border="0" /><cite>Sanctuary Gardens</cite></a>
                        </div>
                    </li>
    
                    <li>
                        <div class="img-desc">
                            <a href="/Commissions/Art-Installations/"><img src="/Commissions/Art-Installations/thumb.jpg" alt="Art Installations" border="0" /><cite>Art Installations</cite></a>
                        </div>
                    </li>
    
                    <li>
                        <div class="img-desc">
                            <a href="/Commissions/In-Progress/"><img src="/Commissions/In-Progress/thumb.jpg" alt="Works in Progress" border="0" /><cite>In Progress</cite></a>
                        </div>
                    </li>
                </ul>
            </td>
        </tr>
        <?php } ?>
        <tr>
            <td bgcolor="#1d1d1d" valign="top"></td>
        </tr>
        <tr>
            <td bgcolor="#000" valign="top">
    
            <?php
            if (strpos($currentPath, "Art-Installations") !== false) {
            ?>
    
            <div class="sc_menu2">
                <ul class="sc_menu2"><?php echo $projectMenu; ?></ul>
            </div>
    
            <?php
            } else if ($locationType != "Root") {
            ?>
    
            <div class="sc_menu">
                <ul class="sc_menu"><?php echo $projectMenu; ?></ul>
            </div>
    
            <?php
            }
            ?>
            </td>
        </tr>
    </table>
    
    
    
    
    <script language="JavaScript">
    $(function() {
    
        $(".slidetabs").tabs(".images > div", {
    
            // enable "cross-fading" effect
            effect: 'fade',
            fadeOutSpeed: "slow",
    
            // start from the beginning after the last tab
            rotate: true
    
            // use the slideshow plugin. It accepts its own configuration
            }).slideshow({clickable:false});
            <?php //echo $sliderClickable; ?>
    });
    //add slideshow({clickable:false}); to disable clicking
    
    
    // This is for the bottom sliding project menu
    /*<![CDATA[*/
    $(function() {
    
    //Get our elements for faster access and set overlay width
    var div = $('div.sc_menu'), ul = $('ul.sc_menu'), ulPadding = 15;
    
    //Get menu width
    var divWidth = div.width();
    
    
    
    <?php
    require_once '../include/Mobile_Detect.php';
    $detect = new Mobile_Detect;
    
    if ($detect->isMobile())
    {
        
    }
    
    else
    {
        print "//Remove scrollbars
            div.css({
            overflow : 'hidden'
            });";
    }
    
    ?>
    
    
    //Find last image container
    var lastLi = ul.find('li:last-child');
    
    
    //When user move mouse over menu
    div.mousemove(function(e) {
    //As images are loaded ul width increases,
    //so we recalculate it each time
    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
    var left = (e.pageX - div.offset().left) * (ulWidth - divWidth) / divWidth;
    div.scrollLeft(left);
    });
    });
    /*]]>*/
    
    
    
    /*<![CDATA[*/
    $(function() {
    
    //Get our elements for faster access and set overlay width
    var div = $('div.sc_menu2'), ul = $('ul.sc_menu2'), ulPadding = 15;
    
    //Get menu width
    var divWidth = div.width();
    
    
    
    
    
    
    //Remove scrollbars
    div.css({
    overflow : 'hidden'
    });  
    
    //Find last image container
    var lastLi = ul.find('li:last-child');
    
    
      
    
    //When user move mouse over menu
    div.mousemove(function(e) {
    //As images are loaded ul width increases,
    //so we recalculate it each time
    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
    var left = (e.pageX - div.offset().left) * (ulWidth - divWidth) / divWidth;
    div.scrollLeft(left);
    });
    });
    /*]]>*/
    
    $(document).ready(function(){
    var arrValues = [".sc_menu2 a", /* "#otherSelector a" */]; //each selector that we want a hover effect on
    $.each( arrValues, function(intIndex, objValue){
    var i = 0; //counter
    var count = $(objValue).size(); //figure out if its a list of images or on its lonesome
    var thumbOver = new Array(); // where we will store the urls for each image
    while(i <= count){
    thumbOver[i] = $(objValue).find("img").eq(i).attr("src"); //Get image url and assign it to 'thumbOver'
    $(objValue).eq(i).css({'background' : 'url(' + thumbOver[i] + ') no-repeat center bottom'}); //create a background image of the hover state behind the image
    i++;
    }
    $(objValue).hover(
    function() { $(this).find("img").stop().fadeTo('normal', 0 , function(){ $(this).hide() }); },  //fade out the image to reveal the background image
    function() { $(this).find("img").stop().fadeTo('normal', 1).show();     } //fade the image back in
    );
    });
    });
    
    </script>
    
    <?
    require_once($_SERVER['DOCUMENT_ROOT'].'/include/footer.php');
    ?>

  • #4
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,978
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    Then its embedded. Find the two sections you need to add them into and add each of the conditional blocks.
    Also, just realized you want for if NOT mobile, so simply add the ! in there.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 

  • #5
    rs2
    rs2 is offline
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    got it to work!

    My inserted code ended up looking like this. I had to put in extra closing brackets if mobile, otherwise if messed up my script:

    Code:
    <?php
    require_once '../include/Mobile_Detect.php';
    $detect = new Mobile_Detect;
    
    if ($detect->isMobile())
    {
        
    }
    
    else
    {
        print "//Remove scrollbars
            div.css({
            overflow : 'hidden'
            });";
    }
    
    ?>
    
    //Find last image container
    var lastLi = ul.find('li:last-child');
    
    
    <?php
    
    if ($detect->isMobile())
    {
    print "});";
    }
    
    else
    {
        print "//When user move mouse over menu
            div.mousemove(function(e) {
            //As images are loaded ul width increases,
            //so we recalculate it each time
            var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
            var left = (e.pageX - div.offset().left) * (ulWidth - divWidth) / divWidth;
            div.scrollLeft(left);
            });
            });
            /*]]>*/";
    }
    
    ?>
    thanks again for your help!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •