Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Re: Can't move that dialog box!

Reply
Thread Tools

Re: Can't move that dialog box!

 
 
123Jim
Guest
Posts: n/a
 
      06-21-2010

"123Jim" <(E-Mail Removed)> wrote in message
news:hvn5a0$sb1$(E-Mail Removed)-september.org...
>
> "JSoul" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>> I've got a site appearing here:
>>
>> http://www.boldplan.com/s/tiny/tRvebO
>>
>> It validates. But when you click the "login" link in the main menu, I
>> can't move that login box over to the left in the center of the page!
>> What gives?
>>
>> The css code affecting it is the following. I was wondering if someone
>> can give me some insight. Putting in a left: 300px; entry didn't help,
>> nor did making it relative. Changing the value for "top" did move the
>> box vertically but I can't move it horizontally! Can anyone lend a
>> hand please?
>>
>> /* login box*/
>> #login_pop{
>> position:absolute;
>> width:250px;
>> height:220px;
>> top:150px;
>> background:#151515;
>> color:#ccc;
>> text-align:left;
>> padding:10px;
>> border:1px solid #ccc;
>> z-index:1000;
>> }

>
>
> left: -210px;
> top: 50px;
> ?


try left: -120px;
you have 'left: 54px;' which is written inline so you need to change that,
rather than add left to #login_pop .. or remove the inline style and add it
to #login_pop


 
Reply With Quote
 
 
 
 
123Jim
Guest
Posts: n/a
 
      06-21-2010

"JSoul" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> On Mon, 21 Jun 2010 09:16:31 +0100, "123Jim"
> <(E-Mail Removed)> wrote:
>
>>
>>"123Jim" <(E-Mail Removed)> wrote in message
>>news:hvn5a0$sb1$(E-Mail Removed)-september.org...
>>>
>>> "JSoul" <(E-Mail Removed)> wrote in message
>>> news:(E-Mail Removed)...
>>>> I've got a site appearing here:
>>>>
>>>> http://www.boldplan.com/s/tiny/tRvebO
>>>>
>>>> It validates. But when you click the "login" link in the main menu, I
>>>> can't move that login box over to the left in the center of the page!
>>>> What gives?
>>>>
>>>> The css code affecting it is the following. I was wondering if someone
>>>> can give me some insight. Putting in a left: 300px; entry didn't help,
>>>> nor did making it relative. Changing the value for "top" did move the
>>>> box vertically but I can't move it horizontally! Can anyone lend a
>>>> hand please?
>>>>
>>>> /* login box*/
>>>> #login_pop{
>>>> position:absolute;
>>>> width:250px;
>>>> height:220px;
>>>> top:150px;
>>>> background:#151515;
>>>> color:#ccc;
>>>> text-align:left;
>>>> padding:10px;
>>>> border:1px solid #ccc;
>>>> z-index:1000;
>>>> }
>>>
>>>
>>> left: -210px;
>>> top: 50px;
>>> ?

>>
>>try left: -120px;
>>you have 'left: 54px;' which is written inline so you need to change that,
>>rather than add left to #login_pop .. or remove the inline style and add
>>it
>>to #login_pop
>>

>
> The negative numbers didn't work and I tried -300px. I don't see the
> 54px style inline. I just looked at the page source and also at the
> php files. Perhaps you can paste what you're seeing? Many thanks for
> helping out.


I used Firebug in Firefox to inspect the login box .. I am guessing that
this is all generated by moo javascript.. but there must be a way to change
this 'left' value ... by method of moo

Here's the inline style I see:

<div style="display: block; left: 54px; visibility: visible; opacity: 1;"
id="login_pop">
<form id="form-login" name="login" method="post" action="/index.php">
.......[snipped stuff]...........
</div>


 
Reply With Quote
 
 
 
 
123Jim
Guest
Posts: n/a
 
      06-21-2010

