Jump to content

Eric Roth

Members
  • Content Count

    9
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Eric Roth

  • Rank
    Newbie

Contact Methods

  • Website URL
    https://ericroth.org

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. That worked! Thank you Funce, you have been very helpful.
  2. ...spent a couple of hours without any luck. How to implement storage to currently held value?
  3. That helped - you are the best, thank you! A small "problem" though (of which I think, I understand the logic of the code and perhaps, this could not be solved with the way the toggle function is set up on the site). What happens now is that as soon as one toggles the mode from normal to dark, it stays in the dark mode. I mean, one can toggle back to the normal mode, yes - but when refreshing the page or moving on to another page, it loads in the dark mode again. Since this is local storage, the above happens even after closing and re-opening the browser (and thereby cleaning out all the cookies, storage and stuff). So, I switched to session storage instead. This way, a returning visitor / new browser session gets the site shown in normal mode initially and has one shot only to toggle the mode for the remaining browser session. Sorry, for the English as I'm not a native speaker but I hope, you know what I mean. I ended up with this code and this is by far sufficient for my needs - so thank you once again for your help: // toggle mode if button is clicked $('.change-mode-button').click(function() { changeMode(); }); function changeMode() { var element = document.body; element.classList.toggle("dark-mode"); sessionStorage.setItem("changeMode", element.classList.contains("dark-mode")); } var element = document.body; if(sessionStorage.getItem("changeMode")) { element.classList.add("dark-mode"); } Cheers, Eric P.S. As I am new to this forum... is there a possibilty (or is it expected at all) to mark this topic as solved - and perhaps rate your help?
  4. Hi, Many thanks for your reply and help. I worked with your code but it doesn't function. I also tried all kinds of varieties, I could think of - no luck. The latest, I have now in the script is this: // toggle mode if button is clicked $('.change-mode-button').click(function() { changeMode(); }); function changeMode() { var element = document.body; element.classList.toggle("dark-mode"); localStorage.setItem("changeMode", element.classList.contains("dark-mode")); if(localStorage.setItem("changeMode")) { element.classList.add("dark-mode"); } } What could possibly still be wrong? Thanks, Eric P.S. You are definitely right with your input about the site a bit being overloaded (evaluating the limits of what all can be done by me has just been tempting, I guess...:-). I'm in the process of cleaning that up though but currently, I'm rather "obsessed" with this local storage thing. Once that's up and running, I shall tone it down as suggested.
  5. Hi Funce, Here is the JS code, I'm working with: <?php add_action( 'wp_footer', function() { ?> <script> jQuery(document).ready(function ($) { var change_mode_button_is_visible = false; var scroll_distance = 50; var $change_mode_button = $('<div class="change-mode-button" title="Toggle Mode"><img src="https://ericroth.org/wp-content/uploads/Home/Mode.png" alt="Toggle Mode" width="20" height="20" class="aligncenter wp-image-63135" /></div>'); // inject the button, so you don't have to create the button in any templates $change_mode_button.appendTo('body'); $(window).scroll(function() { // called on every scroll action if ($(window).scrollTop() > scroll_distance && !change_mode_button_is_visible) { change_mode_button_is_visible = true; $change_mode_button.fadeIn(200); } else if ($(window).scrollTop() < scroll_distance && change_mode_button_is_visible) { change_mode_button_is_visible = false; $change_mode_button.fadeOut(200); } }); // toggle mode if button is clicked $('.change-mode-button').click(function() { changeMode(); }); function changeMode() { var element = document.body; element.classList.toggle("dark-mode"); // Store localStorage.setItem("changeMode", "dark-mode"); // Retrieve document.body = localStorage.getItem("changeMode"); } }); </script> <?php }); The .css class is dark-mode: .dark-mode { ... } Probably you can see, I'm not an expert at all - but at least managed to get the toggle function working: https://ericroth.org/dummy/ I really would appreciate very much if someone could point me into the right direction with this web storage issue. Thanks, Eric
  6. Hello, Is there a way to combine dark mode (https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp) and local storage (https://www.w3schools.com/html/html5_webstorage.asp)? I managed to implement the dark mode function but fail to combine that with local storage, e.g. the user toggles to the dark mode and this stays even when refreshing the page or browsing to another within the same domain. You can see the dark mode function on my website here: https://ericroth.org/ Any help much appreciated, thanks!
  7. Hello, I found this helpful: "How To - Toggle Dark Mode" (https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp) and this one: "HTML5 - Web Storage" (https://www.w3schools.com/html/html5_webstorage.asp). Can anyone help to combine these two? I successfully implemented the "How To - Toggle Dark Mode" but fail to combine Local Storage together with it. Thanks! Cheers, Eric
×
×
  • Create New...