finding a substring match at the beginng of a of another string. - JavaScript Discussion Boards

How to change mouse cursor in jQuery UI resizable plugin?

Tesic Goran25-May-12 0:06

25-May-12 0:06

When you use jQuery UI resizable plugin the mouse cursor style can be as "e-resize" (2 arrows in opposite directions). But, how can we change it? I've tried this:

$("#right-line").hover(function() {
$(this).css("cursor", "crosshair");
});

And it doesn't work, that is the cursor is still "e-resize".

Actually, I've made my own outer black div around the main div rectangle. That outer black div is like a thin border and has 8 small squares in top-left, top-right, bottom-left, bottom-right corners and top-center, bottom-center, left-center and right-center locations, which I want to use as my own handles. It means I don't want to allow "e-resize" cursor along the whole border of container, but only on my own squares.

So, I need to control the cursor style in jQuery UI resizable plugin.

I know I can change the original jQuery CSS file, but is there a way to achieve this programmatically?

Thank you for any suggestion.

Re: How to change mouse cursor in jQuery UI resizable plugin?

Ali Al Omairi(Abu AlHassan)29-May-12 5:08

Ali Al Omairi(Abu AlHassan)

29-May-12 5:08

lets see;
Resizable Plugin uses css classes to change cursor shape. see this:

CSS

/*!
 * jQuery UI Resizable 1.8.20
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Resizable#theming
 */
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}

you can select the element using the class and set the css for it

JavaScript

$('.ui-resizable-se').css("cursor", "crosshair");

Help people,so poeple can help you.

A Unique Problem - Ignoring Placing Page on Back Button History

OrangeV24-May-12 5:40

OrangeV

24-May-12 5:40

Hi, I'm writing help files in the form of html pages with javascript code. They're then compiled into a WinHelp chm file and deployed with the program I'm writing. Here's a problem that I've seen with a couple of my pages: Some of my pages contain an image with rectangles you can click on and it will pop up a pop up box (not another window) that contains another page. This is the code I'm using:

XML

<pre lang="Javascript"><area shape="rect" coords="23, 77, 58, 330" href="javascript:void(0);" class="MCPopupSpot" onclick="FMCPopup( event, this ); return false;" MadCap:iframeName="popup1" />

<span class="MCPopup">
&lt;iframe class="MCPopupBody" name="popup1" frameborder="0" MadCap:src="test.htm" src="../Skin/Blank.htm" style="display: none;" onload="if ( typeof( FMCIFrameOnload ) == 'function' ) {{ FMCIFrameOnload( this ); }}">
&lt;/iframe>
</span></pre>

So this works great, besides that when you click on one of these pages and then attempt to browse away from the parent page by using the back button it doesn't work. The back button will reopen the old popup pages that you clicked on in the parent page. Is there any code I can write that makes certain pages ignore their history so that the back button will not navigate back to those popups but instead navigate to the last parent page I was on? Or has anyone else experienced this problem using this method to create pop up boxes? I figured this was the best solution to the work around, but maybe someone has a better idea.

I probably can elaborate more, it's a very unique problem that's hard to explain.

Thanks in Advance,
James

modified 24-May-12 11:47am.

Re: A Unique Problem - Ignoring Placing Page on Back Button History

Sandeep Mewara24-May-12 9:02

Sandeep Mewara

24-May-12 9:02

Have a look at this tip with certain ways to hack into history to control back button somewhat: Browser back button issue after logout[^]

See if it helps!

Sandeep Mewara
[My last tip/trick]: Server side Delimiters in ASP.NET[^]

How to make the text box draggable using jQuery?

Tesic Goran23-May-12 8:45

Tesic Goran

23-May-12 8:45

Is anybody there who has experience with making html input text box draggable using jQuery?

I've tried to wrap text box inside div and can make it resizable, but not draggable. The div and text box are placed on standard jQuery UI dialog. Actually, I need both - draggable and resizable html input text box inside dialog.

The code is as follows:

JavaScript

