Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #19918 > unrolled thread

How can this work as it does

Back to article view | Back to comp.lang.javascript

Contents

  How can this work as it does "Tony" <tony.johansson@inport.com> - 2013-05-24 10:44 +0200
    Re: How can this work as it does "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-05-24 11:09 +0200
      Re: How can this work as it does Tim Streater <timstreater@greenbee.net> - 2013-05-24 12:55 +0100
        Re: How can this work as it does JJ <duh@nah.meh> - 2013-05-25 04:33 +0700
          Re: How can this work as it does Tim Streater <timstreater@greenbee.net> - 2013-05-24 22:50 +0100
      Re: How can this work as it does Christoph Becker <cmbecker69@gmx.de> - 2013-05-24 14:29 +0200
        Re: How can this work as it does Denis McMahon <denismfmcmahon@gmail.com> - 2013-05-24 22:13 +0000
          Re: How can this work as it does Christoph Becker <cmbecker69@gmx.de> - 2013-05-25 00:56 +0200
    Re: How can this work as it does tony@mountifield.org (Tony Mountifield) - 2013-05-24 14:25 +0000
      Re: How can this work as it does Christoph Becker <cmbecker69@gmx.de> - 2013-05-24 17:21 +0200
    Re: How can this work as it does JJ <duh@nah.meh> - 2013-05-25 04:30 +0700

#19918 — How can this work as it does

This code works as it should but there is one thing that
I don't fully understand.

In the html markup at the end I have this div
  <div id="dlgInsertLots" title="Insert Lots" style="width:500px; 
display:none">
...
which is not displayed because we have said display:none

Now to my question when I click on button with id= InsertLots this function 
Click_InsertLots is called.
function Click_InsertLots()
  {
      //Create and display dialog dlgInsertLots
      $("#dlgInsertLots").dialog({
          width:700
      });
  }

but this div with id=dlgInsertLots is displayed which is the behaviour that 
I want.
What I want to know is why is it displayed now but not when the html page 
was displayed the first time.
I don't want to change anything because it works perfect but I don't 
understand how it can work as it does.


<!DOCTYPE html>
<html>
    <head>
    <title>Voyage</title>

    <script type="text/javascript">
        //Global names


        // <summary>
        //    Sort array voyageArr in two different ways depending
        //    of the passed argument.
        //    Either ascending on vesselid,arrtime or
        //    ascending on vesselName
        // </summary>
        // <param name="sortOn">Tell the function how to sort</param>
        // <param name="voyageArr">The array that is to be sorted</param>

        // <summary>
        //    Display some of the fields in the array voyageArr in html 
select control
        // </summary>
        // <param name="voyageArr">The array that is to be displayed</param>
        function DisplayVessel(voyageArr)
        {
           for (var i = 0; i < voyageArr.length; i++)
           {
              $('#DDLVesselName').append($("<option value=" + 
voyageArr[i].Vesselid + "></option>").text(voyageArr[i].VesselName));
           }
        }

       // <summary>
       //    Event handler that is called when click the InsertLots button
       // </summary>
       function Click_InsertLots()
       {
           //Create and display dialog dlgInsertLots
           $("#dlgInsertLots").dialog({
               width:700
           });
       }


       //***********************************************************************************
       //This $(function) will be called as soon as the document has been 
thoroughly displayed
       //***********************************************************************************
       $(function ()  //wait until the DOM is complete
       {
           $("#InsertLots").click(Click_InsertLots);
       });

    </script>
</head>

<body>
   <div id="logo">
      <span class="headerDateTimeRight" id="mydateTime"></span>
       <img alt="" src="../Images/gotris.jpg" id="logoSize"  />
      <p>For better and smother shipping on götaälv</p>
   </div>

   <br />
    <ul id="nav">
        <li><a class="menuItem" 
