Hi I'm planning on building a CMS with integrated imagemap. Do you guys know any open source image map creator? Or do you guys have any ideas/resources how to create one? Thanks!
Link to menu: Professional dropdown #2
I was wondering if these posts Suckerfish meets jQuery or Son of Suckerfish dropdowns in jQuery could optimize the menu above.
I need the menu to be optimized for IE6, because when I use the menu as it is, the menu hangs after I click on a menu item that loads a page with heavy processing. It takes too long for the menu to be enabled again.
Any ideas?
Is there a jQuery plug-in to remap the "dot" key in the numeric keypad? The purpose is to make it print a decimal separator, rather than a dot, in languages that use commas or other characters. I'd like to mimic the behaviour of some desktop applications like MS Excel.
(It's okay to hard-code the output character.)
i use such jquery treeview
if parent node don't have child, it don't render '+' near it, how can i forse display it? i see such solution- if node don't have any child, add there fake childs and mark parent node not opened
can you give any solution with sample?
Hi, this code in my plugin used to work just fine:
jQuery('#embedded_obj', context).get(0).getVersion();
and in html...
<object id="embedded_obj" type="application/x-versionchecker-1.0.0.1"</object
Basically trying to get the properties from an embedded object. But it looks like get(0) is returning an html object instead of the actual embedded object.
For example, if I do:
var launcher = jQuery('#embedded_obj', context).get(0);
for(prop in launcher){
alert(prop + ': ' + launcher[prop]);
}
... it alerts things like "getElementByNode," "scrollWidth," "clientLeft," "clientTop" etc.
Again this worked before Firefox 3.6. Has anyone else seen this or have any ideas/suggestions?
Thanks!
I don't understand jsonp.
I understand JSON. I don't understand JSONP. Wikipedia is the top search result for JSONP. It says JSONP or "JSON with padding" is a JSON extension wherein a prefix is specified as an input argument of the call itself.
Huh? What call? That doesn't make any sense to me. JSON is a data format. There's no call.
The 2nd search result is from some guy named Remy, who writes JSONP is script tag injection, passing the response from the server in to a user specified function.
I can sort of understand that, but it's still not making any sense.
What is JSONP, why was it created (what problem does it solve), and why would I use it?
Addendum: I've updated Wikipedia with a clearer and more thorough description of JSONP, based on jvenema's answer. Thanks, all.
Afternoon peoples.
I am having a bit of a nightmare traversing a DOM tree properly. I have the following markup
<div class="node" id="first-wh">
<div class="content-heading has-tools">
<div class="tool-menu" style="position: relative">
<span class="menu-open stepper-down"></span>
<ul class="tool-menu-tools" style="display:none;">
<li><img src="/resources/includes/images/layout/tools-menu/edit22.png" /> Edit <input type="hidden" class="variables" value="edit,hobbies,text,/theurl" /></li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<h3>Employment History</h3></div>
<div class="content-body editable disabled">
<h3 class="dates">1st January 2010 - 10th June 2010</h3>
<h3>Company</h3>
<h4>Some Company</h4>
<h3>Job Title</h3>
<h4>IT Manager</h4>
<h3>Job Description</h3>
<p class="desc">I headed up the IT department for all things concerning IT and infrastructure</p>
<h3>Roles & Responsibilities</h3>
<p class="desc">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<div class="content-body edit-node edit-node-hide">
<input class="variables" type="hidden" value="id,function-id" />
<h3 class="element-title">Employment Dates</h3>
<span class="label">From:</span> <input class="edit-mode date date-from" type="text" value="date" /> <span class="label">To:</span> <input class="edit-mode date date-to" type="text" value="date" />
<h3 class="element-title">Company</h3>
<input class="edit-mode" type="text" value="The company I worked for" />
<h3 class="element-title">Job Title</h3>
<input class="edit-mode" type="text" value="My job title" />
<h3 class="element-title">Job Description</h3>
<textarea class="edit-mode" type="text">The Job Title</textarea>
<h3 class="element-title">Roles & Responsibilities</h3>
<textarea class="edit-mode" type="text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</textarea>
<div class="node-actions">
<input type="checkbox" class="checkdisable" value="This is a checkbox"/>This element is visible .<br />
<input type="submit" class="account-button save" value="Save" /> <input type="submit" class="account-button cancel" value="Cancel" /></div>
</div></div>
...
And I am trying to traverse from input.save at the bottom right the way up to div.node... This all works well with one copy of the markup but if I duplicate it (obvisouly changing the ID of the uppermost div.node and use jQuery.closest('div.node') for the upper of the div.node's it will return the element below it not the element above it (which is the right one). I've tried using parents() but that also has it's caveats. Is there some kind of contexyt that can be attached to closest to make it go up and not down? or is there a better way to do this.
jQuery code below.
$(".save").click(function(){
var element=$(this);
var enodes=element.parents('.edit-node').find('input.variables');
var variables=enodes.val();
var onode=element.closest('div.node').find('.editable');
var enode=element.closest('div.node').find('.edit-node-hide');
var vnode=element.closest('div.node-actions').find('input.checkdisable');
var isvis=(vnode.is(":checked")) ? onode.removeClass('disabled') : onode.addClass('disabled');
onode.slideDown(200);
enode.fadeOut(100);
});
Thanks in advance.
Alex
P.S It seems that stackoverflow has done something weird to the markup! - I just triple checked it and it is fine but for some reason it's concate'd it below
I created a gadget which is able to post activities:
function postActivity(text) {
var params = {};
params[opensocial.Activity.Field.TITLE] = text;
var activity = opensocial.newActivity(params);
opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH);
};
And I request activities by doing:
req.add(req.newFetchActivitiesRequest( new opensocial.IdSpec({'userId' : 'VIEWER', 'groupId' : 'FRIENDS'})), 'friends_activities');
My question is: How can I filter activities to only show activities posted by a specific gadget?
I reckon the field "appId" is meant for this, but this field is empty in the response.
I'm working on a project to develop a cross-browser testing web app. Simply put, I'm tired of having to maintain multiple browsers on the same system and IE in VMware solely for the purpose of testing. Does anyone know if there is any way to change the render kit programmatically? For example, if I insert a URL, I would be able to load the URL and switch the browser render within a frame of some assortment. I am experienced with PHP, JS, and RoR if there is a solution using any of those.
Thank you!
John
Hi everyone
I'm currently trying to create a "mega" dropout menu using JQuery but have encountered an issue I'm yet to be able to resolve. At the moment I have the following HTML structure:
<div id="TopNav" class="grid_16">
<ul class="cmsListMenuUL level0" id="TopNavMenu">
<li class="cmsListMenuLIcmsListMenuLI highlightedLI" id="TopNavMenu_Home"><a href="/">
<span class="text">Home</span></a></li>
<li class="cmsListMenuLIfirst" id="TopNavMenu_0_1"><a href="/Key-Sectors.aspx" class="cmsListMenuLink">
<span class="text">Key Sectors</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_2"><a href="/Global-Brands.aspx" class="cmsListMenuLink">
<span class="text">Global Brands</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_3"><a href="/News---Features.aspx" class="cmsListMenuLink">
<span class="text">News & Features</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_4"><a href="/Videos.aspx" class="cmsListMenuLink">
<span class="text">Videos</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_5"><a href="/Events.aspx" class="cmsListMenuLink">
<span class="text">Events</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_6"><a href="/Key-Cities.aspx" class="cmsListMenuLink">
<span class="text">Key Cities</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_7"><a href="/Doing-Business-in-Yorkshire.aspx"
class="cmsListMenuLink"><span class="text">Doing Business in Yorkshire</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_8"><a href="/How-We-Can-Help.aspx" class="cmsListMenuLink">
<span class="text">How We Can Help</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_9"><a href="/Contact-Us.aspx" class="cmsListMenuLink">
<span class="text">Contact Us</span></a></li>
</ul>
</div>
<div class="sectorsDropped">
<div class="floatLeft leftColumn">
<div class="parentItem" style="border-color: #0064BE;">
<a href="/Key-Sectors/Advanced-Engineering---Materials.aspx" class="parentItemContent">
Advanced Engineering & Materials</a><div class="childItem">
<a href="/Key-Sectors/Advanced-Engineering---Materials/Nuclear.aspx">- Nuclear</a></div>
<div class="childItem">
<a href="/Key-Sectors/Advanced-Engineering---Materials/Logistics---Infrastructure.aspx">
- Logistics & Infrastructure</a></div>
</div>
<div class="parentItem" style="border-color: #FFB611;">
<a href="/Key-Sectors/Chemicals.aspx" class="parentItemContent">Chemicals</a></div>
<div class="parentItem" style="border-color: #B7CC0B;">
<a href="/Key-Sectors/Environmental-Technologies.aspx" class="parentItemContent">Environmental
Technologies</a><div class="childItem">
<a href="/Key-Sectors/Environmental-Technologies/Offshore-Wind.aspx">- Offshore Wind</a></div>
<div class="childItem">
<a href="/Key-Sectors/Environmental-Technologies/Carbon-Capture---Storage.aspx">- Carbon
Capture & Storage</a></div>
<div class="childItem">
<a href="/Key-Sectors/Environmental-Technologies/Tidal-Power.aspx">- Tidal Power</a></div>
<div class="childItem">
<a href="/Key-Sectors/Environmental-Technologies/Biomass.aspx">- Biomass</a></div>
</div>
</div>
<div class="floatLeft rightColumn">
<div class="parentItem" style="border-color: #AC26AA;">
<a href="/Key-Sectors/Digital---New-Media.aspx" class="parentItemContent">Digital &
New Media</a></div>
<div class="parentItem" style="border-color: #e1477e;">
<a href="/Key-Sectors/Food---Drink.aspx" class="parentItemContent">Food & Drink</a></div>
<div class="parentItem" style="border-color: #00c5b5;">
<a href="/Key-Sectors/Healthcare-Technologies.aspx" class="parentItemContent">Healthcare
Technologies</a><div class="childItem">
<a href="/Key-Sectors/Healthcare-Technologies/Biotechnology.aspx">- Biotechnology</a></div>
<div class="childItem">
<a href="/Key-Sectors/Healthcare-Technologies/Pharmaceuticals.aspx">- Pharmaceuticals</a></div>
<div class="childItem">
<a href="/Key-Sectors/Healthcare-Technologies/Medical-Devices.aspx">- Medical Devices</a></div>
</div>
<div class="parentItem" style="border-color: #AC1A2F;">
<a href="/Key-Sectors/Financial---Professional.aspx" class="parentItemContent">Financial
& Professional</a></div>
</div>
</div>
In normal circumstances the div containing the "mega" menu options would sit inside the li item that fires the show/hide but this is currently not possible as the ul list of navigation links is rendered using a 3rd party piece of software which does not provide an equivalent of an OnItemDataBound event for me to be able to inject the div into the item
Does anyone know of a way, using JQuery, of showing the div but maintain the display of the div as the mouse focus leaves the li that originaly displayed the div and actually enters the div?
I'm currently using the following JQuery which displays the div correctly but as the mouse focus enters the div the div then disappears as the mouse focus from the li has now moved:
$(document).ready(function() {
function addMega(){
$(".sectorsDropped").toggle("fast");
}
function removeMega(){
$(".sectorsDropped").toggle("fast");
}
var megaConfig = {
interval: 500,
sensitivity: 4,
over: addMega,
timeout: 500,
out: removeMega
};
$("#TopNavMenu_0_1").hoverIntent(megaConfig)
});
Thanks
Dave
Hi,
Can anybody help me writting a regular expression to replace these characters with a empty string. Character list is given below.
public static char[] delimiters = { ' ', '\r', '\n', '?', '!', ';', '.', ',', '`', ':', '(', ')', '{', '}', '[', ']', '|', '\'', '\\', '~', '=', '@', '>', '<', '&', '%', '-', '/', '#' };
Thanks.
Subrat.
I'm very interested in this framework, coupled with a NoSQL backend like MongoDB.
Basically, my blue-sky vision is this:
ExtJS/Pintura/MongoDB.
I would probably plug in Rhino as the js engine.
Is there anybody here using Pintura in a production environment?
What are the pitfalls? What is your general experience?
Thanks.
I am trying to position the page to a specific location after user clicks on a link. I am using javascrip scrollTo(), but it is not working for me. Need advice or alternative way of doing this
Try this link.
http://tinyurl.com/ye5khug
select Edmonton or Calgary, then select an option in column on right.
Hi, i have some containers that contain some divs like:
<div id="container1">
<div id="task1" onMouseOver="DragDrop("+1+");"> </div>
<div id="task2" onMouseOver="DragDrop("+2+");"> </div>
<div id="task3" onMouseOver="DragDrop("+3+");"> </div>
<div id="task4" onMouseOver="DragDrop("+4+");"> </div>
</div>
<div id="container2">
<div id="task5" onMouseOver="DragDrop("+5+");"> </div>
<div id="task6" onMouseOver="DragDrop("+6+");"> </div>
</div>
<div id="container3">
<div id="task7" onMouseOver="DragDrop("+7+");"> </div>
<div id="task8" onMouseOver="DragDrop("+8+");"> </div>
<div id="task9" onMouseOver="DragDrop("+9+");"> </div>
<div id="task10" onMouseOver="DragDrop("+10+");"> </div>
</div>
i'm trying to drag tasks and drop them in one of the container divs, then reposition the dropped task so that it doesn't affect the other divs nor fall outside one of them
and to do that i'm using the event onMouseOver to call the following function:
function DragDrop(id) {
$("#task" + id).draggable({ revert: 'invalid' });
for (var i = 0; i < nameList.length; i++) {
$("#" + nameList[i]).droppable({
drop: function (ev, ui) {
var pos = $("#task" + id).position();
if (pos.left <= 0) {
$("#task" + id).css("left", "5px");
}
else {
var day = parseInt(parseInt(pos.left) / 42);
var leftPos = (day * 42) + 5;
$("#task" + id).css("left", "" + leftPos + "px");
}
}
});
}
}
where:
nameList = [container1, container2, container3];
the drag is working fine, but the drop is not really, it's just a mess!
any help please??
when i hardcode the id and the container, then it works beautifully, but as soon as i use id in drop then it begins to work funny!
any suggestions???
thanks a million in advance
Lina
I am calling the Google Analytics _trackEvent() function on a web page, and get back an error from the obfuscated Google code. In Firebug, it comes back "q is undefined". In Safari developer console: "TypeError: Result of expression 'q' [undefined] is not an object."
As a test, I have reduced the page to only this call, and still get the error back. Besides the necessary elements and the standard Google tracking code, my page is:
<script>
pageTracker._trackEvent('Survey', 'Checkout - Survey', 'Rating', 3);
</script>
Results is that error.
What's going on here?
I am trying to create a bookmarklet that, upon clicking, would request some information from the user (a url and a couple other fields in this case) and then send that data to a php page on my server and then display the result.
I would like to do an Ajax call for this so that I don't actually redirect to the new page, just get the data but I assume I would run into the "Same Origin Policy" limitation of Ajax.... is there any known way of basically doing the same thing?
Also, what would be the best way to pass the parameters? I already have a mechanism in place to recieve the parameters as a post message from a form...is there any way I could just reuse this?
I'm trying to add one to a number inside a p element with jQuery, but it doesn't work.
$(document).ready(function() {
function addOne() {
var number = $('p').html();
return number++;
}
$('p').text(addOne());
});
This is my code:
/**********************************************************
* remove non-standard characters to give a valid html id *
**********************************************************/
function htmlid(s) {
return s.gsub(/[^A-Z^a-z^0-9^\-^_^:^\.]/, ".");
}
Why does jslint throw this error?
Lint at line 5 character 25: Unescaped '^'.
return s.gsub(/[^A-Z^a-z^0-9^\-^_^:^\.]/, ".");
Hello all,
Does anyone know how to fix the problem about Tinymce Line break problem on Safari and Chrome.
For example, Let's say, I have two line pure text. When I copy and paste through firefox or IE. It's under one p tag. So it's same formatting i saw in the text file which is two line.
But if i copy and paste through Chrome or Firefox, it becomes two p tag. So at display there,s one space between that two line.
I tried to add safari plugin, but nothing happens. And if i put the plugin called paste_auto_cleanup_on_paste : true, it's removing the space, but two line text became one line.
Cany anyone help me out by providing solution ? I noticed that at wordpress which is using Tinymce Editor also, doesn't occur that problem, because seems like they are using span instead of p at editor. If that's the solution, how can i change to span instead of p. Thanks for your help and greatly appreciated.
TLDR My geoJSON layer will display the vector mark but will not destroy the features or re add the features in causing a moving / updating look to the OpenLayers map.
Hey S O.
I have a geojson layer set up as follows:
//GeoJSON Layer//
var layer1 = new OpenLayers.Layer.GML("My GeoJSON Layer", "coordinates",
{format: OpenLayers.Format.GeoJSON,
styleMap: style_red});
My features are set up as follows:
var f = new OpenLayers.Feature.Vector(null,style_red);
var style_red = OpenLayers.Util.extend({}, layer_style);
style_red.strokeColor = "red";
style_red.fillColor = "black";
style_red.fillOpacity = 0.5;
style_red.graphicName = "circle";
style_red.pointRadius = 3.8;
style_red.strokeWidth = 2;
style_red.strokeLinecap = "butt";
and my layer updating function:
function UpdateLayer(){
var p = new OpenLayers.Format.GeoJSON({
'internalProjection': new OpenLayers.Projection("EPSG:900913"),
'externalProjection': new OpenLayers.Projection("EPSG:4326")
});
var url = "coordinates.geojson";
OpenLayers.loadURL(url, {}, null, function(r) {
var f = p.read(r.responseText);
map.layers[1].destroyFeatures();
map.layers[1].addFeatures(f);
});
setTimeout("UpdateLayer()",1000)
}
Any idea what I am doing wrong or what I am missing?
I am trying to use a click event to generate a popup window based off of the specific value chosen. I am having trouble with the if statement and trying to access each specific option value. Can any of you give me some hints?
<select id="offices">
<option value="Choose an Office">Choose an Office</option>
<option value="Residential Education (ResEd)" >Residential Education (ResEd)</option>
<option value="Dean of Students">Dean of Students</option>
<option value="Office of Student Affairs">Office of Student Affairs</option>
<option value="Vice-Provost of Student Affairs">Vice-Provost of Student Affairs</option>
</select>
</div>
function display(){
var officearray = [{
Office: "Residential Education (ResEd)",
ID: "725-2800",
Description: "The Office of Residential Education is responsible for developing the policies, programs, and staffing which support the intellectual, educational, and community-building activities in student residences. Second Floor. "
}, {
Office: "Dean of Students",
ID: "723-7833",
Description: "The Dean of Students office is composed of 13 individual administrative units that are concerned with the general welfare of both undergraduate and graduate students, in and out of the classroom. Second floor."
}, {
Office: "Office of Student Activities (OSA)",
ID: "723-2733",
Description: "Services for student organizations, student-initiated major events and programs, and fraternities and sororities. Second floor."
}, {
Office: "Vice-Provost of Student Affairs",
ID: "725-0911",
Description: "The Vice Provost for Student Affairs is responsible to the Provost for providing services and programs to undergraduate and graduate students in support of the academic mission of the University. Second floor."
}]
for(var i = 0; i < officearray.length; i++) {
var o = document.getElementById("offices")
var oString = o.options[o.selectedIndex].value;
newwindow2 = window.open('', 'name', 'height=200, width=150')
var tmp = newwindow2.document
if (oString == officearray[i].Office) {
tmp.writeln(officearray[i].Description)
}
}
}
document.getElementsByTagName('option').addEventListener("click",display,false)
I would like to show in dialog all elements with specific class. The dialog should hide the rest of the page. So for example:
On this SO page I want to show all elements with class="user-info". Those elements would be shown in dialog with same width and height and same css and everything else would be hidden. It would be like cutting them out of the page and pasting them in a dialog.
Any ideas how this could be done?
Is it possible to configure the FlexPaper reader to un-encrypt password-protected pdfs or swfs?
Here is the use-case:
User uploads a pdf
My server would then convert the pdf to swf via pdf2swf
Then somehow encrypt the swf with a password (not sure best way to do this)
Then the FlexPaper would be able to un-encrypt the swf and display it
What I am trying to avoid is the caching of readable swf in the browser's cache.
Any ideas on the best way to achieve this?
I know, even with this it will not be a fully secure solution, but certainly helps.
Note: I am running this on Linux and OS X and using Rails.
Thanks!
Jonathan