[jQuery] Need help with a simple problem?
I am a total newbie when it comes down to Jquery, still in the
learning process.
$(document).ready(function(){
$('#top-bar-login li.current').hover(
function() { $(#top-bar-login ul).css('display',
'block'); },
function() { $(#top-bar-login ul).css('display',
'none'); });
});
I created a simple hover to show menu
But instead of the hover function, I want to activate the function on
click.
$(document).ready(function(){
$('#top-bar-login li.current').click(
function() { $(#top-bar-login ul).css('display',
'block'); },
function() { $(#top-bar-login ul).css('display',
'none'); });
});
Now the code doesn't work.
Where is the problem?
[jQuery] Inserting PHP encoded (htmlspecialchar) into textarea from JSON object
1) I'm essentially trying to take this string (which is stored properly and returns properly from the mysql database): This is a test paragraph to test the DIRNET system. Trying to test's and characters \. this is another test with @ and a #.This is a test paragraph to test the DIRNET system. 2) Which I then run htmlspecialchars($value, ENT_QUOTES) to get an encoded string: This is a test paragraph to test the DIRNET system. Trying to test#039;s and characters \. quot;this is another testquot; with @ and a #.This is a test paragraph to test the DIRNET system. lt; gt; 3) I then send it to my HTML page as part of a JSON object (via AJAX). 4) This is where the problem occurs, because using val() simply keeps the string and keeps the encoded values as literals rather then displaying as their proper decoded values. If I load a page with the string already in the text area it renders fine and doesn't cause problems if I were to say, have / textareatextarea234234/textarea loaded to it. This is because the 'bad' values had already been encoded and kept that way so the site doesn't render them as HTML. I essentially need to achieve this same functionality but on the fly instead of at load. All of my code is working except this last piece. Using .val() leaves it as a litteral, .text() does something similar but does not render onto the page, and .html renders it but in IE doesn't treat them as view only and acts as if it's full html. Also, .text and .html both strip the \ from the \. string as well as don't load into va(). I'm guessing I just need to manually convert those characters just before I push them through .va(), but I'm not sure if that is the best way to do it.
[jQuery] Join element sets?
I have two element sets: $(.contentBox) and $(.referencesImage).
How can I join the elements in this sets? I would like to join the
sets, since I'm adding the exact same hover function on both element
sets.
$(.contentBox).hover(function(event){
..do something
},function(event){
..do something
});
$(.referencesImage).hover(function(event){
..do something
},function(event){
..do something
});
[jQuery] Re: Join element sets?
I would like to do something like:
$(.contentBox).$(.referencesImage).hover(function(event){
..do something
},function(event){
..do something
});
Where the hover-function is both for both element sets.
On 15 Okt., 10:48, Dennis Madsen den...@demaweb.dk wrote:
I have two element sets: $(.contentBox) and $(.referencesImage).
How can I join the elements in this sets? I would like to join the
sets, since I'm adding the exact same hover function on both element
sets.
$(.contentBox).hover(function(event){
..do something
},function(event){
..do something
});
$(.referencesImage).hover(function(event){
..do something
},function(event){
..do something
});
[jQuery] Re: Join element sets?
Thanks!
On 15 Okt., 11:16, jack kitley jackkit...@googlemail.com wrote:
Hi
$(.contentBox,.referencesImage).hover
u tried that?
2009/10/15 Dennis Madsen den...@demaweb.dk
I would like to do something like:
$(.contentBox).$(.referencesImage).hover(function(event){
..do something
},function(event){
..do something
});
Where the hover-function is both for both element sets.
On 15 Okt., 10:48, Dennis Madsen den...@demaweb.dk wrote:
I have two element sets: $(.contentBox) and $(.referencesImage).
How can I join the elements in this sets? I would like to join the
sets, since I'm adding the exact same hover function on both element
sets.
$(.contentBox).hover(function(event){
..do something
},function(event){
..do something
});
$(.referencesImage).hover(function(event){
..do something
},function(event){
..do something
});
[jQuery] Several callbacks?
I've this code:
$(.page).fadeTo(fadeSpeed,0,function() {
alert(test);
});
I've 3 elements with class page. Because of that, I got 3 alerts.
I'm only interested in one alert when all .page is faded out. How can
I?
[jQuery] MooTools and jQuery
I'm developing a site in Joomla CMS which use both MooTools and jQuery. I've created a small, clean page where you can see the problem: http://www.dennismadsen.com/uploads/mootools_jquery/ You can download the source-code from this URL: http://www.dennismadsen.com/uploads/mootools_jquery/mootools_jquery.zip When you run the code, you'll see an error in Firefox Error Console: jqModal.js line 40. Can you help me figuring out how to run this jQuery extension when Mootools is active?
[jQuery] Create new DOM?
I'm trying to create new DOM and append it to a div. When the div is appended, I would like it to be shown after 1sec. var e = div style='display:none;'content/div; $(#container).append(e); setTimeout(e.show(200), 1000); This code does not work. The HTML is appended but the show-function does not work. Hope someone can help me.
[jQuery] Show: Call jQuery i callback
I have this code sample:
$j(.dialogBookingError).show(200).effect(highlight,{},650);
I would like the effect first to run after the show is finish.
Therefore I try:
$j(.dialogBookingError).show( 200, $j(this).effect(highlight,{},
650) );
But it does not work. Hope someone can help me!
[jQuery] jQuery: noConflict
I'm trying to use jQuery inside a CMS which use mootools - therefore I
use noConflict.
I have this sample code:
jQuery.noConflict();
(function($) {
function doSomething() {
//some jQuery Stuff here..
alert(something);
}
})(jQuery)
jQuery(document).ready(function() {
doSomething();
});
I would like to call the function doSomething() when my DOM is ready.
Why can't I? I also like to call the function as a JavaScript method
in my HTML.
[jQuery] AJAX load: scrolling
I've created some jQuery which remove many tr rows from my table and
inserts new via AJAX. This indicate that the page is scrolling because
first the table increase after elements is removed and afterwards it
grows when the new content is inserted. Is there a way to let jQuery
update this table without doing so? Eg. by first refreshing the DOM
after I finish my manipulation.
Here is a bit of my code:
$j(.bookingViewRow).each(function() {
$j(this).remove();
});
$j.get('cajax.php', {}, function(html) {
$j(#bookingView).append(html);
});
Please tell me if you don't understand my problem!
[jQuery] jqModal problem
I'm trying to use the jqModal plugin on my page: http://dev.iceburg.net/jquery/jqModal/ Here is a sample showing my problem: http://dennismadsen.com/uploads/modalTest/ If you see this example in a IE6 or IE7 or IE8 in compatibility mode, you will see, that the the modal box is not 100% opacity. It works great in FF, IE8, Chrome and so on. The problem is because of a position:relative; in the containerTop div - the parent div of the dialog. I hope somebody can figure out what the problem is and how to fix it?
[jQuery] Re: jqModal problem
I've done that now - doesn't help me :( I've uploaded a zip-file with the complete sample if it's easier for you: http://dennismadsen.com/uploads/modalTest/modalTest.zip On Sep 20, 9:56 pm, Mad-Halfling mad-halfl...@yahoo.com wrote: Have you tried adding modal: true into your jqm statement? On Sep 20, 5:52 pm, Dennis Madsen den...@demaweb.dk wrote: I'm trying to use the jqModal plugin on my page:http://dev.iceburg.net/jquery/jqModal/ Here is a sample showing my problem:http://dennismadsen.com/uploads/modalTest/ If you see this example in a IE6 or IE7 or IE8 in compatibility mode, you will see, that the the modal box is not 100% opacity. It works great in FF, IE8, Chrome and so on. The problem is because of a position:relative; in the containerTop div - the parent div of the dialog. I hope somebody can figure out what the problem is and how to fix it?
[jQuery] Content slider?
I'm searching for a content slider like this: http://cssglobe.com/lab/easyslider1.7/01.html It almost fits my need but I would like to use it to slide the content on my page - not simple images. I've have three pages; competences, references and contact. Furthermore I have a frontpage with three link-icons - one for every subpages. Therefore I need to have four slides inside my content slider, but I should should have the ability to handle a click on the icons the first slide (=my frontpage) so that it slide to the respective page. I hope someone know a plugin which fits my needs?
[jQuery] Re: Content slider?
I'm trying to use the plugin, but have problem when using a Accordion from Query UI on one of the pages. You can see this sample page: http://dennismadsen.com/uploads/easyslider1.7/ When sliding eg. from page 1 to 4 the Accordion is flacking when sliding. I only see that problem in my Firefox. No problem in IE or Chrome. I've recorded a video of it: http://dennismadsen.com/uploads/easyslider1.7/flacking.avi How can I solve that problem? On Aug 31, 3:55 pm, Richard D. Worth rdwo...@gmail.com wrote: That content slider is not limited to images. The previous version has a demo that shows this:http://cssglobe.com/lab/easyslider1.5/05.html http://cssglobe.com/lab/easyslider1.5/05.htmlbut the newer version supports this as well. I recommend you give it a try. - Richard On Mon, Aug 31, 2009 at 9:43 AM, Dennis Madsen den...@demaweb.dk wrote: I'm searching for a content slider like this: http://cssglobe.com/lab/easyslider1.7/01.html It almost fits my need but I would like to use it to slide the content on my page - not simple images. I've have three pages; competences, references and contact. Furthermore I have a frontpage with three link-icons - one for every subpages. Therefore I need to have four slides inside my content slider, but I should should have the ability to handle a click on the icons the first slide (=my frontpage) so that it slide to the respective page. I hope someone know a plugin which fits my needs?
[jQuery] Re: Content slider?
AnythingSlider: Is also flicking when using Accordion fra jQuery UI. Malsup Cycle: It seems that this cycle only use img? On Aug 31, 5:18 pm, amuhlou amysch...@gmail.com wrote: A couple other slider options you could try: http://css-tricks.com/anythingslider-jquery-plugin/ http://malsup.com/jquery/cycle/ On Aug 31, 2:45 pm, Dennis Madsen den...@demaweb.dk wrote: I'm trying to use the plugin, but have problem when using a Accordion from Query UI on one of the pages. You can see this sample page:http://dennismadsen.com/uploads/easyslider1.7/ When sliding eg. from page 1 to 4 the Accordion is flacking when sliding. I only see that problem in my Firefox. No problem in IE or Chrome. I've recorded a video of it:http://dennismadsen.com/uploads/easyslider1.7/flacking.avi How can I solve that problem? On Aug 31, 3:55 pm, Richard D. Worth rdwo...@gmail.com wrote: That content slider is not limited to images. The previous version has a demo that shows this:http://cssglobe.com/lab/easyslider1.5/05.html http://cssglobe.com/lab/easyslider1.5/05.htmlbut the newer version supports this as well. I recommend you give it a try. - Richard On Mon, Aug 31, 2009 at 9:43 AM, Dennis Madsen den...@demaweb.dk wrote: I'm searching for a content slider like this: http://cssglobe.com/lab/easyslider1.7/01.html It almost fits my need but I would like to use it to slide the content on my page - not simple images. I've have three pages; competences, references and contact. Furthermore I have a frontpage with three link-icons - one for every subpages. Therefore I need to have four slides inside my content slider, but I should should have the ability to handle a click on the icons the first slide (=my frontpage) so that it slide to the respective page. I hope someone know a plugin which fits my needs?
[jQuery] Re: Content slider?
Ok, it also flicking on my Firefox :( On Aug 31, 6:29 pm, amuhlou amysch...@gmail.com wrote: Cycle can be used to cycle through anything:http://www.malsup.com/jquery/cycle/int2.html Check out the very last example on the page. On Aug 31, 4:26 pm, Dennis Madsen den...@demaweb.dk wrote: AnythingSlider: Is also flicking when using Accordion fra jQuery UI. Malsup Cycle: It seems that this cycle only use img? On Aug 31, 5:18 pm, amuhlou amysch...@gmail.com wrote: A couple other slider options you could try: http://css-tricks.com/anythingslider-jquery-plugin/ http://malsup.com/jquery/cycle/ On Aug 31, 2:45 pm, Dennis Madsen den...@demaweb.dk wrote: I'm trying to use the plugin, but have problem when using a Accordion from Query UI on one of the pages. You can see this sample page:http://dennismadsen.com/uploads/easyslider1.7/ When sliding eg. from page 1 to 4 the Accordion is flacking when sliding. I only see that problem in my Firefox. No problem in IE or Chrome. I've recorded a video of it:http://dennismadsen.com/uploads/easyslider1.7/flacking.avi How can I solve that problem? On Aug 31, 3:55 pm, Richard D. Worth rdwo...@gmail.com wrote: That content slider is not limited to images. The previous version has a demo that shows this:http://cssglobe.com/lab/easyslider1.5/05.html http://cssglobe.com/lab/easyslider1.5/05.htmlbut the newer version supports this as well. I recommend you give it a try. - Richard On Mon, Aug 31, 2009 at 9:43 AM, Dennis Madsen den...@demaweb.dk wrote: I'm searching for a content slider like this: http://cssglobe.com/lab/easyslider1.7/01.html It almost fits my need but I would like to use it to slide the content on my page - not simple images. I've have three pages; competences, references and contact. Furthermore I have a frontpage with three link-icons - one for every subpages. Therefore I need to have four slides inside my content slider, but I should should have the ability to handle a click on the icons the first slide (=my frontpage) so that it slide to the respective page. I hope someone know a plugin which fits my needs?
[jQuery] Effect on mouseover?
I've created a sample site with a bounce effect: http://dennismadsen.com/uploads/jquery/ I would like the effect to start when the mouse enter the outer div. But as you see this effect seems to repeat in Firefox and Internet Explorer. But it works in Chrome. How can I fix that? The below is a identic page which create an alert every time the hover event is invoked: http://dennismadsen.com/uploads/jquery/alert.html
[jQuery] How to find active hyperlinks?
I've this CSS to style my links in my menu:
.menu a:link, .menu a:active, .menu a:visited{
color: #ff;
text-decoration: none;
}
I would like to find the a-tag (a) which is active. I've tried
something like: $('.menu a:active').
How can I find that element?
[jQuery] Re: How to find active hyperlinks?
No, not really! Say I'm on the page index.html, where I have this
HTML:
div id=menu
a href=index.htmlFrontpage/a
a href=contact.htmlContact/a
/div
Since I'm on the index.html-page, the first a-tag is active in CSS.
I would like jQuery to give my the active a-tag in my menu-div.
Hope you understand my problem now.
On Aug 21, 12:33 am, Charlie Griefer charlie.grie...@gmail.com
wrote:
an active link is one that has received a click.
so you can do:
$('a').click(function() {
$(this).doSomethingHere // 'this' is a reference to the element that
triggered the click
});
does that help?
On Thu, Aug 20, 2009 at 3:30 PM, Dennis Madsen den...@demaweb.dk wrote:
I've this CSS to style my links in my menu:
.menu a:link, .menu a:active, .menu a:visited{
color: #ff;
text-decoration: none;
}
I would like to find the a-tag (a) which is active. I've tried
something like: $('.menu a:active').
How can I find that element?
--
I have failed as much as I have succeeded. But I love my life. I love my
wife. And I wish you my kind of success.
[jQuery] Re: How to find active hyperlinks?
You're right! Sorry, I found the problem here :)
Thanks.
On Aug 21, 12:47 am, Charlie Griefer charlie.grie...@gmail.com
wrote:
I'm fairly sure that, while on index.html, a
href=index.htmlFrontpage/a isn't active. At least, not as far as the
:active pseudo-class goes.
a:active refers to the a element that is actively receiving a click event.
If you were to do:
div id=menu
a href=index.cfm class=activeFrontpage/a
a href=contact.htmlContact/a
/div
... then you could do $('#menu a.active')
On Thu, Aug 20, 2009 at 3:41 PM, Dennis Madsen den...@demaweb.dk wrote:
No, not really! Say I'm on the page index.html, where I have this
HTML:
div id=menu
a href=index.htmlFrontpage/a
a href=contact.htmlContact/a
/div
Since I'm on the index.html-page, the first a-tag is active in CSS.
I would like jQuery to give my the active a-tag in my menu-div.
Hope you understand my problem now.
On Aug 21, 12:33 am, Charlie Griefer charlie.grie...@gmail.com
wrote:
an active link is one that has received a click.
so you can do:
$('a').click(function() {
$(this).doSomethingHere // 'this' is a reference to the element
that
triggered the click
});
does that help?
On Thu, Aug 20, 2009 at 3:30 PM, Dennis Madsen den...@demaweb.dk
wrote:
I've this CSS to style my links in my menu:
.menu a:link, .menu a:active, .menu a:visited{
color: #ff;
text-decoration: none;
}
I would like to find the a-tag (a) which is active. I've tried
something like: $('.menu a:active').
How can I find that element?
--
I have failed as much as I have succeeded. But I love my life. I love my
wife. And I wish you my kind of success.
--
I have failed as much as I have succeeded. But I love my life. I love my
wife. And I wish you my kind of success.
[jQuery] jquery dialog - close if clicking outside dialog area?
Is it possible to have the jquery ui dialog close when clicking outside the area of the dialog? Like facebox? Thanks.
[jQuery] semi-synchronous ajax request?
Hi, I'm trying to implement a client side cache for an ajax based application but I'm not sure how to deal with the asynchronous nature of ajax calls in jquery. What I'm basically trying is to create a function getList() that fetches a snippet of text from the server and stores it in a variable so that future invocations of getList() no longer have to contact the server but can immediately return the content of the cache-variable. The problem is that two subsequent invocations of getList() result in both calls contacting the server because the ajax call of the first invocation hasn't finished yet when the second call to getList() happens. At first i thought about using the async option but according to the docs this blocks the entire browser. What I'm really looking for is a way to only make the particular thread synchronous so that I can store the result before returning from the first getList() call. What is the proper way to handle such a situation i jquery? Regards, Dennis
[jQuery] OK, why does *this* function kill Interface Drag/Drop?
New to javascript. New to jQuery. I've hit the wall.
Interface Drag/Drop works, my search photos by tags works. Add/delete
images to/from database works. All work as separate pieces. But when I
try to add my search ajax function to same page where drag/drop stuff
resides, the latter stop working.
My search function puts found images into the same div id
(#theSearchResultImages) that Drag/Drop uses as its draggable area.
Is there some sort of conflict imposed by doing so?
My function + html:
script type=text/javascript
$(document).ready(
function()
{
$('#searchAlbumPhotos :submit').bind(click, function(){
$.ajax({url: /jsrpc/search_album_photos_by_tags,
type: POST,
data: tagname= + $([EMAIL PROTECTED]).val(),
success: function(response){$
(#theSearchResultImages).html(response);},
dataType: html});
return false;
});
});
/script
form action= id=searchAlbumPhotos name=searchAlbumPhotos
method=POST /
input type=text name=tagname value= /nbsp;
input type=submit name=submit id=submit value=+ /
/form
I'll really appreciate any help.
/dennis
[jQuery] Re: OK, why does *this* function kill Interface Drag/Drop?
I'm really stuck. I've not gotten any replies. Am I asking the
question
in the wrong way?
/dennis
On Jun 5, 8:42 am, dennis [EMAIL PROTECTED] wrote:
New to javascript. New to jQuery. I've hit the wall.
InterfaceDrag/Dropworks, my search photos by tags works. Add/delete
images to/from database works. All work as separate pieces. But when I
try to add my search ajax function to same page wheredrag/dropstuff
resides, the latter stop working.
My search function puts found images into the same div id
(#theSearchResultImages) thatDrag/Dropuses as its draggable area.
Is there some sort of conflict imposed by doing so?
My function + html:
script type=text/javascript
$(document).ready(
function()
{
$('#searchAlbumPhotos :submit').bind(click, function(){
$.ajax({url: /jsrpc/search_album_photos_by_tags,
type: POST,
data: tagname= + $([EMAIL PROTECTED]).val(),
success: function(response){$
(#theSearchResultImages).html(response);},
dataType: html});
return false;
});
});
/script
form action= id=searchAlbumPhotos name=searchAlbumPhotos
method=POST /
input type=text name=tagname value= /nbsp;
input type=submit name=submit id=submit value=+ /
/form
I'll really appreciate any help.
/dennis
[jQuery] Re: DC Drupal User's Group
Michael Haggerty changed my original post title, and hijacked for his drupal announcement. Why would you do that? It seems pretty hostile to me. I am trying to learn something here. /dennis On Jun 5, 10:55 am, Michael Haggerty [EMAIL PROTECTED] wrote: Tonight, there will be a meeting of the DC Drupal Users Group at the Science Club at 1136 19th Street, NW. Everyone on this list in invited to come join us for drinks and talk about code with some interesting people. See the announcement athttp://groups.drupal.org/node/4324. Drupal, in case you don't know, is a popular PHP / MySQL based content management system that offers a truly extensible application framework through its modular design. Drupal uses jquery as its standard AJAX library and has thousands of devotees worldwide. If you are looking to learn more about FOSS content management systems, application development, social applications, or just want to meet some cool Drupal people, come visit us tonight at the Science Club. Thank you, Michael Haggerty Trellon, LLChttp://www.trellon.com
[jQuery] Why does *this* function kill Interface Drag/Drop?
My ajax search function populates a div with thumbnails, but then the Drag/Drop code no longer works. Me scratches head. Dan Switzer was kind enough to provide the information that I need to reinitialize the Drag/Drop Interface code. Can someone help me understand how to do that? I did a quick look thru Interface docs, and a quick google on javascript initialize. Probably some answers there, tho I'm so new to javascript and jQuery that it's a blur. /dennis
[jQuery] Re: DC Drupal User's Group
Thanks for that clarification, John, I only have the browser view. My apologies to Michael for the accusation. /dennis On Jun 5, 12:40 pm, John Resig [EMAIL PROTECTED] wrote: It appears to be an honest mistake. I only see what you mention on Google Groups, in my email client they are completely separate threads, I wouldn't worry about it. --John On 6/5/07, dennis [EMAIL PROTECTED] wrote: Michael Haggerty changed my original post title, and hijacked for his drupal announcement. Why would you do that? It seems pretty hostile to me. I am trying to learn something here. /dennis On Jun 5, 10:55 am, Michael Haggerty [EMAIL PROTECTED] wrote: Tonight, there will be a meeting of the DC Drupal Users Group at the Science Club at 1136 19th Street, NW. Everyone on this list in invited to come join us for drinks and talk about code with some interesting people. See the announcement athttp://groups.drupal.org/node/4324. Drupal, in case you don't know, is a popular PHP / MySQL based content management system that offers a truly extensible application framework through its modular design. Drupal uses jquery as its standard AJAX library and has thousands of devotees worldwide. If you are looking to learn more about FOSS content management systems, application development, social applications, or just want to meet some cool Drupal people, come visit us tonight at the Science Club. Thank you, Michael Haggerty Trellon, LLChttp://www.trellon.com
[jQuery] Re: Why does *this* function kill Interface Drag/Drop?
Chris, Have a look at 'OK, why does *this* function kill Interface Drag/ Drop?' on this newsgroup. That's where the thread began. The thread subject was accidently changed to 'DC Drupal User's Group' when someone else posted. There is evidently a bug in the underlying newsgroup engine. /dennis On Jun 5, 12:48 pm, Chris W. Parker [EMAIL PROTECTED] wrote: On Tuesday, June 05, 2007 9:38 AM dennis said: Dan Switzer was kind enough to provide the information that I need to reinitialize the Drag/Drop Interface code. Can someone help me understand how to do that? How can we while not knowing what Dan provided? Did he send it off list? If so, include it in your email to the list. Did he post it in a previous message? If so, leave it in the message, don't trim out the pertinent parts of previous emails. Regards, Chris.
[jQuery] Re: Why does my ajax function kill drag/drop?
Hi Jean,
I got the following information from Dan Switzer, it might help you. I
plan
to give his suggestions a try later on after work. Every bit of
knowledge
helps.
Since you're replacing the DOM, the first thing you should do before
you
upgrade the DOM is probably remove the Drag/Drop zones using the
Destroy
methods: DroppableDestroy() and DraggableDestroy(). This step may not
be
necessary, but I'd imagine you'll run into memory leaks if you don't
do it.
To reinitialize, just re-run the original Draggable() and
Droppable()
code. You should move this code outside of the $(document).ready()
function
into a custom function. Then you can run that function inside the
ready()
function and also call it after you've replaced the contents of the
DOM.
When you wipe the DOM, all the code that was originally initialized
by
Draggable/Droppable is lost.
On Jun 5, 4:16 pm, Jean Nascimento [EMAIL PROTECTED] wrote:
i think all ajax calls kill drag, i have troubles with that and a
friend mine too
On 6/4/07, dennis [EMAIL PROTECTED] wrote:
I have Interface 1.2 Drag/Drop working. I can drag images (hardcoded)
from div id=theSearchResultImages to my dropable area just fine.
But when I try to add my ajax 'Search Photos By Tags' form which
populates images into div id=theSearchResultImages, I can no longer
drag and drop the images. Here's my form and ajax call:
form action=/jsrpc/search_photos_by_tags name=searchAlbumPhotos
id=searchAlbumPhotos
onsubmit='$.ajax({url: /jsrpc/search_album_photos_by_tags,
data: $(this.elements).serialize(),
success: function(response){$
(#theSearchResultImages).html(response);},
dataType: html});
return false;' method=POST /
input type=text name=tagname value= /nbsp;
input type=submit name=submit id=submit value=+ /
/form
Help will be greatly appreciated.
/dennis
--
[]´s Jeanwww.suissa.info
Ethereal Agencywww.etherealagency.com
[jQuery] Why does my ajax function kill drag/drop?
I have Interface 1.2 Drag/Drop working. I can drag images (hardcoded)
from div id=theSearchResultImages to my dropable area just fine.
But when I try to add my ajax 'Search Photos By Tags' form which
populates images into div id=theSearchResultImages, I can no longer
drag and drop the images. Here's my form and ajax call:
form action=/jsrpc/search_photos_by_tags name=searchAlbumPhotos
id=searchAlbumPhotos
onsubmit='$.ajax({url: /jsrpc/search_album_photos_by_tags,
data: $(this.elements).serialize(),
success: function(response){$
(#theSearchResultImages).html(response);},
dataType: html});
return false;' method=POST /
input type=text name=tagname value= /nbsp;
input type=submit name=submit id=submit value=+ /
/form
Help will be greatly appreciated.
/dennis
[jQuery] Drag, Drop and Ajax For Photo Album Maker
MY GOAL:
I'm modifying the Interface 1.2 Shopping Cart to become
a photo picker to create photo albums. I have the basic
drag/drop working. I need to add these using ajax:
-- 'Search photos by tag'
-- 'send photo id to server on drop'
-- 'remove photo id from server on remove'
THE PROBLEM:
I have the separate pieces working, but I'm not sure how
to weave them together (still very new to jQuery). For
example, when I add my 'Search photos by tag' ajax function
to the drag and drop page search works fine, but drag/drop
stops working.
THE CODE:
This is kinda long, hope that's ok. I'll just show
the search function, ask later about the other functions
if I'm still stuck.
My ajax search form and code are in
div id=searchAlbumPhotos.
Thumbnails matching the search tag show up in
div id=theSearchResultImages.
script type=text/javascript
$(document).ready(
function()
{
$('#theSearchResultImages a')
.bind(
'click',
function() {
$(this.parentNode)
.TransferTo(
{
to:addImageToCart(this.parentNode),
className:'transferImage',
duration: 400
}
);
return false;
}
);
$('div.image').Draggable({revert: true, fx: 300, ghosting: true,
opacity: 0.4});
$('#cart').Droppable(
{
accept : 'image',
activeclass: 'activeCart',
hoverclass: 'hoverCart',
tolerance: 'intersect',
onActivate: function(dragged)
{
if (!this.shakedFirstTime) {
$(this).Shake(3);
this.shakedFirstTime = true;
}
},
onDrop: addImageToCart
}
);
}
);
var addImageToCart = function(dragged)
{
var cartItem;
var imageName = $('h2', dragged).html();
var photoID = parseFloat($('span', dragged).html());
var imageId = $(dragged).attr('id');
var imageSrc = $('img',dragged).attr('src');
var isInCart = $('#' + imageId + '_cart');
if (isInCart.size() == 1) {
var quantity = parseInt(isInCart.find('span.quantity').html()) +
0;
isInCart.find('span.quantity').html(quantity
+'').end().Pulsate(300, 2);
cartItem = isInCart.get(0);
} else {
$('#cartImages')
.append('div class=imageCart id=' + imageId + '_cart' +
imageName + 'br /' + 'img src=' + imageSrc + '' + 'br /a
href=#remove/abr /qty: span class=quantity1/spanbr /
Photo ID: span class=price' + photoID + '/span/div')
.find('div.imageCart:last')
.fadeIn(400)
.find('a')
.bind(
'click',
function(){
$(this.parentNode).DropOutDown(
400,
function() {
$(this).remove();
calculateCartTotal();
}
);
return false;
}
);
cartItem = $('div.imageCart:last').get(0);
}
calculateCartTotal();
return cartItem;
};
var calculateCartTotal = function()
{
var total = 0;
$('#cartImages .imageCart').each(
function()
{
var quantity = parseInt($('span.quantity', this).html());
total += quantity;
}
);
$('#cartTotal').html(total);
$('#cart p').Highlight(500, '#ff0', function(){$
(this).css('backgroundColor', 'transparent');});
};
/script
div id=cart class=cart
h3Image cart :: Total Images: span id=cartTotal0/span/h3
div id=cartImages/div
/div
div id=theSearchResultImages
// thumbnails show up here, with id=someinteger and class=image
/div
div id=searchAlbumPhotos
pstrongSearch Photos by Tags/strong - space separated/p
pform action=/jsrpc/search_photos_by_tags
onsubmit='$.ajax({url: /jsrpc/search_photos_by_tags,
data: $(this.elements).serialize(),
success: function(response){$
(#theSearchResultImages).html(response);},
dataType: html});
return false;' method=POST
br /
input type=text name=tagname value= /nbsp;
input type=submit name=submit value=+ /
/form
/p
pnbsp;/p
/div
div style=overflow: hidden; position: absolute; display: none;
cursor: move; list-style-type: none; list-style-image: none; list-
style-position: outside; id=dragHelper/div
[jQuery] Re: Drag, Drop and Ajax For Photo Album Maker
Help?
On Jun 2, 10:43 am, dennis [EMAIL PROTECTED] wrote:
MY GOAL:
I'm modifying the Interface 1.2 Shopping Cart to become
a photo picker to create photo albums. I have the basic
drag/drop working. I need to add these using ajax:
-- 'Search photos by tag'
-- 'send photo id to server on drop'
-- 'remove photo id from server on remove'
THE PROBLEM:
I have the separate pieces working, but I'm not sure how
to weave them together (still very new to jQuery). For
example, when I add my 'Search photos by tag' ajax function
to the drag and drop page search works fine, but drag/drop
stops working.
THE CODE:
This is kinda long, hope that's ok. I'll just show
the search function, ask later about the other functions
if I'm still stuck.
My ajax search form and code are in
div id=searchAlbumPhotos.
Thumbnails matching the search tag show up in
div id=theSearchResultImages.
script type=text/javascript
$(document).ready(
function()
{
$('#theSearchResultImages a')
.bind(
'click',
function() {
$(this.parentNode)
.TransferTo(
{
to:addImageToCart(this.parentNode),
className:'transferImage',
duration: 400
}
);
return false;
}
);
$('div.image').Draggable({revert: true, fx: 300, ghosting: true,
opacity: 0.4});
$('#cart').Droppable(
{
accept : 'image',
activeclass: 'activeCart',
hoverclass: 'hoverCart',
tolerance: 'intersect',
onActivate: function(dragged)
{
if (!this.shakedFirstTime) {
$(this).Shake(3);
this.shakedFirstTime = true;
}
},
onDrop: addImageToCart
}
);
}
);
var addImageToCart = function(dragged)
{
var cartItem;
var imageName = $('h2', dragged).html();
var photoID = parseFloat($('span', dragged).html());
var imageId = $(dragged).attr('id');
var imageSrc = $('img',dragged).attr('src');
var isInCart = $('#' + imageId + '_cart');
if (isInCart.size() == 1) {
var quantity = parseInt(isInCart.find('span.quantity').html()) +
0;
isInCart.find('span.quantity').html(quantity
+'').end().Pulsate(300, 2);
cartItem = isInCart.get(0);
} else {
$('#cartImages')
.append('div class=imageCart id=' + imageId + '_cart' +
imageName + 'br /' + 'img src=' + imageSrc + '' + 'br /a
href=#remove/abr /qty: span class=quantity1/spanbr /Photo ID:
span class=price' + photoID + '/span/div')
.find('div.imageCart:last')
.fadeIn(400)
.find('a')
.bind(
'click',
function(){
$(this.parentNode).DropOutDown(
400,
function() {
$(this).remove();
calculateCartTotal();
}
);
return false;
}
);
cartItem = $('div.imageCart:last').get(0);
}
calculateCartTotal();
return cartItem;};
var calculateCartTotal = function()
{
var total = 0;
$('#cartImages .imageCart').each(
function()
{
var quantity = parseInt($('span.quantity', this).html());
total += quantity;
}
);
$('#cartTotal').html(total);
$('#cart p').Highlight(500, '#ff0', function(){$
(this).css('backgroundColor', 'transparent');});};
/script
div id=cart class=cart
h3Image cart :: Total Images: span id=cartTotal0/span/h3
div id=cartImages/div
/div
div id=theSearchResultImages
// thumbnails show up here, with id=someinteger and class=image
/div
div id=searchAlbumPhotos
pstrongSearch Photos by Tags/strong - space separated/p
pform action=/jsrpc/search_photos_by_tags
onsubmit='$.ajax({url: /jsrpc/search_photos_by_tags,
data: $(this.elements).serialize(),
success: function(response){$
(#theSearchResultImages).html(response);},
dataType: html});
return false;' method=POST
br /
input type=text name=tagname value= /nbsp;
input type=submit name=submit value=+ /
/form
/p
pnbsp;/p
/div
div style=overflow: hidden; position: absolute; display: none;
cursor: move; list-style-type: none; list-style-image: none; list-
style-position: outside; id=dragHelper/div
[jQuery] Re: jCarousel 0.2.0 Beta
Jan, thank you so much for your generous work! I started learning jQuery recently, am building a gallery app. I have been gearing up to porting this to jQuery: http://www.dhtmlgoodies.com/scripts/image-slideshow-vertical/image-slideshow-vertical.html It looks like your jCarousel is quite configurable, and will make my task much easier. /dennis On May 8, 9:42 am, Jan Sorgalla [EMAIL PROTECTED] wrote: Hi, i've released the a new version of jCarousel yesterday. The source code is completely rewritten and i've tried to make it more flexible and to cover most of the features requested on the mailinglist. Online:http://sorgalla.com/projects/jcarousel-0.2.0-beta/ Related blog post:http://sorgalla.com/2007/05/07/jcarousel-020-beta/ Let me know if you have suggestions and/or if you find bugs. Jan
[jQuery] Multiple draggable (interface) drag/drop question
I have gotten drag/ drop working with one draggable.
I need to know the right way to do multiple draggables.
I have a gallery app that will display rows of thumbnail images,
and I need to be able to drag some subset of those into
the dropbox.
I have code working, like that below. I *CAN* make multiple
copies of the Draggable and the Droppable calls to handle
the multiple draggable thumbnails (I've tried, that works),
but that seems klunkey to me. If there are, say, 20 thumbs
on a page, that's 20 Draggable calls, 20 Droppable calls
Is there a trimmer, better approach?
/dennis
jQuery 1.1, interface 1.2
=
JAVASCRIPT:
$(document).ready(
function() {
$('#drag1').Draggable(
{
settings...
}
);
$('#drag2').Draggable(
{
settings...
}
);
$('#dropbox').Droppable(
{
settings...
ondrop: function (drag1) {
var PhotoSrc = $('img',drag1).attr('src'); //
alert( PhotoSrc );
},
}
);
$('#dropbox').Droppable(
{
settings...
ondrop: function (drag2) {
var PhotoSrc = $('img',drag2).attr('src'); //
alert( PhotoSrc );
},
}
);
}
);
=
HTML:
div id=dropbox class=dropzoneDrop the photo in here/div
div id=theImages
div id=drag1 class=dropaccept
img src=some/path/image1.jpg/a
/div
div id=drag2 class=dropaccept
img src=some/path/image2.jpg/a
/div
[jQuery] Newbie -- How to retrieve img src value in function?
I am using jquery 1.1.2, interface 1.2, working with drag/drop.
When user drops an image onto the drop area, I want to retrieve the
src value, so that eventually I can send that value to the server
and do some Ajax stuff. But so far, in my code below,
I have only gotten this to work:
var thePhoto = drag.innerHTML;
That returns img src=static/galleries/JQm49CWi09/_t/
lilly01_fuy.jpg
How can I just get the src string?
// The code
script type=text/javascript
$(document).ready(
function() {
$('#drag').Draggable( );
$('#dropbox').Droppable(
{
accept : 'dropaccept',
activeclass: 'dropactive',
hoverclass: 'drophover',
ondrop: function (drag) {
var thePhoto = drag.what should go here?;
//var thePhoto = drag.innerHTML; // almost there
alert( thePhoto );
},
tolerance: 'fit'
}
);
}
);
/script
[jQuery] Re: Newbie -- How to retrieve img src value in function?
On Apr 28, 4:00 pm, Sean Catchpole [EMAIL PROTECTED] wrote: Try drag.src ~Sean Hi Sean, drag.src returns undefined. Here is a partial list of various things I've tried. var thePhoto = drag.innerHTML.(img).attr(src); // no var thePhoto = drag.innerHTML.attr(src); // no var thePhoto = drag.(img).attr(src); // no var thePhoto = drag.attr(src); // no var thePhoto = drag.html(); // no var thePhoto = drag.src; // no (Obviously I'm way new to javascript; I'm stumbling around in the dark, blindfolded.) If this makes a difference, the image is defined within this set of divs: div id=theImages div id=drag class=dropaccept img src=static/galleries/JQm49CWi09/_t/lilly01_fuy.jpg/a /div /div
[jQuery] Re: Newbie -- How to retrieve img src value in function?
On Apr 28, 5:25 pm, Brandon Aaron [EMAIL PROTECTED] wrote:
Try this: $('img', drag).attr('src');
Brandon, that idiom works. I'll stop banging my head now.
Thanks BIG!
/dennis
