Conditional script execution

You can use navigator.userAgent to determine the browser being used and then change your slide show accordingly.

Thank you for your comment.  Can you provide specific code?   Here is the code which determines the transition effect:

transition:  1, // 0-None, 1-Fade, 2-Slide Top

Suppose I want "fade" in general, but "Slide Top" for IE and Safari.

I have to leave right now, however if no one else has helped you by the time I get back, I'll work up some sample code for you.

Thanks!

Try method below:

 function fadeTransition() {
 var = x_sf = navigator.userAgent.indexOf(' Safari/');
 var = x_ms;
 if (navigator.appName.substring(0,9) == "Microsoft"){
    x_ms=true;}else{x_ms=false;
 }
 if (x_sf || x_ms) {
 // Transition FADE code for Safari or IE Here;
 } else {
 // Transition FADE code for Chrome, Firefox and Opera Etc.. Here;
 }
}

Thank you.  I couldn't figure out where to insert that code.  Can you do that for me?  (file embedded). index.htm

My previous answer outlined the method to achieve your required functionality.

Also, your last request would seem to be a new question.

However, if you do know the name of the JS functions to call for the two different transition
fade codes then I may be able to assist with where to place the said function call:

Your page is very complex.

Thank you for your offer. Below is the javascript function for the slide show.   Let's use transition:1 for Chrome, Firefox, etc. and transition:2 for IE and Safari.


