![]() |
anything(Slider) width not increasing inside Javascript pop window
I am using Anything slider to scroll through tables inside a JavaScipt pop up window which opens within a page. The javaScript of Anything Slider is unable to determine the width of the first table (first slide). It shows the tabs above the popUp Window. When I click on any tab or the Right or left navigation arrow all the tables and slides work as expected.
Here is the code for Anything Slider js file: [Code] $(window).load(function(){ /* just one variable to set-up */ speed = 600; tabColor = '#069'; tabCurrent = '#09c'; /* setting the initial state of the slideshow and first image */ var picVar = $('.iStu12 li.images div.slide div.slidePanel'); totPic = picVar.length; curPicWidth = picVar.eq(0).width(); curPicHeight = picVar.eq(0).height(); totWidth = 0; /* calculate the total width of the images and set the div.slide to match */ $.each((picVar), function() { caption=$(this).attr('caption'); $('.iStu12 li.caption').append('<b>'+caption+'</b>'); totWidth = totWidth+$(this).width(); }); $('ul.iStu12 li.images div.slide').width(totWidth); current=0; var captionVar = $('.iStu12 li.caption b'); tabSet () /* resize the containing elements, left/right arrow positions and add the first image caption */ resize(curPicWidth,curPicHeight) /* monitor 'next' clicks */ $('.iStu12 li.next').click (function() { picVar = $('.iStu12 li.images div.slide div.slidePanel'); /* animate the line of images left one photo - then remove the first image from set, make it the last image then finally move the set to absolute position left:0 */ curPicWidth = picVar.eq(0).width(); curPicHeight = picVar.eq(0).height(); $('ul.iStu12 li.images div.slide').animate({left:-curPicWidth}, speed, function() { $('ul.iStu12 li.images div.slide').find('div.slidePanel:first').remove().appendTo('ul.iStu12 li.images div.slide'); $('ul.iStu12 li.images div.slide').css('left','0px'); }); Here is how I create pop up: var popupAboutStatus = 0; function loadPopupAbout(){ if(popupAboutStatus==0){ $("#popupAbout").fadeIn("slow"); popupAboutStatus = 1; } } function disablePopupAbout(){ if(popupAboutStatus==1){ $("#popupAbout").fadeOut("slow"); popupAboutStatus = 0; } } function centerPopupAbout(){ var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupAboutHeight = $("#popupAbout").height(); var popupAboutWidth = $("#popupAbout").width(); $("#popupAbout").css({ "position": "absolute", "top": windowHeight/2-popupAboutHeight/2, "left": windowWidth/2-popupAboutWidth/2 }); } [Code] As you can see the AnythingSlider javascript over writes any width set in the css. The live issue can be seen at http://gkainc.somee.com/ and choosing project tab from slideout Menu Thanks in advance. Aashish |
| All times are GMT +1. The time now is 06:00 PM. |
Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.