[jQuery] Re: selected accordion background
Thank you very much!! Works perfectly.
Pasquale.
On Jan 18, 12:31 pm, Nathan Klatt n8kl...@gmail.com wrote:
Pasquale,
Looks like it no longer sets the class to selected for you; just gotta
do it yourself.
On Mon, Jan 18, 2010 at 12:31 PM, spiderling webmas...@spiderling.ca wrote:
bump :-)
On Jan 15, 7:13 pm, spiderling webmas...@spiderling.ca wrote:
I'm using an accordion which functions perfectly. I was using jQuery
1.2.6 with UI 1.6 and was able to have a different background image
displayed when the section was expanded using .selected. I upgraded to
jQuery 1.3.2 with UI 1.7.2, and the selected / expanded background
image no longer works. Everything else works fine. Any suggestions on
how I can get it working again with 1.3.2 and 1.7.2?
Thanks
Pasquale
// jQuery
script type=text/javascript
$(document).ready(function(){
$(#accordion1).accordion({
active: false,
header: '.heading',
collapsible: true,
autoHeight: false
})
.bind('accordionchange', function(event, ui) {
$(ui.oldHeader).removeClass(selected);
$(ui.newHeader). addClass(selected);
});
});
/script
Nathan
[jQuery] Re: selected accordion background
bump :-)
On Jan 15, 7:13 pm, spiderling webmas...@spiderling.ca wrote:
I'm using an accordion which functions perfectly. I was using jQuery
1.2.6 with UI 1.6 and was able to have a different background image
displayed when the section was expanded using .selected. I upgraded to
jQuery 1.3.2 with UI 1.7.2, and the selected / expanded background
image no longer works. Everything else works fine. Any suggestions on
how I can get it working again with 1.3.2 and 1.7.2?
Thanks
Pasquale
// jQuery
script type=text/javascript
$(document).ready(function(){
$(#accordion1).accordion({
active: false,
header: '.heading',
collapsible: true,
autoHeight: false
});});
/script
/** CSS **/
ul#accordion1 a.heading
{
background: url(/pics/bg1.jpg) repeat-x #b9a77d;
font-family: Georgia, Times New Roman, Times, serif;
color: #fff;
display: block;
outline: none;
font-size: 13pt;
font-weight: normal;
line-height: 13pt;
padding: 10px 5px;
text-decoration: none;}
ul#accordion1 a.heading:hover
{
background: url(/pics/bg2.jpg) repeat-x #dfd2b3;
color: #00447f;}
ul#accordion1 a.selected, ul#accordion1 a.selected:hover
{
background: url(/pics/bg3.jpg) repeat-x #00447f;
color: #fff;
}
!-- HTML --
ul id=accordion1
li
a class=heading href=#Heading
1/a
ul
li a
href=link1.htmlLink 1/a/li
li a
href=link2.htmlLink 2/a/li
li a
href=link3.htmlLink 3/a/li
/ul
/li
li
a class=heading href=#Heading
2/a
ul
li a
href=link1.htmlLink 1/a/li
li a
href=link2.htmlLink 2/a/li
li a
href=link3.htmlLink 3/a/li
/ul
/li
/ul
[jQuery] selected accordion background
I'm using an accordion which functions perfectly. I was using jQuery
1.2.6 with UI 1.6 and was able to have a different background image
displayed when the section was expanded using .selected. I upgraded to
jQuery 1.3.2 with UI 1.7.2, and the selected / expanded background
image no longer works. Everything else works fine. Any suggestions on
how I can get it working again with 1.3.2 and 1.7.2?
Thanks
Pasquale
// jQuery
script type=text/javascript
$(document).ready(function(){
$(#accordion1).accordion({
active: false,
header: '.heading',
collapsible: true,
autoHeight: false
});
});
/script
/** CSS **/
ul#accordion1 a.heading
{
background: url(/pics/bg1.jpg) repeat-x #b9a77d;
font-family: Georgia, Times New Roman, Times, serif;
color: #fff;
display: block;
outline: none;
font-size: 13pt;
font-weight: normal;
line-height: 13pt;
padding: 10px 5px;
text-decoration: none;
}
ul#accordion1 a.heading:hover
{
background: url(/pics/bg2.jpg) repeat-x #dfd2b3;
color: #00447f;
}
ul#accordion1 a.selected, ul#accordion1 a.selected:hover
{
background: url(/pics/bg3.jpg) repeat-x #00447f;
color: #fff;
}
!-- HTML --
ul id=accordion1
li
a class=heading href=#Heading
1/a
ul
li a href=link1.htmlLink
1/a/li
li a href=link2.htmlLink
2/a/li
li a href=link3.htmlLink
3/a/li
/ul
/li
li
a class=heading href=#Heading
2/a
ul
li a href=link1.htmlLink
1/a/li
li a href=link2.htmlLink
2/a/li
li a href=link3.htmlLink
3/a/li
/ul
/li
/ul
[jQuery] form plugin and prettypopin/lightbox
I am using prettyPopin lightbox for a file upload form, and I am also
using jQuery Form Plugin to upload the image file and update it
accordingly. Unfortunately, the file is not being sent. The $_FILES
array is empty. I've included the jQuery and HTML being used. If
someone can please look and let me know if I'm missing something,
because from all the examples I've seen it doesn't seem to require too
much to upload a file.
Thanks.
updatephoto.php jQuery:
$(document).ready(function() {
var options = {
target: '#divupdate',
beforeSubmit : function() {
$('#divupdate').html('img src=pics/loader.gif border=0
alt=Please wait... /');
}
};
$('#phupdt').ajaxForm(options);
// $('#phupdt').submit(function() {
// $(this).ajaxSubmit(options);
// return false;
// });
});
updatephoto.php HTML:
div id=divupdate
br /br /
form id=phupdt action=updtphresponse.php method=post
enctype=multipart/form-data
input type=hidden name=MAX_FILE_SIZE value=525 /
table
tr
tdinput type=file name=headshot size=30 //td
/tr
tr
tdinput type=submit name=request value=Update photo //td
/tr
/table
/form
/div
updtphresponse.php HTML:
print_r($_FILES);
$html = '
table
tr
tdbSuccessfully updated./b/td
/tr
/table
';
echo $html;
[jQuery] Re: form plugin and prettypopin/lightbox
I am using prettypopin for the link on the index page to open
updatephoto.php. The index page also uses some other jQuery features.
I've included the jQuery in case you see something that may be wrong
or conflicting, and the HTML link tag.
Thanks
Pasquale
jQuery:
SCRIPT type=text/javascript src=/includes/jquery.js/SCRIPT
SCRIPT type=text/javascript src=/includes/uicore.js/SCRIPT
SCRIPT type=text/javascript src=/includes/uidrag-drop-sort.js/
SCRIPT
SCRIPT type=text/javascript src=/includes/uiaccordion.js/
SCRIPT
SCRIPT type=text/javascript src=/includes/jquery_pretty_popin.js
charset=utf-8/SCRIPT
SCRIPT type=text/javascript src=/includes/jquery_multifile.js/
SCRIPT
SCRIPT type=text/javascript
$(document).ready(function() {
$('#photolist').sortable({
items: ' div',
opacity: 0.7,
revert: true,
handle: 'img.handle',
update: function () {
var order = $('#photolist').sortable('serialize');
$.get('sortphotos.php?'+order);
}
});
$('#trash').droppable({
accept: '#photolist div',
tolerance: 'pointer',
drop: function(event, ui) {
var pidarray = ui.draggable.attr('id').split('_');
$(#sortorder).load('deletephotos.php?pid='+pidarray[1]);
$(ui.draggable).hide('slow', function() {
$(this).remove();
});
}
});
$('#accordion').accordion({
header: 'div.accordion_title',
alwaysOpen: false,
clearStyle: true,
autoHeight: false
});
$(a[rel^='prettyPopin']).prettyPopin({
modal : true,
callback: function(){ window.location.reload(); }
});
$('#filemulti').MultiFile({
STRING: {
remove: 'img src=/includes/pics/bin.gif height=16 width=16
alt=x /'
}
});
});
/SCRIPT
HTML:
A href=updatephoto.php?photo=headshot rel=prettyPopinIMG
src=pics/hs2.jpg class=border1 alt= //A
On Feb 10, 6:38 am, Mike Alsup mal...@gmail.com wrote:
On Feb 10, 12:04 am, spiderling webmas...@spiderling.ca wrote:
I am using prettyPopin lightbox for a file upload form, and I am also
using jQuery Form Plugin to upload the image file and update it
accordingly. Unfortunately, the file is not being sent. The $_FILES
array is empty. I've included the jQuery and HTML being used. If
someone can please look and let me know if I'm missing something,
because from all the examples I've seen it doesn't seem to require too
much to upload a file.
Thanks.
updatephoto.php jQuery:
$(document).ready(function() {
var options = {
target: '#divupdate',
beforeSubmit : function() {
$('#divupdate').html('img src=pics/loader.gif border=0
alt=Please wait... /');
}
};
$('#phupdt').ajaxForm(options);
// $('#phupdt').submit(function() {
// $(this).ajaxSubmit(options);
// return false;
// });
});
updatephoto.php HTML:
div id=divupdate
br /br /
form id=phupdt action=updtphresponse.php method=post
enctype=multipart/form-data
input type=hidden name=MAX_FILE_SIZE value=525 /
table
tr
tdinput type=file name=headshot size=30 //td
/tr
tr
tdinput type=submit name=request value=Update photo //td
/tr
/table
/form
/div
updtphresponse.php HTML:
print_r($_FILES);
$html = '
table
tr
tdbSuccessfully updated./b/td
/tr
/table
';
echo $html;
Everything you posted looks fine. Where does the prettyPopin lightbox
come into play?
Mike
