Change background color

Asked

Viewed 2,009 times

0

I’m starting to learn how to program, and I decided to create a App in intel xdk. That one App is a book that I wrote at a certain time, is a App very simple, but I wanted to add a button where when clicking on it, the color of the background to facilitate reading, but I do not know how to do this, who can send me this code would be very grateful.

Obs: to intel xdk works through the html5

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

        <!-- Recommended location for your JavaScript libraries -->
        <!-- These library references (below) are just examples to give you the general idea... -->
        <!-- <script src="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> -->
        <div class="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 couldn’t get the code into the project Someone who could help me?

html5 background android-styles

  • post your code has some ID?

  • if ta using html probably accepts javascript

  • put in the code

2 answers

0


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

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 in case you don’t already have it in your code in html put this button should work

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

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

you can see the code working right here

  • vlw worked here, the only problem q had is that when changing the color, it changes the color, but no more.

  • no need more, my mistake here, had not put the spaces after the obd comma even thanks to you got what you wanted now just try to change the color of the vlw button.

  • for nothing, to change the button just use the msm function and put the id of the button repeating the code

  • only one last doubt, in this code to insert more colors?

  • yes gives, you can change the value rgb to the color you want or copy that part of the code if($("#mainpage").css("background-color") == "rgb(0, 191, 255)"){&#xA; $("#mainpage").css({"background":"none"})&#xA; }else{&#xA; $("#mainpage").css({"background":"rgb(0, 191, 255)"});&#xA; } and change to where the #mainpage is by the element id

  • I will try thanks for the tips and for sharing your knowledge.

  • for nothing welcome to the community

Show 2 more comments

0

I believe 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

  • It was the same, I’ll try to add here in the project.

Browser other questions tagged html5 background android-styles

You are not signed in. Login or sign up in order to post.