Languages

Menu
Sites
Language
How to change Popup title.

Hi,

I have developed an application in which Popup title is "Message from Tizen web IDE".I want to change this Popup Title.

 

I want to write name of my applicarion at Popup title

 

please help me

 

Thanks in advance

 

Thanks and regards

Mohit Kumar

List

Responses

14 Replies
Vikram

Hi,

Can you provide more detail description for this question. I am not so clear for it.

Thanks.

mohit kumar

Hi Vikram,

 

Here it display the alert message but the title bar of alert is "Message from Tizen web IDE"".

                  $(document).ready(function() {
    if(isOnline) {
       
    } else {
        alert("Disconnected");
      
        
        document.getElementById("picture").style.visibility = "hidden";
        
    }

});

 

Thanks and regards

Mohit Kumar

colin Rao

Please share your sample code here! 

f.y.i. Below code is from the IDE help doc, as the sample code, div with class "ui-popup-title" is the popup title, it's content can be changed by hardcode or javascript.

<a href="#center_title_1btn" data-position-to="window">Click to open popup</a>
<!--Definition of popup with a title and button-->
<div id="center_title_1btn" data-role="popup" class="center_title_1btn">
   <div class="ui-popup-title">
      <h1>Popup title</h1>
   </div>
   <div class="ui-popup-text">
      Pop-up dialog box, a child window that blocks user interaction to the parent windows
   </div>
   <div class="ui-popup-button-bg">
      <a data-role="button" data-rel="back" data-inline="true">Button</a>
   </div>
</div>

 

mohit kumar

Hi colin Rao,

 

Here it display the alert message but the title bar of alert is "Message from Tizen web IDE"".

                  $(document).ready(function() {
    if(isOnline) {
       
    } else {
        alert("Disconnected");
      
        
        document.getElementById("picture").style.visibility = "hidden";
        
    }

});

 

Thanks and regards

Mohit Kumar

mohit kumar

Hi,

Here i have done what you said,but it is not working is there somthing missing in my code.

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen basic template generated by Tizen Web IDE" />

    <title>Tizen Web IDE - Tizen - Tizen basic Application</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/main.js"></script>
</head>

