SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Border Not Changing Colour On Click

    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
    Attached Images Attached Images

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Drawn View Post
    What gives?
    We can investigate what gives if you supply us with a test page the demonstrates the problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by paul_wilkins View Post
    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.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    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>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •