CSS Conflict

Hi,

ok, i am ready can u enabled mobile position for login?

thanks

Hi

Done. Please check.

Code added to /css/override.css:

Code: Select all

#toggledLogin_overlay {
    position: fixed;
    display: none;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255,0.8);
    z-index: 9998;
}

#toggledLogin_overlay > div {
    background-color: #ffffff;
    width: 450px;
    padding: 20px;
    border-radius: 5px 5px 5px 5px;
    position: absolute;
    z-index: 9999;
    left: 50%;
    margin-left: -245px;
    top: 10%;
}

#toggledLogin_overlay.active {
    display: block;
   
}

.fa-times-circle:before {
    content: "\f057";
}

.fa-times-circle {
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    font-size: 2em;
    position: absolute;
    right: -15px;
    top: -15px;
    cursor: pointer;
}


Code added to /layout/default.php

Code: Select all

   <div id="toggledLogin_overlay">
      <script type="text/javascript">(function($) {$(document).ready(function() {
         $('a.toggledLogin').click(function(){
            $('#toggledLogin_overlay').toggleClass('active');
         });
      });})(jQuery)</script>

      <div>
         <a class="fa-times-circle toggledLogin"></a>
         <jdoc:include type="modules" name="toggled_login" style="gk_style" />
      </div>
   </div>


Also an additional css class to menu element to trigger the popup with new module position: "toggleLogin"

Hi,
thanks for your support. Perfect but why doesn't still work from mobile?
thanks

Hi

Maybe because first it loads a css transformation and after that comes javascript functionality. Try change in /layout/default.php the code I added one selector from:

Code: Select all

$('a.toggledLogin')


to

Code: Select all

$('li.toggledLogin')


Hi,

i did it but still doesn't work

I tried editing the file that u said me but it doesn't work and with new file the "x" button to close pop up doesn't work so i replaced the original. additional suggestion?

Also, in the home page now i got 2 new errors: unable to obtain name... i thing that come from your modification? do u have idea what it mean?thanks

Hi

Sorry, my bad. I forgot that menu has a different menu so it requires a different code as a trigger for popup as well.

Here is a code supporting both menus:

Code: Select all

   <div id="toggledLogin_overlay">
      <script type="text/javascript">(function($) {$(document).ready(function() {
         $('a.toggledLogin').click(function(){
            $('#toggledLogin_overlay').toggleClass('active');
         });

         $('#gkMobileMenu select').change(function(e) {
            var sel = $('#gkMobileMenu select')[0];
            var message_index = sel.options[sel.selectedIndex].text;
            if(message_index.toLowerCase().indexOf('accedi') >= 0){
               $('#toggledLogin_overlay').toggleClass('active');
            }
         });
      });})(jQuery)</script>

      <div>
         <a class="fa-times-circle toggledLogin"></a>
         <jdoc:include type="modules" name="toggled_login" style="gk_style" />
      </div>
   </div>


Hi Man,
Many thanks for your support.
Now it works from mobile too.
Omly two question:
1)what about js error?
2)the popup is not responsive so from mobile phone it is open very big and i cannot close it. There is a way to do it respondive or i need to reduce dimension in general?
Many thanks again

Hi

Can You please put the site back so I'll check this error and what to do to make popup responsive ?

site is online now
many many many thanks really

Hi

Are You sure it's working correctly ? This is all I can see under the url I've worked before ;/ Did url changed ?

Hi,

yes i can see.
I am changing domain and installing on a virtual server so i hope that this issue is due to it.

I will advise you when will work
many thank for your patience

Hi

It's just a homepage which is not working, so I can check the popup responsive functionality.

Please add this code to mobile.css file:

Code: Select all

#toggledLogin_overlay > div {
    left: 3% !important;
    margin-left: 0 !important;
    padding: 2% !important;
    width: 90% !important;
}


Hi,

now site is again online.
Please can you say me where is the mobile.css file?

hi, i found it and i added code to this file.
But module is not fully responsive, for example the last button "login with Facebook" is not showed.
have u got other tricks?
If not thank u so much again

Hi

I can take a look, but site is offline now. Can You send me an access to it.

Hi

Sorry. I took a look at wrong site, just say new link in other thread. Module is just too height. Please add this to mobile.css:

Code: Select all

#toggledLogin_overlay > div {
    top: 3%;
}

#cModule-HelloMe p {
    margin: 0;
}

#cModule-HelloMe label br {
    display: none;
}


Hi,

i addeded this code but how u can see from a mobile in http://developer.upyourface.com the button "login with facebook" still not visible, and the scroll in the login module doesn't work so i can't click this button.

Hi

That's because I cannot see the code I gave You in css. Try clear joomla cache.

Hi, i cleared it. Can u see now?

Hi

Sorry for late answer I got sick. I still canot see the extra code in mobile.css , please look Yourself http://developer.upyourface.com/templat ... mobile.css .

HI MAN,

THANKS now is solved.

Many thanks for ur support again!

Claudio