That works great Chen thank you very much, I created the reset block also but at present I've disabled it.

Thanks again 

Quote from: Chen Zhen on November 27, 2024, 12:43:28 AMPlease be advised that for this version the EmulatorJS user settings for Shaders & WebGL2 may not auto set in all ROM games as intended.
You can instruct members to adjust game settings directly by using the mouse (or finger for touch screen) to click/press on the cog & adjust various settings manually.
EmulatorJS will remember their selected settings for each game console type during that session until it expires.

Suggested settings are:
Shaders: SABR
WebGL2: Enabled
   
Also when installing RAW-ROM games that are designed for a 4:3 aspect ratio, it might be best to change the width to 640 and the height to 480.

I'll add that info to the ROM section of Quizland help topic, thank you

Wow thank you I wasn't expecting that so quick. I'll test it out in a minute

Here is a PHP block that gives the admin a reset option when clicking on the counter container.
Change the language & css to your preference.

PHP code:
global $user_info;
list($title, $cursor, $ask) = !empty($user_info['is_admin']) ?
array('Click to reset the counter', 'help', 'Reset the page visit counter?') :
array('Page views', 'crosshair', '');
echo '
<div class="visitor_data_body">
<div>Visitors</div>
<div class="website_visit_counter"></div>
</div>
<script>
$(document).ready(function() {
$(".visitor_data_body").css({"display":"flex","justify-content":"center","align-items":"center","flex-direction":"column"});
$(".website_visit_counter").prop("title", "' . $title . '");
$(".website_visit_counter").css({
"display":"flex",
"justify-content":"center",
"align-items":"center",
"flex-direction":"column",
"background-color":"#ff4957",
"height":"30px",
"width":"50px",
"color":"white",
"border-radius":"30px",
"font-weight":"700",
"font-size":"15px",
"margin-top":"10px",
"cursor" : "' . $cursor . '"
});

});
var visitCount = localStorage.getItem("visitor_page_view") === null ? 0 : localStorage.getItem("visitor_page_view");
visitCount = !(/^\d+$/.test(visitCount)) ? 1 : Number(visitCount) + 1;
localStorage.setItem("visitor_page_view", visitCount);
$(".website_visit_counter").html(visitCount);' . (!empty($user_info['is_admin']) ? '
$( ".website_visit_counter" ).on( "click", function() {
if (confirm("' . $ask . '") == true) {
visitCount = 1;
localStorage.setItem("visitor_page_view", 1);
$(".website_visit_counter").html(visitCount);
} else {
return false;
}
});' : '') . '
</script>';


The issue is that you're using head & body tags on an existing html formatted page.
This willl break the page content outside of an iframe or object/embed & isn't necessary for what you're trying to do.

Your SMF 2.1 site uses JQuery by default therefore you can use that to make it more browser friendly.

HTML code:
<div class="visitor_data_body">
    <div>Visitors</div>
    <div class="website-counter"></div>
</div>
<script>
    $(document).ready(function() {
        $(".visitor_data_body").css({"display":"flex","justify-content":"center","align-items":"center","flex-direction":"column"});
        $(".website-counter").css({
            "display":"flex",
            "justify-content":"center",
            "align-items":"center",
            "flex-direction":"column",
            "background-color":"#ff4957",
            "height":"30px",
            "width":"50px",
            "color":"white",
            "border-radius":"30px",
            "font-weight":"700",
            "font-size":"15px",
            "margin-top":"10px"
        });

    });
    var visitCount = localStorage.getItem("visitor_page_view") === null ? 0 : localStorage.getItem("visitor_page_view");
    visitCount = !(/^\d+$/.test(visitCount)) ? 1 : Number(visitCount) + 1;
    localStorage.setItem("visitor_page_view", visitCount);
    $(".website-counter").html(visitCount);
    $( "#resetVisitorButton" ).on( "click", function() {
        visitCount = 1;
        localStorage.setItem("visitor_page_view", 1);
        $(".website-counter").html(visitCount);
    });
</script>


