If you've been sent to this forum because one of the sites you're browsing has no images please see this.
If you're not sure if the site you're browsing is affected by this please check the link above.

Odd behaviour of middle-click here on the site

General forum information, announcements, news, questions and suggestions.

Moderator: EasyList authors

Post Reply
User avatar
Lain_13
RU AdList Author
RU AdList Author
Posts: 880
Joined: Fri Aug 20, 2010 11:20 am
Reputation: 2

Odd behaviour of middle-click here on the site

Post by Lain_13 » Thu Feb 26, 2015 5:02 pm

When I clicking on topics and groups of topics here on the site it opens both in the new tab _and_ in the current one after a slight delay.
As I understood it's caused by onclick code attached to the LI elements. This happens due to event bubbling which retranslates all click events of a child to all parents.
I think it's the worst way to make them clickable. I'd recommend replacing LI elements with normal A links and update styles to support change of background color on hover instead of changing text color. All links within a link will remain clickable.

p.s. Even if you don't want to change LI to A and without issue above attaching separate onclick to every element on the page is a horrible idea. You could have achieved this with 1 click handler function subscribed to clicks from all elements on the page.

Example:

Code: Select all

function rowClickHandler(e){
  if (e.which == 2) return; //avoid reaction on the middle-click
  var i = e.target;
  while (i && !i.classList.contains('row')) i = i.parentNode; // classList not supported in old browsers. there are polyfill for this
  if (i) i = i.querySelector('.forumtitle,.topictitle'); //you may need to extend list of classes here
  if (i) window.location.href = i.href;
}

[].forEach.call(document.querySelectorAll('.row'),function(i){
  i.onclick = null; // this row removes current on-click behavior
  i.addEventListener('click', rowClickHandler); //not supported in IE6. there are different function to call, though
});

User avatar
Lanik
Site Owner
Site Owner
Posts: 1190
Joined: Thu Feb 15, 2007 7:44 am
Reputation: 10
Location: West Coast, USA

Post by Lanik » Thu Feb 26, 2015 5:53 pm

Its probably the clickable rows add-on that's installed. I know near nothing about php code, so even if I wanted to change something I wouldn't know where to begin.
"If it ain't broke don't fix it."

User avatar
Lain_13
RU AdList Author
RU AdList Author
Posts: 880
Joined: Fri Aug 20, 2010 11:20 am
Reputation: 2

Post by Lain_13 » Thu Feb 26, 2015 8:57 pm

Here is updated code:

Code: Select all

<script type="text/javascript">
// <![CDATA[
(function(lst){
  var callback = function (e) {
    if (e.which == 2) return false; //avoid reaction on the middle-click
    if (this.querySelector) {
      var i = this.querySelector('.forumtitle,.topictitle');
      if (i) window.location.href = i.href;
    }
  }, i = lst.length;
  while(i--){
    lst[i].onclick = null;
    if(lst[i].addEventListener) lst[i].addEventListener('click', callback, false);
    else lst[i].attachEvent('onclick', callback);
  }
})(document.querySelectorAll('.row'));
// ]]>
</script>
Same code but minified:

Code: Select all

<script type="text/javascript">// <![CDATA[
!function(e){for(var t=function(e){if(2==e.which)return!1;if(this.querySelector){var t=this.querySelector(".forumtitle,.topictitle");t&&(window.location.href=t.href)}},i=e.length;i--;)e[i].onclick=null,e[i].addEventListener?e[i].addEventListener("click",t,!1):e[i].attachEvent("onclick",t)}(document.querySelectorAll(".row"));// ]]>
</script>
You can inject it into the body of the page and disable that plugin. That will fix middle-clicks issue and will do the job in a less ugly way.
That won't help to open forums and topics in a new tab by middle-clicking a row, though. Visitors have to middle-click the actual link for that.
Additionally it will not work in the old browsers (IE<8, Opera<10).

User avatar
Lanik
Site Owner
Site Owner
Posts: 1190
Joined: Thu Feb 15, 2007 7:44 am
Reputation: 10
Location: West Coast, USA