$(document).ready(function() {
    $("#btnShow").click(function(e) {
        $('#dialog').dialog("open");
    });
    $('#dialog').dialog({
        title: "Sample dialog",
        resizable: false,
        autoOpen: false,
        width: 400,
        height: 300,
        buttons: [{ text: "OK", click: function() { /* do something */ } },
            { text: "Cancel", click: function() { $(this).dialog("close") } }]
    });
    $('#divText1').draggable({
        containment: "parent",
        cursor: "move"
    }).resizable({
        containment: "parent",
        handles: "e, w"
    });
});

HTML

<input id="btnShow" type="button" value="Show" />

<div id="dialog" title="Dialog Box" style="border: solid 1px black; margin: 0px 0px 0px 0px; padding: 5px 0px 0px 5x;">
    <div id="divText1" style="width: 200px; height: 30px;">
        <input type="text" style="width: 98%;" value="Hello world!" /><br /><br />
    </div>
</div>

Thank you in advance.

Goran

Re: How to make the text box draggable using jQuery?

Vitaly Tomilov24-May-12 16:13

Vitaly Tomilov

24-May-12 16:13

http://jqueryui.com/demos/draggable/[^]

Re: How to make the text box draggable using jQuery?

ZurdoDev25-May-12 8:47

ZurdoDev

25-May-12 8:47

I haven't tested it but I believe the problem you are likely running into is that the textbox has input area so if you click that area and try to drag, you are in control of the textbox not the div. You need an element that you can drag, maybe put an image to the left of the textbox or something like that. But trying to drag inside a textbox will just highlight the text.

There are only 10 types of people in the world, those who understand binary and those who don't.

finding a substring match at the beginng of a of another string.

Steve Holdorf22-May-12 7:16

Steve Holdorf

22-May-12 7:16

I have an array of strings and want to locate each array's string that begins with another string. (ie)

array arr = new array("computer, condor");

var str1 = "con";

?

How do I find out which array element string begins with str1 ("con")?

Thannks,

Steve Holdorf

Re: finding a substring match at the beginng of a of another string.

Vitaly Tomilov22-May-12 8:51

Vitaly Tomilov

22-May-12 8:51

There is no automatic functionality for this, that I know of, you need to do it yourself.

Approach 1:

1. Store your strings as JSON;
2. Use $.each on the JSON to iterate through each element and find the ones you need.

Approach 2:

Just iterate through the list of strings yourself, comparing each element on that condition.

Re: finding a substring match at the beginng of a of another string.

scottgp22-May-12 9:25

scottgp

22-May-12 9:25

What about this - http://stackoverflow.com/questions/4556099/in-javascript-how-do-you-search-an-array-for-a-substring-match[^]?
Scott

Simple autocomplete textbox control problem

Steve Holdorf20-May-12 11:10

Steve Holdorf

20-May-12 11:10

I am trying to create a simple autocomplete textbox control. Now, in a hidden field I have text: "computer communication condor" and I have a textbox control that I am using a javaScript RegEx object to do the search; however, no partal or full matching is occuring. The code is below. Can someone help me out?

function javascriptOnTextChange() {
var string1 = document.getElementById('<%=txtSearch.ClientID%>').value;
var string2 = document.getElementById('<%=HiddenFieldSearch.ClientID%>').value; ;

var pattern = '/' + string1 + '/gix';
alert(pattern.exec(string2));

Now, if I type in 'com' that alert box should find the first occurance of the match (i.e. computer) however the alert shows null.

Thanks,

Steve Holdorf

Re: Simple autocomplete textbox control problem

Vitaly Tomilov20-May-12 11:27

Vitaly Tomilov

20-May-12 11:27

Not a precise answer to your question, just to share my experience of using Autocomplete object from jQuery UI - it worked just fine, and was very easy to use.

Link: http://jqueryui.com/demos/autocomplete/[^]

How to read Doc or Pdf file using javascript or jquery

priya014319-May-12 2:03

priya0143

19-May-12 2:03

I have upload control button and when i load a file from the computer then i need to read the content of the file and then it will be pasted in to the editor.

is it possible if possible please provide me the possible solution

Thanking you

Re: How to read Doc or Pdf file using javascript or jquery

frostcox19-May-12 21:24

frostcox

19-May-12 21:24

Hey I needed this functionality a few weeks back and I came across these ready-made-plug-in's
Multiple File Upload, Single File. I know its kinda cheating but you can disect the code to understand how it works.

Jquery quering the db

frostcox18-May-12 8:20

frostcox

18-May-12 8:20

Hey everyone, I'm currently updating a project that is to be honest a bit dated, Data access layer is in c# and screen tier is in vb(dont't ask me why). Anyway for validation you always need to postback to validate data an that, I have started using jquery (which is cool by the way) for validation and I have it working for general data i.e invalid lenght, characters etc...., I'm just wondering how to get jquery to connect to the db to see if say the name in the textbox already exists??
Cheers

