AI Search
Classic Search
 Search Phrase:
 Search Type:
Advanced search options
 Search in Forums:
 Search in date period:

 Sort Search Results by:

AI Assistant
Notifications
Clear all

[Closed] Make forum column clickable

10 Posts
2 Users
4 Reactions
4,231 Views
Posts: 13
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@cherry)
Eminent Member
Joined: 7 years ago

Okay, this is where I currently am with it.. let me know what's good or bad or just plain wrong.. it all seems to be working on PC. Still nothing on mobile.

// For Forum info divs - if you have links in your forum description they will only be clickable from within the forum, not on the main index. 
jQuery(document).ready(function($) {
$(".wpforo-forum-info").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
// For Extended layout topic titles
$(".wpf-forum-item").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
// For Threaded layout topic titles
$(".wpf-thread").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
// For Topics
$(".wpforo-topic-info").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
});

VereK
Posts: 522
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@verek)
Honorable Member
Joined: 8 years ago

There are snippet code templates in the plugin for PHP,CSS and JS, clone a JS template, edit it, rename it to whatever.

I tested this snippet now on a dev board, it works on mobile (Opera & Chrome) and desktop.

Full code:

add_action( 'wp_head', function () { ?>
<script>
// For Forum info divs
jQuery(document).ready(function($) {
jQuery("[id^=wpf-forum-] > div > div.wpforo-forum-info").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
// For Extended layout topic titles
jQuery(document).ready(function($) {
jQuery("#wpforo #wpforo-wrap > div.wpforo-main.wpft-topic > div.wpforo-content > div.wpfl-1 >").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
// For Threaded layout topic titles
jQuery("#wpf-cat-18 > div.wpf-threads > div.wpf-thread-list > div").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
});
});

</script>
<?php } );

Posts: 13
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@cherry)
Eminent Member
Joined: 7 years ago

This isn't working at all on mine. I pasted it exactly as you have it on the code snippets js clone (screenshot attached).

It didn't reject it this time, but it isn't working.

https://cherrysoda.nu/wom/community/

snippetFail

VereK
Posts: 522
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@verek)
Honorable Member
Joined: 8 years ago

@cherry,

The code does work for the limited scenarios on my dev board. You have to use the div and selector IDs appropriate to what your board uses and substitute those in the snippet provided by me. Each layout; Extended,Q&A,Threaded,Simplified will use unique div structures.

Example:

// For Simplified layout forum divs
jQuery(document).ready(function($) {
jQuery("#wpforo #wpforo-wrap > div.wpforo-main.wpft-forum > div.wpforo-content > div.wpfl-2 >").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});

It might prove impossible to make topic divs clickable in certain layout formats.

Use your browser developer tools to find the appropriate div IDs


Posts: 13
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@cherry)
Eminent Member
Joined: 7 years ago

Okay, I swapped out your divs for the generic divs and all seems to be working.

Still not what I would consider to be mobile friendly, but it's a start.

Here's my final JS:

add_action( 'wp_head', function () { ?>
<script>
// For Forum info divs
jQuery(document).ready(function($) {
jQuery(".wpforo-forum-info").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
// For Extended layout topic titles
jQuery(".wpf-forum-item").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
// For Threaded layout topic titles
jQuery(".wpf-thread").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
// For Topics
$(".wpforo-topic-info").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
});

</script>
<?php } );

And my final CSS (to show the hand on desktop): 

div.wpforo-forum-info:hover {
cursor: hand;
cursor: pointer;
opacity: .9;
}

div.wpf-forum-item:hover {
cursor: hand;
cursor: pointer;
opacity: .9;
}

div.wpf-thread:hover {
cursor: hand;
cursor: pointer;
opacity: .9;
}

div.wpforo-topic-info:hover {
cursor: hand;
cursor: pointer;
opacity: .9;
}

Page 2 / 2
Share: