JJenZz

Something like this? http://jsbin.com/sisahoji/1/edit (function($) { var selector = '.attendance', $students = $(selector + '__students'), $attended = $(selector + '__attended'); function init() { $(document).on('click', selector + '__student', toggleAttendance); } function toggleAttendance() { var $student = $(this), isSelected = !!$student.closest($attended).length; $student.appendTo(isSelected ? $students : $attended); } $(init); }(jQuery)); Or if you …

If you have the following HTML: <p>Question one?</p> <select name="priority" class="priority"> <option value="">Select priority</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> <p>Question two?</p> <select name="priority" class="priority"> <option value="">Select priority</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> <p>Question three?</p> <select name="priority" class="priority"> <option …

This can be done more simply as follows (although some may find harder to understand): $(document).ready(function () { $(':text').on('blur focus', function (e) { var values = ['', this.defaultValue], isFocus = (e.type === 'focus'); if (this.value === values[isFocus*1]) { this.value = values[!isFocus*1]; } }); }); I guess the main benefit here …

Replace your `$('body').ready(` with `$(document).ajaxStop(`

var string = '<p>This is some text where the word T eXt will get surrounded by something else.</p>'; string.replace(/(t(\ ?)e(\ ?)x(\ ?)t)/ig, '<span class="mydiv">$1</span>'); So for your example: var html = $(document).html(), newHtml = html.replace(/(t(\ ?)e(\ ?)x(\ ?)t)/ig, '<span class="mydiv">$1</span>'); $(document).html(newHtml);

Is this what you're trying to do? str.replace(/[a-z\ ]{10,15}/g,"replacement word");

This is not impossible to do with CSS if the elements are next to each other. It's not recommended to rely on that though in case elements get moved around but here is how it's done just as an FYI: HTML: <div class="one"></div> <div class="two"></div> CSS: .one, .two { width: …

If you are using the jQuery validate plugin then it will not try to validate fields that are disabled. Therefore, you can disable all fields when hiding them and the form will submit. I haven't tested the following but something like this appears to be what you're trying to do: …

You need to re-initialise the datepicker plugin on that markup for it to work because your DOM ready call only initialises it on elements that already exist within the markup on DOM ready (so not on future additions to the markup). request.done(function(msg) { msg = $(msg).appendTo('#' + cont); msg.find('.datepicker').datepicker(); }); …

As specified in the jQuery documentation, the error setting is... > A function to be called if the request fails. This means it is only called if there is a problem requesting `secureLogin.php`, e.g. a HTTP error such as 500 or 404 etc. Since your code isn't having trouble requesting …

There are two options... 1) Make the content of your colorbox an iframe that loads the image uploader. That way when you submit the form it will be submitting that iframe and not the whole page. <div id="form"> <!-- imageUploader.php contains your original form code --> <iframe src="imageUploader.php" width="whatever" height="whatever" …

You can see your code working as you expect, here: http://jsfiddle.net/YNhLu/1/

This should achieve what you are trying to do: jQuery(function($){ //clicking prev button goes to previous slide $('.slideshow .prev').click(function() { prevSlide($(this).closest('.slideshow').find('.slides')); }); //clicking next button or image goes to next slide $('.slideshow .next, .slideshow img,').click(function() { nextSlide($(this).closest('.slideshow').find('.slides')); }); //initialize show iniShow(); function iniShow() { // show first slide with caption …

A very stripped down version of what you're trying to do: function CrossDomainStorage() {} CrossDomainStorage.prototype = { foo: function(callback) { callback.call(this, 1, 'bar'); } } var remoteStorage = new CrossDomainStorage; remoteStorage.foo(function(key, value) { alert('inside ' + value); this.val = value; }); alert('outside ' + remoteStorage.val); The key here is to …

I'm struggling to understand what you are trying to do... which of the following? - The td background should only change colour when the last radio button out of all the radio buttons in the table is clicked. - The background colour for the radio buttons in the second column …

MarPio is incorrect. Your index does not remain the same because the .each() method in jQuery (which it looks like you're using) passes the incremented index as a parameter to the callback which you seem to be well aware of by looking at your code. There is in fact nothing …

That is a very vague assignment and could have many answers but this would be my interpretation of it: function Automobile(make, model, colour, engine, seats) { this.make = make; this.model = model; this.colour = colour; this.engine = engine; this.seats = seats; } var myCar = new Automobile('Peugeot', '307', 'Blue', '2.6 …

HTML: <span id="bible-modal-trigger">Bible</span> CSS #bible-modal-trigger { background: url(http://tinyurl.com/cawz2y3) no-repeat; position: fixed; right: 10px; bottom: 10px; width: 60px; padding-top: 65px; text-align: center; cursor: pointer; } Obviously change the background image to match yours and adjust the dimensions in the CSS. Then you just need to hook on some lightbox JS to …

This sounds like a clearfix issue. There are a few ways you can fix this: [code=css] #footer { color: #fff; width: 1020px; margin-left: auto; margin-right: auto; background: url(images/ourbg2.png); overflow: hidden; /* clearfix */ } [/code] or [code=css] #footer { color: #fff; width: 1020px; margin-left: auto; margin-right: auto; background: url(images/ourbg2.png); display: …

If the issue is that you cannot bring something on top of a flash object, the solution is to add the following inside the flash <object>: <param name="wmode" value="opaque"/> This will allow elements to be positioned on top of the flash.

Haha, I opened this thread so that I could post the same thing as fxm but they beat me to it ;)

Sounds like they just want to remove the line that hides all displayed content when a toggle is clicked. So something like this is all you need: HTML: [code=html] <div class="content hide-content"> <img src="image_big.gif" alt="image" class="toggle_font" /> <p>Caption for the image.</p> </div> <div class="content hide-content"> <img src="image_big.gif" alt="image" class="toggle_font" /> …

In response to your last question, you can use JavaScript to add a 'js' class to your <html> element which you can then use to style how elements will appear when JS is enabled. To add the 'js' class to your <html> tag, you would add something like this to …

You need to add a callback to the URL to make it a JSONP request because you cannot do cross domain JSON requests. So to fix your code, it's as easy as adding '?callback=?' to the end of your URL. [code] $.getJSON("http://api.twitter.com/1/statuses/user_timeline/jrock2004.json?callback=?", function(data) { $.each(data, function(){ $('<div></div>') .hide() .append('<span>' + …