Post by Lanik » Thu Feb 26, 2015 11:52 pm

Thanks I'll test it out and if it works out I'll roll it out. I've been looking for a way to do clickable rows on a more permanent less ugly way without using that addon.
"If it ain't broke don't fix it."

User avatar
Lain_13
RU AdList Author
RU AdList Author
Posts: 880
Joined: Fri Aug 20, 2010 11:20 am
Reputation: 2

Post by Lain_13 » Sun Mar 01, 2015 11:03 am

The better way will be to modify the template of a page to use DIV > A instead of UL > LI structure. But I'll need access to page templates and stylesheets and that could become a problem if you are using some standard template and will try to upgrade it later. Also, it's possible to rewrite that structure from a script but I don't think it's a good idea.

User avatar
Lanik
Site Owner
Site Owner
Posts: 1190
Joined: Thu Feb 15, 2007 7:44 am
Reputation: 10
Location: West Coast, USA

Post by Lanik » Thu May 14, 2015 5:50 pm

I'm just using standard PHPBB templates. You can download the PHPBB board and look at all their templates.

I was looking at this code and I wouldn't even know which template or php file to put them in. If you tell me where to put it I can definitely play around with it and see if it works.

You can find the latest PHPBB 3.1.4 here: https://www.phpbb.com/files/release/phpBB-3.1.4.zip
And the clickable rows mod for PHPBB 3.0.x here: https://www.phpbb.com/customise/db/mod/ ... opic_rows/

As you probably noticed by now there is no replacement for clickable rows in PHPBB 3.1.x.
"If it ain't broke don't fix it."

User avatar
Lain_13
RU AdList Author
RU AdList Author
Posts: 880
Joined: Fri Aug 20, 2010 11:20 am
Reputation: 2

Post by Lain_13 » Sun May 17, 2015 7:30 pm

Try to modify file: phpBB3\styles\prosilver\template\viewforum_body.html
Add my script between rows:

Code: Select all

<!-- ENDIF -->

<!-- INCLUDE overall_footer.html -->
at the bottom.

Also, you may want to modify a file: \phpBB3\styles\prosilver\theme\content.css
Find "li.row {" (like 99) and add after it "cursor: pointer; cursor: hand;"
So, it will look like this:

Code: Select all

li.row {
	cursor: pointer; cursor: hand;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
} 
This will modify cursor to a hand pointer same as on normal links.

User avatar
Lanik
Site Owner
Site Owner
Posts: 1190
Joined: Thu Feb 15, 2007 7:44 am
Reputation: 10
Location: West Coast, USA

Post by Lanik » Tue May 19, 2015 9:06 pm

I've tried it on the prosilver theme and it works. The topic clicks work great but the forum don't. I think I will need to find the forum template and paste the same code there too. Unless you know better then I do.
"If it ain't broke don't fix it."

User avatar
Lain_13
RU AdList Author
RU AdList Author
Posts: 880
Joined: Fri Aug 20, 2010 11:20 am
Reputation: 2

Post by Lain_13 » Thu May 21, 2015 1:28 am

I think it's index_body.html in the same folder as viewforum_body.html.
Should work if you will paste it in the end before this row:

Code: Select all

<!-- INCLUDE overall_footer.html -->
Also, it seems like "lst.onclick = null;" line of code is not necessary anymore.

User avatar
Lanik
Site Owner
Site Owner
Posts: 1190
Joined: Thu Feb 15, 2007 7:44 am
Reputation: 10
Location: West Coast, USA

Post by Lanik » Wed May 27, 2015 8:59 pm

Thanks for that it works now as well.
"If it ain't broke don't fix it."

User avatar
terrorist96
Postaholic
Postaholic
Posts: 446
Joined: Mon May 11, 2015 2:24 pm
Reputation: 0

Post by terrorist96 » Tue Jun 16, 2015 7:47 pm

I've experienced this before too. It's super annoying!
AdBlock Plus extension;
Chrome 64 bit;
Subscription Lists: EasyList, EasyPrivacy, Malware Domains, Social Blocking, Adblock Warning Removal List, Spam404 and Adware filters.

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests