Border Not Changing Colour On Click

**Drawn** · Dec 14, 2011 12:02

I'm having problem understanding Javascript's behavior with this excerise below.

Hoping someone can help me.

I'm not getting the borders of the images I click on to turn yellow right away.....I'll explain.

Please, following along with the pictures attached to this posting; they'll help you understand my problem.

Essentially, while holding down the Ctrl-key, I am selecting mutiple images at time and 'processing' them.

Visually, I want to user to see this by, with every click of the mouse while holding down teh Ctrl-key, the borders of selected image turns a golden yellow. (see images: BeginClicking.JPG & NowClicked.JPG)

In the attachments, you'll see that I'm starting in the top right-hand corner and clicking on a total of five images down to the lower left-hand corner when all is said and done.

Viewed in the order BeginClicking.JPG, NowClicked.JPG and then ManyClicked.JPG., the border's of the selected images are turning yellow.

The trouble is they're not.

With some 'paint brush magic', you're see how it *should* work, but the borders don't actually turn yellow until I 'submit' the form???

Below is an extreme abbreviation of the code involved:

<img onclick="_OnEntryDo(window.document.AEntryForm, this);" ....... />

function _OnEntryDo(form, obj) {

if ( window.event.ctrlKey ){ obj.style['border-color'] = '#CCCC33'; <--- Set the img object's border to that color.
:
:
:
}

function _TimeToSubmit(form, obj) {
:
:
:

form.submit(); <--- Submitting the form within JavaScript.
}

It is only when I submit the form within JavaScript that you will see the selected images suddenly hightlight with a yellow border.

So, from the user's point of view, she'll see all the images as seen in BeginClicking.JPG as she's clicking on the ones she wants, but in a flash, will see them as in ManyClicked.JPG when she finally submits the form.

Of course, that is only for a moment, as the form is now submitted and the 'selected' images will now be processed.

My problem is that I want the selected images to be highlighted right away in real time while the user is selecting them and not until the form is finally submitted.

What gives?

Regards.

ND

**paul_wilkins** · Dec 14, 2011 17:53

Originally Posted by Drawn

What gives?

We can investigate what gives if you supply us with a test page the demonstrates the problem.

**Drawn** · Dec 14, 2011 19:00

Originally Posted by paul_wilkins

We can investigate what gives if you supply us with a test page the demonstrates the problem.

That tells me that what I've describe should be working, right?

I'll see what I can do in respect to a 'test page', but I'll tell you now that this page in question is residing in an iframe.

Would being in an iframe be the issue?

Am I right in saying that because the image object is being passed into a function and its style property being modified (see below), then the border should change color right away, right?

Or is it because the whole page in quesiton is in an iframe, that the colour change will not be displayed until the form of that page is submitted.

<img onclick="_OnEntryDo(window.document.AEntryForm, this);" ....... />

function _OnEntryDo(form, obj) {

if ( window.event.ctrlKey ){ obj.style['border-color'] = '#CCCC33'

What are your thoughts?

I mean, I gotta tell ya.

It would be an extensive task to provide a 'test page' right now.

Regards.

**paul_wilkins** · Dec 14, 2011 19:34

Well this simple test demonstrates that ctrl-clicking the images results in an instant feedback, so there's something else going on that needs to be diagnosed.

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img {width: 150px; height: 100px; padding: 0.5em; margin: 0.5em;}
.highlight {background: yellow;}
</style>
</head>
<body>
<p>Ctrl-click to toggle yellow highlight</p>
<!-- Kitten images from google -->
<img src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcSpRT1r-8sGQlBbXUumkmFJoJc3xwUKrR33zrF1u9EmE_yuY5fmiQ">
<img src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcSN-OagC3hjPamrtx5IlX5kFe4fHXq3IpSwKSar9JeKn5xWMBeE">
<img src="https://encrypted-tbn0.google.com/images?q=tbn:ANd9GcQUcckupaPZs5uXR6w-rvuflgN4kEkVQdBmUNPzLCIZIoL616e4">
<img src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcRtER58xC4xoi7g1gthsiqCYCq61LwuR1LJ2RorTeHqLP1neF4jIA">
<img src="https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcTMhU4n1ilzF9NwXlTkzid56EKg9t9eVb_g4wJoPgVAbRQdXf2G">
<script>
function toggle(el, value) {
    if (el.className != value) {
	    el.className = value
	} else {
	    el.className = '';
	}
}
function imageClickHandler() {
	if (window.event.ctrlKey) {
	    toggle(this, 'highlight');
	}
}
var images = document.getElementsByTagName('img'),
    i;
for (i = 0; i < images.length; i += 1) {
	images[i].onclick = imageClickHandler;
}
</script>
</body>
</html>

User Tag List

Thread: Border Not Changing Colour On Click

Thread Tools

Display

Border Not Changing Colour On Click

Bookmarks

Bookmarks

Posting Permissions