2 replies [Last post]
bobvaun
Offline
newbie
Last seen: 11 years 29 weeks ago
Timezone: GMT-5
Joined: 2011-07-07
Posts: 1
Points: 2

I got some HTML/CSS that was inline in the example and responds to a button click. My code is identical with the exception that I have a CSS class wrapping the HTML I copied.

		<script type="text/javascript">
		  $(function()
		  {
			  $("#homescreen-tiles ul").sortable(
			  { 
				  disabled: true,
				  placeholder: 'placeholder',
				  forcePlaceholderSize:true,
				  dropOnEmpty:true
			  }).addClass("ui-sortable-disabled");  // Adds the class
 
			  $("#homescreen-tiles-edit").click(function(e)
			  {
				  // Add the class if it does not exist or remove it if it does
				  $(this).toggleClass("editing");
 
				  var ul = $("#homescreen-tiles ul");
				  ul.sortable("option", "disabled", !ul.sortable( "option", "disabled" ));
			  })
		  })
		  function MM_popupMsg(msg) { //v1.0
			 alert(msg);
		  }
        </script>        

This code is embedded at the top of the HTML. I am new to CSS but I assume the "$" in front of the function marks it as jQuery? The purpose of this code is to allow small tiles of information on the web page to be moved and reordered first by pressing an edit button, moving the tiles, then pressing the edit button a second time to end the editing. Here is the HTML it refers to:

<div class="content">
  <div id="homescreen-tiles" class="tiles">
    <ul>.....
    </ul>
    <input type="button" value="Edit" id="homescreen-tiles-edit"/>
  </div>
</div>

Finally here is the CSS:

#homescreen-tiles-edit
{
	float:right;
	clear:both;
	background:white;
	border:1px solid #999;
	border-radius:5px;
	margin-right: 30px;
}
#homescreen-tiles-edit.editing
{
	background:#666;
	color:#fff;
}

The only difference between my code and the sample I got this from is that I have a

around the list and button. As I understand jQuery though it will search the code for something with an id of "homescreen-tiles-edit" and when that thing is clicked the jQuery code will execute. In my case though it does not appear as though the jQuery function is detecting a click event.

Do I need to modify anything due to have a wrapper class? Otherwise I'm stumped as to why this code is not getting executed.

Thanks

AndyA
AndyA's picture
Offline
Moderator
Brisbane
Last seen: 11 years 18 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2011-06-30
Posts: 39
Points: 41

Hey bobvaun It would be

Hey bobvaun

It would be easier if you could link to the whole page so we could see the JavaScript errors.
Make sure you have linked to the jQuery library and the UI stuff so that sortable works.
Also you should add:

$(document).ready(function(){

At the beginning of the script.
The best thing to debug then would be to look for JavaScript errors.

Hope this helps.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Ya, I would need to see the

Ya, I would need to see the full site to help sort it out.

Also, Andy, he does have the document ready statement in his code, he's just using the, completely legitimate, short hand version

$(function(){

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph