logo
down
shadow

JavaScript colour changer doesn't work properly


JavaScript colour changer doesn't work properly

By : user2185487
Date : November 22 2020, 04:01 AM
To fix the issue you can do Add return false in your button click. The button triggers a PostBack (Form Post). And then all the changes made to the UI will be lost. That is why it 'blinks' gray for a second and then changes back. It means that the page has finished reloading. Assuming you are using webforms or the button is inside a form.
code :
<script>
    $(document).ready(function () {
        $("button").click(function () {
            $("div").css("background", "grey");
            return false;
        });
    });
</script>


Share : facebook icon twitter icon
Using onclick colour changer to alter paragraph text colour but only for parent paragraph

Using onclick colour changer to alter paragraph text colour but only for parent paragraph


By : Pankaj Dahiya
Date : March 29 2020, 07:55 AM
like below fixes the issue Following on from your clarification comment, you can use siblings to get the p elements that are siblings of the a elements. Since by the sound of it they share a parent, this should work:
code :
$('a.text_blue').click(function() {
    $(this).siblings('p').removeAttr('class').addClass('blue_text');   
});
$('a.text_blue').click(function() {
    $(this).parent().find('p').removeAttr('class').addClass('blue_text');   
});
<a href="#" data-class="blue-text"></a>
$(".color_changer").on("click", "a", function() {
    $(this).parent().find("p").removeAttr("class").addClass($(this).data("class"));
});
$('a.text_blue').click(function() {
    $(this).parent().siblings('p').removeAttr('class').addClass('blue_text');   
});
$(".color_changer").delegate("a", "click", function() {
    $(this).parent().siblings('p').removeAttr("class").addClass($(this).data("class"));
});
Css dropdown colour changer

Css dropdown colour changer


By : GN Draboo
Date : March 29 2020, 07:55 AM
Hope that helps There are plenty of ways to solve your problem, i am going to show you one of them:
as i wrote on the comments, when you add the class it stays there until you remove it. so instead of checking each time what colored classes the body has, you can simply remove all of them and add the classes from all of the selects each change.
code :
 $(function() {
   $(".colorSelect").change(function() {
     $("body").attr('class', '');
     $(".colorSelect").each(function() {
       $("body").addClass($(this).val());
     });
   });
 });
