How to remove a style option?

Question

There is a div containing a style attribute :

<div id="dlg" style="width: auto; height: auto; display: block; left: 151.5px; top: 331.5px;" class="dialog" data-role="dialog" data-close-button="true" data-overlay="true" data-overlay-color="op-dark">

On $(document).ready I want to remove the option top: 331.5px; from the style attribute. How to do that ?

UPDATE :

{% include "header.phtml" %}

    <div data-role="dialog" id="dlg" data-close-button="true" data-overlay="true" data-overlay-color="op-dark">
        <div class="container">
            <div class="sub-header" id="titre_dlg"></div><br /><hr />
            <div id="contenu_dlg"></div>
        </div>
    </div>

    <div id="frmReservTable">{% include "/reservation/frmReservationTable.phtml" %}</div>

    <div class="header">Liste des r&eacute;servations</div>

    <span class="helper">Type de r&eacute;servation </span>
    <label class="input-control radio small-check">
        <input type="radio" name="reserv" id="r1" value="T">
        <span class="check"></span>
        <span class="caption">Table</span>
    </label>
    <label class="input-control radio small-check">
        <input type="radio" name="reserv" id="r2" value="S">
        <span class="check"></span>
        <span class="caption">Salle</span>
    </label>
    <br />
    <div id="select_salle" class="input-control select">
        <select name="salle_code" id="salle_code">
            <option value="">--Choisir une salle--</option>
            <?php
                $salles = Salle::lireParCritere([]);
                foreach ($salles as $salle) {
                  ?>
                    <option value="<?php echo $salle->salle_code; ?>"><?php echo $salle->salle_lib; ?></option>
                  <?php
                }
            ?>
        </select>
    </div>

    <div id="listTables" class="listview"></div>

    <div id="listSalles" class="listview">
        <?php
        $ret = ReservationSalle::lireParCritere([]);
        if ($ret->count() > 0) {
            $html = '';
            foreach ( $ret as $key => $val ) {
                $html .= '<div class="list">
                            <span class="mif-bookmarks list-icon"></span>
                            <span class="list-title">'.$ret[$key]->salle_lib.'</span>
                            <span class="place-right"><button id="btnS_" class="button default">R&eacute;server</button></span>
                            <br/>
                            <span class="sub-title">'.$ret[$key]->reserver.'</span>
                          </div>';
            }
            echo $html;
        }
        else {
            echo '<br/><div class="sub-header">Aucun enregistrement</div>';
        }
        ?>
    </div>

    <script type="text/javascript" charset="utf-8">

        var table_reserver_id = ""; // pour stocker la table sélectionnée dans la liste

        function afficherListeTables(salle_code){
            if (salle_code == "")
                $('#listTables').html("");
            else {
                var donne = "salle_code="+salle_code;
                var ret = $.ajax({
                        data: donne,
                        type: "POST",
                        url:  "RestaurantReservation/ajaxLoadTables",
                        async: false
                     }).responseText;
                $('#listTables').html(ret);
            }
        }

        function afficherListeReservationTable(table_id, reserver) {

            if (reserver == 1) {

                var dialog = $("#dlg").data('dialog');

                if (!dialog.element.data('opened')) 
                   dialog.open(); // it opens the dialog

                var donne = "table_code="+table_id;

                var ret = $.ajax({
                        data: donne,
                        type: "POST",
                        url:  "RestaurantReservation/ajaxGetTableLib",
                        async: false
                     }).responseText;

                var contenu_dlg = $.ajax({
                        data: donne,
                        type: "POST",
                        url:  "RestaurantReservation/ajaxGenerateListReservationTable",
                        async: false
                     }).responseText;

                $('#titre_dlg').html("Liste des r&eacute;servations de la table <b>"+ret+"</b>");
                $('#contenu_dlg').html(contenu_dlg);
            }
        }

        function afficherListeReservationSalle(salle_id, reserver) {
            if (reserver == "oui") {
                window.location = "RestaurantReservation/listerReservationSalle/"+salle_id;
            }
        }

        $(document).ready(function() {

                $('#dlg').css("top", "");

            $("#frmReservTable").hide(); // formulaire de réservation de table

            $("#r1").attr("checked","true");
            $("#listSalles").hide();

            $("input:radio").on("change", function(){
                if($(this).val() == "S") {
                    $("#select_salle").hide();
                    $("#listTables").hide();
                    $("#listSalles").show();
                }
                else {
                    $("#listSalles").hide();
                    $("#select_salle").show();
                    $("#listTables").show();
                }
            });

            $("#salle_code").on("change", function(){ // sélection de salle si type_reservation = Table
                afficherListeTables($(this).val());
            });

            $("#listTables").on("click","div[id^='table_']", function(){ // click d'une ligne de table
                var _id = $(this).attr("id"); // de la forme "table_3_1"
                var idx_last__ = _id.lastIndexOf("_");
                var table_id = _id.substring(_id.indexOf("_")+1, idx_last__);
                table_reserver_id = table_id;
                var flag_reserver = _id.substr(idx_last__ + 1);
                afficherListeReservationTable(table_id, flag_reserver);
            });

            $("#listTables").on("click","button[id^='reservT_']", function(e){ // click du bouton "Réserver" pour une table
                var _id = $(this).attr("id"); // de la forme "reservT_1"
                var idx__ = _id.indexOf("_");
                var table_id = _id.substr(idx__ + 1);
                var donne = "table_code="+table_id;
                var ret = $.ajax({
                        data: donne,
                        type: "POST",
                        url:  "RestaurantReservation/ajaxGetTableLib",
                        async: false
                     }).responseText;
                var dialog = $("#dlg").data('dialog');
                if (!dialog.element.data('opened')) 
                   dialog.open();
                $('#titre_dlg').html("Ajout de r&eacute;servation pour la table <b>"+ret+"</b>");
                $('#contenu_dlg').html($("#frmReservTable").html());
                e.stopPropagation(); // empécher l'événement "clic" sur "div[id^='table_']" de se déclencher
            });

            $("#contenu_dlg").on("click", "button[id^='undoReservT_']", function(e) { // click du bouton "Annuler" pour une réservation de table
                var _id = $(this).attr("id"); // de la forme "undoReservT_1"
                var idx__ = _id.indexOf("_");
                var reserv_id = _id.substr(idx__ + 1);
                var donne = "ID_RESERVATION="+reserv_id;
                $.ajax({
                        data: donne,
                        type: "POST",
                        url:  "RestaurantReservation/ajaxSupprimerReservationTable",
                        async: false,
                        success: function (data, status, xhr) {
                                    afficherListeTables($("#salle_code").val()); // rafraichir la liste des tables avec leur statut de réservation associé
                                    afficherListeReservationTable(table_reserver_id, 1); // rafraichir la liste des réservations de la table sélectionnée
                                 }
                      });
                e.stopPropagation();
            });

        });

    </script>
 {% include "footer.phtml" %}