Re: Jquery quering the db

Vitaly Tomilov20-May-12 11:31

Vitaly Tomilov

20-May-12 11:31

I don't get it why you need to do this in jQuery, if you already have C# in the back-end...

You would, either way, need to do a post to implement such request, and implementing it in C# is the easiest thing to do. Invoking C# action from jQuery is very easy, there are plenty of examples about it in the internet.

Re: Jquery quering the db

frostcox21-May-12 6:00

frostcox

21-May-12 6:00

Was kinda thinking when the page firsts loads that I could some way store the values that were in the db and then if the user entered one of those values that jquery would present the user with a message to say this name already exists. I already have validation working for valid emails, lenght etc..

Re: Jquery quering the db

BobJanova21-May-12 6:42

BobJanova

21-May-12 6:42

Preloading the complete list of valid values probably isn't the correct approach; for one thing, it could be quite large, and for another, do you really want users to be able to see all the values in this table?

Doing an AJAX lookup at an appropriate time (send something like checkValue?typed=whattheusertyped to a simple server-side script), i.e. when they tab out of that field or pause typing for half a second, or something like that, seems like a better solution to me.

Re: Jquery quering the db

Vitaly Tomilov21-May-12 8:33

Vitaly Tomilov

21-May-12 8:33

Validation against pre-fetched values is a heavier operation than server-side validation. You should just go for the latter as a much better standard Wink | ;)

It will be one short post instead of sending a whole list of records into the browser.

How to get td background value?

elelont218-May-12 7:43

elelont2

18-May-12 7:43

Hi,
I am trying to remove get some url's from a site using opera userjs feature. The problem is that the site uses the following syntax to set td background:

<td background="http://www.test.com/test.jpg" style="border:2px solid #CCCCCC; background-position:center; background-repeat:no-repeat;">

Edit: i dont't know why cp replaces some things:
1) td removed -> td background
2) background-removed -> background-position

I can access the style attributes just fine, but i cannot get the value of the background image.

I try to use it like this (prints undefined):

JavaScript

alert(img.parentNode.parentNode.background);

This works (but does not give me what i need):

JavaScript

alert(img.parentNode.parentNode.style.background);

How does the last one even work, i cant find the .background attribute from w3schools, i see that background-image attribute is available.

But mainly, how to get the td background=... value?

Thanks

Re: How to get td background value?

ZurdoDev25-May-12 8:51

ZurdoDev

25-May-12 8:51

try background-image. or use jQuery and do $("#id").attr("backround-image")

There are only 10 types of people in the world, those who understand binary and those who don't.

Send XML data from a Windows Gadget

Scolpit16-May-12 6:09

Scolpit

16-May-12 6:09

Hi. I want to send XML data from a windows Gadget to a aspx.net server. What is the best way to do it?
This is what i have so far, thank you Smile | :)

PS: I can't use submit forms. My gadget disapears and a small white square shows up instead.

XML

var xmlString = "<info>" +
                "  <FirstName>" + escape(first) + "</FirstName>" +
                "  <LastName>" + escape(last) + "</LastName>" +
                "  <PhoneNumber>" + escape(phone) + "</PhoneNumber>" +
                "</info>";