"JSoul" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> On Mon, 21 Jun 2010 15:09:03 +0100, "123Jim"
> <(E-Mail Removed)> wrote:
>
>>
>>"JSoul" <(E-Mail Removed)> wrote in message
>>news:(E-Mail Removed). ..
>>> On Mon, 21 Jun 2010 09:16:31 +0100, "123Jim"
>>> <(E-Mail Removed)> wrote:
>>>
>>>>
>>>>"123Jim" <(E-Mail Removed)> wrote in message
>>>>news:hvn5a0$sb1$(E-Mail Removed)-september.org...
>>>>>
>>>>> "JSoul" <(E-Mail Removed)> wrote in message
>>>>> news:(E-Mail Removed)...
>>>>>> I've got a site appearing here:
>>>>>>
>>>>>> http://www.boldplan.com/s/tiny/tRvebO
>>>>>>
>>>>>> It validates. But when you click the "login" link in the main menu, I
>>>>>> can't move that login box over to the left in the center of the page!
>>>>>> What gives?
>>>>>>
>>>>>> The css code affecting it is the following. I was wondering if
>>>>>> someone
>>>>>> can give me some insight. Putting in a left: 300px; entry didn't
>>>>>> help,
>>>>>> nor did making it relative. Changing the value for "top" did move the
>>>>>> box vertically but I can't move it horizontally! Can anyone lend a
>>>>>> hand please?
>>>>>>
>>>>>> /* login box*/
>>>>>> #login_pop{
>>>>>> position:absolute;
>>>>>> width:250px;
>>>>>> height:220px;
>>>>>> top:150px;
>>>>>> background:#151515;
>>>>>> color:#ccc;
>>>>>> text-align:left;
>>>>>> padding:10px;
>>>>>> border:1px solid #ccc;
>>>>>> z-index:1000;
>>>>>> }
>>>>>
>>>>>
>>>>> left: -210px;
>>>>> top: 50px;
>>>>> ?
>>>>
>>>>try left: -120px;
>>>>you have 'left: 54px;' which is written inline so you need to change
>>>>that,
>>>>rather than add left to #login_pop .. or remove the inline style and add
>>>>it
>>>>to #login_pop
>>>>
>>>
>>> The negative numbers didn't work and I tried -300px. I don't see the
>>> 54px style inline. I just looked at the page source and also at the
>>> php files. Perhaps you can paste what you're seeing? Many thanks for
>>> helping out.

>>
>>I used Firebug in Firefox to inspect the login box .. I am guessing that
>>this is all generated by moo javascript.. but there must be a way to
>>change
>>this 'left' value ... by method of moo
>>
>>Here's the inline style I see:
>>
>><div style="display: block; left: 54px; visibility: visible; opacity: 1;"
>>id="login_pop">
>> <form id="form-login" name="login" method="post"
>> action="/index.php">
>>......[snipped stuff]...........
>> </div>
>>

>
> Interesting - I've done a search to find that bit of code and cannot
> find it anywhere. This must be generated somehow, maybe in javascript,
> pulling out the number 54 from some parameter.
>
> This is the area of code where it's coming in from the below. The
> function showThem only appears in yj_login_pop.js which doesn't have
> any of the parameters appearing... hmm.... this isn't fun! Thanks so
> much for leading me towards the right direction...
>



I tried the page in various UI widths and the left style (54px) changed
depending on the browser's viewport width.. so looking through this code
below for where the screen width is used to set the 'left style; .....


> $document = JFactory::getDocument();
> $document->addStyleSheet(JURI::base() .
> 'modules/mod_yj_pop_login/stylesheet.css');
> echo "<!-- http://www.Youjoomla.com YJ Pop Login for Joomla 1.5 starts
> here --> ";
> ?>
>
> <?php if($type == 'logout') : ?>
> <div id="logins">
> <script type="text/javascript">
> window.addEvent('domready', function() {
> window.location='<?php echo JRoute::_(
> "index.php?Itemid=".$params->get('login',
> 'link_is_missing.html'));?>';
> });
> </script>
> </div>
> <?php else : ?>
>
>
>
>
>
> <?php
> JHTML::_('behavior.mootools');
> $document->addScript(JURI::base() .
> 'modules/mod_yj_pop_login/src/yj_login_pop.js');
>
>
> ?>
> <script type="text/javascript">
> window.addEvent('domready', function() {
> $("login_pop").setStyles({
> left: (window.getScrollLeft() +
> (window.getWidth() - 900)/2)+'px'
> });
> });



