Example 15: DOM Manipulation (Part IV)
Posted November 17th 2011, 2:02pm
This example will demonstrate how to modify the look of an element whose contents are in a repeating format. A good example of such an element is the Recent Topics widget. Although there are no classes or other attributes, each entry has the same format. A repeating format gives us the ability to read the contents without the need for classes or atributes!

This example is provided AS-IS. I will not answer questions about installing this on your forumotion board, so please don't ask. I would be happy to answer questions about the techniques used, and would be thrilled to have a member post about their using this technique to modify a different widget or element!

The following script will read the contents of the Recent Topics widget, and create a block on the homepage of phpBB3 and IPB2/Invision boards. The block is similar to the look of the block in this tutorial.

Please note that there are several requirements for this script to work on your board:
  1. The Recent Topics widget must be the first widget, and scrolling must be OFF.
  2. The chatbox must be activated.
  3. The widgets must be on the right (can be changed in the script/CSS)
  4. Additional CSS is needed if you don't currently have widgets displayed (see below).
Here is the script:

var CopyrightNotice = 'Reformatted Recent Topics widget script for forumotion phpBB3 and Invision boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';

function rtnew() {
var y=document.createElement('div');
y.id='rtopic';
var x=$('#right .module')[0];
var au=$(x).find('a:odd').get();
var to=$(x).find('a:even').get();
for (i=au.length-1;i>=0;i--) {
var z=document.createElement('tr');
var time=au[i].nextSibling.nodeValue;
z.appendChild(au[i]);
z.insertBefore(to[i],au[i]);
$(au[i]).before('<td>'+time+'</td>');
$(au[i]).wrap('<td></td>');
$(to[i]).wrap('<td></td>');
y.insertBefore(z,y.firstChild);
}
y.innerHTML='<div id="rtitle"><b>Recent Topics</b></div><table id="rtable" cellspacing="0"><tr><th class="ddto"><b>Topic</b></th><th class="ddti"><b>Time Posted</b></th><th class="ddau"><b>Author</b></th></tr>'+y.innerHTML+'</table>';
$('#content-container').before(y);
}

$(function() {
if (document.getElementById('chatbox_popup')) {rtnew();}
$('#right .module').eq(0).remove();
});

What you should immediately notice is the method used to select the author and topic name links. Since we are dealing with a repeating format, the links repeat as well. This allows us to use the :even and :odd selectors in jQuery to select the links. Once inside the loop, the posting time can be easily accessed since it immediately follows the author link.

The loop then uses the jQuery $.wrap() function to wrap the links in TD tags, and also place the posting time information in its proper location. Finally, the entire block is created and placed in its final location.

If you want this block to display on every page where a widget would be displayed, call the rtnew() function without using the if(){} statement to check for the homepage.

The following CSS will format the block using phpBB-like colors:

#rtopic {width:900px;margin:10px auto;padding:0 6px 5px;background:#1675bc;font-family:Verdana;font-size:12px;text-align:center;border-radius:6px;}
#rtitle {height:30px;line-height:30px;color:#fff;font-size:14px;}
#rtable {width:100%;border-collapse:collapse;}
#rtable th {padding:5px 0;background:#cadceb;border:1px solid #1675bc;}
#rtable td {padding:5px;background:#fff;border:1px solid #1675bc;font-family:Tahoma;}
.ddto {width:50%;}
.ddti {width:25%;}
.ddau {width:auto;}

And finally, if you don't currently use widgets, the following CSS will be needed to remove the widget display on the right:

#right {display:none;}
#container,#content,#main {float:none !important; margin:0px !important;}

I hope you have learned some new techniques for creating great scripts!
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 15: DOM Manipulation (Part IV)
Posted November 18th 2011, 7:35am
Dion this can be done with all the widgets , i mean that i want the display 3 widgets on the top of the forum !
φ
Posts: 42
Joined: October 11th 2011, 11:00pm
Likes Given: 13
Likes Received: 1
Example 15: DOM Manipulation (Part IV)
Posted November 18th 2011, 10:18pm
Sure! If you know the widgets you want to move, then all you need is a short script to move those elements from the widget block to your new block. Here's an example that will move the first three right-side widgets to a new block:

$(function() {
var y=document.createElement('div');
y.className='widgetblock clearfix';
y.appendChild($('#right .module')[0]);
y.appendChild($('#right .module')[0]);
y.appendChild($('#right .module')[0]);
$('#content-container').before(y);
});

You would need some CSS of the form:

.widgetblock {width:900px;margin:5px auto;}
.widgetblock .module {float:left;width:288px;margin:0 5px;}
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
recent topics invision
Posted November 21st 2011, 5:46am
hey dion sorry if this is the rong place but wernt sure where cuz it wouldnt let me post

yh i used ur recent topics 4 invision great work bro
[url=/t8486-example-15-dom-manipulation-part-iv]http://www.diondesigns.org/t8486-example-15-dom-manipulation-part-iv[/url]

