[jQuery] jQuery Cycle plugin (help show/hide slide shows on same page)?
Hi all, I'm trying to setup multiple cycle slide shows on the same page; Only they occupy the same space on the page. So, I'm trying to hide the second slide show right away (no problem showing the first automatically), but when I attempt to hide the first and show the second, nothing happens. Is it even possible? or.. am I needing to find another way to do it? Thanks
[jQuery] Re: jQuery Cycle plugin (help show/hide slide shows on same page)?
Just to clarify; I have two slide shows using the cycle plugin. They are both set to display using the same css. Only one should display at a time, I want the page to load with one shown and the other hidden, then after a link is clicked the slide shows should toggle to display the previously hidden and hide the previously shown. All this is strait forward jQuery nothing difficult so I'm not bothering to clutter this thread with the obvious code. The problem is that the previously hidden cycle slide show will not display as it should. I just get a blank space where it should be. The Cycle plug in page says to direct questions to this group so, I'm asking for help. Do I have to restart the plugin somehow? Or... ? Thanks in advance for any help or suggestions.
[jQuery] Re: jQuery Cycle plugin (help show/hide slide shows on same page)?
Ok, http://mid-awe.com/webs/presidential/index.html I'm noticing also now that an additional #s2 slide show is missing from the initial page load. I'll look at that to see if the issues are related. Any help is greatly appreciated. > Can you post a link to your test page?
[jQuery] Re: jQuery Cycle plugin (help show/hide slide shows on same page)?
Ok, I think I've got it.
I am now setting up the second slide show at the click event and then
showing it immediately following. Like this:
[code]jQuery('#buttons [href]').click(
function(){
var element = jQuery(this);
var href=element.attr("href");
jQuery('#screed').html($(href).html());
arrowFadr();
if (href == "#about"){
//$('#s1,#s2').hide();
$('#s3').cycle({
fx: 'all',
timeout: 1,
easing: 'easeOutExpo',
delay: -2000,
next: '#s3',
pause: 1,
speed: 1000
});
$('#s4').cycle({
fx:
'blindX,fadeZoom,scrollLeft,scrollHorz,slideX,toss,turnLeft',
timeout: 1,
easing: 'easeOutExpo',
pause: 1,
speed: 1000
});
jQuery('#s3').show();
jQuery('#s4').show();
};
});[/code]
you can see the live example @ the link I posted above.
But, This brings up another issue. the overlaying cycle slide shows
work with Web-kit browsers but no others? what am I doing wrong?
jQuery should be compatible with the slew. Can you see any reason why
it displays for a few slides and then vanishes (never to be seen
again)?
Thanks again for any help.
[jQuery] Re: cycle plugin image positioning issue
I recently ran into a similar situation where all slide shows other
than the first was not displaying properly since they are written into
the page after a mouse click on link like: $('#div').html($(href).html
());
So, since the first cycle slide show worked fine with css "width:
100%;height:auto;" I just used it's values across the board like:
var imgHt = $('#s1 img').height();
$('#s3,#s3 img,#s5,#s5 img').css({'height': imgHt });
I know you said your issue is resolved but this might be a more
flexible solution for you. I works like a dream for me on all browsers
I've tested ( ie6-8, firefox-all, Safari-win, Chrome, Opera-10).
On Jun 4, 9:43 am, Laker Netman wrote:
> On Jun 4, 10:17 am, Mike Alsup wrote:
>
> > > How do I eliminate or override the "position: absolute;" being
> > > injected into the img tag, as that appears to be the culprit?
>
> > You can't eliminate it. For the slideshow to work the container
> > element must have 'relative' position and the slides must have
> > 'absolute' position inside the container. I suspect your layout is
> > having trouble with the relatively positioned div, but you should be
> > able to sort that out.
>
> Well after some gnashing-of-teeth and cursing I have it working :)
>
> I googled [some more] and found this posting that gave me the clue I
> needed:http://groups.google.com/group/jquery-en/browse_thread/thread/4123a44...
>
> I hadn't set a height and width on the DIV hooked to thecycleplugin
> containing the image(s).
>
> Regards,
> Laker
[jQuery] Re: append and *slowly* show new content in DOM
You could try $('#div_container').hide(this).append('hi there!').show('slow');
On Jun 20, 2:03 pm, Eric P wrote:
> Hi,
>
> I'm guessing this is an easy question, but I can't figure it out.
>
> I want to add some new content to the DOM, so I have a line like this.
> $('#div_container').append('hi there!');
>
> However, I'd like it to slowly appear via show().
>
> But adding show() doesn't work as I'd expect. The new content appears
> instantly.
> $('#div_container').append('hi there!').show('slow');
>
> Thanks for reading,
> Eric P
[jQuery] Re: append and *slowly* show new content in DOM
My appologies for the silly reply. Instead try: (if it's ok to hide
the container)
$('#div_container').hide().append('hi there!').show('slow');
If you want to keep the container visible then try:
$('#div_container').append('hi there!');
$('#div_container:last-child').show('slow');
On Jun 20, 2:47 pm, MiD-AwE wrote:
> You could try $('#div_container').hide(this).append('hi there! p>').show('slow');
>
> On Jun 20, 2:03 pm, Eric P wrote:
>
>
>
> > Hi,
>
> > I'm guessing this is an easy question, but I can't figure it out.
>
> > I want to add some new content to the DOM, so I have a line like this.
> > $('#div_container').append('hi there!');
>
> > However, I'd like it to slowly appear via show().
>
> > But adding show() doesn't work as I'd expect. The new content appears
> > instantly.
> > $('#div_container').append('hi there!').show('slow');
>
> > Thanks for reading,
> > Eric P
[jQuery] How to break out of jQuery function?
Hi all,
I have a function that will run everytime a link in my menu is
clicked. The problem is that one of the links point to an https and
appropriately opens in a new window/tab. I want to break out of the
function so that my page does not go blank as a result.
I tried the .end(); function but it doesn't seem to do what I expected
as my page goes blank and the https is opened in two other windows/
tabs.
below is my exception as it stands:[not complete code - only for
illustration]
var href="";
if (href == ""){
$.end(); <- here is where I need to break out.
} else {
$('#content').html($(href).html());
};
[jQuery] Re: How to break out of jQuery function?
I appologize for the newb-ish question. I found my answer in "return
false;"
I'm not deleting this in case someone else needs a good example of
where this is necessary. (my background in is LISP (exit) and VB, so
please understand the dumb question).
On Jun 24, 12:50 pm, MiD-AwE wrote:
> Hi all,
>
> I have a function that will run everytime a link in my menu is
> clicked. The problem is that one of the links point to an https and
> appropriately opens in a new window/tab. I want to break out of the
> function so that my page does not go blank as a result.
>
> I tried the .end(); function but it doesn't seem to do what I expected
> as my page goes blank and the https is opened in two other windows/
> tabs.
>
> below is my exception as it stands:[not complete code - only for
> illustration]
>
> var href="";
>
> if (href == ""){
> $.end(); <- here is where I need to break out.
> } else {
> $('#content').html($(href).html());
> };
[jQuery] Re: How to break out of jQuery function?
Great, Thank you. I'm learning fast, but their are still many ways to
"do it better" that I'm just discovering as I go. I immediately
recognize what you have done here and it make good sense. Thanks
again.
On Jun 24, 1:25 pm, Charlie Griefer wrote:
> First off... there are no dumb questions :)
>
> Glad you got it sorted. But would it maybe be a little more efficient to
> do:
>
> if (href !="") {
> $('#content').html($(href).html());
>
> }
>
> since you're not doing anything on the other condition (href being blank),
> no need for the 'else'?
>
> I realize you said this is only a snippet so maybe there's a reason for
> doing it the other way. If not, food for thought :)
>
>
>
>
>
> On Wed, Jun 24, 2009 at 1:04 PM, MiD-AwE wrote:
>
> > I appologize for the newb-ish question. I found my answer in "return
> > false;"
>
> > I'm not deleting this in case someone else needs a good example of
> > where this is necessary. (my background in is LISP (exit) and VB, so
> > please understand the dumb question).
>
> > On Jun 24, 12:50 pm, MiD-AwE wrote:
> > > Hi all,
>
> > > I have a function that will run everytime a link in my menu is
> > > clicked. The problem is that one of the links point to an https and
> > > appropriately opens in a new window/tab. I want to break out of the
> > > function so that my page does not go blank as a result.
>
> > > I tried the .end(); function but it doesn't seem to do what I expected
> > > as my page goes blank and the https is opened in two other windows/
> > > tabs.
>
> > > below is my exception as it stands:[not complete code - only for
> > > illustration]
>
> > > var href="";
>
> > > if (href == ""){
> > > $.end(); <- here is where I need to break out.
> > > } else {
> > > $('#content').html($(href).html());
> > > };
>
> --
> 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] .hasClass() not behaving as expected.
Please help, I've been wrestling with this for too long now.
I've put together this code to change the background of a div when the
mouse hovers over a list of divs. One of the listed divs has a class
name of ash and I want to add a background image on that one hover;
all of the other listed divs only have colors. The problem is that
the .hasClass() doesn't seem to be behaving as it should, or I'm not
doing something, or I'm just completely clueless?
Below is my code and a sample html to test. Can someone please tell me
what I'm doing wrong? Why is my $(this).hasClass('ash') not
recognizing when my mouse hovers over the div with the class="ash"?
Thanks in advance,
[code]
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/1999/xhtml"; lang="en-us" xml:lang=
"en-us">
mouseover color changer with preview
http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/
jquery.min.js">
//
body {
background-color: black;
}
#cfilter {
margin: 0px;
padding: 0px;
opacity: 0.503;
position: absolute;
width: 473px;
height: 466px;
display: block;
right: 0px;
top: 0px;
float: right;
z-index: 1;
clear: none;
background-color: white;
}
#customize {
border: 3px solid #afa688;
margin: 0px;
padding: 10px 10px 10px 13px;
font-size: 0.8em;
font-family: Arial,Helvetica,sans-serif;
display: block;
float: left;
clear: left;
position: absolute;
opacity: 0.899;
background-color: #f4e2ab;
color: black;
width: 200px;
top: 25px;
z-index: 3;
}
#colors {
border-style: solid;
border-width: 1px;
padding: 0px;
position: relative;
background-color: white;
height: 21px;
top: 9px;
width: 137px;
left: 31px;
display: block;
}
#colors ul {
border-style: none;
border-width: 1px;
list-style-type: none;
position: relative;
top: -11px;
width: 99.9%;
left: -39px;
height: 99.9%;
}
#colors ul li {
margin: 0px;
padding: 0px;
float: left;
}
#colors ul li a {
border: 1px solid black;
margin: 0px 0px 0px 2px;
padding: 0px;
height: 15px;
display: block;
list-style-type: none;
list-style-position: inside;
width: 15px;
float: left;
}
Mouse over color blocks to see the
design in available colors.
.
.
.
.
.
.
.
[/code]
[jQuery] Re: .hasClass() not behaving as expected.
Thanks for the reply. I eventually removed the "-color" and "-image" for the
css "background".
mkmanning wrote:
>
>
> In your code you're attaching the hover event to the anchor tags; in
> the sample html none of the anchors has a class (the class is on the
> parent li element).
>
> On Feb 8, 4:24 pm, MiD-AwE wrote:
>> Please help, I've been wrestling with this for too long now.
>>
>> I've put together this code to change the background of a div when the
>> mouse hovers over a list of divs. One of the listed divs has a class
>> name of ash and I want to add a background image on that one hover;
>> all of the other listed divs only have colors. The problem is that
>> the .hasClass() doesn't seem to be behaving as it should, or I'm not
>> doing something, or I'm just completely clueless?
>>
>> Below is my code and a sample html to test. Can someone please tell me
>> what I'm doing wrong? Why is my $(this).hasClass('ash') not
>> recognizing when my mouse hovers over the div with the class="ash"?
>>
>> Thanks in advance,
>>
>> [code]
>> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
>> http://www.w3.org/1999/xhtml"; lang="en-us" xml:lang=
>> "en-us">
>>
>> > http-equiv="content-type" />
>> mouseover color changer with preview
>> > src="<a rel="nofollow" href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/">http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/</a>
>> jquery.min.js">
>>
>> //<![CDATA[
>> $(document).ready(function () {
>> $.cstmzclrns = {clkclr : "white"};//$.cstmzclrns.clkclr
>> $("#colors ul li a").hover(
>> function () {
>> if (!$(this).hasClass('ash')) {
>> var color = $(this).css("background-color");
>> $("#cfilter").css({'background-color' : color});
>> $("#cfilter").css({'background-image' :
>> 'none'});
>> } else {
>> $("#cfilter").css({'background-color' :
>> 'transparent'});
>> $("#cfilter").css({'background-image' :
>> 'url(img/ts/ash.png)'});
>> }
>> }, function () {
>> if ($.cstmzclrns.clkclr == 'ash') {
>> $("#cfilter").css({'background-color' :
>> 'transparent'});
>> $("#cfilter").css({'background-image' :
>> 'url(img/ts/ash.png)'});
>> } else {
>> $("#cfilter").css({'background-color' :
>> $.cstmzclrns.clkclr});
>> $("#cfilter").css({'background-image' :
>> 'none'});
>> }
>> }).click(
>> function () {
>> if ($(this).hasClass('ash')) {
>> $.cstmzclrns = {clkclr : "ash"};
>>
>> $("#cfilter").css({'background-color' : 'transparent'});
>> $("#cfilter").css({'background-image' :
>> 'url(img/ts/
>> ash.png)'});
>> } else {
>> $.cstmzclrns = {clkclr :
>> $(this).css("background-color")};
>> $("#cfilter").css({'background-color' :
>> $.cstmzclrns.clkclr});
>>
>> $("#cfilter").css({'background-image' : 'none'});
>> }
>> });});
>>
>> //]]>
>>
>>
>> body {
>> background-color: black;}
>>
>> #cfilter {
>> margin: 0px;
>> padding: 0px;
>> opacity: 0.503;
>> position: absolute;
>> width: 473px;
>> height: 466px;
>> display: block;
>> right: 0px;
>> top: 0px;
>> float: right;
>> z-index: 1;
>> clear: none;
>> background-color: white;}
>>
>> #customize {
>> border: 3px solid #afa688;
&