href="ObstacleView.html">ObstacleView</a></li>
        <li><a class="menuItem" href="Schema.html">Schema</a></li>
        <li><a class="menuItem" href="Voyage.html">Voyage</a></li>
        <li class="right"><a class="logout" onclick="return LogOut()" 
href="Login.html">Log out</a></li>
    </ul>

   <br /><br />
   <div id="voyage">
      <h3 style ="text-align:center;">Voyage</h3>
       <select id="DDLVesselName">
          <option> Select a vessel</option>
       </select>

        &nbsp;
       <input id="InsertLots" type="button" value="Insert Lots" />
       &nbsp;
       <input id="NewVoyage" type="button" value="New Voyage" />
       <br /><br />
      <table id="myGrid">
         <thead>
            <tr>
               <th>ArrTime</th>
               <th>DepTime</th>
               <th>VesselID</th>
               <th>VesselName</th>
               <th>Port</th>
               <th>NextPort</th>
               <th>PreviousPort</th>
            </tr>
         </thead>
         <tbody>
         </tbody>
    </table>
   </div>

   <div id="dlgInsertLots" title="Insert Lots" style="width:500px; 
display:none">
   <br />
      <table>
        <tr>
           <th> Lots Station: </th>
           <th> Arrival date </th>
           <th> Departure date </th>
        </tr>

        <tr>
           <td>
              <select id="DDLLotsStn">
              </select>
           </td>

           <td>
              <div>
                 <input type="Text" id="dateArr" size="18"/>
                 <img src="images/cal.gif" alt="" 
onclick="javascript:NewCssCal('dateArr','yyyyMMdd','arrow',true,'24')" 
style="cursor:pointer"/>
              </div>
           </td>

           <td>
              <div>
                 <input type="Text" id="dateDep" size="18"/>
                 <img src="images/cal.gif" alt="" 
onclick="javascript:NewCssCal('dateDep','yyyyMMdd','arrow',true,'24')" 
style="cursor:pointer"/>
              </div>
           </td>
           <td> &nbsp; &nbsp; <input id="BtnSave" type="button" value="Save" 
/></td>
        </tr>
      </table>
   </div>
</body>
</html>

//Tony

[toc] | [next] | [standalone]

#19919

Tony wrote on 24 mei 2013 in comp.lang.javascript:

> This code works as it should but there is one thing that
> I don't fully understand.
> 
> In the html markup at the end I have this div
>   <div id="dlgInsertLots" title="Insert Lots" style="width:500px; 
> display:none">
> ...
> which is not displayed because we have said display:none
> 
> Now to my question when I click on button with id= InsertLots this
> function Click_InsertLots is called.
> function Click_InsertLots()
>   {
>       //Create and display dialog dlgInsertLots
>       $("#dlgInsertLots").dialog({
>           width:700
>       });
>   }

This is about Jquery, why do you not programme in Javascript?

It is said there are NG's for Jquery, this is not one of them.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#19921

In article <XnsA1CA7177BEB17eejj99@194.109.133.133>,
 "Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote:

> Tony wrote on 24 mei 2013 in comp.lang.javascript:
> 
> > This code works as it should but there is one thing that
> > I don't fully understand.
> > 
> > In the html markup at the end I have this div
> >   <div id="dlgInsertLots" title="Insert Lots" style="width:500px; 
> > display:none">
> > ...
> > which is not displayed because we have said display:none
> > 
> > Now to my question when I click on button with id= InsertLots this
> > function Click_InsertLots is called.
> > function Click_InsertLots()
> >   {
> >       //Create and display dialog dlgInsertLots
> >       $("#dlgInsertLots").dialog({
> >           width:700
> >       });
> >   }
> 
> This is about Jquery, why do you not programme in Javascript?
> 
> It is said there are NG's for Jquery, this is not one of them.

Exactly. I get sick of seeing jscript shit in  this ng.

-- 
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted"  --  Bill of Rights 1689

[toc] | [prev] | [next] | [standalone]

#19942

