Jquery :: Extend The _alsoResize Function Of The Resizable Plugin?
Dec 4, 2009How to extend the _alsoResize function of the resizable plugin?
View 1 RepliesHow to extend the _alsoResize function of the resizable plugin?
View 1 RepliesI am using the datepicker plug in, and am trying to extend it to not allow sundays to be selected. Now the problem I have is I am no javascript savy... so not sure the correct way to format this.
Here is my code for the plug in:
<script type="text/javascript">
$(function() {
// Tabs
$('#datepicker1').datepicker({
beforeShowDay: function(date) {
return [(date.getDay() > 1), ""];
} minDate: 0,
maxDate: "+12M +0D",
dateFormat: 'dd-mm-yy'
});});
</script>
The above is not working, It is not showing the calendar, so I know something is up somewhere here? The reason it has datepicker1 is on the page it is dynamic and can have multiple occurences of the calendar but with numbers after each.
I am using the jquery-ui resizable plugin, but I encountered some issues :
1) I had to add the ".ui-resizable" css for that plugin to work (hopefully I found a website explaining that workaround)
2) there is no "scroll" option like in draggable (!?)
3) the containment option does not work vertically on the official example [url] you are constrained horizontally, but not vertically. In my application, the containment option is buggy too : it seems to take into account the container outer margins, or something else, I don't know what, but my windows are constrained far too soon (no it's not maxWidth/maxHeight)
4) the alsoResize option is buggy : when the containment option is used, the "alsoResized" element is not constrained as well :-( Am I missing something ? Does someone have info on what's going on with this plugin ? (1.7.1, it's not an alpha version). if there is another resizable plugin available out there ? (like the one used in [url])
I have a slideshow plugin and there is a function in it called stopAutoplay(). This is called when I click on the pre-defined pause button in the slideshow, so it stops.
If I switch between the slideshows(Slideshow 1 2 3) the slideshow is getting messier and messier because it starts many slideshows at the same time and the plugin gets confused what to show.
I figured if I click on the pause button before I switch to another slideshow it works fine. Therefore what I would like to achieve now is to call stopAutoplay() somehow before I switch to the new slides.
How can I call stopAutoplay() from the html file when I click on one of the slideshow 1 2 3 buttons?
I've tried the codes in green below but they don't work.
fadeSlideShow(); plugin pause function part:
stopAutoplay = function(){
clearInterval(intval);
intval = false;
[Code]....
If there is a better solution let's say to kill everything before the new slideshow appears it's even better. Although I've tried die(), empty(), detach(), remove(). I hoped remove() would help cause as I read it's suppsed to remove everything but for some reasons it doesn't...
In my application I am using resizable property for the <div> In my script i used like this $("div").resizable(); Its working fine for all the <div> tags. My requirement is to get the <div> id and I have to save the height, width of that particular <div>. I can able get the height and width of the every div but not the id. I tried in 2 ways like var divId=$(this).attr("id"); and var divId=this.id; in _mouseDrag() in the jquery.ui.resizable.js file. In both the cases divId is undefined.
View 2 Replies View RelatedI think this has probably been asked before but. I want to resize an element that has .resizable() on it. I want the resizable 'stop' event to trigger when it is done.
View 1 Replies View RelatedMy resizable works great. I want to be able to set the width and height after init. How do I set the width and height from a javascript function? I am using the onClick event of an IMG to call a javascript function.
I want to set the height and width of my resizable, so I want to set ui.size.width and ui.size.height.
How do I reference ui.size.width and ui.size.height of my resizable within a javascript function?
I've got some problem with more then one plugin from jQuery.
My Problem is: if I use some "resizable background"-script (it works on IE7+/FF/Chrome), and the content is longer then 100% height of the screen (ipad/iphone), there's a white place at the bottom of my background-image.
The solution was, to fix the background, but it still doesn't work on mobile devices.
Script:[url]
When you need for a certain element (say a text input box) to remember some data, what is the best way to do this? Can you extend the input box object with jquery? Right now i've been storing it in the rel tag $('#testInput').attr('rel','extrainfo') it just seems like there should be a better way to do this.
View 2 Replies View RelatedCurrently I'm trying to do the following:
{
config : {
user : "name",
mod : true
}}
That is JSON nr 1, now I got the following
{
config : {
mod : false
}}
What I need as a result is:
{
config : {
user : "name",
mod : false
}}
If I do a $.extend(json1, json2) then I will lose my user name.
If I do a $.merge(json1, json2) I will keep my username, but my mod will not be overwritten.
How can I overload or extend (or intercept) jQuery's .html() method so that it works its default way unless the object has a certain class?
View 2 Replies View RelatedRun this code :
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo", buttons :
{}};
[code]....
What happens if you do the following? - That is deep copy a jQuery selector.
[Code]...
I'm concerned whether the myObj.selector object will deep copy the whole of jQuery as part of the process. My initial tests did not show any obvious speed hit, but it is rather a basic test right now.
I've cranked up the numbers for sensitivity, interval, and timeout, and the site seems totally unresponsive to my changes. I've double-checked that hoverintent.js is being called, and it definitely is.
var cfg = {
sensitivity: 7,
interval: 5500,
[code]....
I have a web application where we pop up a little calendar control in a
new window to allow users to choose dates. For cross-browser purposes,
this is done via window.open (with some code to make it behave like a
modal dialog) and I set the width and height of the window such that
the controls fit nicely and it all looks good.
I have some users who are unable to see the OK and Cancel buttons at
the bottom of the window due to some display settings on their
machines. OK, I though, I'll just make the window resizable and they
can then take control. How naive of me! Why on earth does IE decide
that the minute I put 'resizable=yes' into my attributes for the new
window that it should ignore the size?
I know I can do window.resizeTo in the onload of the calendar window,
but I'm not keen on the resizing of the window.
I don't suppose anyone knows of a way to have IE open a resizable
window of a given size without the resizeTo?
I have a function that opens a popup and I have told it not make the popup resizable but all browsers seem to ignore it and make it resizable anyway. This is the code
function openflvpopup(popurl){
window.open('FLV/play.php?file=' + popurl + '.flv', '', 'height=500px,width=550px,left=150px,top=150px,resizable=0')
}
I have probably made a silly mistake but I have checked several tutorial website to make sure I write it in the syntax that they do. I can not see any mistakes.
This is a resizeable grid similar to ones found on windows OP, the xml version also has a sort function, but thats not posted here.
Note: a few thing could be done better (or different), but for times sake lets just say it works without error.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sort Grid</title>
<style type="text/css"><!--
body{margin:0px;}
/* GRID STYLES */
#grid tbody td,#grid tfoot td
{
border-color: white ThreedHighlight ThreedHighlight white;
border-width: 0px 1px 1px 0px; border-style: solid;
padding: 0px 0px 0px 0px;
font-size: 14px;
cursor:default;
}
#grid tfoot td
{/* If used. */
border-color: white ThreedHighlight ThreedHighlight ThreedHighlight;
border-width: 0px 1px 1px 1px;
}
#grid tbody .FCol
{
border-left-color: ThreedHighlight;
border-left-width: 1px;
}
#grid .grabberH,#grid .grabberHF,#grid .grabberHE,#grid .grabberL,#grid .grabberR /* t r b L */
{
background-color:ButtonFace;border:outset;line-height:16px;
}
#grid .grabberHF
{
border-width: 1px 0px 0px 1px; padding: 0px 0px 0px 0px;cursor:default;font-size:14px;
}
#grid .grabberH
{
border-width: 1px 0px 0px 0px; padding: 0px 0px 0px 0px;cursor:default;font-size:14px;
}
#grid .grabberHE
{
border-width: 1px 2px 0px 1px; padding: 0px 0px 0px 0px;cursor:default;
}
#grid .grabberL
{
border-width: 1px 0px 0px 1px;
}
#grid .grabberR
{
border-width: 1px 2px 0px 0px;
}
#grid .grabberL,#grid .grabberR
{
cursor:col-resize;padding:0px;
}
#grid .ender
{
width:0px;
}
#grid span
{
padding: 0px 3px 0px 3px;
}
#grid .grabberH span
{
padding: 0px 0px 0px 0px;
}
#grid .grabberHF span
{
padding: 0px 0px 0px 3px;
}
-->
</style>
<script language="JavaScript"><!--
/*RESIZABLE DOM GRID - (C) COPYRIGHTED DON WATSON 2003 ALL RIGHT RESERVED - DONWATS@USA.COM*/
function mouseevent(elm, _event, _function)
{
elm.attachEvent(_event, _function)
}
function mousedetach(elm, _event, _function)
{
elm.detachEvent(_event, _function)
}
function resizeGrid()
{
var srcElem = event.srcElement;
if(srcElem.tagName !=="TD")
{
try{
while(srcElem.tagName !=="TD")
{
srcElem = srcElem.parentNode
}
}
catch(e)
{
return
}
}
if(srcElem.className != "grabberL")
{
if(srcElem.className != "grabberR")
{
return
}
}
var expandingTDTemp = srcElem;
try{
while( expandingTDTemp.className !="grabberH" && expandingTDTemp.className !="grabberHF" )
{
expandingTDTemp = expandingTDTemp.previousSibling;
}
}
catch(e)
{
return
}
expandingTD = expandingTDTemp;
/*lets get the rule (css)*/
ruleNum = expandingTD.firstChild.className; /*assume its the span*/
ruleNum = ruleNum.substr(ruleNum.length-1,1);/*strip the num off the end*/
lastrack = event.x;
finalW = expandingTD.offsetWidth;
createBar();grabElm(srcElem);
}
var grabberElm, finalW, expandingTD, lastrack, ruleNum;
function grabElm(srcElem)
{
grabberElm = srcElem;
grabberElm.setCapture(false);
mouseevent(grabberElm, "onmouseup", letGo);
mouseevent(grabberElm, "onlosecapture", dubbleCheck);
mouseevent(document, "onmousemove", resizeT);
}
function dubbleCheck()
{
window.setTimeout(letGo, 200, "JavaScript")
}
function letGo()
{
if(!document.getElementById("resizebar"))
{
window.clearTimeout();
return
}
grabberElm.releaseCapture();
mousedetach(grabberElm, "onmouseup", letGo);
mousedetach(grabberElm, "onlosecapture", dubbleCheck);
mousedetach(document, "onmousemove", resizeT);
document.styleSheets.rowspans.rules[ruleNum].style.width = 0;
finalW<0?finalW=1:0;expandingTD.width=finalW;
document.styleSheets.rowspans.rules[ruleNum].style.width = expandingTD.offsetWidth;
destroyBar();
}
function resizeT()
{
currentrack = event.x;
if( currentrack > lastrack )
{
finalW += currentrack - lastrack
}
else if( currentrack < lastrack )
{
finalW -= lastrack - currentrack
}
document.getElementById('resizebar').style.left = [ currentrack + document.body.scrollLeft - document.body.clientLeft ];
lastrack = currentrack;
}
function createBar(){
var _body = document.getElementsByTagName('body').item(0);
bar = document.createElement("DIV");
bar.id = "resizebar";
bar.style.backgroundColor="silver";
bar.style.width=3;
bar.style.height=document.body.clientHeight;
bar.style.position= "absolute";
bar.style.top=document.body.scrollTop;
bar.style.left= [ event.x + document.body.scrollLeft - document.body.clientLeft ];
_body.appendChild(bar);
}
function destroyBar(){
var _body = document.getElementsByTagName('body').item(0);
bar = document.getElementById('resizebar');
if(bar) _body.removeChild(bar);
}
//-->
</script>
</head>
<body>
<table id="grid" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr onMouseDown="resizeGrid()">
<td width="140px" nowrap class="grabberHF"><span class="col0">Artist</span></td>
<td width="3px" nowrap class="grabberR"><div class="ender"/></td>
<td width="3px" nowrap class="grabberL"><div class="ender"/></td>
<td width="250px" nowrap class="grabberH"><span class="col1">Venue</span></td>
<td width="3px" nowrap class="grabberR"><div class="ender"/></td>
<td width="3px" nowrap class="grabberL"><div class="ender"/></td>
<td width="120px" nowrap class="grabberH"><span class="col2">Title</span></td>
<td width="3px" nowrap class="grabberR"><div class="ender"/></td>
<td width="3px" nowrap class="grabberL"><div class="ender"/></td>
<td width="45px" nowrap class="grabberH" align="center"><span class="col3">Media</span></td>
<td width="3px" nowrap class="grabberR"><div class="ender"/></td>
<td width="3px" nowrap class="grabberL"><div class="ender"/></td>
<td width="100px" nowrap class="grabberH" align="right"><span class="col4">Date</span></td>
<td width="5px" nowrap class="grabberR"><div class="ender"/></td>
<td width="100%" class="grabberHE"><div class="ender"/></td>
</tr>
<thead>
<tfoot>
<tr><td nowarp colspan="15"><!--footer not needed--></td></tr>
</tfoot>
<tbody>
<tr>
<td colspan="2" class="FCol"><span class="col0">Column 1</span></td>
<td colspan="3"><span class="col1">Column 2</span></td>
<td colspan="3"><span class="col2">Column 3</span></td>
<td colspan="3" align="center"><span class="col3">SHN</span></td>
<td colspan="3" align="right"><span class="col4">04-19-1998</span></td>
<td><div class="ender"/></td>
</tr>
</tr>
<td colspan="2" class="FCol"><span class="col0">Column 1</span></td>
<td colspan="3"><span class="col1">Column 2 - this span uses overflow : ellipsis</span></td>
<td colspan="3"><span class="col2">Column 3</span></td>
<td colspan="3" align="center"><span class="col3">MP3</span></td>
<td colspan="3" align="right"><span class="col4">09-16-1983</span></td>
<td><div class="ender"/></td>
</tr>
<tr>
<td colspan="2" class="FCol"><span class="col0">Column 1</span></td>
<td colspan="3"><span class="col1">Column 2</span></td>
<td colspan="3"><span class="col2">Column 3</span></td>
<td colspan="3" align="center"><span class="col3">SHN</span></td>
<td colspan="3" align="right"><span class="col4">03-01-1969</span></td>
<td><div class="ender"/></td>
</tr>
</tr>
<td colspan="2" class="FCol"><span class="col0">Column 1</span></td>
<td colspan="3"><span class="col1">Column 2 - this span uses overflow : ellipsis</span></td>
<td colspan="3"><span class="col2">Column 3</span></td>
<td colspan="3" align="center"><span class="col3">MP3</span></td>
<td colspan="3" align="right"><span class="col4">01-20-2001</span></td>
<td><div class="ender"/></td>
</tr>
<tr>
<td colspan="2" class="FCol"><span class="col0">Column 1</span></td>
<td colspan="3"><span class="col1">Column 2</span></td>
<td colspan="3"><span class="col2">Column 3</span></td>
<td colspan="3" align="center"><span class="col3">SHN</span></td>
<td colspan="3" align="right"><span class="col4">10-29-1988</span></td>
<td><div class="ender"/></td>
</tr>
</tbody>
</table>
<script language="JavaScript"><!--
function setStyles(){
var _head = document.getElementsByTagName('head').item(0);
var dss = document.createElement("STYLE");
dss.id = "rowspans";
_head.appendChild(dss);
var _table = document.getElementById("grid");
var _tr = _table.getElementsByTagName("TR")[0];
var _td = _tr.getElementsByTagName("TD");
var colnum = 0;
for(i = 0; i < _td.length; i++)
{
if(_td[i].className != "grabberL")
{
if(_td[i].className != "grabberR")
{
document.styleSheets.rowspans.addRule(".col"+colnum+"","width:"+ _td[i].width +"");
colnum += 1;
}
}
}
document.styleSheets.rowspans.addRule("#grid span","overflow: hidden;text-overflow: ellipsis;white-space: nowrap;");
//alert(document.styleSheets.rowspans.cssText);
}
setStyles(); /* After resize grid, or onload event. */
//--></script>
</body>
</html>
how can I call the functions CallMe1 and CallMe2? I am only able to call CallMe3()
------------------myplugin.js-------------------(function($) {
$.myplugin = function() {
function CallMe1() {
alert('Hello');
[Code].....
How do I add a callback function to a plugin so that i can execute another function after the plugin completes its own processes.
View 2 Replies View RelatedI'm playing with jQuery and I'm having a problem with this code; Problem: trigger a pluggin that gets called from .click(function(){};
[Code]...
I opened a new window using 'resizable=no'. Can the child window make itself resizable even if it's opened with 'resizable=no'?
For example:
<body onload="javascript: window.resizable=true;">
I switched to using this function to create element:
----------------------------------------------------
function elem(name, attrs, style, text) {
var e = document.createElement(name);
if (attrs) {
for (key in attrs) {
if (key == 'class') {
e.className = attrs[key];
} else if (key == 'id') {
e.id = attrs[key];
} else {
e.setAttribute(key, attrs[key]);
}
}
}
if (style) {
for (key in style) {
e.style[key] = style[key];
}
}
if (text) {
e.appendChild(document.createTextNode(text));
}
return e;
}
---------------------------------------------------------
so instead of the "old" way:
var oMyDiv = document.createElement("DIV");
oMyDiv.setAttribute("id","testid");
oMyDiv.className = "testclass";
I use that function :
var oMyDiv = elem('DIV', {'id':'testid', 'class':'testclass'});
The rendered source shows this:
<div extend=" function (object) {return Object.extend.apply(this, [this,
object]); } "
class="testclass" id="testid">
Question: I don't understand the "EXTEND" part......anyways does it look
legit/right?
I am using a json from a Google spreadsheet and a jquery plugin which is called throught this HTML line <ul id="example">.The thing is that when I dynamically append elements to the <ul id="example"> from within the JSON callback function, these are not recognized by the jquery plugin
Code:
<form>
<ul id="example">BLA BLA BLA</ul>
</form>
[code]....
If I insert an <ul id="example"> plus some <li> in the HTML code the plugin works perfect If I insert dynamically some <li> to the <ul id="example"> throught a javascrypt function before executing the callback (...json-in-script&callback=...) also work perfect.But when I insert dynamically the <li> elements within the callback function (in my case: cm_loadMapJSON) does not work well.
Following on from my previous question about loading a div based on idI realised I might be overcomplicating it a bit - instead of loading I could instead just show a hidden div which has an id that matches the href of the link and hide all its siblings.I'm using the jmapping google maps plugin, which generates the links I'm using. The idea is you click on a location link and it's identified on the map but alsoa div containing further information appears.My code seems to have hijacked the click event from the jmapping plugin though - the div appears like I want it to, but now the map does nothing. There were no issues with firing both from the link when I used load but show doesn't seem to play as nicely.Is there a way to phrase it differently so that when I click a link both the jmapping plugin and my show code fire and not just one of them?
<script type="text/javascript">$(document).ready(function(){
$('#worldmap').jMapping({
default_zoom_level: 8,
[code]....
I am currently working on a project where I am using the jQuery Calculation plugin [URL] to do some math functions in a dynamic form, the issue is that when a new set of fields is created the calculation script only pulls data from the ones there when the page loaded, I am fairly certain that what I need to do is use the live function, however I am not very familiar with it and still learning. My jQuery for the plugin is :
$("input[name^=emem]").sum("keyup", "#totalMem");
I cannot seem to set a size for a text area relative to total screen width in CSS or HTML or Javascript? When I use CSS or a percent value in the cols attribute, they size the textarea as a percentage of another text area on the screen.
View 4 Replies View Related