Change background color

Question

Change background color

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm starting to learn how to program, and I've decided to create an App in intel xdk . This App is a book I wrote at a certain time, it's a very simple App , but I wanted to add a button where by clicking it, for easy reading, but I do not know how to do this, who can send me this code would be very grateful.

Obs : background works through intel xdk

Code:

<!DOCTYPE html>
<html>
    <!--
  * Please see the included README.md file for license terms and conditions.
  -->

    <cc>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
        <meta charset="UTF-8">
        <title>Blank App Designer Cordova Web App Project Template</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">

        <!--
  * The "meta viewport" tag (below) helps your app size appropriately to a device's ideal viewport.
  * Note that Windows device viewports work better when initialized using the @viewport CSS rule.
  * For a quick overview of "meta viewport" and @viewport, see this article:
  *   http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag
  * To see how it works, try your app on a real device with and without a "meta viewport" tag.
  * Additional useful references include:
  *   http://www.quirksmode.org/mobile/viewports.html
  *   http://www.quirksmode.org/mobile/metaviewport/devices.html
  *   https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
-->

        <!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->

        <style>
            /* following three (cascaded) are equivalent to above three meta viewport statements */
            /* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html */
            /* see http://dev.w3.org/csswg/css-device-adapt/ */
                @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }          @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
                @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }                   @viewport { user-zoom: fixed ; min-zoom: 100% ; }
                /*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }   @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/
        </style>

        <link rel="stylesheet" href="css/app.css">
        <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">

        <!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
        <!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work below -->
        <!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script>--><!--RecommendedlocationforyourJavaScriptlibraries--><!--Theselibraryreferences(below)arejustexamplestogiveyouthegeneralidea...--><!--<scriptsrc="lib/mc/hammer.js"></script> -->
        <!-- <script src="lib/ft/fastclick.js"></script> -->

        <!--
  * cordova.js is a phantom lib for "Cordova HTML5 web app," it does nothing in a "Standard HTML5 web app"
  * Seeing a "Failed to load resource: net::ERR_FILE_NOT_FOUND" message caused by this "cordova.js" script?
  * The cordova.js script is required if you convert your "Standard HTML5" project into a "Cordova" project.
  * You can safely ignore the error or comment out this line if you will not be developing a Cordova app.
-->
        <script src="cordova.js" id="xdkJScordova_"></script>

        <script src="js/app.js"></script>
        <!-- for your event code, see README and file comments for details -->
        <script src="js/init-app.js"></script>
        <!-- for your init code, see README and file comments for details -->
        <script src="xdk/init-dev.js"></script>
        <!-- normalizes device and document ready events, see file for details -->
        <script type="application/javascript" src="lib/jquery.min.js"></script>
        <script type="application/javascript" src="marginal/marginal-position.min.js"></script>
    </head>

    <body>
        <!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
        <!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above -->
        <!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script>--><divclass="upage" id="mainpage">
            <div class="upage-outer">
                <div class="uib-header header-bg container-group inner-element uib_w_1" data-uib="layout/header" data-ver="0">
                    <h2></h2>
                    <div class="widget-container wrapping-col single-centered">
                        <button class="btn widget uib_w_3 d-margins btn-sm btn-primary" data-uib="twitter%20bootstrap/button" data-ver="1" id="btn_livro"><i class="glyphicon glyphicon-book" data-position="icon only"></i>
                        </button>
                    </div>
                    <div class="widget-container content-area horiz-area wrapping-col left">
                        <button class="btn widget uib_w_2 d-margins btn-sm btn-primary" data-uib="twitter%20bootstrap/button" data-ver="1" id="btn_menu"><i class="glyphicon glyphicon-list" data-position="icon only"></i>
                        </button>
                    </div>
                    <div class="widget-container content-area horiz-area wrapping-col right">
                        <button class="btn widget uib_w_4 d-margins btn-sm btn-primary" data-uib="twitter%20bootstrap/button" data-ver="1" id="btn_config"><i class="glyphicon glyphicon-adjust" data-position="icon only"></i>
                        </button>
                    </div>
                </div>
                <div class="upage-content ac0 content-area vertical-col left">
                    <div class="grid grid-pad urow uib_row_1 row-height-1" data-uib="layout/row" data-ver="0">
                        <div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0">
                            <div class="widget-container content-area vertical-col">
                                <div class="tarea widget uib_w_5 d-margins" data-uib="media/text" data-ver="0" name="uib_w_5">
                                    <div class="widget-container left-receptacle"></div>
                                    <div class="widget-container right-receptacle"></div>
                                    <div class="text-container">
                                        <h1>Texto Teste capítulo&nbsp;</h1>

                                        <p>Texto Teste capítulo&nbsp;Texto Teste capítulo&nbsp;Texto Teste capítulo&nbsp;Texto Teste capítulo&nbsp;Texto Teste capítulo&nbsp;Texto Teste capítulo&nbsp;Texto Teste capítulo&nbsp;Texto Teste capítulo&nbsp;Texto
                                            Teste capítulo&nbsp;Texto Teste capítulo&nbsp;</p>
                                    </div>
                                </div>
                                <span class="uib_shim"></span>
                            </div>
                        </div>
                        <span class="uib_shim"></span>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>

I could not include the code in the project anyone who can help me?

html5 background android-styles

asked by anonymous 22.06.2016 / 22:44

2 answers

0

I think you want something like this:

HTML

   <label for="check" class="btn btn-default">Mudar cor do fundo</label>
<input type="checkbox" id="check" />
<div></div>

CSS

div{
    width: 100%;
    height: 100%;
    background: #ff0000;
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
}
label.btn {
    position: absolute;
    top:15px;
    left: 15px;
    z-index:2;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"]:checked + div{
    background: #00ff00;
}
label + input[type="checkbox"]:checked{
    background: #000;
}

Code working here

22.06.2016 / 22:52

Update on two tables with the same function Function to call other and popular inputs

score 0 · Accepted Answer

Create a js file and include in your application to add the following code

function change_bg(){
    if($("#mainpage").css("background-color") == "rgb(0, 191, 255)"){
    $("#mainpage").css({"background":"none"})
  }else{
    $("#mainpage").css({"background":"rgb(0, 191, 255)"});
  }
}

remember to put jquery if you do not already have it in your code in html put this button should work

 <button onclick="change_bg()">Mudar Fundo</button>

alias to where this p rgb value is the color you want. good luck

You can see the code working right here