<body style="background-color:#808080;" onload="myfunctionn();">

    <header>
        <hgroup style="background-color:blue;">
            <h1 id="heading" style="text-align:center;color:white; top:2%;">Currency Converter</h1>

            <select id="fromcur" data-native-menu="false">
                <option value="0" selected="selected" disabled="disabled">Select Currency</option>
                <!--  <optgroup label="Top Currency"></optgroup> -->
                <option value="1">Australian Dollar (AUD)</option>
                <option value="2">Canada Dollar (CAD)</option>
                <option value="3">Euro (EUR)</option>
                <option value="4">India Rupee (INR)</option>
                <option value="5">Japan Yen (JPY)</option>
                <option value="6">New Zealand dollars(NZD)</option>
                <option value="7">South Africa Rand (ZAR)</option>
                <option value="s8">Switzerland France (CHF)</option>
                <option value="9">United kingdom (GBP)</option>
                <option value="10">United states Dollars (USD)</option>
                <optgroup label="Other currency"></optgroup>
                <option value="11">Bulgarian Lev (BGN)</option>
                <option value="12">Brazilian Real (BRL)</option>
                <option value="13">Chinese Yuan (CNY)</option>
                <option value="14">Czech Republic Koruna (CZK)</option>
                <option value="15">Danish Krone (DKK)</option>
                <option value="16">Hong Kong Dollar (HKD)</option>
                <option value="17">Croatian Kuna (HRK)</option>
                <option value="18">Hungarian Forint (HUF)</option>
                <option value="19">Indonesian Rupiah (IDR)</option>
                <option value="20">Israeli New Sheqel (ILS)</option>
                <option value="21">South Korean Won (KRW)</option>
                <option value="22">Mexican Peso (MXN)</option>
                <option value="23">Malaysian Ringgit (MYR)</option>
                <option value="24">Norwegian Krone (NOK)</option>
                <option value="25">Philippine Peso (PHP)</option>
                <option value="26">Polish Zloty (PLN)</option>
                <option value="27">Romanian Leu (RON)</option>
                <option value="28">Russian Ruble (RUB)</option>
                <option value="29">Swedish Krona (SEK)</option>
                <option value="30">Singapore Dollar (SGD)</option>
                <option value="31">Thai Baht (THB)</option>
                <option value="32">Turkish Lira (TRY)</option>
            </select>


        </hgroup>
    </header>

    
    <article>
        
        <section>

            <div id="divbutton1" style="background-color:#808080;width:100%; height:162px;position:absolute;top:116px;">

                
                    <input type="number" required="required" name="foo" onKeyDown="if(this.value.length==15) return false;" placeholder="Enter Amount" id="cur1" style="height:40px; width:40%; position:absolute;left:15%;">

                    <div class="slt1"></div>
                    <h3 class="too">To</h3>

                    <input type="number" placeholder="Result" id="cur2" style="height:40px; width:40%; position:absolute;left:15%;top:114px;">

                    <div class="slt2"></div>

            </div>
            </section>

 

    </article>


    <select id="tocur" data-native-menu="false">
        <option value="0" selected="selected" disabled="disabled">Select Currency</option>
        <!--  <optgroup label="Top Currency"></optgroup> -->
        <option value="1">Australian Dollar (AUD)</option>
        <option value="2">Canada Dollar (CAD)</option>
        <option value="3">Euro (EUR)</option>
        <option value="4">India Rupee (INR)</option>
        <option value="5">Japan Yen (JPY)</option>
        <option value="6">New Zealand dollars(NZD)</option>
        <option value="7">South Africa Rand (ZAR)</option>
        <option value="8">Switzerland France (CHF)</option>
        <option value="9">United kingdom Pounds (GBP)</option>
        <option value="10">United states Dollars (USD)</option>
        <optgroup label="Other currency"></optgroup>
        <option value="11">Bulgarian Lev (BGN)</option>
        <option value="12">Brazilian Real (BRL)</option>
        <option value="13">Chinese Yuan (CNY)</option>
        <option value="14">Czech Republic Koruna (CZK)</option>
        <option value="15">Danish Krone (DKK)</option>
        <option value="16">Hong Kong Dollar (HKD)</option>
        <option value="17">Croatian Kuna (HRK)</option>
        <option value="18">Hungarian Forint (HUF)</option>
        <option value="19">Indonesian Rupiah (IDR)</option>
        <option value="20">Israeli New Sheqel (ILS)</option>
        <option value="21">South Korean Won (KRW)</option>
        <option value="22">Mexican Peso (MXN)</option>
        <option value="23">Malaysian Ringgit (MYR)</option>
        <option value="24">Norwegian Krone (NOK)</option>
        <option value="25">Philippine Peso (PHP)</option>
        <option value="26">Polish Zloty (PLN)</option>
        <option value="27">Romanian Leu (RON)</option>
        <option value="28">Russian Ruble (RUB)</option>
        <option value="29">Swedish Krona (SEK)</option>
        <option value="30">Singapore Dollar (SGD)</option>
        <option value="31">Thai Baht (THB)</option>
        <option value="32">Turkish Lira (TRY)</option>
    </select>


    <input type="submit" id="driver" value="Convert" />

    <div class="tiwari" id="ggg">
        <img src="https://www.google.com/finance/getchart?q=USDINR&p=3M&i=86400" class="goog" id="picture" />
    </div>

 

 

 


<a href="#center_title_1btn" data-position-to="window">Click to open popup</a>
<!--Definition of popup with a title and button-->
<div id="center_title_1btn" data-role="popup" class="center_title_1btn">
   <div class="ui-popup-title">
      <h1>Popup title</h1>
   </div>
   <div class="ui-popup-text">
      Pop-up dialog box, a child window that blocks user interaction to the parent windows
   </div>
   <div class="ui-popup-button-bg">
      <a data-role="button" data-rel="back" data-inline="true">Button</a>
   </div>
</div>

 

</body>

</html>

 

 

Thanks and regards

Mohit Kumar

mohit kumar

Hi,

This is not running in my app.I have example from tizen help,I have implemented but it is not running.Please help me

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen basic template generated by Tizen Web IDE" />

    <title>Tizen Web IDE - Tizen - Tizen basic Application</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/main.js"></script>


<script>
/* Use popup events */
var popup = document.getElementById("popup");
popup.addEventListener("popupbeforecreate", function(ev)
{

    tau.openPopup("#popup");
   /* Implement code for popupbeforecreate event */
});
</script>