is it possible 2 have images next 2 the links n1.
φ
Posts:
Avatar
Guest
Example 15: DOM Manipulation (Part IV)
Posted November 21st 2011, 3:56pm
Right after this line in the script:

$(au[i]).before('<td>'+time+'</td>');

add this line:

$(to[i]).prepend('<img src="IMAGE URL" /> ');

Replace "IMAGE URL" with the URL of the image you want to use.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 15: DOM Manipulation (Part IV)
Posted November 22nd 2011, 3:46am
dion thanks alot bro ur the best where would we be wiv out u man
thanks again so much

ow 1 more thing i installed it on my test forum worked perfect but then i installed it on my normal forum but the time an date dont work it cums up null
Image
φ
Posts:
Avatar
Guest
Example 15: DOM Manipulation (Part IV)
Posted November 22nd 2011, 6:46am
hi sir dion it works perfect to me
can to adjust its width and change to color that would fit to my forum main color? thanks sir


Image
φ
Posts:
Avatar
Guest
Example 15: DOM Manipulation (Part IV)
Posted November 22nd 2011, 10:46am
[spoiler=Spoiler]
sentinel said:
hi sir dion it works perfect to me
can to adjust its width and change to color that would fit to my forum main color? thanks sir


Image
[/spoiler]

I think I know that width "bug". Try this: http://css-tricks.com/7323-box-sizing/
φ
Posts: 64
Joined: June 17th 2011, 11:00pm
Location: 127.0.0.1/
Likes Given: 3
Likes Received: 2
Example 15: DOM Manipulation (Part IV)
Posted November 22nd 2011, 10:29pm
is that a forum advertise? just provide me the right code, thanks
φ
Posts:
Avatar
Guest
Example 15: DOM Manipulation (Part IV)
Posted November 22nd 2011, 11:00pm
Your board width is too narrow. Increase your board width and your problem will go away.

If you need help with that, please ask on the forumotion help board and not here. Thank you.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 15: DOM Manipulation (Part IV)
Posted November 23rd 2011, 12:07pm
Bump lol
dion ive installed my css an theme wots on my test forum 2 my original and i still get the null time an date so it aint css problem !

in the normal resent post widget the time an date worked fine

do u have any ideas bro

or if not cud i remove the time an date from it ?
thanks 4 this dion
φ
Posts:
Avatar
Guest
Example 15: DOM Manipulation (Part IV)
Posted November 23rd 2011, 2:03pm
To remove the "Time posted" column, remove this line in the script:

$(au[i]).before('<td>'+time+'</td>');

Replace the similar-looking line with this:

y.innerHTML='<div id="rtitle"><b>Recent Topics</b></div><table id="rtable" cellspacing="0"><tr><th class="ddto"><b>Topic</b></th><th class="ddau"><b>Author</b></th></tr>'+y.innerHTML+'</table>';

And make the following CSS changes:

#rtopic {width:750px;....}
.ddto {width:65%;}
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 15: DOM Manipulation (Part IV)
Posted November 23rd 2011, 5:37pm
sir how about to align the topic title to left and put the an image bfore the link of the topic?
φ
Posts:
Avatar
Guest
resent topics
Posted November 23rd 2011, 6:16pm
hay dion thanks 4 sorting that null thing out my resent topics is lookin very nice now
yh
is possible 2 put a image next 2 authors names ?

and could u add like new members who have joined in 2 the code aswell ?
φ
Posts:
Avatar
Guest
Example 15: DOM Manipulation (Part IV)
Posted November 23rd 2011, 6:34pm
It's possible...Search this code
    y.innerHTML='<div id="rtitle"><b>Recent Topics</b></div><table id="rtable" cellspacing="0"><tr><th class="ddto"><b>Topic</b></th><th class="ddti"><b>Time Posted</b></th><th class="ddau"><b>Author</b></th></tr>'+y.innerHTML+'</table>';

Add <img src="..." /> before Author
φ
Posts: 209
Joined: September 10th 2011, 11:00pm
Location: SC, USA
Likes Given: 8
Likes Received: 8
Example 15: DOM Manipulation (Part IV)
Posted November 23rd 2011, 6:47pm
johncov1 said:
hay dion thanks 4 sorting that null thing out my resent topics is lookin very nice now
yh
is possible 2 put a image next 2 authors names ?

and could u add like new members who have joined in 2 the code aswell ?

http://www.diondesigns.org/t8486-?showpost-p10785

is very close to what you need to add to put an image in front of authors' names.

As for your other request, sorry, you'll need to do that one yourself. Start a new topic and maybe someone will be willing to help you out.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 15: DOM Manipulation (Part IV)
Posted February 2nd 2012, 10:50am
hi dion, is it possible for this "advanced" recent topic widget to also appear at the portal?
φ
Posts: 21
Joined: December 10th 2011, 12:00am
Likes Given: 2
Topic locked
17 posts

Who is online

Users browsing this forum: No registered users and 0 guests