On Fri, 24 May 2013 12:55:40 +0100, Tim Streater wrote:
> In article <XnsA1CA7177BEB17eejj99@194.109.133.133>,
>  "Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote:
>> Tony wrote on 24 mei 2013 in comp.lang.javascript:
>> This is about Jquery, why do you not programme in Javascript?
>> 
>> It is said there are NG's for Jquery, this is not one of them.
> 
> Exactly. I get sick of seeing jscript shit in  this ng.

You mean "Exactly. I get sick of seeing /jQuery/ shit in this ng." ?

[toc] | [prev] | [next] | [standalone]

#19944

In article <1jwcxidhnqrn6$.1q60ifk1haf0r.dlg@40tude.net>,
 JJ <duh@nah.meh> wrote:

> On Fri, 24 May 2013 12:55:40 +0100, Tim Streater wrote:
> > In article <XnsA1CA7177BEB17eejj99@194.109.133.133>,
> >  "Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote:
> >> Tony wrote on 24 mei 2013 in comp.lang.javascript:
> >> This is about Jquery, why do you not programme in Javascript?
> >> 
> >> It is said there are NG's for Jquery, this is not one of them.
> > 
> > Exactly. I get sick of seeing jscript shit in  this ng.
> 
> You mean "Exactly. I get sick of seeing /jQuery/ shit in this ng." ?

I do indeed, thank you.

-- 
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted"  --  Bill of Rights 1689

[toc] | [prev] | [next] | [standalone]

#19922

Evertjan. wrote:
> Tony wrote on 24 mei 2013 in comp.lang.javascript:
> 
>> This code works as it should but there is one thing that
>> I don't fully understand.
>>
>> In the html markup at the end I have this div
>>   <div id="dlgInsertLots" title="Insert Lots" style="width:500px; 
>> display:none">
>> ...
>> which is not displayed because we have said display:none
>>
>> Now to my question when I click on button with id= InsertLots this
>> function Click_InsertLots is called.
>> function Click_InsertLots()
>>   {
>>       //Create and display dialog dlgInsertLots
>>       $("#dlgInsertLots").dialog({
>>           width:700
>>       });
>>   }
> 
> This is about Jquery, why do you not programme in Javascript?

jQuery is a library that can be used with several ECMAScript
implementations, so programming in "Jquery" is programming in
"Javascript" (to stick with your wording), albeit mostly with a somewhat
unusual notation.

The code could have well been:

  function Click_InsertLots()
  {
      //Create and display dialog dlgInsertLots
      dialog(document.getElementById("dlgInsertLots"), {
          width:700
      });
  }

Then the question would arise what function dialog() does.  If it is a
library function, this should be looked up in the library's documentation.

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#19946

On Fri, 24 May 2013 14:29:53 +0200, Christoph Becker wrote:

> jQuery is a library that can be used with several ECMAScript
> implementations, so programming in "Jquery" is programming in
> "Javascript"
> (to stick with your wording), albeit mostly with a somewhat unusual
> notation.

However, this is not a jquery users[1] forum, and anyone seeking support 
for jquery issues is best directed to a forum where they will find jquery 
users.

[1] If this was an advocacy group, would the correct spelling include an 
l prefix?

-- 
Denis McMahon, denismfmcmahon@gmail.com

[toc] | [prev] | [next] | [standalone]

#19949

Denis McMahon wrote:
> On Fri, 24 May 2013 14:29:53 +0200, Christoph Becker wrote:
> 
>> jQuery is a library that can be used with several ECMAScript
>> implementations, so programming in "Jquery" is programming in
>> "Javascript"
>> (to stick with your wording), albeit mostly with a somewhat unusual
>> notation.
> 
> However, this is not a jquery users[1] forum, and anyone seeking support 
> for jquery issues is best directed to a forum where they will find jquery 
> users.

ACK.

> [1] If this was an advocacy group, would the correct spelling include an 
> l prefix?

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#19923