</head>

<body style="background-color:#808080;" onload="myfunctionn();">

    <header>
        <hgroup style="background-color:blue;">
            <h1 id="heading" style="text-align:center;color:white; top:2%;">Currency Converter</h1>

            <select id="fromcur" data-native-menu="false">
                <option value="0" selected="selected" disabled="disabled">Select Currency</option>
                <!--  <optgroup label="Top Currency"></optgroup> -->
                <option value="1">Australian Dollar (AUD)</option>
                <option value="2">Canada Dollar (CAD)</option>
                <option value="3">Euro (EUR)</option>
                <option value="4">India Rupee (INR)</option>
                <option value="5">Japan Yen (JPY)</option>
                <option value="6">New Zealand dollars(NZD)</option>
                <option value="7">South Africa Rand (ZAR)</option>
                <option value="s8">Switzerland France (CHF)</option>
                <option value="9">United kingdom (GBP)</option>
                <option value="10">United states Dollars (USD)</option>
                <optgroup label="Other currency"></optgroup>
                <option value="11">Bulgarian Lev (BGN)</option>
                <option value="12">Brazilian Real (BRL)</option>
                <option value="13">Chinese Yuan (CNY)</option>
                <option value="14">Czech Republic Koruna (CZK)</option>
                <option value="15">Danish Krone (DKK)</option>
                <option value="16">Hong Kong Dollar (HKD)</option>
                <option value="17">Croatian Kuna (HRK)</option>
                <option value="18">Hungarian Forint (HUF)</option>
                <option value="19">Indonesian Rupiah (IDR)</option>
                <option value="20">Israeli New Sheqel (ILS)</option>
                <option value="21">South Korean Won (KRW)</option>
                <option value="22">Mexican Peso (MXN)</option>
                <option value="23">Malaysian Ringgit (MYR)</option>
                <option value="24">Norwegian Krone (NOK)</option>
                <option value="25">Philippine Peso (PHP)</option>
                <option value="26">Polish Zloty (PLN)</option>
                <option value="27">Romanian Leu (RON)</option>
                <option value="28">Russian Ruble (RUB)</option>
                <option value="29">Swedish Krona (SEK)</option>
                <option value="30">Singapore Dollar (SGD)</option>
                <option value="31">Thai Baht (THB)</option>
                <option value="32">Turkish Lira (TRY)</option>
            </select>


        </hgroup>
    </header>

    
    <article>
        
        <section>

            <div id="divbutton1" style="background-color:#808080;width:100%; height:162px;position:absolute;top:116px;">

                
                    <input type="number" required="required" name="foo" onKeyDown="if(this.value.length==15) return false;" placeholder="Enter Amount" id="cur1" style="height:40px; width:40%; position:absolute;left:15%;">

                    <div class="slt1"></div>
                    <h3 class="too">To</h3>

                    <input type="number" placeholder="Result" id="cur2" style="height:40px; width:40%; position:absolute;left:15%;top:114px;">

                    <div class="slt2"></div>

            </div>
            </section>

 

    </article>


    <select id="tocur" data-native-menu="false">
        <option value="0" selected="selected" disabled="disabled">Select Currency</option>
        <!--  <optgroup label="Top Currency"></optgroup> -->
        <option value="1">Australian Dollar (AUD)</option>
        <option value="2">Canada Dollar (CAD)</option>
        <option value="3">Euro (EUR)</option>
        <option value="4">India Rupee (INR)</option>
        <option value="5">Japan Yen (JPY)</option>
        <option value="6">New Zealand dollars(NZD)</option>
        <option value="7">South Africa Rand (ZAR)</option>
        <option value="8">Switzerland France (CHF)</option>
        <option value="9">United kingdom Pounds (GBP)</option>
        <option value="10">United states Dollars (USD)</option>
        <optgroup label="Other currency"></optgroup>
        <option value="11">Bulgarian Lev (BGN)</option>
        <option value="12">Brazilian Real (BRL)</option>
        <option value="13">Chinese Yuan (CNY)</option>
        <option value="14">Czech Republic Koruna (CZK)</option>
        <option value="15">Danish Krone (DKK)</option>
        <option value="16">Hong Kong Dollar (HKD)</option>
        <option value="17">Croatian Kuna (HRK)</option>
        <option value="18">Hungarian Forint (HUF)</option>
        <option value="19">Indonesian Rupiah (IDR)</option>
        <option value="20">Israeli New Sheqel (ILS)</option>
        <option value="21">South Korean Won (KRW)</option>
        <option value="22">Mexican Peso (MXN)</option>
        <option value="23">Malaysian Ringgit (MYR)</option>
        <option value="24">Norwegian Krone (NOK)</option>
        <option value="25">Philippine Peso (PHP)</option>
        <option value="26">Polish Zloty (PLN)</option>
        <option value="27">Romanian Leu (RON)</option>
        <option value="28">Russian Ruble (RUB)</option>
        <option value="29">Swedish Krona (SEK)</option>
        <option value="30">Singapore Dollar (SGD)</option>
        <option value="31">Thai Baht (THB)</option>
        <option value="32">Turkish Lira (TRY)</option>
    </select>


    <input type="submit" id="driver" value="Convert" />

    <div class="tiwari" id="ggg">
        <img src="https://www.google.com/finance/getchart?q=USDINR&p=3M&i=86400" class="goog" id="picture" />
    </div>

 


