How do I change the area map color for different condition when the area is already highlighted?
This is my code:
if(partyname = "Democrat")
{
var data = $('#MT').data('maphilight') || {fillColor:'ff0000'};
data.alwaysOn = !data.alwaysOn;
$('#MT').data('maphilight', data).trigger('alwaysOn.maphilight');
}
if(partyname = "Republican")
{
var data = $('#MT').data('maphilight') || {fillColor:'000000'};
data.alwaysOn = !data.alwaysOn;
$('#MT').data('maphilight', data).trigger('alwaysOn.maphilight');
}
I am using jquery.maphighlight.min.js jQuery plugin for highlighting the map.
My problem is that the area is highlighted by red color with the first button. If I click the second button, the same area is highlighted but the color cannot be changed (the color should be changed to black).
For starters, try replacing "colorToHightlight" with colorToHighlight so you call the correct variable that you named earlier.
Something like:
Jquery:
var colorToHighlight = "black" //default
$("#color_options a").click(function (e)
{
e.preventDefault(); //stop the anchor tag
colorToHighlight = $(this).attr("id");
}
/*
Do the highlight stuff
*/
HTML:
<div id="color_options">
Green - Red
</div>
We used the alt attribute to hold the colour.
HTML:
<p>Go GREEN</p>
JS/JQuery:
$('.aToggle').click(function (e) {
var data = $('#area1').mouseout().data('maphilight') || {};
data.fillColor = $(this).attr('alt');
$('#area1').data('maphilight', data).trigger('alwaysOn.maphilight');
});
Where "area1" is the map area.
Related
I have a simple form that has 3 fields. user, id, email.
I have 2 PHP arrays $user & $id
When a user enters there name into the user or id fields I want the respective php arrays checking and if the name or id is in the array then change the background color of the input box they are currently in.
If they update there entry then the checking should continue and if no match is found then revert the background back to it's original white color.
If they empty the input field then the color should change back to white.
The page may be preloaded with values, so I may be changing the background color using php on the initial load..
I've found this, which sort of works for the specified characters in it's array:
$('input').bind("change keyup", function() {
var val = $(this).val();
var regex = /["<>&]/g;
if (val.match(regex)) {
$(this).css("background", "red");
val = val.replace(regex, "");
$(this).val(val);
}
$("p").html(val);
});
I've tried to update it to support a php array, but it doesn't work and I don't know how to make it check either array and revert the color back.
This is what I have so far :
JFIDDLE
Thanks :)
UPDATE
I've got this working using the following :
$(function(){
$('input').bind("change keyup", function() {
var val = $(this).val();
if ($(this).attr('id')=="user") {
var check = <?php echo json_encode($user)?>;
} else {
var check = <?php echo json_encode($id)?>;
}
if ($.inArray(val, check) != -1) {
$(this).css("background-color", "red");
} else {
$(this).css("background-color", "white");
}
});
});
But is there a neater way to write this ?
Thanks :)
if you want to use your php array in javascript, you can do this:
var myArray = <?php echo json_encode($myArray) ?>;
and do the javascript magic
I'm using a Wordpress plugin where I can only type attachment urls (comma separated) in an input box. I need to alter the code so I can click an image and it will extract the src to put it in the input box.
I made it possible with only one image.
First, I echo'd all the images from my media library. And then I did this:
<img class="media-image" src="<?php echo $images[$i]; ?>"/>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.media-image').click(function(){
var thisValue = jQuery(this).attr('src');
var thisTarget = jQuery('#target');
thisTarget.val(thisValue);
return false;
});
});
</script>
<input id="target" type="text"></input>
What this does: Whenever I click an image, the src will be put in the input text box. When I click another image, the value will be changed accordingly.
But how can I achieve this with multiple images? So, if I click 3 images, I want all the src's to be comma separated in the input field. Whenever I click a selected image again, I want it to be deselected (i.e. I want the src to be removed from the input).
Track the clicked/de-clicked images in an array and join it to form a string value for your input. Something like:
var imgs_tracker = [], field = jQuery('#target');
$('body').on('click', '.media-image', function() {
var src = $(this).attr('src'), already_in = imgs_tracker.indexOf(src);
already_in == -1 ? imgs_tracker.push(src) : imgs_tracker.splice(already_in, 1);
field.val(imgs_tracker.join(', '));
});
Note also I delegate the click event - much more efficient than binding it to each and every item.
<img class="media-image" src="<?php echo $images[$i]; ?>"/>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.media-image').click(function(){
var thisValue = jQuery(this).attr('src');
var thisTarget = jQuery('#target');
thisTarget.val(thisTarget.val() + "," + thisValue);
return false;
});
});
</script>
<input id="target" type="text"></input>
Select the previous value and append to it.
$(function () {
var images = $(".media-image");
images.on("click", function () {
var img = $(this),
selected = !!img.data("selected");
img.data("selected", !selected);
var foo = images.filter(function () {
return !!$(this).data("selected");
}).map(function (_, el) {
return this.src;
}).get();
$("#target").val(foo.join());
});
});
fiddle
I wanted to change the style of the button I'm using every time I clicked that button and together change it's text. Problem is I wanted to do it using and external javascript which I'm not that familiar with it's syntax. To elaborate what I wanted to do is to have a button having a text displaying like: Very Good, Good, Moderate, Failed. Each of the text has it's own assigned gradient color using CSS let's say a gradient of Green for Very Good, Yellow for Good, Orange for Moderate and Red for failed. Tried searching for it but I only landed on an irrelevant posts. What I think is that I need to make a button with on click and everytime I click the javascript will add int values from 0 and reset back to 0 after it reaches 3. then I think I can use case for the css class assigning like this.style="failed" Well I don't know if this is possible.
UPDATE:
After doing some research I've managed to do something about the changing texts (using javascript alone) but not yet the class part since I think the class is a keyword in javascript. here's my script so far:
function buttonChange(){
var button = document.getElementById("stats");
switch (button.value)
{
case "Very Good":
button.value="Good";
break;
case "Good":
button.value="Moderate";
break;
case "Moderate":
button.value="Failed";
break;
default:
button.value="Very Good";
}
}
now the problem is the style. :)
Using jQuery your code could look something like this:
var values = new Array('Very Good', 'Good', 'Moderate', 'Failed');
var colors = new Array('lime', 'yellow', 'orange', 'red');
$('#rate').click(function() {
// current index is stored in data attribute
var idx = $(this).data('value') + 1;
// last value was selected -> go back to first one
if (idx >= values.length) {
idx = 0;
}
// update data attribute with current index
$(this).data('value', idx);
// update button text
$(this).val(values[idx]);
// update button background color
$(this).css('background-color', colors[idx]);
});
See this FIDDLE.
have a look at this:
Change an element's class with JavaScript
I think that your CSS should have all the styles for gradients and stuff like this:
.VeryGood {//gradient for very good
}
.Good {//gradient for good
}
.Moderate {//gradient for moderate
}
.Failed { //gradient for failed
}
and then, use this javascript and html :
<script type="text/javascript">
var i = 1; //change to 0 if element dosen't need to have any class by default
var classArray = new Array();
classArray[0] = 'VeryGood';
classArray[1] = 'Good';
classArray[2] = 'Moderate';
classArray[3] = 'Failed';
function changeClass()
{
document.getElementById("MyElement").className = classArray[i];
i++;
if(i>=3){
i=0;
}
}
</script>
...
<button onclick="changeClass()">My Button</button>
now, the array key i increases every time the button is clicked, so by default, you can have your element's class as VeryGood, and every time the button is clicked, it advances to next class, so after VeryGood comes Good then Moderate then Failed, ithe it resets itself to VeryGood. hope this is what you are looking for :)
Here is a jQuery solution to cycle through the button text and the background colour for the four states:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var states = ['Very Good', 'Good', 'Moderate', 'Failed'];
var colors = ['green', 'Yellow', 'orange', 'red'];
var index = 0;
$('body').on('click', '#button', function(){
index = ++index%4;
$("#button").html(states[index]);
$("#button").css('background-color',colors[index]);
});
});
</script>
</head>
<body>
<button id="button" style="background-color:green"; type="button">Very Good</button>
</body>
</html>
Note the modulus (%) operator which simplifies the circular increment of 'index' from 0 to 3.
I am using this Javascript to effect the following changes in my selected text:
function formatText(el,tag){
var selectedText = document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);// IE:Moz
if (selectedText == "")
{return false}
var newText='"#28'+tag+'"'+selectedText+'"#28'+tag+'"';
if(document.selection){ //IE
document.selection.createRange().text=newText;
}
else{ //Moz
el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
}
}
However, i want the new tags to only be visible in another textarea not the one where I actually do the selecting. In this case I have 2 Text areas, one is called "message_text" the other is called "message" ... I iwll input and select text in "message_text" but any changes made to the selection must only reflect in the "message" text area.
At present I have tried this:
<button type="button" value="D" onclick="formatText(message,'D')" class="blue">D</button>
But this only works if I have selected anytnin in the "message" text area.
Thanks
You have to extend the javascript code:
function formatText(el_from, el_to, tag) {
var selectedText = document.selection ? document.selection.createRange().text : el_from.value.substring(el_from.selectionStart, el_from.selectionEnd);// IE:Moz
if (selectedText == "") {
return false;
}
var start_index = el_to.value.indexOf(selectedText);
var sel_t_len = selectedText.length;
var copy_selText = el_to.substring(start_index, sel_t_len);
var newText='"#28'+tag+'"'+copy_selText+'"#28'+tag+'"';
el_to.value = el_to.value.substring(0, start_index) + newText + el_to.value.substring(sel_t_len, el_to.value.length);
}
Then You can call it like this:
<button type="button" value="D" onclick="formatText(document.getElementById('message_text'), document.getElementById('message'),'D')" class="blue">D</button>
PS: I'm not sure about document.getElementById - haven't used it for years since using jQuery... You should convert to jQuery, too... You would not noeed to solve JS for IE or FF or Chrome, etc - jQuery handles this by itself...
EDIT : OK, I did a little customization and it should fit to Your needs...
I have a HTML table with text in the cells like so:
<tr><td>HELLO</td></tr>
I then have a text area like so:
<input type="text" id="txt_message" name="txt_message"
I want to make it so that when you click inside the table cell, the data (in this case the word 'HELLO') is inserted into the text area (so the user does not have to type it).
I dont know if this is possible, but I am guessing it is and it is 'probably' something in JavaScript.
If anybody has any advice that would be great, Thank you :)
[Working demo]
var textbox = document.getElementById('textbox');
var table = document.getElementById('table');
// add one event handler to the table
table.onclick = function (e) {
// normalize event
e = e || window.event;
// find out which element was clicked
var el = e.target || e.srcElement;
// check if it's a table cell
if (el.nodeName.toUpperCase() == "TD") {
// append it's content to the textbox
textbox.value += (el.textContent || el.innerText);
}
}
Note: all the conditional assignments with || are for cross-browser compatibility.
Here is Working demo using jquery.
To get the value, use innerhtml and a span, more here: http://www.vbforums.com/showthread.php?t=339864
To update the textarea you should be able to do something like: document.getElementById ("text_message").value = x;
a simple jQuery snippet, assuming you have 1 textarea and multiple td's to click over
(function() {
var ta = $('#txt_message');
$('td').bind('click.addtextarea', function() {
var text = $(this).html();
ta.val([ta.val(), text].join(' ')); /* this add words */
/* ta.val(text); this print one word */
});
})()