[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 225
  • Last Modified:

Conditional script execution

I have a javascript slide show which fades smoothly under Chrome, Firefox and Opera, but flutters during slide transition under IE and Safari.  Without going into a lengthy explanation, I want to continue using this plugin, but find a way to work around its limitations.  Is there a way to substitute a different type of transition effect (other than fade), only if the user's browser is IE or Safari?  If so, can you provide code for this?
0
ddantes
Asked:
ddantes
  • 17
  • 16
  • 2
1 Solution
 
CKY092Commented:
You can use navigator.userAgent to determine the browser being used and then change your slide show accordingly.
0
 
ddantesAuthor Commented:
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.
0
 
CKY092Commented:
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.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
ddantesAuthor Commented:
Thanks!
0
 
experts1Commented:
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;
 }
}
0
 
ddantesAuthor Commented:
Thank you.  I couldn't figure out where to insert that code.  Can you do that for me?  (file embedded). index.htm
0
 
experts1Commented:
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.

0
 
ddantesAuthor Commented:
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
                                                      
0
 
ddantesAuthor Commented:
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.
0
 
experts1Commented:
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
0
 
experts1Commented:
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
0
 
experts1Commented:
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
 }
0
 
ddantesAuthor Commented:
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.  
0
 
experts1Commented:
Is that the desired result?
0
 
ddantesAuthor Commented:
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.
0
 
ddantesAuthor Commented:
Dear experts1: Are you still engaged with this question (I hope so)?
0
 
experts1Commented:
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");
 }
0
 
ddantesAuthor Commented:
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
0
 
experts1Commented:

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!



0
 
ddantesAuthor Commented:
Thanks.  Hopefully that will eliminate any idiot-syncracies on my part.
0
 
experts1Commented:
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
0
 
ddantesAuthor Commented:
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.
0
 
experts1Commented:
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.
0
 
ddantesAuthor Commented:
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?
0
 
experts1Commented:
The concept of the basic code is to perform
the logical procedure as below:

(1) use the two boolean variables "x_sf" and "x_ms" to test and
    determine if the browser is either Safari or IE respectively.

(2) If true that the browser is either Safari or IE, then do a further
    test to determine if browser is actually Safari and if true, then
    call the jQuery Supersized function which is modified for
    Transition "3", otherwise the browser must be IE, thus call
    the jQuery Supersized function which is modified for Transition "2"

(3) If browser is neither Safari or IE, then call  the jQuery Supersized
    function which is modified for Transition "1"

Note: The actual jQuery Supersized function is located in a file
         "js/supersized.3.2.4.js", which is relatively large, while the function
         call within the index.htm header just lists the custom parameters
         which governs the behavior of the Transition.

Yes, you can modify the continuous snippet as you mentioned
with the exception that you would need to insert the  jquery function
within one of the conditional "if" scenarios as opposed to just inserting
it after the said snippet.

You may award points and submit further comments after.

So, if you need help with further modification of of index.htm then
just submit another comment on this topic and I will try to respond
as soon as I can.
0
 
ddantesAuthor Commented:
I will ask a related question so that I can test the completeness and accuracy of the answer.
0
 
experts1Commented:
Good, just submit a comment on this said question and ldentify
the new related question that I may follow-along.

Thanks
0
 
experts1Commented:
Re:  
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27431924.html

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



0
 
experts1Commented:
Also, if you comment on the original question which Tagit participated in, then
Tagit might just respond.
0
 
ddantesAuthor Commented:
Sorry, I am monitoring two questions and mixed up the Experts!  It is your response (experts1) which I am seeking.
0
 
experts1Commented:
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
0
 
ddantesAuthor Commented:
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.
0
 
ddantesAuthor Commented:
I deleted the question which erroneously referred to "tagit" and re-created a new, related question about implementing the experts1 code at
 http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27433398.html
0
 
experts1Commented:
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.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 17
  • 16
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now