jQuery(function($){
$.supersized({
// Functionality
slideshow:   1,      //       Slideshow on/off
autoplay:       1,      // Slideshow starts playing automatically
start_slide:   1,      // Start slide (0 is random)
stop_loop:      0,      // Pauses slideshow on last slide
random:       0,      // Randomize slide order (Ignores start slide)
slide_interval:   3000,      // Length between transitions
transition:   1,       // 0-None, 1-Fade, 2-Slide Top
transition_speed:1000,      // Speed of transition
new_window:1,      // Image links open in new window/tab
pause_hover:   0,      // Pause slideshow on hover
keyboard_nav:   1,      // Keyboard navigation on/off
performance:    3,      // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed                 // (Only works for Firefox/IE, not Webkit)
image_protect: 1,       // Disables image dragging and right click with Javascript
                                                      

BTW, if you prefer that I ask this as a separate question, I will do so. Or, I don't mind awarding points for your answer and awaiting your further comments regarding where to insert code.

I tweaked the basic code to ensure proper functionality as below:

Also, I inserted the code in attached file new_index.html, but you
will need to modify the specific parameters of the jQuery function
for the two different TRANSITION codes.

Please see attached new_index.html

--------------
BASIC code to determine browser type:

 var x_sf;
 var x_ms;
 if (navigator.appName.substring(0,9) == "Microsoft"){
    x_ms=true;}else{x_ms=false;
 }
 if (navigator.userAgent.indexOf(' Safari/') > 1){
    x_sf=true;}else{x_sf=false;
 }
 if (x_sf || x_ms) {
 // Transition FADE code for Safari or IE Here;
 // MODIFY as need
 } else {
 // Transition FADE code for Chrome, Firefox and Opera Etc.. Here;
 // MODIFY as need
 }


new-index.htm

Sorry typo in previous.

 Please see attached updated new_index.html

--------------
BASIC code to determine browser type:

 var x_sf;
 var x_ms;
 if (navigator.appName.substring(0,9) == "Microsoft"){
    x_ms=true;}else{x_ms=false;
 }
 if (navigator.userAgent.indexOf(' Safari/') > 1){
    x_sf=true;}else{x_sf=false;
 }
 if (x_sf || x_ms) {
 // Transition FADE code for Safari or IE Here;
 // MODIFY as need
 } else {
 // Transition FADE code for Chrome, Firefox and Opera Etc.. Here;
 // MODIFY as need
 }

new-index.htm

Again......!

new_index.html is ok, but basic code should be

Line 6:  if (navigator.userAgent.indexOf(' Safari/') > 0){

BASIC code to determine browser type:

 var x_sf;
 var x_ms;
 if (navigator.appName.substring(0,9) == "Microsoft"){
    x_ms=true;}else{x_ms=false;
 }
 if (navigator.userAgent.indexOf(' Safari/') > 0){
    x_sf=true;}else{x_sf=false;
 }
 if (x_sf || x_ms) {
 // Transition FADE code for Safari or IE Here;
 // MODIFY as need
 } else {
 // Transition FADE code for Chrome, Firefox and Opera Etc.. Here;
 // MODIFY as need
 }

Thank you for all your work!  When I open the new index file in IE, the slide show does not appear.  In Firefox, Chrome and Opera, where the transition is "1", which is "fade", the slide show fades.  In Safari, where the transition is "2", which is "slide top", the slide show also fades.  

Is that the desired result?

Not entirely.  The desired result is for transition 1 to work under Chrome, Firefox and Opera, and for transition 2 to work under IE and Safari.  The performance matches this under Chrome, Firefox and Opera.  On the other hand, no transition (and no images) appear under IE, and the wrong transition appears under Safari.

Dear experts1: Are you still engaged with this question (I hope so)?

Assuming that were successful with isolating  the transition modes
as below:
(1)  Chrome, Firefox and Opera
(2)  IE and Safari

If Safari is not behaving as expected, then you might need a separate
transition for Safari (transition 3), which would enable you to tweak
the parameters specific to Safari as below:
(1)  Chrome, Firefox and Opera
(2)  IE
(3)  Safari

 var x_sf;
 var x_ms;
 if (navigator.appName.substring(0,9) == "Microsoft"){
    x_ms=true;}else{x_ms=false;
 }
 if (navigator.userAgent.indexOf(' Safari/') > 0){
    x_sf=true;}else{x_sf=false;
 }
 if (x_sf || x_ms) {
   if(x_sf) {
 // TRANSITION: 3
 // Transition FADE code for Safari or IE Here;
 // MODIFY as need
 alert("Safari");
       } else {
 // TRANSITION: 2
 // Transition FADE code for Microsoft or IE Here;
 // MODIFY as need
 alert("Internet Explorer");
       }
 } else {
 // TRANSITION: 1
 // Transition FADE code for Chrome, Firefox and Opera Etc.. Here;
 // MODIFY as need
 alert("Chrome, Firefox and Opera");
 }

Thank you for that code.  I'm assuming that code goes before a single instance of the Supersized function?  In the index-new file which you previously transmitted, the following code was inserted before the first instance of the Supersized function:
 var x_sf;
 var x_ms;
 if (navigator.appName.substring(0,9) == "Microsoft"){
    x_ms=true;}else{x_ms=false;
 }
 if (navigator.userAgent.indexOf(' Safari/') > 0){
    x_sf=true;}else{x_sf=false;
 }
 if (x_sf || x_ms) {
 // Transition FADE code for Safari or IE Here;
 // MODIFY as need

and then this code was inserted before a second instance of the Supersized function:
} else {
 // Transition FADE code for Chrome, Firefox and Opera Etc.. Here;
 // MODIFY as need

Just to make sure we are on the same page,
later tonight I will update the index_new file
to includet the additional TRANSITION for Safari.

Watch out for it later, have to run now!

Thanks.  Hopefully that will eliminate any idiot-syncracies on my part.

Ok, see attached updated_new_index.htm file.

Note I changed the transition number for relevant Supersized functions
so you will need to fine-tune to your specs.

Also you should comment out the ALERT lines after testing is complete.

I made the basic code a little clearer as below:

 var x_sf;
 var x_ms;
 if (navigator.appName.substring(0,9) == "Microsoft"){
    x_ms=true;}else{x_ms=false;
 }
 if (navigator.userAgent.indexOf(' Safari/') > 0){
    x_sf=true;}else{x_sf=false;
 }
 if (x_sf || x_ms) {
   if(x_sf) {
 // TRANSITION: 3
 // Transition FADE code for Safari Here;
 // MODIFY as need
 alert("Safari");
       } else {
 // TRANSITION: 2
 // Transition FADE code for Microsoft IE Here;
 // MODIFY as need
 alert("Microsoft");
       }
 } else {
 // TRANSITION: 1
 // Transition FADE code for Chrome, Firefox and Opera Etc.. Here;
 // MODIFY as need
 alert("Chrome, Firefox and Opera");
 }

updated-new-index.htm

Thank you for the updated file.  I commented out the three alerts. Unfortunately, the behavior is the same as I reported  previously (10/31/11 09:24 AM, ID: 37059003).  No images or transition under IE, appropriate transition under Firefox, and inappropriate transtition (fade) under Safari.

Sorry but I do not have a clue about how the jQuery Transition
function works.

jQuery actually encapsulates basic JS functions into custom
functions which makes it difficult to and debug and modify
jQuery applications.

However, you could challenge yourself to build your own transition
function maybe using adobe flash or some other app.

Let me know how it works out.

Understood.  But before I abandon all you have done here, please clarify one crucial point where I am confused.  Your basic code addresses all three transition types in one continuous snippet.  But the index file which you sent me expresses each transition type juxtaposed with the entire jQuery function for the slide show, so there are three instances of the jQuery function.  These two presentations seem inconsistent, so could you clarify this?   Can I take your continuous snippet, modified as needed and with alerts commented, and insert it on my index page before the jquery function?

I will ask a related question so that I can test the completeness and accuracy of the answer.

Good, just submit a comment on this said question and ldentify
the new related question that I may follow-along.

Thanks

https://www.experts-exchange.com/questions/27431924/Implementing-Tagit's-conditional-slide-transition-code.html

Re:  
https://www.experts-exchange.com/questions/27431924/Implementing-Tagit's-conditional-slide-transition-code.html

I will follow the responses and if you need my input just
submit a further comment on this here question

Also, if you comment on the original question which Tagit participated in, then
Tagit might just respond.

Sorry, I am monitoring two questions and mixed up the Experts!  It is your response (experts1) which I am seeking.

Ok, I will be away from here for awhile (some hours), but please let me know
if you find another Transition function which you would like to try
for Safari and IE.

Then I will be able to assist with integration of that function within
your index.htm code based on your current new question.

Later

Thank you.  The transition functions in your previous code are fine (1,2 and 3)  I tested them, and each one is obviously distinct.  What remains is to implement the conditional application of those distinct modes so that they actually perform under the respective conditions.

I deleted the question which erroneously referred to "tagit" and re-created a new, related question about implementing the experts1 code at
 https://www.experts-exchange.com/questions/27433398/Implementing-the-conditional-transition-code-from-experts1.html

Ok, to go forward with the new question I guess you will
first need to find and test a new JS transition code/script
which works to your satisfaction for Safari and IE, then post
said code/script in new question.

Then myself or some other expert will respond to how to
integrate new code/script in new question.