<div id="popup" class="ui-popup">
      <div class="ui-popup-header"></div>
      <div class="ui-popup-content"></div>
   </div>

 


<!-- <a href="#center_title_1btn" data-position-to="window">Click to open popup</a>
Definition of popup with a title and button
<div id="center_title_1btn" data-role="popup" class="center_title_1btn">
   <div class="ui-popup-title">
      <h1>Popup title</h1>
   </div>
   <div class="ui-popup-text">
      Pop-up dialog box, a child window that blocks user interaction to the parent windows
   </div>
   <div class="ui-popup-button-bg">
      <a data-role="button" data-rel="back" data-inline="true">Button</a>
   </div>
</div> -->

 

</body>

</html>


thanks and regards

Mohit Kumar

 

 

 

Marco Buettner

At first ... use the f*** code highlighter of the forum (the "<> icon" on the style presets)

You use tau function without the tau framework ... You cant use library functions without the required library. You have only jQuery in your project as help library!

You have to use the jQuery backward compatibility of the Popup-Widget... Why you never use the documentation of the SDK? It will give you many answer for your newbie questions.

var popup = $("#popup").popup();
popup.popup("open");

I thought u understand JS but every second post shows me you have no knowledge of JS.

 

mohit kumar

Hi,

     I have resolved the problem.I have good understanding of "TIZEN UI BUILDER".At that time i was confusized because of colin's answer.

 

 

Thanks and regards

Mohit Kumar

colin Rao

from your sample code, don't see the tau or jquery mobile framework js file included into your *.html file. 

the customize popup widget depends on the related js lib, such as tau or jquery mobile.

There are tau/jquerymobile project template in Tizen IDE, which configure and included the related js lib correctly, you can check in the index.html file. Suggest you to try such demo project as the beginning of self-trainning. :)

Marco Buettner

He has jquery in this project ;)

But he is to retarded to use the code syntax highlighter and can just copy and paste ... Like the most projects of them only copy and paste ;)

colin Rao

Hi,

You cant change the title of alert(msg); it's the default implement in browser. 

Suggest to use a customize popup widget, such as jquery mobile popup, and the tizen tau popup. You can find sample code snippet from the IDE help doc by search "popup".

 

Marco Buettner

You cant change the tital of confirm(), alert(), prompt() popups, because these are platform popup...

If you want a own title you have to implement the solution of colin Rao.

Vikram

For prompt(), this function will pop up a input box and let you input text. In spite of you can change the title for it.

But I am strongly suggest you can using the Colin’s solution.

Palitsyna

Hello,

try to use Tizen TAU Popup as shown below:

<a href="#center_title_1btn" data-position-to="window" id="link1">Click to open popup</a>
<div id="center_title_1btn" data-role="popup">
	<div class="ui-popup-title">
		<h1>Popup title Mine</h1>
	</div>
	<div class="ui-popup-text">
		Pop-up dialog box, a child window that blocks user interaction to the parent windows
	</div>
</div>

More information you can find here:

https://developer.tizen.org/dev-guide/2.3.0/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Popup.htm