I left the onclick event for a reset button, but that button doesn't exist.
Do you want a reset button for the admin?
If you want that button I can do it in a PHP block so that you can ensure it's only the admin that has the reset option.

I have been trying to write, with help from the internet, an HTML visitors counter. I know you can get them free from other sites and all you do is add an iframe to a code block, but I don't want that I want a counter that's mine and the code doesn't link back to another site.

The code I have so far works but for some reason is messes up the footer of some themes and I don't know why. Also the reset button is not visible either. Can some one point me in the right direction to solve it please?

The code is already added to a block on davejohnson.co.uk if you want to see it. I did have it installed on quizland but it breaks it on my tablet so I've disabled it there, also quizland uses tiny portal.

Any help is much appreciated

<html>
 <div>Visitors</div>
  <div class="website-counter"></div>
</body>
</html>

<style>
/* Center child elements */
body,
.website-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
/* Styles for website counter container */
.website-counter {
  background-color: #ff4957;
  height: 30px;
  width: 50px;
  color: white;
  border-radius: 30px;
  font-weight: 700;
  font-size: 15px;
  margin-top: 10px;
}
/* Styles for reset button */
#reset {
  margin-top: 20px;
  background-color: #008cba;
  cursor: pointer;
  font-size: 18px;
  padding: 8px 20px;
  color: white;
  border: 0;
}
</style>
<script>

var counterContainer = document.querySelector(".website-counter");
var resetButton = document.querySelector("#reset");
var visitCount = localStorage.getItem("page_view");

// Check if page_view entry is present
if (visitCount) {
  visitCount = Number(visitCount) + 1;
  localStorage.setItem("page_view", visitCount);
} else {
  visitCount = 1;
  localStorage.setItem("page_view", 1);
}
counterContainer.innerHTML = visitCount;

// Adding onClick event listener
resetButton.addEventListener("click", () => {
  visitCount = 1;
  localStorage.setItem("page_view", 1);
  counterContainer.innerHTML = visitCount;
});

</script>

Please be advised that for this version the EmulatorJS user settings for Shaders & WebGL2 may not auto set in all ROM games as intended.
You can instruct members to adjust game settings directly by using the mouse (or finger for touch screen) to click/press on the cog & adjust various settings manually.
EmulatorJS will remember their selected settings for each game console type during that session until it expires.

Suggested settings are:
Shaders: SABR
WebGL2: Enabled
   
Also when installing RAW-ROM games that are designed for a 4:3 aspect ratio, it might be best to change the width to 640 and the height to 480.

Great news

SMF Arcade 2.7.0.4 is now available in the download section.

This version includes some minor changes and important bug fixes.

The download link is here:
https://web-develop.ca/index.php?action=downloads;area=stable_smf_arcade

The changelog can be seen here:
https://web-develop.ca/index.php?page=arcade_changelog


The SMF-Arcade support board is available from this link:
https://web-develop.ca/index.php?board=9.0

---

Changes from the previous version:

+*&    Changed: admin language for emulator update template
!      Fixed: proper user/error message when ROM Arcade is disabled
!      Fixed: new game notifications for user groups without permission
!      Fixed: links for ROM games for new game notifications
!      Fixed: aesthetics of forum post, PM & email for new game notifications
!      Fixed: link tree when using ROM Arcade
!      Fixed: navigation tree adapts to current Arcade list template
!      Fixed: opted list/skin adheres to default admin settings
!      Fixed: transfer of updated Ruffle source files
!      Fixed: css & template for game reports

---

Thanks to all that help contribute by beta testing, reporting issues/errors in the forum and for giving suggestions regarding its development.

We hope you & your users will enjoy the updated SMF gaming platform.

^{Please report any bugs or issues in SMF-Arcade Support Board located in the forum.}

Restricting hyperlinks from boards for specific user group(s)

This modification will help filter unwanted hyperlinks in boards and their topics for selected membergroups.
Example usage of this modification may be to set this restriction on the newbie membergroup to thwart possible spam.

---

Link to modification: Post Hyperlink Filter