.blue1 h3 {
  color: blue;
}
.red1 h3 {
  color: red;
}
.green1 h3 {
  color: green;
}
.yellow1 h3 {
  color: yellow;
}
.blue2 p {
  color: blue;
}
.red2 p {
  color: red;
}
.green2 p {
  color: green;
}
.yellow2 p {
  color: yellow;
}
.blue3 h4 {
  color: blue;
}
.red3 h4 {
  color: red;
}
.green3 h4 {
  color: green;
}
.yellow3 h4 {
  color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Title Color</h3>
<select class="colorSelect" id="titlecolorChooser" ng-model="eventData.h3color">
  <option value="">Choose a Colour</option>
  <option value="blue1">Blue</option>
  <option value="red1">Red</option>
  <option value="green1">Green</option>
  <option value="yellow1">Yellow</option>
</select>
<p>Text Colour</p>
<select class="colorSelect" id="textcolorChooser" ng-model="eventData.pcolor">
  <option value="">Choose a Colour</option>
  <option value="blue2">Blue</option>
  <option value="red2">Red</option>
  <option value="green2">Green</option>
  <option value="yellow2">Yellow</option>
</select>
<h4>Location Color</h4>
<select class="colorSelect" id="locationcolorChooser" ng-model="eventData.h4color">
  <option value="">Choose a Colour</option>
  <option value="blue3">Blue</option>
  <option value="red3">Red</option>
  <option value="green3">Green</option>
  <option value="yellow3">Yellow</option>
</select>
Unity 5- GUI Textfield doesn't work properly on Android Build (The skin for some reason doesnt work and I cant change th

Unity 5- GUI Textfield doesn't work properly on Android Build (The skin for some reason doesnt work and I cant change th


By : Ambert Xie
Date : March 29 2020, 07:55 AM
I hope this helps you . You are using IMGUI which is designed to be used as an Editor tool. When you use anything that requires the OnGUI function, you should stop and look for alternate solution.
To get input from a user, use InputField that comes with the new Unity UI (uGUI). The #3 on this post explains how to detect submit on an InputField.
Drawing in javascript canvas doesnt work properly

Drawing in javascript canvas doesnt work properly


By : joefu
Date : March 29 2020, 07:55 AM
will be helpful for those in need You should call context.beginPath(); after context.clearRect(0, 0, canvas.width, canvas.height); as described in this answer: https://stackoverflow.com/a/16035567/3337236
https://jsfiddle.net/2wogtevL/
RGB Colour changer form refreshes after half a secod

RGB Colour changer form refreshes after half a secod


By : Brian Findlay
Date : March 29 2020, 07:55 AM
may help you . I would change from a submit to a click handler. I edited your jsbin. Check it out here. https://jsbin.com/kogaqafufu/1/edit?html,js,output
Related Posts Related Posts :
  • Add new property to object collection based on condition with lodash
  • Transforming an object with a javascript class
  • Why does the hash compare outputs true even without the salt parameter?
  • Moment.js comparison always returns false
  • Store polygon type of data on the `SQLite` database
  • Matching data depending on chosen preferences
  • issue which is related to vuex store + cookies
  • Order By custom order in object inside property
  • How to display a preselected value in a dropdown without 'onchange'
  • Storing a javascript promise
  • Replacing text in nested divs
  • Strange behavior with select list options when adding and removing tasks using javascript
  • NodeJS Ajv module alway log message ' $ref: keywords ignored in schema at path "#" '
  • How to create TTL Index on long timestamp in MongoDB
  • Make background snowflake element unclickable
  • How to store data into variable.?
  • What is the difference between a redux middleware and a redux-observable epic?
  • How can I merge HTML attributes with component data in Vue?
  • How to repeat an html element n number of times using javascript
  • How to style html and body from the main Angular component?
  • Wait for Page Load Before CGI Script is Loaded?
  • How to call an mobx-state-tree action if a computed view changes?
  • Using Hosted Fonts with p5.js
  • Is it possible to open Microsoft Edge from a page rendered in Internet Explorer via just HTML/JavaScript?
  • NodeError: write after end in NodeJS
  • Object Localization - Google Vision API
  • How can I check that a class constructor is called with proper attributes in Sinon?
  • AssertionError [ERR_ASSERTION]: Task function must be specified Error in Gulp
  • Bootstrap's .dropdown('toggle') works a bit too well: dropdown is then unusable
  • Trying to write a JS script that shows and changes certain object properties
  • Element requires two clicks to run function
  • All elements with class name has html inside JS
  • Why does this Javascript work in the browser console but not in Selenium's JavascriptExecutor?
  • HtmlUnit getting string with wrong encoding
  • Datatables can't use sort by column or search in content
  • How do you extend the timeout of a liberty webserver application so it will wait longer than 60 seconds?
  • Angular - Get router url before loading router
  • Table rowspan with ngFor Angular6
  • Ray Tracing a scene with triangle meshes with webgl 2.0, deferred shading, framebuffers
  • Scroll between sections when progress finished
  • KnockoutJS foreach deosn't iterate through collection
  • How to ensure orderly processing result of a websocket's callbacks?
  • javascript array into key value space separated string
  • an if statement returns true, but the condition won't trigger
  • ADF how to trigger a clientListener from the bean?
  • Vue-test-utils can't find `Set()`: ReferenceError: Can't find variable: Set
  • Pass datepicker's date parameter to get resources in FullCalendar
  • Model aggregating in viewer - coordinate issue
  • Send post data like curl
  • sorting array with decimal value in specific order using javascript
  • Javascript - object.offsetTop and .offsetLeft gives 0
  • Remove content of p tag
  • Line 28: Expected an assignment or function call and instead saw an expression
  • How to trigger hover programmatically in chartjs
  • How to create a function to avoid repetitive steps?
  • Parameter the property used to filter an array
  • Return array with fast-csv in Node
  • If statement with parenthesis in javascript
  • Connecting the Javascript CSS to the CSS
  • Empty table cells
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org