The page frmReservationTable.phtml :

<div class="tile-area no-padding">
    <div class="tile-container ">
        <div class="tile-large " data-role="tile">
            <form id="formReservTable" method="POST">
                <input type="hidden" name="TABLE_CODE" id="TABLE_CODE" />
                <div class="input-control select">
                    <select name="CLT_ID" id="CLT_ID">
                        <option value=""> -- S&eacute;lectionner un client -- </option>
                        <?php
                            $clients = Client::lireParCritere([]);
                            foreach ($clients as $client) {
                              ?>
                                <option value="<?php echo $client->clt_id; ?>"><?php echo $client->noms; ?></option>
                              <?php
                            }
                        ?>
                    </select>
                </div>
                <button class="button default" id="btn_reserv">Valider</button>
                <span id="retour_table"><?php echo $this->tag->linkTo(array('ReferentielClient', 'Annuler', 'class' => 'button default')); ?></span>
                <span id="retour_salle"><?php echo $this->tag->linkTo(array('ReferentielSalle', 'Annuler', 'class' => 'button default')); ?></span>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {

        if ($("input:radio:checked").val() == "T") {
            $("#retour_salle").hide();
            $("#retour_table").show();
        }
        else {
            $("#retour_salle").show();
            $("#retour_table").hide();
        }

        $("#TABLE_CODE").val(table_reserver_id);

        $("#formReservTable").on("submit", function(e){
            alert("table code = "+$("#TABLE_CODE").val());
            e.preventDefault();
        });

    });
</script>

At runtime the dialog is at the bottom of the screen :

possible duplicate of [jQuery - remove style added with .css() function](http://stackoverflow.com/questions/4036857/jquery-remove-style-added-with-css-function) — Rino Raj, Aug 20 '15 at 08:18
Just a tip how to avoid downvotes in the future – if your problem is that a dialog box is not in the right place, *ask how to fix the dialog box*. Don't ask about a possible solution that you think might fix it. This is a model example of an [XY problem](http://xyproblem.info). — JJJ, Aug 20 '15 at 10:12

score 1 · Answer 1 · answered Aug 20 '15 at 08:16

1

The default values for CSS top(and left) is auto. You can set it to auto in dom ready event:

$(function(){
  $('#dlg').css('top', 'auto');
});

However these is more like a hack. it is not removing the value but overwriting it. correct way to achieve this would be to set it to:

$('#dlg').css('top', '');

answered Aug 20 '15 at 08:16

Milind Anantwar

81,290
25
94
125

the dialog is still at the bottom of the screen ! – pheromix Aug 20 '15 at 08:30
can you share the fiddle? – Milind Anantwar Aug 20 '15 at 08:32

Deepak Ingole · Accepted Answer · 2015-08-20T08:40:07.200

1

Change top value only when dialog is visible

You can do it using

//document ready handler

$(function() {
       ---
       ---
    dialog.open();

    $('#dlg').css('top', 'auto');  // do this when your dialog is visible
});

edited Aug 20 '15 at 08:40

answered Aug 20 '15 at 08:18

Deepak Ingole

14,912
10
47
79

it is automatically generated by the MetroUI CSS ! – pheromix Aug 20 '15 at 08:22
How come you get the **First thing** from the question? – Jai Aug 20 '15 at 08:27
@Jai he is trying to remove on `document.ready` there comes a question – Deepak Ingole Aug 20 '15 at 08:29
the dialog is still at the bottom of the screen ! – pheromix Aug 20 '15 at 08:30

score 0 · Answer 3 · answered Aug 20 '15 at 08:19

0

The default values for CSS top is auto, so you can set that as your value. Like this: $('#dlg').css('top', 'auto').

answered Aug 20 '15 at 08:19

Deepak Biswal

4,280
2
20
37

the dialog is still at the bottom of the screen ! – pheromix Aug 20 '15 at 08:30

How to remove a style option?

3 Answers3