Thu, 2011-07-07 18:22
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
Fri, 2011-07-08 00:34
#1
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.
Fri, 2011-07-08 14:30
#2
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(){