I find the above where the user agent window is found [
window.getWidth() ]
so how do we change this to make the popup login window popup more to the
left?
How about:

window.addEvent('domready', function() {
$("login_pop").setStyles({
left: (window.getScrollLeft() +
(window.getWidth() - (900-240))/2)+'px'
});


I added -240 in parenthesis .. since on my normal viewport width I wanted it
to be whatever it was before less 120 pixels to the left ..
I don't know if the above will work .. but it's certainly worth trying





 
Reply With Quote
 
123Jim
Guest
Posts: n/a
 
      06-21-2010

"123Jim" <(E-Mail Removed)> wrote in message
news:hvoih7$474$(E-Mail Removed)-september.org...
>
> "JSoul" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>> On Mon, 21 Jun 2010 15:09:03 +0100, "123Jim"
>> <(E-Mail Removed)> wrote:
>>
>>>
>>>"JSoul" <(E-Mail Removed)> wrote in message
>>>news:(E-Mail Removed) ...
>>>> On Mon, 21 Jun 2010 09:16:31 +0100, "123Jim"
>>>> <(E-Mail Removed)> wrote:
>>>>
>>>>>
>>>>>"123Jim" <(E-Mail Removed)> wrote in message
>>>>>news:hvn5a0$sb1$(E-Mail Removed)-september.org...
>>>>>>
>>>>>> "JSoul" <(E-Mail Removed)> wrote in message
>>>>>> news:(E-Mail Removed)...
>>>>>>> I've got a site appearing here:
>>>>>>>
>>>>>>> http://www.boldplan.com/s/tiny/tRvebO
>>>>>>>
>>>>>>> It validates. But when you click the "login" link in the main menu,
>>>>>>> I
>>>>>>> can't move that login box over to the left in the center of the
>>>>>>> page!
>>>>>>> What gives?
>>>>>>>
>>>>>>> The css code affecting it is the following. I was wondering if
>>>>>>> someone
>>>>>>> can give me some insight. Putting in a left: 300px; entry didn't
>>>>>>> help,
>>>>>>> nor did making it relative. Changing the value for "top" did move
>>>>>>> the
>>>>>>> box vertically but I can't move it horizontally! Can anyone lend a
>>>>>>> hand please?
>>>>>>>
>>>>>>> /* login box*/
>>>>>>> #login_pop{
>>>>>>> position:absolute;
>>>>>>> width:250px;
>>>>>>> height:220px;
>>>>>>> top:150px;
>>>>>>> background:#151515;
>>>>>>> color:#ccc;
>>>>>>> text-align:left;
>>>>>>> padding:10px;
>>>>>>> border:1px solid #ccc;
>>>>>>> z-index:1000;
>>>>>>> }
>>>>>>
>>>>>>
>>>>>> left: -210px;
>>>>>> top: 50px;
>>>>>> ?
>>>>>
>>>>>try left: -120px;
>>>>>you have 'left: 54px;' which is written inline so you need to change
>>>>>that,
>>>>>rather than add left to #login_pop .. or remove the inline style and
>>>>>add
>>>>>it
>>>>>to #login_pop
>>>>>
>>>>
>>>> The negative numbers didn't work and I tried -300px. I don't see the
>>>> 54px style inline. I just looked at the page source and also at the
>>>> php files. Perhaps you can paste what you're seeing? Many thanks for
>>>> helping out.
>>>
>>>I used Firebug in Firefox to inspect the login box .. I am guessing that
>>>this is all generated by moo javascript.. but there must be a way to
>>>change
>>>this 'left' value ... by method of moo
>>>
>>>Here's the inline style I see:
>>>
>>><div style="display: block; left: 54px; visibility: visible; opacity: 1;"
>>>id="login_pop">
>>> <form id="form-login" name="login" method="post"
>>> action="/index.php">
>>>......[snipped stuff]...........
>>> </div>
>>>

>>
>> Interesting - I've done a search to find that bit of code and cannot
>> find it anywhere. This must be generated somehow, maybe in javascript,
>> pulling out the number 54 from some parameter.
>>
>> This is the area of code where it's coming in from the below. The
>> function showThem only appears in yj_login_pop.js which doesn't have
>> any of the parameters appearing... hmm.... this isn't fun! Thanks so
>> much for leading me towards the right direction...
>>

>
>
> I tried the page in various UI widths and the left style (54px) changed
> depending on the browser's viewport width.. so looking through this code
> below for where the screen width is used to set the 'left style; .....
>
>
>> $document = JFactory::getDocument();
>> $document->addStyleSheet(JURI::base() .
>> 'modules/mod_yj_pop_login/stylesheet.css');
>> echo "<!-- http://www.Youjoomla.com YJ Pop Login for Joomla 1.5 starts
>> here --> ";
>> ?>
>>
>> <?php if($type == 'logout') : ?>
>> <div id="logins">
>> <script type="text/javascript">
>> window.addEvent('domready', function() {
>> window.location='<?php echo JRoute::_(
>> "index.php?Itemid=".$params->get('login',
>> 'link_is_missing.html'));?>';
>> });
>> </script>
>> </div>
>> <?php else : ?>
>>
>>
>>
>>
>>
>> <?php
>> JHTML::_('behavior.mootools');
>> $document->addScript(JURI::base() .
>> 'modules/mod_yj_pop_login/src/yj_login_pop.js');
>>
>>
>> ?>
>> <script type="text/javascript">
>> window.addEvent('domready', function() {
>> $("login_pop").setStyles({
>> left: (window.getScrollLeft() +
>> (window.getWidth() - 900)/2)+'px'
>> });
>> });

