The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Create expand/collapse DD element before all the other DDs instead of being last

3 posters

Go down

Solved Create expand/collapse DD element before all the other DDs instead of being last

Post by okamii March 6th 2024, 1:59 am

I followed this tutorial on how to create an expand/collapse categories "icon" which creates a DD element, and since it creates the DD last after all, it looks like this: (creating DD in the corner right)
Create expand/collapse DD element before all the other DDs instead of being last 111b10
Instead, I wanted to create the DD element or somehow set the position such as like it was the first DD element, which then it'd come before the category name and look like this:
Create expand/collapse DD element before all the other DDs instead of being last 111a10

Tutorial mentioned (which was the response to someone's request for help with expand/collapse system for categories)
كونان2000 wrote:This is the JAVASCRIPT code
Code:

        $(function() {
            if (_userdata.page_desktop)
                return;
            var a = $('.forabg'), i = 0, j = a.length, button, list, dd;
            for (; i < j; i++) {
                list = a[i].getElementsByTagName('UL');
                button = document.createElement('A');
                dd = document.createElement('DD');
                button.innerHTML = '';
                button.href = '#';
                button.className = 'fa fa_toggle';
                button.id = 'fa_toggle-' + i;
                list[1].id = 'fa_catg-' + i;
                if (my_getcookie('fa_catg-' + i) == 'hidden') {
                    button.innerHTML = '';
                    list[1].style.display = 'none'
                }
                button.onclick = function() {
                    var id = this.id.replace(/.*?(\d+)/, '$1')
                      , catg = document.getElementById('fa_catg-' + id);
                    if (/none/.test(catg.style.display)) {
                        this.innerHTML = '';
                        catg.style.display = 'block';
                        my_setcookie('fa_catg-' + id, 'shown')
                    } else {
                        this.innerHTML = '';
                        catg.style.display = 'none';
                        my_setcookie('fa_catg-' + id, 'hidden')
                    }
                    return false
                }
                ;
                dd.appendChild(button);
                list[0].firstChild.firstChild.appendChild(dd)
            }
            'par ange tuteur'
        });

2
Find the next part in index_box template
Code:
<ul class="linklist">

replace it with
Code:
            <style>
         
            a.fa_toggle {
            border: solid #b1a8ab 1px;
            text-align: center;
            background: #0000007d;
            width: 15px;
        }
        a:visited {
            color: #f1f2f3;
            text-decoration: none;
        }
       
        .fa {
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
            </style>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <ul class="linklist">


Last edited by okamii on March 6th 2024, 3:54 am; edited 1 time in total
okamii
okamii
Forumember

Posts : 40
Reputation : 2
Language : English

https://ujvteifkgywlodlsiumk.actieforum.com/

Back to top Go down

Solved Re: Create expand/collapse DD element before all the other DDs instead of being last

Post by Sir Chivas™ March 6th 2024, 3:04 am

Hi,


Please follow the steps shown below to achieve this.

Replace the code you inserted in the template with this:

Code:
    <style>
 
  a.fa_toggle {
    border: solid #b1a8ab 1px;
    text-align: center;
    background: #fff;
    width: 20px;
    margin-left: -1774px;
}
a:visited {
    text-decoration: none;
}
 
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
      h2 {
      margin-left: 46px !important;
      }
    </style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="linklist">

Preview: https://sirchivastest.forumotion.com/
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

TonnyKamper and okamii like this post

Back to top Go down

Solved Re: Create expand/collapse DD element before all the other DDs instead of being last

Post by okamii March 6th 2024, 3:15 am

Sir Chivas™ wrote:Hi,


Please follow the steps shown below to achieve this.

Replace the code you inserted in the template with this:

Code:
    <style>
 
  a.fa_toggle {
    border: solid #b1a8ab 1px;
    text-align: center;
    background: #fff;
    width: 20px;
    margin-left: -1774px;
}
a:visited {
    text-decoration: none;
}
 
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
      h2 {
      margin-left: 46px !important;
      }
    </style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="linklist">

Preview: https://sirchivastest.forumotion.com/
Thanks, partially worked. on your forum and mine when a.fa_toggle margin-left is 1774px I have to do several zoom outs to see it on screen and not really in the left, it worked with -940px for me, which makes me wonder if perhaps margins aren't the best way to handle this to keep it responsive? But I really dont know any other way, most of the times I see something responsive and simple it uses tables, but I don't think it'd work or how would I be able to try it that way with this. Do you know any alternative way to keep it position responsive according to screen size?
okamii
okamii
Forumember

Posts : 40
Reputation : 2
Language : English

https://ujvteifkgywlodlsiumk.actieforum.com/

Sir Chivas™ likes this post

Back to top Go down

Solved Re: Create expand/collapse DD element before all the other DDs instead of being last

Post by Sir Chivas™ March 6th 2024, 3:19 am

As I figured much, I need to get a smaller screen. bounce



The position: static property prevents left from having an effect. Only way I forced it to move. It's due to the script, but I got 0 knowledge there. Let me play around with it more.
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

okamii likes this post

Back to top Go down

Solved Re: Create expand/collapse DD element before all the other DDs instead of being last

Post by okamii March 6th 2024, 3:25 am

Sir Chivas™ wrote:As I figured much, I need to get a smaller screen. bounce



The position: static property prevents left from having an effect. Only way I forced it to move. It's due to the script, but I got 0 knowledge there. Let me play around with it more.
Thanks, oddly enough I used margins for the embedded login below navigation links, and if you zoom in/out, it barely messes up, only "Log in automatically : " but it's not really by a lot the difference. I really don't get how it's affecting in this case so badly.
okamii
okamii
Forumember

Posts : 40
Reputation : 2
Language : English

https://ujvteifkgywlodlsiumk.actieforum.com/

Back to top Go down

Solved Re: Create expand/collapse DD element before all the other DDs instead of being last

Post by Sir Chivas™ March 6th 2024, 3:28 am

For me it actually cuts off and shows the toggle in the middle.

Create expand/collapse DD element before all the other DDs instead of being last Toggle10
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

okamii likes this post

Back to top Go down

Solved Re: Create expand/collapse DD element before all the other DDs instead of being last

Post by okamii March 6th 2024, 3:52 am

Sir Chivas™ wrote:For me it actually cuts off and shows the toggle in the middle.

Create expand/collapse DD element before all the other DDs instead of being last Toggle10
Oh my.. I was guessing everything with 'Inspector elements' from the web browser to keep changing CSS fast and experiment, turns out I found a way, instead of using margin-left, I set margin to auto, left property to 25px (which we weren't using) along with position property to absolute. Yay! Thanks for the help, I was stuck without changing the position at all before you suggested me your changes so you helped a lot Smile
okamii
okamii
Forumember

Posts : 40
Reputation : 2
Language : English

https://ujvteifkgywlodlsiumk.actieforum.com/

Sir Chivas™ likes this post

Back to top Go down

Solved Re: Create expand/collapse DD element before all the other DDs instead of being last

Post by Sir Chivas™ March 6th 2024, 3:59 am

Ah! There you go, two heads are better than one after all. I'm glad I could be some sort of assistance.
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

okamii likes this post

Back to top Go down

Solved Re: Create expand/collapse DD element before all the other DDs instead of being last

Post by SLGray March 6th 2024, 4:49 am

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


Create expand/collapse DD element before all the other DDs instead of being last Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51533
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

okamii likes this post

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum