Change forum width

[Mati]

Is there a script to toggle the page width the default width can be max-width: 1400px and when you click the link or something it should change to max-width: 95% for example.

I'm using phpBB3

@Razor12345 something like XenForo forums have a link at the bottom of the forum.

[Razor12345]

something like XenForo forums have a link at the bottom of the forum.

I have not used this resource.

I understand correctly - there should be a switch with multiple buttons. When the button is clicked, the width of the forum should change and be saved?

[Mati]

something like XenForo forums have a link at the bottom of the forum.

I have not used this resource.

I understand correctly - there should be a switch with multiple buttons. When the button is clicked, the width of the forum should change and be saved?

Can you code something similar is that possible to do so?

[Razor12345]

AP - Display - Template - General - overall_footer_begin

Find:

Code:

<ul class="linklist clearfix">
            <li class="footer-home">
               <a class="icon-home" href="{U_INDEX}" accesskey="h">{L_HOME}</a>
            </li>
            <li class="rightside">
<!-- BEGIN html_validation -->
            </li>
         </ul>

Replace by this:

Code:

<ul class="linklist clearfix">
            <li class="footer-home">
               <a class="icon-home" href="{U_INDEX}" accesskey="h">{L_HOME}</a>
            </li>
                          <li class='change_width__button'>Change width
                          </li>
            <li class="rightside">
<!-- BEGIN html_validation -->
            </li>
         </ul>

This is us adding a button to the forum footer

At the end of template, insert this script:

Code:

<script>
  window.addEventListener('load', function() {
 
    if (localStorage.getItem('widthUser')) {
      document.querySelector('#wrap').classList.add('changed');
    }
 
    const changeWidthBtn = document.querySelector('.change_width__button');
    changeWidthBtn.addEventListener('click', function() {
      document.querySelector('#wrap').classList.toggle('changed');
      if (localStorage.getItem('widthUser')) {
        localStorage.removeItem('widthUser');
      } else {
          localStorage.setItem('widthUser', 'yes');
  }
  });
  });
</script>

Save. Publish.

AP - Display - Colors&CSS - CSS Stylesheet

Code:

#wrap.changed {
  width: 100%;
}

#wrap {
  transition: width 0.3s ease;
}

.change_width__button {
  margin-left: 10px;
}

Code: width: 100%;

- the width of the forum after the button is pressed.

Save.

Since we are working with a loaded page in the code, for a couple of seconds the pages will be the width that is set in AP and then become the desired width.

Result:



You can try this code on my test forum: https://testtesttest.forumotion.me/

[Mati]

Thanks it works but there is a problem @Razor12345 when you load the page or going in to the forums the page goes back to 1400px and then the width we set to change so is there any way to eliminate this loading problem?

[Razor12345]

Thanks it works but there is a problem @Razor12345 when you load the page or going in to the forums the page goes back to 1400px and then the width we set to change so is there any way to eliminate this loading problem?

Since we are working with a loaded page in the code, for a couple of seconds the pages will be the width that is set in AP and then become the desired width.

You can use another event -

Code: DOMContentLoaded

It will still show the forum width set in AP for a second, but my tests have shown that this time is a bit shorter than with

Code: load

Code:

<script>
  window.addEventListener('DOMContentLoaded', function() {
 
    if (localStorage.getItem('widthUser')) {
      document.querySelector('#wrap').classList.add('changed');
    }
 
    const changeWidthBtn = document.querySelector('.change_width__button');
    changeWidthBtn.addEventListener('click', function() {
      document.querySelector('#wrap').style.transition = 'width 0.3s ease';
      document.querySelector('#wrap').classList.toggle('changed');
      if (localStorage.getItem('widthUser')) {
        localStorage.removeItem('widthUser');
      } else {
          localStorage.setItem('widthUser', 'yes');
  }
  });
  });
</script>

In CSS code delete this:

Code:

#wrap {
  transition: width 0.3s ease;
}

The smoothness in the transition I added to the JS code:

Code: document.querySelector('#wrap').style.transition = 'width 0.3s ease';

[Mati]

I know but it's kind annoying so is that all what we can do or can we fix this issue?

[Razor12345]

We can hide the block display with CSS, and when the script is running, show the block:

In CSS

Code:

#wrap {
  display: none;
}

JS code:

Code:

<script>
  window.addEventListener('DOMContentLoaded', function() {
 
    if (localStorage.getItem('widthUser')) {
      document.querySelector('#wrap').classList.add('changed');
    }
 
    document.querySelector('#wrap').style.display = 'block';
 
    const changeWidthBtn = document.querySelector('.change_width__button');
    changeWidthBtn.addEventListener('click', function() {
      document.querySelector('#wrap').style.transition = 'width 0.3s ease';
      document.querySelector('#wrap').classList.toggle('changed');
      if (localStorage.getItem('widthUser')) {
        localStorage.removeItem('widthUser');
      } else {
          localStorage.setItem('widthUser', 'yes');
  }
  });
  });
</script>

There's nothing more we can do

[Mati]

The script work but the textarea is geting to long when I added the css #wrap {display: none;} or maybe the script chose the problem.

[Razor12345]

Strange behavior. Perhaps there is something hidden from us in the post editor.

Let's go back to the

Code: load

event and change the

Code: display

property to

Code: visibility

JS code:

Code:

<script>
  window.addEventListener('load', function() {
 
    if (localStorage.getItem('widthUser')) {
      document.querySelector('#wrap').classList.add('changed');
    }
 
      document.querySelector('#wrap').style.visibility = 'visible';
 
    const changeWidthBtn = document.querySelector('.change_width__button');
    changeWidthBtn.addEventListener('click', function() {
      document.querySelector('#wrap').style.transition = 'width 0.3s ease';
      document.querySelector('#wrap').classList.toggle('changed');
      if (localStorage.getItem('widthUser')) {
        localStorage.removeItem('widthUser');
      } else {
          localStorage.setItem('widthUser', 'yes');
  }
  });
  });
</script>

CSS code:

Code:

#wrap.changed {
  width: 100%;
}

#message-box textarea, .sceditor-container iframe, .sceditor-container textarea {
  width: 98% !important;
}

#wrap {
  visibility:hidden;
}

.change_width__button {
  margin-left: 10px;
}

I added this code:

Code:

#message-box textarea, .sceditor-container iframe, .sceditor-container textarea {
  width: 98% !important;
}

Because the width of the forum affects the width of the editor.

[Razor12345]

Is your request complete?
if your request is complete, please mark it as Solved

[Razor12345]

It's been two weeks now. We have not heard back from the author.
I'm closing the topic and moving it to the archive.

If your problem is not solved - send me a private message and I will open this topic for further help.

Problem solved & topic archived. Please read our forum rules: ESF General Rules