[jQuery] jQuery Cycle Slideshow makes site crash in IE7
Please look at http://www.idea-palette.com http://www.idea-palette.com I have multiple pages that are being faded in using the top nav. When the user clicks on any of the above buttons to fade in another page that contains the Slideshow using the jQuery Cycle Plugin, IE7 crashes. When I comment out the jQuery that controls the fades of the slideshow, IE7 does not crash anymore. You can see that here: http://www.idea-palette.com/IEindex.php http://www.idea-palette.com/IEindex.php I'm guessing IE7 does not like it when it fades to some content that contains some other content that is in the process of fading already. I'm guessing the two together somehow overload IE7 so it crashes. Before I figured out that the jQuery Cycle Plugin was causing the page to crash, I asked this question on another forum and someone found out this info when looking at my site: 'It has something to do with your DirectX filter (probably what's doing the fades). Here's the stack, and EAX is NULL. Whatever the code is doing is trying to deref EAX: CDXTFilterBehavior::_ClearSurface: 6C8E87E1 mov edi,edi 6C8E87E3 pushebp 6C8E87E4 mov ebp,esp 6C8E87E6 pushecx 6C8E87E7 mov eax,dword ptr [ebp+0Ch] 6C8E87EA mov ecx,dword ptr [eax] <--- EAX is NULL > dxtrans.dll!CDXTFilterBehavior::_ClearSurface() dxtrans.dll!CDXTFilterBehavior::_DrawUnfilteredElementLayers() dxtrans.dll!CDXTFilterBehavior::_DrawElementWithProceduralSurfaces() dxtrans.dll!CDXTFilterBehavior::_ExecuteFilterChain() dxtrans.dll!CDXTFilterBehavior::Draw() mshtml.dll!CPeerHolder::Draw() mshtml.dll!CLayout::DrawClientLayers() mshtml.dll!CDispContainer::DrawSelf() mshtml.dll!CDispNode::Draw() mshtml.dll!CDispContainer::DrawChildren() mshtml.dll!CDispContainer::DrawSelf() mshtml.dll!CDispNode::Draw() mshtml.dll!CDispContainer::DrawChildren() mshtml.dll!CDispContainer::DrawSelf() mshtml.dll!CDispNode::Draw() mshtml.dll!CDispContainer::DrawChildren() mshtml.dll!CDispContainer::DrawSelf() mshtml.dll!CDispNode::Draw() mshtml.dll!CDispContainer::DrawChildren() mshtml.dll!CDispContainer::DrawSelf() mshtml.dll!CDispNode::Draw() mshtml.dll!CDispContainer::DrawChildren() mshtml.dll!CDispContainer::DrawSelf() mshtml.dll!CDispNode::Draw() mshtml.dll!CDispRoot::DrawEntire() mshtml.dll!CDispRoot::DrawRoot() mshtml.dll!CView::RenderView() mshtml.dll!CDoc::OnPaint() mshtml.dll!CServer::OnWindowMessage() mshtml.dll!CDoc::OnWindowMessage() mshtml.dll!CServer::WndProc() user32.dll!_internalcallwinp...@20() user32.dll!_usercallwinproccheck...@32() user32.dll!_callwindowproca...@24() user32.dll!_callwindowpr...@20() user32.dll!_internalcallwinp...@20() user32.dll!_usercallwinproccheck...@32() user32.dll!_dispatchclientmess...@20() user32.dll!___fndw...@4() ntdll.dll!_kiusercallbackdispatc...@12() user32.dll!_ntuserdispatchmess...@4() user32.dll!_dispatchmessagewor...@8() user32.dll!_dispatchmessa...@4() ieframe.dll!CTabWindow::_TabWindowThreadProc() kernel32.d...@basethreadinitthunk@12() ntdll.dll!___rtluserthreadst...@8() ntdll.dll!__rtluserthreadst...@8() Perhaps you're removing an element from the DOM while the transform is still operating on it?' Does anybody know how I can fix this problem? -- View this message in context: http://www.nabble.com/jQuery-Cycle-Slideshow-makes-site-crash-in-IE7-tp22941948s27240p22941948.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Why does my website crash in IE when fading?
My site works fine in Firefox, but it crashes in IE. I am using alot of jQuery in order to fade in content. When the user clicks on one of the above links a few times, it will crash in IE. Here is my site: http://www.idea-palette.com/ http://www.idea-palette.com/ I have absolutely no idea why the site crashes in IE. I don't even know where to begin to debug my problem. I don't have Visual Studio on my computer, but on my friends computer Visual Studio reads a message of "An unhandled win32 exception occurred in iexplore.exe[]" Does anyone have any ideas? -- View this message in context: http://www.nabble.com/Why-does-my-website-crash-in-IE-when-fading--tp22920819s27240p22920819.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Can't get anchor tags to work with Cycle Plugin
This seems like a pretty easy problem. Does anybody know how I can add anchor tags around the Cycle Plugin Slideshow? -- View this message in context: http://www.nabble.com/Can%27t-get-anchor-tags-to-work-with-Cycle-Plugin-tp22475620s27240p22571406.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Can't get anchor tags to work with Cycle Plugin
nobody? anybody? -- View this message in context: http://www.nabble.com/Can%27t-get-anchor-tags-to-work-with-Cycle-Plugin-tp22475620s27240p22489934.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Can't get anchor tags to work with Cycle Plugin
I'm using the jQuery Cycle Plugin, and I am trying to add anchor tags around
the images in the slideshow so that the user can click on it to go to
another site.
I saw the example Malsup made at
http://www.malsup.com/jquery/cycle/test/egil.html
http://www.malsup.com/jquery/cycle/test/egil.html in which the anchor tags
work great.
I actually copied the same anchor tags that he used in that example.
Here is my HTML for the slides:
/about-us/business-strategy/ images/rockslides/rockslide1.jpg
/about-us/business-strategy/ images/rockslides/rockslide2.jpg
/about-us/business-strategy/ images/rockslides/rockslide3.jpg
For some reason, the anchor tags I'm writing above aren't showing up cause
nabble thinks I'm adding a link, so please just look at the source code on
my site below. It's just an anchor tag around images that are all within a
div that is being affected by the jQuery code.
Here is my jQuery:
$('#rockslides').cycle({
fx: 'fade',
speed: 1000, //How fast the transition is
timeout: 5000, //Time length between slides
pause: 1, //Causes the slideshow to pause when
the mouse hovers over the
slide.
sync: true,
next: '#rocknextbtn',
prev: '#rockprevbtn'
});
Here is the site in which the anchor tags are not working:
http://idea-palette.com/official/newofficialsite4a.html
http://idea-palette.com/official/newofficialsite4a.html
Here is the site without the anchor tags where the slideshow works great,
but without the anchor tags:
http://idea-palette.com/official/newofficialsite4.html
http://idea-palette.com/official/newofficialsite4.html
I must be missing something easy, cause I seem to have the same exact code
as Malsup uses in his example. I hope someone can help me out!
-Chris
--
View this message in context:
http://www.nabble.com/Can%27t-get-anchor-tags-to-work-with-Cycle-Plugin-tp22475620s27240p22475620.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Need Help with changing css on an object
I will definitely add sprites though, I forgot to mention that. Thanks for that suggestion. -- View this message in context: http://www.nabble.com/Need-Help-with-changing-css-on-an-object-tp22394562s27240p22405565.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Need Help with changing css on an object
phpbutcher wrote:
>
> Charlie is absolutely right. You can simplify it by using the
> css :hover to do your rollover states. You still however need to do
> something on top of that to handle the current problem you're having
> with it keeping the state change when a user clicks on
> one of the nav elements. That's really where my thought process was in
> my post.
Thanks for your suggestions. I am already using a hover state in my css, so
I have that covered. I wanted to keep the text on the buttons as images,
because it's a custom font and also if I make just the lightbulb as the
link, then the user can't click on the text to use it as a link. He/She
would have to click on the lightbulb. Am I wrong in thinking that? Any
suggestions?
As far as my original problem goes, I added a class in the css called 'lit'
to the button's span as they're the ones with the background-image.
This is what I wrote in my CSS:
#printsectbtn span { background-image: url(../images/print_off.png); }
#printsectbtn span:hover { background-image: url(../images/print_on.png); }
#printsectbtn span.lit { background-image: url(../images/print_on.png); }
#websectbtn span { background-image: url(../images/web_off.png); }
#websectbtn span:hover { background-image: url(../images/web_on.png); }
#websectbtn span.lit { background-image: url(../images/web_on.png); }
#motsectbtn span { background-image: url(../images/motion_off.png); }
#motsectbtn span:hover { background-image: url(../images/motion_on.png); }
#motsectbtn span.lit { background-image: url(../images/motion_on.png); }
#intsectbtn span { background-image: url(../images/int_off.png); }
#intsectbtn span:hover { background-image: url(../images/int_on.png); }
#intsectbtn span.lit { background-image: url(../images/int_on.png); }
This is what I wrote in my jquery:
$(function(){
$('#printsectbtn span').addClass('lit');
$('#nav li a').click(function(){
var clickedLinkId = $(this).attr('id');
$('#nav li a span').removeClass('lit');
$('#' + clickedLinkId + ' span').addClass('lit');
return false;
});
});
So basically when the user clicks on one of the buttons, it adds the class
'lit' which changes the background-image to what I specified in the css for
each different button. It also removes the class 'lit' from all of the
button's spans, which changes the background image back to the lightbulb
being off.
--
View this message in context:
http://www.nabble.com/Need-Help-with-changing-css-on-an-object-tp22394562s27240p22405547.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Need Help with changing css on an object
Hi,
I am having some issues with my site. I have a main Nav with four links that
load in 4 different sections.
You can see the page I am working on here:
http://idea-palette.com/official/newofficialsite4.html
http://idea-palette.com/official/newofficialsite4.html
What I am trying to do is, when a user clicks on another Main Nav button,
such as 'Web Projects', the background-image changes to another image that
shows the lightbulb being on. I also want it to change back the
background-image for any link that currently has the light on, so that it
seems the light is on for whatever page the user visits.
Here is my basic html layout that pertains:
anchor tag
span tag
Each of the links are called 'printsectbtn', 'websectbtn', and so on. Each
of the default background-images is called 'print_off.png', 'web_off.png',
and so on. Each of the background images that show up when a user clicks
that link are called 'print_on.png', 'web_on.png', and so on.
I have started all their names with either 'print', 'web', 'mot', or 'int'
so that I could make it dynamic and simply erase some letters from the
clicked div's name and then add some others at the end.
Here is my jquery that pertains to this issue:
$(function(){
$('#nav li a').click(function(){
var clickedLinkId = $(this).attr('id'); //This is the ID of the
Main Nav Link that was clicked
var picOnLocation = 'images/' + clickedLinkId - 'sectbtn' + '_on' +
'.png'; //This is the location of the new background image once the user
clicks a button
var picOnUrl = 'url(' + picOnLocation + ')'; //This combines the
background image location and URL Line
$('#' + clickedLinkId + '
span').css({"background-image":picOnUrl}); //This changes the background
image of the span of the currently clicked link.
return false;
});
});
Basically, what I am trying to do above is to:
1) Get the ID of the clicked link. I called this var ClickedLinkId.
2) Erase the word 'sectbtn' from the end of the ID, so that it just reads as
'print' or 'web' for example
3) Add 'images/' before the word and '_on.png' after the word, so that it is
the location of the new background Image that shows up after the user clicks
on a link. I called this var picOnLocation.
4) Combine the new background Image location(picOnLocation) and URL line. I
called this var picOnUrl.
5) Change the css of the clicked Link's span to show up as the new
background image as specified by picOnUrl.
What I am using does work as I can see the current background disappear, but
no new background loads in. Also, when I try this: var picOnUrl =
"url('images/web_on.png')"; ,it works fine, so I think I may have an issue
with it not being able to find the background image file or perhaps my
concatenation is incorrect.
Here's my folder structure if it helps:
newofficialdesign4.html
IMAGES
- print_on.png
- web_on.png
- mot_on.png
- int_on.png
I know this is a really long post, but I am really hoping someone can help
me, so I included all the specifics. Please let me know if there are any
other questions that I can answer to help you help me.
Thanks in advance!
-Chris
--
View this message in context:
http://www.nabble.com/Need-Help-with-changing-css-on-an-object-tp22394562s27240p22394562.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Div's conflicting with each other
Hello all, I am using the jqGalScroll v2.1 Photo Gallery on my site. I have implemented the version that koesbong made at http://www.ryanbrenizer.com/wedding_portrait, but I am having an issue with Internet Explorer that I was hoping you can help me with. This is the Image Gallery in it's correct position, but it's making the buttons on the left not rollover or be clickable through the different sections anymore: http://idea-palette.com/testfolder/pagetest3e5.html This is the Image Gallery where I added a bunch of break tags before the Image Gallery in the html and it works then. I think the buttons are being affected as soon as anything is put on the right side of it: http://idea-palette.com/testfolder/pagetest3e5b.html This is another example in which I made a paragraph tag with some text and then gave that paragraph an absolute position. This works and lets me keep everything in the correct position: http://idea-palette.com/testfolder/pagetest3e5c.html What I would like to do is add an absolute position either to the ul.jqGalScroll or to the div.jqGSContainer which is in the attached jqGalScroll.css. I already tried adding the absolute position to the ul but that didn't work. I can't figure out how to give the container that is created an absolute position. I hope you can help figure this out. -Chris -- View this message in context: http://www.nabble.com/Div%27s-conflicting-with-each-other-tp21810599s27240p21810599.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Problems with creating a pager effect with a kwicks nav
Hello all,
I created a Kwicks style nav and I am trying to make each of the buttons
fade in a certain area of content.
Each of the buttons fades in their areas correctly, but after I hit one
button, it won't do anything when I hit another button after that. I'm
pretty sure it has something to do with the jquery code that is effecting
the fading in that the area is told to fadeOut and after that won't fade
back in after clicking another button.
Here's a page with the problem:
http://idea-palette.com/testfolder/pagetest3e.html
Here's the jQuery code that is effecting the fading for each content area:
$(document).ready(function() {
$("#webarea").hide();
$("#motionarea").hide();
$("#printareabutton").click(function() {
$("#motionarea > *:visible").fadeOut(500);
$("#webarea > *:visible").fadeOut(500, testertwo);
function testertwo() {
$("#printarea").fadeIn(500);
$("#areaone").fadeIn(1000);
};
});
$("#webareabutton").click(function() {
$("#motionarea > *:visible").fadeOut(500);
$("#printarea > *:visible").fadeOut(500, tester);
function tester() {
$("#webarea").fadeIn(500);
$("#printcoarea").fadeIn(1000);
};
});
$("#motionareabutton").click(function() {
$("#webarea > *:visible").fadeOut(500);
$("#printarea > *:visible").fadeOut(500, testerthree);
function testerthree() {
$("#motionarea").fadeIn(500);
$("#astairarea").fadeIn(500);
};
});
});
There are currently 3 working buttons. Also, it is the upper nav that is
having the fading issues.
I really hope you can help me out in any way! I'm totally stuck right now!
--
View this message in context:
http://www.nabble.com/Problems-with-creating-a-pager-effect-with-a-kwicks-nav-tp2165s27240p2165.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Content not fading in correctly
zeckdude wrote:
>
> Hello all,
>
> I am trying to fade in some content, but it's not working correctly. I got
> some code at the Nettuts tutorial at
> http://nettuts.com/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
> and changed it a bit so it just fades in and out.
>
> I have the page here: http://idea-palette.com/testfolder/pagetest5.html
> http://idea-palette.com/testfolder/pagetest5.html
>
> The fading sort of works, but there are a few problems.
>
> In Firefox, the page loads perfectly. When you click on the 'Second
> Content Area' button, the content loads in correctly, but the jquery that
> controlled the sprite's hover on the sidenav stops working. When you click
> back on the 'First Content Area', the content loads back in, but the
> jquery that controlled the cycle plugin I had working on the slideshow no
> longer works.
>
> In Internet Explorer, the page loads perfectly. When you click on the
> 'Second Content Area' button, the first content cuts away as well as the
> side navigation and nothing loads back in. When you click back on the
> 'First Content Area', the sidenav and content load back in, but the
> sidenav doesn't work and the jquery that controlled the cycle plugin I had
> working on the slideshow no longer works.
>
> The jquery code that is doing the fading is:
>
>
> $(document).ready(function() {
>
> $('#fadebuttons li a').click(function(){
>
> var toLoad = $(this).attr('href')+' #content';
> $('#content').fadeOut('fast',loadContent);
>
> function loadContent() {
> $('#content').load(toLoad,'',showNewContent())
> }
>
> function showNewContent() {
> $('#content').fadeIn('normal');
> }
>
> return false;
>
> });
>
> });
>
>
>
> I'm very confused. Can someone please help me?
>
>
>
--
View this message in context:
http://www.nabble.com/Content-not-fading-in-correctly-tp21576920s27240p21598095.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Simple jQuery problem with fading In/Out
Thanks for your help RSol! I did what you said, but I'm experiencing problems. In firefox, It still won't fade in the second area, and it wont fade back to the first area either. So pretty much, none of it works in Firefox. In Internet Explorer, the first area cuts away before the second area fades in. Also, after the second area fades away again, the first area just cuts back in. It seems as though the fade settings don't work on the first content area. I hope you can help me out! I have posted my new revised page with the directions you gave me at: http://www.idea-palette.com/testfolder/pagetest3c.html RSol wrote: > > > Try this: > > http://www.w3.org/1999/xhtml";> > > script> >