[jQuery] Re: MultiFile plugin taking no parameters
I am having the same exact problem but I can't find the answer anywhere. Have you found a solution? -- View this message in context: http://www.nabble.com/MultiFile-plugin-taking-no-parameters-tp23823347s27240p25513614.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: help with an animation effect
Hi, Robert. I've tackled this issue recently and I can post something that worked out reasonably well for me. I used it for a login box that slides down once the user clicks on the tab. You should be able to restructure it to fit your site. Please keep in mind I'm not a developer and the code is probably not up to snuff. HTML div id=container div id=slidingPanel CONTENT HERE /div!-- end login-panel -- div id=loginSwitch center span class=switchlog in/register/span span class=switch style=display:none;close/span /center /div!-- end login-switch -- /div!-- end login-container -- On Jul 24, 12:40 pm, Sir Rawlins robert.rawl...@thinkbluemedia.co.uk wrote: Morning all, I'm looking for some help with an animation effect and your thoughts on how best to achieve it. At this stage we simply have a graphical representation, we can splice the images up any way we like, I'm really looking for your suggestions. The first stage is just the basic static object: http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view... Then, we have a slight mouse-over effect on the small tab at the bottom which slightly reveals the content (width a nice slidey effect). On a mouse-out the tab would go back to it's static state. http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view... Thirdly, once the tab has been clicked it should pull out (nice slidey effect again), notice this isn't like the slideDown() effect, the bottom of the thing comes out first, as if it were a card being pulled out from behind another by hand. Also note that the text/icon on the tab has changed. http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view... Finally we have it's resting state once it's pulled out completely, a click would simply send it back up again the way it came. http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view... Now this with any luck would degrade so that if JS was disabled then the tab would default to being fully pulled out so the content was exposed for anyone viewing the site without JS enabled. I'd imagine we'll be using the animate() method but this isn't something I've worked with before, I'd appreciate any help you can offer on how I should be structuring my HTML and JS for this. Thanks guys I appreciate it. Robert
[jQuery] Re: help with an animation effect
Sorry, my last post was incomplete.
I've changed the code to keep it cleaner and more relevant to your
question.
You will need to restructure the CSS to fit your page.
HTML
div id=container
div id=slider
CONTENT HERE
/div!-- end slider --
div id=sliderSwitch
span class=switchshow/span
span class=switch style=display:none;hide/span
/div!-- end sliderSwitch --
/div!-- end container --
CSS
#container {
width: 180px;
min-height: 21px;
top: 0;
right: 40px;
font-size: 10px;
line-height: 20px;
position: absolute;
z-index: 5;
}
#slider {
width: 100%;
height: auto;
display: none;
background: #5e574a;
}
#sliderSwitch {
height: 21px;
width: 100px;
cursor: pointer;
line-height: 24px;
}
jQuery
// sliding box
$(#sliderSwitch).click( function() {
$(#sliderSwitch .switch).toggle();//
toggle text
$(#slider).slideToggle(slow);
// show / hide box
});
});
I hope it helps
- Leo
On Jul 24, 12:40 pm, Sir Rawlins robert.rawl...@thinkbluemedia.co.uk
wrote:
Morning all,
I'm looking for some help with an animation effect and your thoughts
on how best to achieve it. At this stage we simply have a graphical
representation, we can splice the images up any way we like, I'm
really looking for your suggestions.
The first stage is just the basic static object:
http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view...
Then, we have a slight mouse-over effect on the small tab at the
bottom which slightly reveals the content (width a nice slidey
effect). On a mouse-out the tab would go back to it's static state.
http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view...
Thirdly, once the tab has been clicked it should pull out (nice slidey
effect again), notice this isn't like the slideDown() effect, the
bottom of the thing comes out first, as if it were a card being pulled
out from behind another by hand. Also note that the text/icon on the
tab has changed.
http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view...
Finally we have it's resting state once it's pulled out completely, a
click would simply send it back up again the way it came.
http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view...
Now this with any luck would degrade so that if JS was disabled then
the tab would default to being fully pulled out so the content was
exposed for anyone viewing the site without JS enabled.
I'd imagine we'll be using the animate() method but this isn't
something I've worked with before, I'd appreciate any help you can
offer on how I should be structuring my HTML and JS for this.
Thanks guys I appreciate it.
Robert
[jQuery] Re: help with an animation effect
Sorry, my last post was incomplete.
I've changed the code to keep it cleaner and more relevant to your
question.
Please, keep in mind I'm not a developer and the code is probably not
up to snuff. :P
HTML
div id=container
div id=slider
CONTENT HERE
/div!-- end slider --
div id=sliderSwitch
span class=switchshow/span
span class=switch style=display:none;hide/span
/div!-- end sliderSwitch --
/div!-- end container --
CSS
#container {
width: 180px;
min-height: 21px;
top: 0;
right: 40px;
font-size: 10px;
line-height: 20px;
position: absolute;
z-index: 5;
}
#slider {
width: 100%;
height: auto;
display: none;
background: #5e574a;
}
#sliderSwitch {
height: 21px;
width: 100px;
cursor: pointer;
line-height: 24px;
}
jQuery
// sliding box
$(#sliderSwitch).click( function() {
$(#sliderSwitch .switch).toggle
(); // toggle text
$(#slider).slideToggle
(slow); // show / hide box
});
});
I hope it helps
- Leo
On Jul 24, 12:40 pm, Sir Rawlins robert.rawl...@thinkbluemedia.co.uk
wrote:
Morning all,
I'm looking for some help with ananimationeffectand your thoughts
on how best to achieve it. At this stage we simply have a graphical
representation, we can splice the images up any way we like, I'm
really looking for your suggestions.
The first stage is just the basic static object:
http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view...
Then, we have a slight mouse-overeffecton the small tab at the
bottom which slightly reveals the content (width a nice slideyeffect). On a
mouse-out the tab would go back to it's static state.
http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view...
Thirdly, once the tab has been clicked it should pull out (nice
slideyeffectagain), notice this isn't like the slideDown()effect, the
bottom of the thing comes out first, as if it were a card being pulled
out from behind another by hand. Also note that the text/icon on the
tab has changed.
http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view...
Finally we have it's resting state once it's pulled out completely, a
click would simply send it back up again the way it came.
http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view...
Now this with any luck would degrade so that if JS was disabled then
the tab would default to being fully pulled out so the content was
exposed for anyone viewing the site without JS enabled.
I'd imagine we'll be using the animate() method but this isn't
something I've worked with before, I'd appreciate any help you can
offer on how I should be structuring my HTML and JS for this.
Thanks guys I appreciate it.
Robert
[jQuery] Re: Another image rollover question
After some more digging and basic research I was able to come up with
this.
I tried to work with .add/removeClass instead of .css, but couldn't
get it to work the way I wanted to.
This seems to work just fine:
$(document).ready(function() {
$(.btn.up).mouseover( function() {
$(this).css(background-position,0 -35px);
}).mouseout( function() {
$(this).css(background-position,top);
}).mousedown( function() {
$(.btn).css(background-position,top);
$(this).css(background-position,0 -70px);
}).mouseup( function() {
$(this).css(background-position,bottom);
});
});
-Leo
On Jul 15, 6:53 pm, leofromrio leofrom...@gmail.com wrote:
Liam,
Thank you very much for your input.
That worked out perfectly! It also reduced the number of server
requests by a few million.
Like I said before, I'm sure the code could be written a lot better,
but here it is anyway:
script type=text/javascript charset=utf-8
$(function() { // image hover
$(.topmenu div).hover(function() {
$(this).css({ background-position:0 -35px });
}, function() {
$(this).css({ background-position:top });
});
});
/script
script type=text/javascript charset=utf-8
$(function() { // image mousedown
$(.topmenu div).mousedown(function() {
$(this).css({ background-position:0 -70px });
}, function() {});
});
/script
script type=text/javascript charset=utf-8
$(function() { // image mouseup
$(.topmenu div).mouseup(function() {
$(this).css({ background-position:bottom });
}, function() {});
});
/script
Thanks again
-Leo
On Jul 15, 3:18 pm, Liam Byrne l...@onsight.ie wrote:
For something like this, you'd be best off having all 4 states of the
button in a single graphic file, one under the other, and using the
background-position to control it.
The image would be 4 times as big as the allocated div or li, with only
a quarter of it showing at a time depending on the starting
backgroundPosition.
Instead of swapping the image, you'd move the [top] backgroundPosition
to 0%, 25%, 50% or 75%, as required
Then, the logic for a reset would be
$(.buttonClass).css({backgroundPosition:top}), or something like that.
L
leofromrio wrote:
Hi there,
Let me begin by saying I know very little about jQuery and would love
to learn a lot more about it (so i don't have to waste people's time
on questions like the one I'm about to ask)
I am trying to design a graphic menu bar that is capable of displaying
each button in 4 modes: up (neutral), hover, down (mouse down), and
selected.
After some research, I was able to come up (by cutting and pasting
and burning up a couple of neurons) with the code below. It works well
enough but I'm sure it could be written a lot better.
What I really would like to do is to change whatever button is down
to go back up onceanotherbutton is pushed, changing the img src,
or by whatever method is more efficient.
Thank you for taking the time to read my post.
-Leo
script src=js/jquery-1.3.2.js type=text/javascript
charset=utf-8/script
script type=text/javascript charset=utf-8
$(function() { // imagerollover
$(.topmenu img).hover(function() {
this.src =
this.src.replace(-up,-hover);
}, function() {
this.src = this.src.replace(-hover,-up);
});
});
/script
script type=text/javascript charset=utf-8
$(function() { // image mousedown
$(.topmenu img).mousedown(function() {
this.src =
this.src.replace(-hover,-down);
}, function() {});
});
/script
script type=text/javascript charset=utf-8
$(function() { // image mouseup
$(.topmenu img).mouseup(function() {
this.src =
this.src.replace(-down,-selected);
}, function() {});
});
/script
div class=topmenu
img
src=images/navmenu/bar-left-end.jpg width=4 height=35
alt= /a href=#img src=images/navmenu/btn-home-up.jpg
alt=Home width=66 height=35 //aa href=#img src=images/
navmenu/btn-photoworks
[jQuery] Re: Another image rollover question
Liam,
Thank you very much for your input.
That worked out perfectly! It also reduced the number of server
requests by a few million.
Like I said before, I'm sure the code could be written a lot better,
but here it is anyway:
script type=text/javascript charset=utf-8
$(function() { // image hover
$(.topmenu div).hover(function() {
$(this).css({ background-position:0 -35px });
}, function() {
$(this).css({ background-position:top });
});
});
/script
script type=text/javascript charset=utf-8
$(function() { // image mousedown
$(.topmenu div).mousedown(function() {
$(this).css({ background-position:0 -70px });
}, function() {});
});
/script
script type=text/javascript charset=utf-8
$(function() { // image mouseup
$(.topmenu div).mouseup(function() {
$(this).css({ background-position:bottom });
}, function() {});
});
/script
Thanks again
-Leo
On Jul 15, 3:18 pm, Liam Byrne l...@onsight.ie wrote:
For something like this, you'd be best off having all 4 states of the
button in a single graphic file, one under the other, and using the
background-position to control it.
The image would be 4 times as big as the allocated div or li, with only
a quarter of it showing at a time depending on the starting
backgroundPosition.
Instead of swapping the image, you'd move the [top] backgroundPosition
to 0%, 25%, 50% or 75%, as required
Then, the logic for a reset would be
$(.buttonClass).css({backgroundPosition:top}), or something like that.
L
leofromrio wrote:
Hi there,
Let me begin by saying I know very little about jQuery and would love
to learn a lot more about it (so i don't have to waste people's time
on questions like the one I'm about to ask)
I am trying to design a graphic menu bar that is capable of displaying
each button in 4 modes: up (neutral), hover, down (mouse down), and
selected.
After some research, I was able to come up (by cutting and pasting
and burning up a couple of neurons) with the code below. It works well
enough but I'm sure it could be written a lot better.
What I really would like to do is to change whatever button is down
to go back up onceanotherbutton is pushed, changing the img src,
or by whatever method is more efficient.
Thank you for taking the time to read my post.
-Leo
script src=js/jquery-1.3.2.js type=text/javascript
charset=utf-8/script
script type=text/javascript charset=utf-8
$(function() { // imagerollover
$(.topmenu img).hover(function() {
this.src =
this.src.replace(-up,-hover);
}, function() {
this.src = this.src.replace(-hover,-up);
});
});
/script
script type=text/javascript charset=utf-8
$(function() { // image mousedown
$(.topmenu img).mousedown(function() {
this.src =
this.src.replace(-hover,-down);
}, function() {});
});
/script
script type=text/javascript charset=utf-8
$(function() { // image mouseup
$(.topmenu img).mouseup(function() {
this.src =
this.src.replace(-down,-selected);
}, function() {});
});
/script
div class=topmenu
img
src=images/navmenu/bar-left-end.jpg width=4 height=35
alt= /a href=#img src=images/navmenu/btn-home-up.jpg
alt=Home width=66 height=35 //aa href=#img src=images/
navmenu/btn-photoworks-up.jpg alt=Photo Works width=124
height=35 //aa href=#img src=images/navmenu/btn-blog-
up.jpg alt=blog! width=60 height=35 //aa href=#img
src=images/navmenu/btn-portfolio-up.jpg alt=Portfolio width=88
height=35 //aimg src=images/navmenu/bar-right-end.jpg
width=4 height=35 alt= /
/div!-- end topmenu --
No virus found in this incoming message.
Checked by AVG -www.avg.com
Version: 8.5.387 / Virus Database: 270.13.14/2238 - Release Date: 07/14/09
18:03:00
[jQuery] Another image rollover question
Hi there,
Let me begin by saying I know very little about jQuery and would love
to learn a lot more about it (so i don't have to waste people's time
on questions like the one I'm about to ask)
I am trying to design a graphic menu bar that is capable of displaying
each button in 4 modes: up (neutral), hover, down (mouse down), and
selected.
After some research, I was able to come up (by cutting and pasting
and burning up a couple of neurons) with the code below. It works well
enough but I'm sure it could be written a lot better.
What I really would like to do is to change whatever button is down
to go back up once another button is pushed, changing the img src,
or by whatever method is more efficient.
Thank you for taking the time to read my post.
-Leo
script src=js/jquery-1.3.2.js type=text/javascript
charset=utf-8/script
script type=text/javascript charset=utf-8
$(function() { // image rollover
$(.topmenu img).hover(function() {
this.src =
this.src.replace(-up,-hover);
}, function() {
this.src = this.src.replace(-hover,-up);
});
});
/script
script type=text/javascript charset=utf-8
$(function() { // image mousedown
$(.topmenu img).mousedown(function() {
this.src =
this.src.replace(-hover,-down);
}, function() {});
});
/script
script type=text/javascript charset=utf-8
$(function() { // image mouseup
$(.topmenu img).mouseup(function() {
this.src =
this.src.replace(-down,-selected);
}, function() {});
});
/script
div class=topmenu
img
src=images/navmenu/bar-left-end.jpg width=4 height=35
alt= /a href=#img src=images/navmenu/btn-home-up.jpg
alt=Home width=66 height=35 //aa href=#img src=images/
navmenu/btn-photoworks-up.jpg alt=Photo Works width=124
height=35 //aa href=#img src=images/navmenu/btn-blog-
up.jpg alt=blog! width=60 height=35 //aa href=#img
src=images/navmenu/btn-portfolio-up.jpg alt=Portfolio width=88
height=35 //aimg src=images/navmenu/bar-right-end.jpg
width=4 height=35 alt= /
/div!-- end topmenu --
