Geek Answers Handbook

Does jQuery function not respond to ".click" until I move the cursor?

I have a website with a simple CSS style switcher. I use the following code for a function that handles pressing two buttons of a theme, initiating a transition from dark to light and vice versa:

<script> $(function() { $(".light").click(function(){ $("link").attr("href", "css/lightHome.css"); $(".light").attr("disabled", "disabled"); $(".dark").removeAttr("disabled", "disabled") }) $(".dark").click(function(){ $("link").attr("href", "css/home.css"); $(".dark").attr("disabled", "disabled"); $(".light").removeAttr("disabled", "disabled") }) }); </script>

Everything about it works exactly the way I want, except that when I press the button, nothing happens. But second, I change the position of the cursor after clicking, then the transition occurs. I don't have a better jQuery capture, so I hope this is a simple lack of understanding of DOM processes. Perhaps due to the lack of "ready"?

I tried to click and wait a few minutes, and nothing happens until I move the cursor.

Web site:

http://watsoncn.info

+7
javascript function jquery html css
source share
3 answers

Instead of completely switching the CSS file, an alternative solution would be to have one CSS file with your styles, and then prefix all your selectors with .theme.dark or .theme.light ;

This would be pretty easy to do with an attachment in LESS or SASS if you use them (if not, you really have to take this into account. I can't imagine how to write CSS without a preprocessor now), but can be cumbersome in pure CSS.

CSS

 .theme.dark <rest of selectors> { //CSS } .theme.light <rest of selectors> { //CSS }

HTML:

 <body class="theme">

and then the code that runs when the button is pressed will be

 $('body').addClass('dark') $('body').removeClass('light')

and

 $('body').addClass('light') $('body').removeClass('dark')
+2
source share

Try this feature:

 function toggleCss(file, index) { var oldFile = document.getElementsByTagName("link").item(index); var newFile = document.createElement("link"); newFile.setAttribute("rel", "stylesheet"); newFile.setAttribute("type", "text/css"); newFile.setAttribute("href", file); document.getElementsByTagName("head").item(0).replaceChild(newFile, oldFile); } $(".dark").on("click", function() { toggleCss("css/lightHome.css"); $(".dark").attr("disabled", "disabled"); $(".light").removeAttr("disabled", "disabled"); }); $(".light").on("click", function() { toggleCss("css/home.css"); $(".light").attr("disabled", "disabled"); $(".dark").removeAttr("disabled", "disabled"); });
+1
source share

Try adding not the JavaScript, but the checkbox trick. The checkbox handler is set to display none, then the main style and the on: checked style handler as it clicked. You cannot use JavaScript with this, but you work 100% without errors if everything is done correctly!

You can find the DevTips channel on YouTube

https://www.youtube.com/user/DevTipsForDesigners

on your channel you can find a tutorial on how to do this!

0
source share

More articles:


All Articles