CODEWITHSUNDEEP
cordova
Mohamed Fekry
Mohamed Fekry

Reputation: 11

windows phone with phonegap problems

I have phonegap application that works under windows phone 7 but i have 2 problems.

  1. the wheel doesn`t rotate.

    See Image Here

  2. when i click at any button, there is a gray square appear like this.

    See Image Here

Could you help me with this problems?

This is the code:

<head>
 <style type="text/css">
    .BBImagesStyle
    {
        height: 85px;
        width: 85px;
    }
 </style>
</head>
<div id="WheelDiv" style="display: block; width: 100%; height: 100%; background-color: transparent; padding: 0; margin: 0;">

 <script language="javascript" type="text/javascript">
     $(document).ready(function () {

        var ua = navigator.userAgent; //Grab USER AGENT STRING
        var checker = { webOS: ua.match(/webOS/), iphone: ua.match(/iPhone/), ipad: ua.match(/iPad/), ipod: ua.match(/iPod/), blackberry: ua.match(/BlackBerry/), android: ua.match(/Android/), symbian: ua.match(/Symbian/) };

        if (checker.blackberry) {
            setTimeout(' BB();', 500);
        } else {
            var HalfscreenHeight = $(window).height();

            $("#WheelContentDiv").height(HalfscreenHeight);
            if ($(window).height() <= 620) {

                $("#WheelContentDiv").CloudCarousel(
            {
                xPos: 165,
                yPos: 75,
                yRadius: 100,
                bringToFront: false,
                minScale: 0.5,
                clickActionOnLowerIconOnly: false

            });

                var HalfscreenHeightQua = "";
                if ($(window).height() < 600) {
                    HalfscreenHeightQua = $(window).height() * 0.05;
                } else {
                    HalfscreenHeightQua = $(window).height() * 0.15;
                }


                $("#WheelContentDiv").css("padding-top", HalfscreenHeightQua + "px");
                $("#Taw3DLogo").css("padding-top", "100px");

                document.getElementById("Wheel_MedicalServices").src = "../TawuniyaMobileWeb/Images/Wheel/Wheel_MedicalServices.png";
                document.getElementById("Wheel_Tracking").src = "../TawuniyaMobileWeb/Images/Wheel/Wheel_Tracking.png";
                document.getElementById("Wheel_ContactUS").src = "../TawuniyaMobileWeb/Images/Wheel/Wheel_ContactUs.png";
                document.getElementById("Wheel_Products").src = "../TawuniyaMobileWeb/Images/Wheel/Wheel_Products.png";
                document.getElementById("Wheel_Offers").src = "../TawuniyaMobileWeb/Images/Wheel/Wheel_Offers.png";
                document.getElementById("Wheel_Locations").src = "../TawuniyaMobileWeb/Images/Wheel/Wheel_Locations.png";



            } else {

                var h = $(window).height() / 5;
                var w = $(window).width() / 2.5;
                $("#middleLogoImg").css("width", w / 2 + "px");
                $("#Taw3DLogo").css("padding-left", w / 3.2 + "px");
                $("#WheelContentDiv").CloudCarousel(
            {
                xPos: 165,
                yPos: 65,
                yRadius: h,
                xRadius: w,
                bringToFront: false,
                minScale: 0.5,
                clickActionOnLowerIconOnly: false

            });

                var HalfscreenHeight_ = $(window).height() * 0.2;
                $("#WheelContentDiv").css("padding-top", HalfscreenHeight_ + "px");

                document.getElementById("Wheel_MedicalServices").src = "Images/Wheel/[email protected]";
                document.getElementById("Wheel_Tracking").src = "Images/Wheel/[email protected]";
                document.getElementById("Wheel_ContactUS").src = "Images/Wheel/[email protected]";
                document.getElementById("Wheel_Products").src = "Images/Wheel/[email protected]";
                document.getElementById("Wheel_Offers").src = "Images/Wheel/[email protected]";
                document.getElementById("Wheel_Locations").src = "Images/Wheel/[email protected]";

                $("#Taw3DLogo").css("padding-top", "180px");
                $("#Wheel_Tawuniya").css("overflow", "hidden");
                $("#WheelContentDiv").css("overflow", "");

            }
            DisableWindowScroll();
            $("#ALLPageContent").css("background-image", "url(../TawuniyaMobileWeb/Images/HomeScreenBackground.png)");
            var leftno = Math.max(0, (($(window).width() - $("#WheelContentDiv").outerWidth()) / 2) + $(window).scrollLeft()) - 20 + "px";
            $("#WheelContentDiv").css("left", leftno);
            //  alert(450);
        }
        try {
            var isWindowsPhone = /windows phone/i.test(navigator.userAgent.toLowerCase());
            if (isWindowsPhone) {
                window.external.notify("noScroll");
                setTimeout('WP2();', 1500);
            }
        } catch (e) { alert(e); }

        ModifyHeaderOnBlur(false);
        try {
            if (navigator.geolocation) {
                //navigator.geolocation.getCurrentPosition(LocationsSuccess, LocationError);
            } else {
                alert('geolocation not supported');
            }
        } catch (e) {

        }
    });
</script>
<div id="WheelContentDiv" style="width: 330px; background-color: transparent; position: fixed;">
    <div id="Taw3DLogo" style="z-index: 1000000; padding-left: 110px;">
        <img id="middleLogoImg" src="../ePortal5Core/Libs/jQuery/Ext/professorcloud_carousel/Taw3DLogo.png"
            width="110" style="visibility: hidden;" />
    </div>
    <center>
        <img style="visibility: hidden;" id="Wheel_MedicalServices" class="cloudcarousel"
            alt="" onclick="MoveToPortalCustomize('Login_Tawuniya', this);OpenMedicalServiceWidgets='True';DisableWindowScroll();Check_remember();">
        <img style="visibility: hidden;" id="Wheel_Tracking" class="cloudcarousel" alt=""
            onclick="MoveToPortalCustomize('Tracking_PreLogin', this);">
        <img style="visibility: hidden;" id="Wheel_ContactUS" class="cloudcarousel" alt=""
            onclick="MoveToPortalCustomize('ContactUS_PreLogin', this);">
        <img style="visibility: hidden;" id="Wheel_Products" class="cloudcarousel" alt=""
            onclick="MoveToPortalCustomize('Products', this);">
        <img style="visibility: hidden;" id="Wheel_Offers" class="cloudcarousel" alt="" onclick="MoveToPortalCustomize('Promotions', this);">
        <img style="visibility: hidden;" id="Wheel_Locations" class="cloudcarousel" alt=""
            onclick="MoveToPortalCustomize('Locations', this);">
    </center>
</div>
<div id="WheelContentDivBB" style="width: 100%; background-color: transparent; height: 100%;
    display: none;">
    <center>
        <table id="BBWheelTable" style="z-index: 1000000; width: 100%; height: 100%; margin-left: 0px;">
            <tr>
                <td>
                    <img id="Wheel_MedicalServicesBB" class="BBImagesStyle" src="../TawuniyaMobileWeb/Images/Wheel_MedicalServices.png"
                        alt="" onclick="MoveToPortalCustomize('Login_Tawuniya', this);OpenMedicalServiceWidgets='True';DisableWindowScroll();Check_remember();">
                </td>
                <td>
                    <img id="Wheel_TrackingBB" class="BBImagesStyle" src="../TawuniyaMobileWeb/Images/Wheel_Tracking.png"
                        alt="" onclick="MoveToPortalCustomize('Tracking_PreLogin', this);">
                </td>
                <td>
                    <img id="Wheel_ContactUSBB" class="BBImagesStyle" src="../TawuniyaMobileWeb/Images/Wheel_ContactUs.png"
                        alt="" onclick="MoveToPortalCustomize('ContactUS_PreLogin', this);">
                </td>
            </tr>
            <tr>
                <td>
                    <img id="Wheel_ProductsBB" class="BBImagesStyle" src="../TawuniyaMobileWeb/Images/Wheel_Products.png"
                        alt="" onclick="MoveToPortalCustomize('Products', this);">
                </td>
                <td>
                    <img id="Wheel_OffersBB" class="BBImagesStyle" src="../TawuniyaMobileWeb/Images/Wheel_Offers.png"
                        alt="" onclick="MoveToPortalCustomize('Promotions', this);">
                </td>
                <td>
                    <img id="Wheel_LocationsBB" class="BBImagesStyle" src="../TawuniyaMobileWeb/Images/Wheel_Locations.png"
                        alt="" onclick="MoveToPortalCustomize('Locations', this);">
                </td>
            </tr>
        </table>
    </center>
</div>

Upvotes: 1

Views: 644

Answers (1)

Sergei Grebnov
Sergei Grebnov

Reputation: 2623

For #1

I'm not sure about carousel implementation, but if it is based on mousemove (not supported out of the box by WP7 browser) than make sure you are using latest Cordova for WP 7.5 version which adds some special polyfill for mousemove event. You can also add the following code to index.html header file to make sure there are no js errors

<script type="text/javascript">
    window.console = {
        log: function (str) { window.external.Notify(str); }
    };

    // output errors to console log
    window.onerror = function (e) {
        console.log("window.onerror ::" + JSON.stringify(e));
    };

    console.log("Installed console !");
</script>

For #2

Windows Phone 7 Browser - Turn off the gray shading when links are clicked

https://github.com/triceam/WinPhone-NoGrayBox/

Upvotes: 1

Related Questions