>
>
> I find the above where the user agent window is found [
> indow.getWidth() ]
> so how do we change this to make the popup login window popup more to the
> left?
> How about:
>
> window.addEvent('domready', function() {
> $("login_pop").setStyles({
> left: (window.getScrollLeft() +
> (window.getWidth() - (900-240))/2)+'px'
> });
>
>
> I added -240 in parenthesis .. since on my normal viewport width I wanted
> it to be whatever it was before less 120 pixels to the left ..
> I don't know if the above will work .. but it's certainly worth trying
>


ok .. I was maybe too quick to hit the send button there .. as I suspect the
modification might push the login box more to the right .....

I'm not sure what value would be produced by getscrollLeft() .. but I'll
just make sure that I take more pixels out of the calculation ..

like this:

window.addEvent('domready', function() {
$("login_pop").setStyles({
left: (window.getScrollLeft() +
(window.getWidth() - 1300)/2)+'px'
});

so it should be -150 on my screen width plus whatever is produced by
window.getScrollLeft()



 
Reply With Quote
 
123Jim
Guest
Posts: n/a
 
      06-21-2010

"JSoul" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> On Mon, 21 Jun 2010 22:08:15 +0100, "123Jim"
> <(E-Mail Removed)> wrote:
>
>>
>>"123Jim" <(E-Mail Removed)> wrote in message
>>news:hvoih7$474$(E-Mail Removed)-september.org...
>>>


<snipped> stuff

>>window.addEvent('domready', function() {
>>$("login_pop").setStyles({
>>left: (window.getScrollLeft() +
>>(window.getWidth() - 1300)/2)+'px'
>> });
>>
>>so it should be -150 on my screen width plus whatever is produced by
>>window.getScrollLeft()
>>
>>

>
> THAT WAS IT!!!!! I was wondering about that when I wrote the last
> one...scrollleft... hmmm.... so I put in 1600 and all is good!!!!
>
> Thank you *so* much for spending a little time on this riddle. Now it
> works beautifully and for the job intended. Learn new things every
> day.


cool, looks good too.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
problem in running a basic code in python 3.3.0 that includes HTML file Satabdi Mukherjee Python 1 04-04-2013 07:48 PM
Writing move constructors and move assignment Andrew Tomazos C++ 2 12-12-2011 01:45 PM
Re: Can't move that dialog box! rf HTML 5 06-22-2010 05:12 AM
Re: Can't move that dialog box! dorayme HTML 1 06-21-2010 02:24 PM
I am trying to move spaces to a weblistbox and when I move them... Eduardo78 ASP .Net Web Controls 0 11-03-2005 06:06 PM



Advertisments