Welcome to WebmasterWorld Guest from 54.196.233.239

Forum Moderators: open

Message Too Old, No Replies

problem with show

     

IntegrityWebDev

6:30 pm on Sep 8, 2011 (gmt 0)

5+ Year Member



I'm not sure if I have this formed incorrectly or if there is a problem elsewhere. I am rather new to jQuery so this is probably simple:

Here is an HTML snippet:
<div class="showanswersnow"><a href="#">Click here to show the answers now.</a></div>


and here is a jQuery snippet:
$('.showtheanswers').click(function() {
$('.ouranswer').show();
});


But when I click this it doesn't display the .ouranswer div.

In another chunk of code i have a countdown time and when it gets to zero the jQuery executes:
$('.ouranswer').show();

and it works there.

Any thoughts?

JAB Creations

11:39 pm on Sep 8, 2011 (gmt 0)

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member



The first problem is that you're using a framework which generates a ton of overhead and is completely unreliable by using proprietary methods such as innerHTML (and you won't know it until you reach a certain level which is difficult to achieve if you're using a framework to begin with). Stick to real JavaScript.

Here are a couple functions that I use to change the class of an element and to toggle the class of an element...

- John

Change Class
function change(id,newClass)
{
if (document.getElementById(id)) {document.getElementById(id).className=newClass;}
else if (id) {id.className=newClass;}
else {alert('Error: the id \''+id+'\' was not found or has not yet been imported to the DOM.\n\nNew class intended: '+newClass);}
}

// change('element_id','new_style');
// ||
// var s = document.getElementById('sidebar');
// change(s,'new_style');


Toggle Class
function change_toggle(id,c1,c2)
{
if (document.getElementById(id))
{
if (document.getElementById(id).className==c2) {change(id,c1);}
else {change(id,c2);}
}
else {alert('Error: the id \''+id+'\' was not found or has not yet been imported to the DOM.');}
}

//change_toggle('background_color_div','white','grey');

penders

12:28 am on Sep 9, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Is the onclick event being assigned to the (correct) element? If you put an alert('Hello World') inside the event, does it alert? Is there some confusion over the inner anchor? Should the click event not be applied to this anchor, rather than the outer DIV? Since I guess the anchor is for the benefit of keyboard users?

ctoz

12:27 pm on Sep 9, 2011 (gmt 0)

5+ Year Member



<div class="showanswersnow">
and
$('.showtheanswers')
don't match.

penders

1:51 pm on Sep 9, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



@ctoz: Eyes of a hawk! :)

IntegrityWebDev

2:02 pm on Sep 9, 2011 (gmt 0)

5+ Year Member



Thanks for your help. Turns out the section I needed this for was done away with on the site so it is no longer needed.

ctoz

6:51 am on Sep 10, 2011 (gmt 0)

5+ Year Member



" a framework which generates a ton of overhead and is completely unreliable"


The overhead pain's more or less done with after the first load: and you can organise your code so that the viewer has content to look at/read while the library's loading. I'm a slow learner, not too interested in bells'n'whistles, but I've found jQuery's ajax functions and its callbacks—which allow for precise timing and sequencing—really easy to implement. For me, it was either jQ or some other library, or having to learn Flash, and Flash looked like a more closed system than jQ...
 

Featured Threads

Hot Threads This Week

Hot Threads This Month