In article <knn912$659$1@dont-email.me>,
Tony <tony.johansson@inport.com> wrote:
> This code works as it should but there is one thing that
> I don't fully understand.
> 
> In the html markup at the end I have this div
>   <div id="dlgInsertLots" title="Insert Lots" style="width:500px; 
> display:none">
> ...
> which is not displayed because we have said display:none
> 
> Now to my question when I click on button with id= InsertLots this function 
> Click_InsertLots is called.
> function Click_InsertLots()
>   {
>       //Create and display dialog dlgInsertLots
>       $("#dlgInsertLots").dialog({
>           width:700
>       });
>   }
> 
> but this div with id=dlgInsertLots is displayed which is the behaviour that 
> I want.
> What I want to know is why is it displayed now but not when the html page 
> was displayed the first time.
> I don't want to change anything because it works perfect but I don't 
> understand how it can work as it does.

When you use an inline style, that style is treated as a single entity.
So it would appear you are replacing the style "width:500px; display:none"
with the style "width:700". That overwrites the complete inline style, and
the replacement style doesn't include "display:none".

Cheers
Tony
-- 
Tony Mountifield
Work: tony@softins.co.uk - http://www.softins.co.uk
Play: tony@mountifield.org - http://tony.mountifield.org

[toc] | [prev] | [next] | [standalone]

#19925

Tony Mountifield wrote:
> In article <knn912$659$1@dont-email.me>,
> Tony <tony.johansson@inport.com> wrote:
>> This code works as it should but there is one thing that
>> I don't fully understand.
>>
>> In the html markup at the end I have this div
>>   <div id="dlgInsertLots" title="Insert Lots" style="width:500px; 
>> display:none">
>> ...
>> which is not displayed because we have said display:none
>>
>> Now to my question when I click on button with id= InsertLots this function 
>> Click_InsertLots is called.
>> function Click_InsertLots()
>>   {
>>       //Create and display dialog dlgInsertLots
>>       $("#dlgInsertLots").dialog({
>>           width:700
>>       });
>>   }
>>
>> but this div with id=dlgInsertLots is displayed which is the behaviour that 
>> I want.
>> What I want to know is why is it displayed now but not when the html page 
>> was displayed the first time.
>> I don't want to change anything because it works perfect but I don't 
>> understand how it can work as it does.
> 
> When you use an inline style, that style is treated as a single entity.
> So it would appear you are replacing the style "width:500px; display:none"
> with the style "width:700". That overwrites the complete inline style, and
> the replacement style doesn't include "display:none".

Actuallys jQueryUI's $(...).dialog() "method" sets the diplay property
of the element(s) to "block", no matter what's passed as parameter.  See
<http://api.jqueryui.com/dialog/>.

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#19941

On Fri, 24 May 2013 10:44:10 +0200, Tony wrote:
> This code works as it should but there is one thing that
> I don't fully understand.
> 
> In the html markup at the end I have this div
>   <div id="dlgInsertLots" title="Insert Lots" style="width:500px; 
> display:none">
> ...
> which is not displayed because we have said display:none
> 
> Now to my question when I click on button with id= InsertLots this function 
> Click_InsertLots is called.
> function Click_InsertLots()
>   {
>       //Create and display dialog dlgInsertLots
>       $("#dlgInsertLots").dialog({
>           width:700
>       });
>   }
> 
> but this div with id=dlgInsertLots is displayed which is the behaviour that 
> I want.
> What I want to know is why is it displayed now but not when the html page 
> was displayed the first time.
> I don't want to change anything because it works perfect but I don't 
> understand how it can work as it does.
[snip]

The fact that you hard coded the "dlgInsertLots" not to be displayed means
that it's not displayed by design. HTML tags are mandatory, but scripts are
not; and the "dlgInsertLots" is processed before the Click_InsertLots is
executed (otherwise, it'll be a script error).

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web