Solved

Javascript random and weighted display

Posted on 2013-02-05
34
535 Views
Last Modified: 2013-02-22
Hi all,

I have a bunch of elements being displayed on the slider and I would like to like to make some changes to the way they display. I would like them displayed randomly (so that a different element is displayed first on the page each time) and secondly I would like elements (1 and 2) weighed so it is twice as lightly that they will as the first element (or higher on the list) on the slider's elements.


<ul id="sb-slider" class="sb-slider">
					<li>
						<a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/slicetest.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>1</h3>
						</div>
					</li>
					<li>
						<a href="javascript:;" onClick="window.parent.jqcc.chat.joinChatroom('2','','T25saW5lIER5YWRlcnM='); ">
						<img src="images/download.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>2</h3>
						</div>
					</li>
					<li>
						<a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/writing.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>3</h3>
						</div>
					</li>
					<li>
						<a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/now.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>4</h3>
						</div>
					</li>
				</ul>

Open in new window


Thanks for your help,

D
0
Comment
Question by:TLN_CANADA
  • 18
  • 16
34 Comments
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38860604
From description of the problem, suggestions are

1. User Math.Random() function to generate a number. This number is always between
    (0 ,1) and it is a fraction.
2. Definitely number of items needs to considered in the equation. Item is always integer

Look at the example at

http://cssglobe.com/lab/random_content/02.html
0
 

Author Comment

by:TLN_CANADA
ID: 38861928
Thanks pravinasar, this looks great! Could you show me how to integrate this with the code I have above?
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38863561
In your case, id is "sb-slider"

so function should read as follows:
Basically need to replace text "tips" with "sb-slider"

Also on the example page, view the code. That will give you a better idea about integration of  this code with your requirements.
Remember this is based on jquery. Use proper caution, if you are using multiple javascript libraries.
 

this.randomtip = function(){

      var pause = 3000; // define the pause for each tip (in milliseconds)
      var length = $("#tips li").length;
      var temp = -1;            

      this.getRan = function(){
            // get the random number
            var ran = Math.floor(Math.random()*length) + 1;
            return ran;
      };
      this.show = function(){
            var ran = getRan();
            // to avoid repeating
            while (ran == temp){
                  ran = getRan();
            };
            temp = ran;
            $("#sb-slider  li").hide();      
            $("#sb-slider li:nth-child(" + ran + ")").fadeIn("fast");            
      };
      
      show(); setInterval(show,pause);
      
};

$(document).ready(function(){      
      randomtip();
});
0
 

Author Comment

by:TLN_CANADA
ID: 38866156
Thank you,

It is randomising now but there are some issues with it. The sb-description field is not appearing in the slider and when the slider first loads all of the slides appearing one underneath each other rather than just the first one. Perhaps it is something simple with rearranging the functions on the page. If you could have a look at the script I currently have that would be greatly appreciated. I could include the js fies if that would help?

Thanks so much,

D

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Slicebox - 3D Image Slidr</title>
		<meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
		<link rel="stylesheet" type="text/css" href="css/custom.css" />
		<script type="text/javascript" src="js/modernizr.custom.46884.js"></script>
	</head>
	<body>
		<div class="container">
	

			<div class="wrapper">

				<ul id="sb-slider" class="sb-slider">
					<li>
						<a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/slicetest.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>Live</h3>
						</div>
					</li>
					<li>
						<a href="javascript:;" onClick="window.parent.jqcc.chat.joinChatroom('2','','T25saW5lIER5YWRlcnM='); ">
						<img src="images/download.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>Now</h3>
						</div>
					</li>
					<li>
						<a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/writing.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>Jour</h3>
						</div>
					</li>
					<li>
						<a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/med.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>Med</h3>
						</div>
					</li>
				</ul>

				<div id="shadow" class="shadow"></div>

				<div id="nav-arrows" class="nav-arrows">
					<a href="#">Next</a>
					<a href="#">Previous</a>
				</div>

			</div><!-- /wrapper -->

		</div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.slicebox.js"></script>
		<script type="text/javascript">
		
		//the is the function that is added for randomising
		
		
		this.randomtip = function(){

      var pause = 3000; // define the pause for each tip (in milliseconds) 
      var length = $("#sb-slider li").length; 
      var temp = -1;            

      this.getRan = function(){
            // get the random number
            var ran = Math.floor(Math.random()*length) + 1;
            return ran;
      };
      this.show = function(){
            var ran = getRan();
            // to avoid repeating
            while (ran == temp){
                  ran = getRan();
            }; 
            temp = ran;
            $("#sb-slider  li").hide();      
            $("#sb-slider li:nth-child(" + ran + ")").fadeIn("fast");            
      };
      
      show(); setInterval(show,pause);
      
};

$(document).ready(function(){      
      randomtip();
});


//This is the slicer slider function
		
		
			$(function() {
				
				var Page = (function() {

					var $navArrows = $( '#nav-arrows' ).hide(),
						$shadow = $( '#shadow' ).hide(),
						slicebox = $( '#sb-slider' ).slicebox( {
							onReady : function() {

								$navArrows.show();
								$shadow.show();

							},
							orientation : 'r',
							cuboidsRandom : true
						} ),
						
						init = function() {

							initEvents();
							
						},
						initEvents = function() {

							// add navigation events
							$navArrows.children( ':first' ).on( 'click', function() {

								slicebox.next();
								return false;

							} );

							$navArrows.children( ':last' ).on( 'click', function() {
								
								slicebox.previous();
								return false;

							} );

						};

						return { init : init };

				})();

				Page.init();

			});
		</script>
	</body>
</html>	

Open in new window

0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38873869
Can you post your custom javascript file.

I did test with jquery (version 1.6), works okay.
I had to comment your script include tag.



<html lang="en">
    <head>
        <title>Slicebox - 3D Image Slidr</title>
            <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
            <link rel="stylesheet" type="text/css" href="css/slicebox.css" />
            <link rel="stylesheet" type="text/css" href="css/custom.css" />


            <!--script type="text/javascript" src="js/modernizr.custom.46884.js"></script-->
            

<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>


      </head>
      <body>
            <div class="container">
      

                  <div class="wrapper">

                        <ul id="sb-slider" class="sb-slider" style="background-color: #ff9933;">
                              <li>
                                    <a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/slicetest.jpg" alt="image1"/></a>
                                    <div class="sb-description">
                                          <h3>Live</h3>
                                    </div>
                              </li>
                              <li>
                                    <a href="javascript:;" onClick="window.parent.jqcc.chat.joinChatroom('2','','T25saW5lIER5YWRlcnM='); ">
                                    <img src="images/download.jpg" alt="image1"/></a>
                                    <div class="sb-description">
                                          <h3>Now</h3>
                                    </div>
                              </li>
                              <li>
                                    <a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/writing.jpg" alt="image1"/></a>
                                    <div class="sb-description">
                                          <h3>Jour</h3>
                                    </div>
                              </li>
                              <li>
                                    <a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/med.jpg" alt="image1"/></a>
                                    <div class="sb-description">
                                          <h3>Med</h3>
                                    </div>
                              </li>
                        </ul>

                        <div id="shadow" class="shadow"></div>

                        <div id="nav-arrows" class="nav-arrows">
                              <a href="#">Next</a>
                              <a href="#">Previous</a>
                        </div>

                  </div><!-- /wrapper -->

            </div>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
            <script type="text/javascript" src="js/jquery.slicebox.js"></script>
            <script type="text/javascript">
            
            //the is the function that is added for randomising
            
            
            this.randomtip = function(){

      var pause = 3000; // define the pause for each tip (in milliseconds)
      var length = $("#sb-slider li").length;
      var temp = -1;            

      this.getRan = function(){
            // get the random number
            var ran = Math.floor(Math.random()*length) + 1;
            return ran;
      };
      this.show = function(){
            var ran = getRan();
            // to avoid repeating
            while (ran == temp){
                  ran = getRan();
            };
            temp = ran;
            $("#sb-slider  li").hide();      
            $("#sb-slider li:nth-child(" + ran + ")").fadeIn("fast");            
      };
     
      show(); setInterval(show,pause);
     
};

$(document).ready(function(){      
      randomtip();
});


//This is the slicer slider function
            
            
                  $(function() {
                        
                        var Page = (function() {

                              var $navArrows = $( '#nav-arrows' ).hide(),
                                    $shadow = $( '#shadow' ).hide(),
                                    slicebox = $( '#sb-slider' ).slicebox( {
                                          onReady : function() {

                                                $navArrows.show();
                                                $shadow.show();

                                          },
                                          orientation : 'r',
                                          cuboidsRandom : true
                                    } ),
                                    
                                    init = function() {

                                          initEvents();
                                          
                                    },
                                    initEvents = function() {

                                          // add navigation events
                                          $navArrows.children( ':first' ).on( 'click', function() {

                                                slicebox.next();
                                                return false;

                                          } );

                                          $navArrows.children( ':last' ).on( 'click', function() {
                                                
                                                slicebox.previous();
                                                return false;

                                          } );

                                    };

                                    return { init : init };

                        })();

                        Page.init();

                  });
            </script>
      </body>
</html>
0
 

Author Comment

by:TLN_CANADA
ID: 38874446
Thank you so much for your help with this! Here are the 3 css files that are called if that helps you.

If you could show me how to weight these options so that the "Live" and the "Now' options are twice as likely to appear first on the slider that would be greatly appreciated.

Here is the custom.css

/* .shadow {
	width: 100%;
	height: 168px;
	position: relative;
	margin-top: -110px;
	background: transparent url(../images/shadow.png) no-repeat bottom center;
	background-size: 100% 100%; stretches it 
	z-index: -1;
	display: none;
}*/

.sb-description h3 {
	font-size: 15px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.sb-description h3 a {
	color: #4a3c27;
	text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

.nav-arrows {
	display: none;
}

.nav-arrows a {
	width: 42px;
	height: 42px;
	background: #cbbfae url(../images/nav.png) no-repeat top left;
	position: absolute;
	top: 50%;
	left: 2px;
	text-indent: -9000px;
	cursor: pointer;
	margin-top: -21px;
	opacity: 0.9;
	border-radius: 50%;
	box-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

.nav-arrows a:first-child{
	left: auto;
	right: 2px;
	background-position: top right;
}

.nav-arrows a:hover {
	opacity: 1;
}

.nav-dots {
	text-align: center;
	position: absolute;
	bottom: -5px;
	height: 30px;
	width: 100%;
	left: 0;
	display: none;
}

.nav-dots span {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	margin: 3px;
	background: #cbbfae;
	cursor: pointer;
	box-shadow: 
		0 1px 1px rgba(255,255,255,0.6), 
		inset 0 1px 1px rgba(0,0,0,0.1);
}

.nav-dots span.nav-dot-current {
	box-shadow: 
		0 1px 1px rgba(255,255,255,0.6), 
		inset 0 1px 1px rgba(0,0,0,0.1), 
		inset 0 0 0 3px #cbbfae,
		inset 0 0 0 8px #fff;
}

.nav-options {
	width: 70px;
	height: 30px;
	position: absolute;
	right: 70px;
	bottom: 0px;
	display: none;
}

.nav-options span {
	width: 30px;
	height: 30px;
	background: #cbbfae url(../images/options.png) no-repeat top left;
	text-indent: -9000px;
	cursor: pointer;
	opacity: 0.7;
	display: inline-block;
	border-radius: 50%;
}

.nav-options span:first-child{
	background-position: -30px 0px;
	margin-right: 3px;
}

.nav-options span:hover {
	opacity: 1;
}

Open in new window


demo.css

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Volkhov:400italic,700);

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

 General Demo Style */
body {
	background: #e4ebe9 url(../images/fancy_deboss.png) repeat top left;
	color: #444;
	font-family: "PT Sans Narrow", Arial, sans-serif;
	font-size: 11px;
	font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-width: 320px;
}

a {
	color: #000;
	text-decoration: none;
}

h1, h2, h5 {
	margin: 20px 20px 30px 20px;
	font-size: 56px;
	color: #fff;
	font-family: "Volkhov", serif;
	text-align: center;
	font-weight: 700;
	text-shadow: 1px 1px 3px #e0d1bc;
}

h1 span, h5 {
	font-size: 18px;
	display: block;
	font-style: italic;
	color: #997f5a;
	font-weight: 400;
	text-shadow: 0px 1px 1px #fff;
}

.wrapper {
	position: relative;
	max-width: 840px;
	width: 100%;
	padding: 0 50px;
	margin: 0 auto;
}

/* Header Style */
.codrops-top {
	line-height: 24px;
	font-size: 11px;
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	font-family: Cambria, Georgia, serif;
	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}

.codrops-top a {
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #333;
	display: inline-block;
}

.codrops-top a:hover {
	background: rgba(255,255,255,0.6);
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

/* More examples buttons */

.more {
	position: relative;
	clear: both;
	padding: 20px;
}

.more:before {
	content: "";
	position: absolute;
	background-color: #ddd1b6;
	box-shadow: 0 1px 0 rgba(255,255,255,0.8);
	height: 1px;
	width: 440px;
	left: 50%;
	margin-left: -220px;
	top: -10px;
}

.more ul {
	display: block;
	height: 32px;
	text-align: center;
}

.more ul li {
	display: inline-block;
	line-height: 24px;
}

.more ul li.selected a,
.more ul li.selected a:hover {
	background: #ae997a;
	color: #fff;
	text-shadow: none;
}

.more ul li a {
	text-shadow: 1px 1px 1px #fff;
	color: #555;
	background: #fbf9f5;
	padding: 2px 5px;
	margin: 0 2px;
	line-height: 18px;
	display: inline-block;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.more ul li a:hover {
	background: #8c795d;
	color: #fff;
	text-shadow: none;
}

p.info {
	font-family: "Volkhov", serif;
	font-style: italic;
	color: #997f5a;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
	padding: 0px;
	display: block;
	clear: both;
	text-align: center;
	width: 100%;
	max-wdith: 440px;
	margin: 0 auto;
}

Open in new window


and the slicebox.css

/* Slicebox Style */
.sb-slider {
	margin: 10px auto;
	position: relative;
	overflow: hidden;
	width: 100%;
	list-style-type: none;
	padding: 0;
}

.sb-slider li {
	margin: 0;
	padding: 0;
	display: none;
}

.sb-slider li > a {
	outline: none;
}

.sb-slider li > a img {
	border: none;
}

.sb-slider img {
	max-width: 100%;
	display: block;
}

.sb-description {
	padding: 10px;
	bottom: 10px;
	left: 10px;
	right: 10px;
	font-family: arial;
	z-index: 1000;
	position: absolute;
	background: #CBBFAE;
	background: rgba(190,176,155, 0.4);
	border-left: 4px solid rgba(255,255,255,0.7);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);	
	opacity: 0;
	color: #fff;

	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	-o-transition: all 200ms;
	-ms-transition: all 200ms;
	transition: all 200ms;
}

.sb-slider li.sb-current .sb-description {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);	
	opacity: 1;
}

.sb-slider li.sb-current .sb-description:hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
	filter: alpha(opacity=99);	
	background: rgba(190,176,155, 0.7);
}

.sb-perspective {
	position: relative;
}

.sb-perspective > div {
	position: absolute;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-backface-visibility : hidden;
	-moz-backface-visibility : hidden;
	-o-backface-visibility : hidden;
	-ms-backface-visibility : hidden;
	backface-visibility : hidden;
}

.sb-side {
	margin: 0;
	display: block;
	position: absolute;

	-moz-backface-visibility : hidden;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

Open in new window

0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38874537
The tag rotation is bound to number of tags, so if you want certain tags to appear twice, you have to duplicate the tag(s).
0
 

Author Comment

by:TLN_CANADA
ID: 38874586
I would prefer for them not to appear twice but rather increase the probability of them appearing first. It's okay, I could open a new question about this if you prefer? Were the css files I included of use?

Thank you,

D
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38874644
Here is a another trick you can use,

Look the definition of variable named   selectionArray
Modification to the code is documented.

 


<html lang="en">
    <head>
        <title>Slicebox - 3D Image Slidr</title>
            <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
            <link rel="stylesheet" type="text/css" href="css/slicebox.css" />
            <link rel="stylesheet" type="text/css" href="css/custom.css" />
            <!--script type="text/javascript" src="js/modernizr.custom.46884.js"></script-->
            <script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
      </head>
      <body>
            <div class="container">
      

                  <div class="wrapper">

                        <ul id="sb-slider" class="sb-slider" style="background-color: #ff9933;">
                              <li>
                                    <a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/slicetest.jpg" alt="image1" align="left"/></a>
                                    <div class="sb-description">
                                          <h3>Live</h3>
                                    </div>
                              </li>
                              <li>
                                    <a href="javascript:;" onClick="window.parent.jqcc.chat.joinChatroom('2','','T25saW5lIER5YWRlcnM='); ">
                                    <img src="images/download.jpg" alt="image1" align="left"/></a>
                                    <div class="sb-description">
                                          <h3>Now</h3>
                                    </div>
                              </li>
                              <li>
                                    <a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/writing.jpg" alt="image1" align="left"/></a>
                                    <div class="sb-description">
                                          <h3>Jour</h3>
                                    </div>
                              </li>
                              <li>
                                    <a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/med.jpg" alt="image1" align="left"/></a>
                                    <div class="sb-description">
                                          <h3>Med</h3>
                                    </div>
                              </li>
                        </ul>

                        <div id="shadow" class="shadow"></div>

                        <div id="nav-arrows" class="nav-arrows">
                              <a href="#">Next</a>
                              <a href="#">Previous</a>
                        </div>

                  </div><!-- /wrapper -->

            </div>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
            <script type="text/javascript" src="js/jquery.slicebox.js"></script>
            <script type="text/javascript">
            
            //the is the function that is added for randomising
            
            
            this.randomtip = function(){

      //
      // Define the array for element indices
      //
      var selectionArray = [1,2,3,4,1,2];

      var pause = 3000; // define the pause for each tip (in milliseconds)
      var length = $("#sb-slider li").length;
      var temp = -1;


      //
      // set the length as size of an array
      //
      length = selectionArray.length;


      this.getRan = function(){
            // get the random number
            var ran = Math.floor(Math.random()*length) + 1;
           
            //
            // Pick an element value from array
            //
            return selectionArray[ran-1];
      };
      this.show = function(){
            var ran = getRan();
            // to avoid repeating
            while (ran == temp){
                  ran = getRan();
            };
            temp = ran;
            $("#sb-slider  li").hide();      
            $("#sb-slider li:nth-child(" + ran + ")").fadeIn("fast");            
      };
     
      show(); setInterval(show,pause);
     
};

$(document).ready(function(){      
      randomtip();
});


//This is the slicer slider function
            
            
                  $(function() {
                        
                        var Page = (function() {

                              var $navArrows = $( '#nav-arrows' ).hide(),
                                    $shadow = $( '#shadow' ).hide(),
                                    slicebox = $( '#sb-slider' ).slicebox( {
                                          onReady : function() {

                                                $navArrows.show();
                                                $shadow.show();

                                          },
                                          orientation : 'r',
                                          cuboidsRandom : true
                                    } ),
                                    
                                    init = function() {

                                          initEvents();
                                          
                                    },
                                    initEvents = function() {

                                          // add navigation events
                                          $navArrows.children( ':first' ).on( 'click', function() {

                                                slicebox.next();
                                                return false;

                                          } );

                                          $navArrows.children( ':last' ).on( 'click', function() {
                                                
                                                slicebox.previous();
                                                return false;

                                          } );

                                    };

                                    return { init : init };

                        })();

                        Page.init();

                  });
            </script>
      </body>
</html>
0
 

Author Comment

by:TLN_CANADA
ID: 38874752
Thank you pravinasar for your help with this.

A couple of things I'm noticing with it. Firstly the H3 descriptions are not appearing on some of the slides. Also, on some of the slides, 2 slides appear at the same time rather than 1 at each time.

<html lang="en">
    <head>
        <title>Slicebox - 3D Image Slidr</title>
            <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
            <link rel="stylesheet" type="text/css" href="css/slicebox.css" />
            <link rel="stylesheet" type="text/css" href="css/custom.css" />
            <script type="text/javascript" src="js/modernizr.custom.46884.js"></script>
            <script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
      </head>
      <body>
            <div class="container">
      

                  <div class="wrapper">

                        <ul id="sb-slider" class="sb-slider">
					<li>
						<a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/slicetest2.png" alt="image1"/></a>
						<div class="sb-description">
							<h3>Live</h3>
						</div>
					</li>
					<li>
						<a href="javascript:;" onClick="window.parent.jqcc.chat.joinChatroom('2','','T25saW5lIER5YWRlcnM='); ">
						<img src="images/download.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>Now</h3>
						</div>
					</li>
					<li>
						<a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/writing.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>Journal</h3>
						</div>
					</li>
					<li>
						<a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/meditatenow.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>Med</h3>
						</div>
					</li>
				</ul>

                        <div id="shadow" class="shadow"></div>

                        <div id="nav-arrows" class="nav-arrows">
                              <a href="#">Next</a>
                              <a href="#">Previous</a>
                        </div>

                  </div><!-- /wrapper -->

            </div>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
            <script type="text/javascript" src="js/jquery.slicebox.js"></script>
            <script type="text/javascript">
            
            //the is the function that is added for randomising
            
            
            this.randomtip = function(){

      // 
      // Define the array for element indices
      //
      var selectionArray = [1,2,3,4,1,2];

      var pause = 3000; // define the pause for each tip (in milliseconds) 
      var length = $("#sb-slider li").length; 
      var temp = -1;


      //
      // set the length as size of an array
      //
      length = selectionArray.length;


      this.getRan = function(){
            // get the random number
            var ran = Math.floor(Math.random()*length) + 1;
            
            //
            // Pick an element value from array
            //
            return selectionArray[ran-1];
      };
      this.show = function(){
            var ran = getRan();
            // to avoid repeating
            while (ran == temp){
                  ran = getRan();
            }; 
            temp = ran;
            $("#sb-slider  li").hide();      
            $("#sb-slider li:nth-child(" + ran + ")").fadeIn("fast");            
      };
      
      show(); setInterval(show,pause);
      
};

$(document).ready(function(){      
      randomtip();
});


//This is the slicer slider function
            
            
                  $(function() {
                        
                        var Page = (function() {

                              var $navArrows = $( '#nav-arrows' ).hide(),
                                    $shadow = $( '#shadow' ).hide(),
                                    slicebox = $( '#sb-slider' ).slicebox( {
                                          onReady : function() {

                                                $navArrows.show();
                                                $shadow.show();

                                          },
                                          orientation : 'r',
                                          cuboidsRandom : true
                                    } ),
                                    
                                    init = function() {

                                          initEvents();
                                          
                                    },
                                    initEvents = function() {

                                          // add navigation events
                                          $navArrows.children( ':first' ).on( 'click', function() {

                                                slicebox.next();
                                                return false;

                                          } );

                                          $navArrows.children( ':last' ).on( 'click', function() {
                                                
                                                slicebox.previous();
                                                return false;

                                          } );

                                    };

                                    return { init : init };

                        })();

                        Page.init();

                  });
            </script>
      </body>
</html>

Open in new window


Here are the js files so you can recreate it:

jquery.slicebox.js

/**
 * jquery.slicebox.js v1.1.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2012, Codrops
 * http://www.codrops.com
 */

;( function( $, window, undefined ) {
	
	'use strict';

	/*
	* debouncedresize: special jQuery event that happens once after a window resize
	*
	* latest version and complete README available on Github:
	* https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js
	*
	* Copyright 2011 @louis_remi
	* Licensed under the MIT license.
	*/
	var $event = $.event,
	$special,
	resizeTimeout;

	$special = $event.special.debouncedresize = {
		setup: function() {
			$( this ).on( "resize", $special.handler );
		},
		teardown: function() {
			$( this ).off( "resize", $special.handler );
		},
		handler: function( event, execAsap ) {
			// Save the context
			var context = this,
				args = arguments,
				dispatch = function() {
					// set correct event type
					event.type = "debouncedresize";
					$event.dispatch.apply( context, args );
				};

			if ( resizeTimeout ) {
				clearTimeout( resizeTimeout );
			}

			execAsap ?
				dispatch() :
				resizeTimeout = setTimeout( dispatch, $special.threshold );
		},
		threshold: 50
	};

	// ======================= imagesLoaded Plugin ===============================
	// https://github.com/desandro/imagesloaded

	// $('#my-container').imagesLoaded(myFunction)
	// execute a callback when all images have loaded.
	// needed because .load() doesn't work on cached images

	// callback function gets image collection as argument
	//  this is the container

	// original: mit license. paul irish. 2010.
	// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou

	// blank image data-uri bypasses webkit log warning (thx doug jones)
	var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';

	$.fn.imagesLoaded = function( callback ) {
		var $this = this,
			deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
			hasNotify = $.isFunction(deferred.notify),
			$images = $this.find('img').add( $this.filter('img') ),
			loaded = [],
			proper = [],
			broken = [];

		// Register deferred callbacks
		if ($.isPlainObject(callback)) {
			$.each(callback, function (key, value) {
				if (key === 'callback') {
					callback = value;
				} else if (deferred) {
					deferred[key](value);
				}
			});
		}

		function doneLoading() {
			var $proper = $(proper),
				$broken = $(broken);

			if ( deferred ) {
				if ( broken.length ) {
					deferred.reject( $images, $proper, $broken );
				} else {
					deferred.resolve( $images );
				}
			}

			if ( $.isFunction( callback ) ) {
				callback.call( $this, $images, $proper, $broken );
			}
		}

		function imgLoaded( img, isBroken ) {
			// don't proceed if BLANK image, or image is already loaded
			if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) {
				return;
			}

			// store element in loaded images array
			loaded.push( img );

			// keep track of broken and properly loaded images
			if ( isBroken ) {
				broken.push( img );
			} else {
				proper.push( img );
			}

			// cache image and its state for future calls
			$.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } );

			// trigger deferred progress method if present
			if ( hasNotify ) {
				deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] );
			}

			// call doneLoading and clean listeners if all images are loaded
			if ( $images.length === loaded.length ){
				setTimeout( doneLoading );
				$images.unbind( '.imagesLoaded' );
			}
		}

		// if no images, trigger immediately
		if ( !$images.length ) {
			doneLoading();
		} else {
			$images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){
				// trigger imgLoaded
				imgLoaded( event.target, event.type === 'error' );
			}).each( function( i, el ) {
				var src = el.src;

				// find out if this image has been already checked for status
				// if it was, and src has not changed, call imgLoaded on it
				var cached = $.data( el, 'imagesLoaded' );
				if ( cached && cached.src === src ) {
					imgLoaded( el, cached.isBroken );
					return;
				}

				// if complete is true and browser supports natural sizes, try
				// to check for image status manually
				if ( el.complete && el.naturalWidth !== undefined ) {
					imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 );
					return;
				}

				// cached images don't fire load sometimes, so we reset src, but only when
				// dealing with IE, or image is complete (loaded) and failed manual check
				// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
				if ( el.readyState || el.complete ) {
					el.src = BLANK;
					el.src = src;
				}
			});
		}

		return deferred ? deferred.promise( $this ) : $this;
	};

	// global
	var $window = $( window ),
		Modernizr = window.Modernizr;

	$.Slicebox = function( options, element ) {
		
		this.$el = $( element );
		this._init( options );
		
	};

	$.Slicebox.defaults = {
		// (v)ertical, (h)orizontal or (r)andom
		orientation : 'v',
		// perspective value
		perspective : 1200,
		// number of slices / cuboids
		// needs to be an odd number 15 => number > 0 (if you want the limit higher, change the _validate function).
		cuboidsCount : 5,
		// if true then the number of slices / cuboids is going to be random (cuboidsCount is overwitten)
		cuboidsRandom : false,
		// the range of possible number of cuboids if cuboidsRandom is true
		// it is strongly recommended that you do not set a very large number :)
		maxCuboidsCount : 5,
		// each cuboid will move x pixels left / top (depending on orientation). The middle cuboid doesn't move. the middle cuboid's neighbors will move disperseFactor pixels
		disperseFactor : 0,
		// color of the hidden sides
		colorHiddenSides : '#222',
		// the animation will start from left to right. The left most cuboid will be the first one to rotate
		// this is the interval between each rotation in ms
		sequentialFactor : 150,
		// animation speed
		// this is the speed that takes "1" cuboid to rotate
		speed : 600,
		// transition easing
		easing : 'ease',
		// if true the slicebox will start the animation automatically
		autoplay : false,
		// time (ms) between each rotation, if autoplay is true
		interval: 3000,
		// the fallback will just fade out / fade in the items
		// this is the time fr the fade effect
		fallbackFadeSpeed : 300,
		// callbacks
		onBeforeChange : function( position ) { return false; },
		onAfterChange : function( position ) { return false; },
		onReady : function() { return false; }
	};

	$.Slicebox.prototype = {

		_init : function( options ) {
			
			// options
			this.options = $.extend( true, {}, $.Slicebox.defaults, options );

			this._validate();

			// all the items
			this.$items = this.$el.children( 'li' );
			
			// total number of items
			this.itemsCount = this.$items.length;
			// if there's no items return
			if(this.itemsCount === 0 ) {

				return false;

			};

			// suport for css 3d transforms and css transitions
			this.support = Modernizr.csstransitions && Modernizr.csstransforms3d;
			
			// current image index
			this.current = 0;
			
			// control if the slicebox is animating
			this.isAnimating = false;
			
			// control if slicebox is ready (all images loaded)
			this.isReady = false;
			
			// preload the images
			var self = this;
			this.$el.imagesLoaded( function() {

				// we need to hide the items except first one (current default value)
				var $current = self.$items.eq( self.current ).css( 'display', 'block' ).addClass( 'sb-current' );

				// get real size of image
				var i = new Image();
				i.src = $current.find( 'img' ).attr( 'src' );
				self.realWidth = i.width;

				// assuming all images with same size
				self._setSize();
				self._setStyle();
				self._initEvents();

				self.options.onReady();
				self.isReady = true;

				if( self.options.autoplay ) {
					
					self._startSlideshow();

				}

			});

		},
		_validate			: function( options ) {

			if( this.options.cuboidsCount < 0 ){

				this.options.cuboidsCount = 1;

			}
			else if( this.options.cuboidsCount > 15 ) {

				this.options.cuboidsCount = 15;

			}
			else if( this.options.cuboidsCount %2 === 0 ) {

				++this.options.cuboidsCount;

			}
			
			if( this.options.maxCuboidsCount < 0 ){

				this.options.maxCuboidsCount = 1;

			}
			else if( this.options.maxCuboidsCount > 15 ) {

				this.options.maxCuboidsCount = 15;

			}
			else if( this.options.maxCuboidsCount %2 === 0 ) {

				++this.options.maxCuboidsCount;

			}
			
			if( this.options.disperseFactor < 0 ) {

				this.options.disperseFactor = 0;

			}
			
			if( this.options.orientation !== 'v' && this.options.orientation !== 'h' && this.options.orientation !== 'r' ) {

				this.options.orientation = 'v';

			}

		},
		_setSize : function() {

			var $visible = this.$items.eq( this.current ).find( 'img' );

			this.size = {
				width	: $visible.width(),
				height	: $visible.height()
			};

		},
		_setStyle : function() {

			// max-width is the real size of the images
			this.$el.css( {
				'max-width' : this.realWidth
			} );

		},
		_initEvents : function() {

			var self = this;

			$window.on( 'debouncedresize.slicebox', function( event ) {

				// assuming all images with same size
				self._setSize();

			} );

		},
		_startSlideshow: function() {

			var self = this;

			this.slideshow = setTimeout( function() {

				self._navigate( 'next' );

				if ( self.options.autoplay ) {

					self._startSlideshow();

				}

			}, this.options.interval );

		},
		_stopSlideshow: function() {

			if ( this.options.autoplay ) {

				clearTimeout( this.slideshow );
				this.isPlaying = false;
				this.options.autoplay = false;

			}

		},
		_navigate : function( dir, pos ) {

			if( this.isAnimating || !this.isReady || this.itemsCount < 2 ) {

				return false;

			}

			this.isAnimating = true;
			
			// current item's index
			this.prev = this.current;

			// if position is passed
			if( pos !== undefined ) {

				this.current = pos;

			}
			// if not check the boundaries
			else if( dir === 'next' ) {

				this.current = this.current < this.itemsCount - 1 ? this.current + 1 : 0;

			}
			else if( dir === 'prev' ) {

				this.current = this.current > 0 ? this.current - 1 : this.itemsCount - 1;

			}

			// callback trigger
			this.options.onBeforeChange( this.current );

			if( !this.support ) {
				
				this._fade( dir );

			}
			else {

				this._layout( dir );
				this._rotate();
			
			}

		},
		_fade : function( dir ) {

			var self = this,
				$visible = this.$items.eq( this.prev ),
				h = $visible.find( 'img' ).height();

			this.$el.css( 'height', h );
			this.$items.css( 'position', 'absolute' );
			
			this.$items.eq( this.current ).fadeIn( this.options.fallbackFadeSpeed, function() {

				$( this ).css( 'display', 'block' ).addClass( 'sb-current' );
				self.$el.css( 'height', 'auto' );
				self.$items.css( 'position', 'relative' );
				self.isAnimating = false;

			} );
			self.$items.eq( self.prev ).removeClass( 'sb-current' ).fadeOut( this.options.fallbackFadeSpeed );

		},
		_layout : function( dir ) {

			// create a structure like this and append it to the main container (this.$el):
			// <div>	wrapper with perspective
			//   <div>
			//     <div></div> front side
			//     <div></div> back side
			//     <div></div> right side
			//     <div></div> left side
			//     <div></div> top side
			//     <div></div> bottom side
			//   </div>
			//   <div>..</div>
			//   <div>..</div>
			//   <div>..</div>
			//   ...	number of slices defined in options
			// </div>

			var orientation = this.options.orientation;

			if( orientation === 'r' ) {

				orientation = Math.floor( Math.random() * 2 ) === 0 ? 'v' : 'h';

			}

			if( this.options.cuboidsRandom ) {

				this.options.cuboidsCount = Math.floor( Math.random() * this.options.maxCuboidsCount + 1 );
			
			}
			
			this._validate();
			
			var boxStyle = {
					'width' : this.size.width,
					'height' : this.size.height,
					'perspective' : this.options.perspective + 'px'
				},
				config = $.extend( this.options, {
					size : this.size,
					items : this.$items,
					direction : dir,
					prev : this.prev,
					current : this.current,
					o : orientation
				} ),
				self = this;

			this.$box = $('<div>').addClass( 'sb-perspective' ).css( boxStyle ).appendTo( this.$el );

			this.cuboids = [];

			this.$el.css( 'overflow', 'visible' );

			for( var i = 0; i < this.options.cuboidsCount; ++i ) {

				var cuboid = new $.Cuboid( config, i );
				
				this.$box.append( cuboid.getEl() );

				this.cuboids.push( cuboid );

			}

		},
		_rotate : function() {

			// hide current item
			this.$items.eq( this.prev ).removeClass( 'sb-current' ).hide();

			for( var i = 0; i < this.options.cuboidsCount; ++i ) {

				var cuboid = this.cuboids[ i ],
					self = this;

				cuboid.rotate( function( pos ) {

					if( pos === self.options.cuboidsCount - 1 ) {

						self.$el.css( 'overflow', 'hidden' );
						self.isAnimating = false;
						self.$box.remove();
						var $current = self.$items.eq( self.current );
						$current.css( 'display', 'block' ); // show() makes it inline style
						setTimeout(function() {
							$current.addClass( 'sb-current' );
						} , 0 );
						self.options.onAfterChange( self.current );

					}

				});

			}

		},
		_destroy : function( callback ) {
			
			this.$el.off( '.slicebox' ).removeData( 'slicebox' );
			$window.off( '.slicebox' );
			callback.call();

		},
		// public methos: adds more items to the slicebox
		add : function( $items, callback ) {

			this.$items = this.$items.add( $items );
			this.itemsCount = this.$items.length;

			if ( callback ) {

				callback.call( $items );

			}

		},
		// public method: shows next image
		next : function() {

			this._stopSlideshow();
			this._navigate( 'next' );

		},
		// public method: shows previous image
		previous : function() {

			this._stopSlideshow();
			this._navigate( 'prev' );

		},
		// public method: goes to a specific image
		jump : function( pos ) {

			pos -= 1;

			if( pos === this.current || pos >= this.itemsCount || pos < 0 ) {

				return false;

			}

			this._stopSlideshow();
			this._navigate( pos > this.current ? 'next' : 'prev', pos );

		},
		// public method: starts the slideshow
		// any call to next(), previous() or jump() will stop the slideshow
		play : function() {

			if( !this.isPlaying ) {

				this.isPlaying = true;

				this._navigate( 'next' );
				this.options.autoplay = true;
				this._startSlideshow();

			}

		},
		// publicc methos: pauses the slideshow
		pause : function() {

			if( this.isPlaying ) {

				this._stopSlideshow();

			}

		},
		// public method: check if isAnimating is true
		isActive : function() {

			return this.isAnimating;

		},
		// publicc methos: destroys the slicebox instance
		destroy : function( callback ) {

			this._destroy( callback );
		
		}

	};

	$.Cuboid = function( config, pos ) {

		this.config = config;
		this.pos = pos;
		this.side = 1;
		this._setSize();
		this._configureStyles();

	};

	$.Cuboid.prototype = {

		_setSize : function() {

			this.size = {
				width : this.config.o === 'v' ? Math.floor( this.config.size.width / this.config.cuboidsCount ) : this.config.size.width,
				height : this.config.o === 'v' ? this.config.size.height : Math.floor( this.config.size.height / this.config.cuboidsCount )
			};
			// extra space to fix gaps
			this.extra = this.config.o === 'v' ? this.config.size.width - ( this.size.width * this.config.cuboidsCount ) : this.config.size.height - ( this.size.height * this.config.cuboidsCount );

		},
		_configureStyles : function() {

			// style for the cuboid element
			// set z-indexes based on the cuboid's position
			var middlepos = Math.ceil( this.config.cuboidsCount / 2 ),
				positionStyle = this.pos < middlepos ? {
					zIndex : ( this.pos + 1 ) * 100,
					left : ( this.config.o === 'v' ) ? this.size.width * this.pos : 0,
					top : ( this.config.o === 'v' ) ? 0 : this.size.height * this.pos
				} : {
					zIndex : (this.config.cuboidsCount - this.pos) * 100,
					left : ( this.config.o === 'v' ) ? this.size.width * this.pos : 0,
					top : ( this.config.o === 'v' ) ? 0 : this.size.height * this.pos
				};

			// how much this cuboid is going to move (left or top values)
			this.disperseFactor = this.config.disperseFactor * ( ( this.pos + 1 ) - middlepos );

			this.style = $.extend( {
				'-webkit-transition' : '-webkit-transform ' + this.config.speed + 'ms ' + this.config.easing,
				'-moz-transition' : '-moz-transform ' + this.config.speed + 'ms ' + this.config.easing,
				'-o-transition' : '-o-transform ' + this.config.speed + 'ms ' + this.config.easing,
				'-ms-transition' : '-ms-transform ' + this.config.speed + 'ms ' + this.config.easing,
				'transition' : 'transform ' + this.config.speed + 'ms ' + this.config.easing
			}, positionStyle, this.size );

			this.animationStyles = {
				side1 : ( this.config.o === 'v' ) ? { 'transform' : 'translate3d( 0, 0, -' + ( this.size.height / 2 ) + 'px )' } : { 'transform' : 'translate3d( 0, 0, -' + ( this.size.width / 2 ) + 'px )' },
				side2 : ( this.config.o === 'v' ) ? { 'transform' : 'translate3d( 0, 0, -' + ( this.size.height / 2 ) + 'px ) rotate3d( 1, 0, 0, -90deg )' } : { 'transform' : 'translate3d( 0, 0, -' + ( this.size.width / 2 ) + 'px ) rotate3d( 0, 1, 0, -90deg )' },
				side3 : ( this.config.o === 'v' ) ? { 'transform' : 'translate3d( 0, 0, -' + ( this.size.height / 2 ) + 'px ) rotate3d( 1, 0, 0, -180deg )' } : { 'transform' : 'translate3d( 0, 0, -' + ( this.size.width / 2 ) + 'px ) rotate3d( 0, 1, 0, -180deg )' },
				side4 : ( this.config.o === 'v' ) ? { 'transform' : 'translate3d( 0, 0, -' + ( this.size.height / 2 ) + 'px ) rotate3d( 1, 0, 0, -270deg )' } : { 'transform' : 'translate3d( 0, 0, -' + ( this.size.width / 2 ) + 'px ) rotate3d( 0, 1, 0, -270deg )' }
			};

			var measure = ( this.config.o === 'v' ) ? this.size.height : this.size.width;

			this.sidesStyles = {
				frontSideStyle : {
					width : ( this.config.o === 'v' ) ? this.size.width + this.extra : this.size.width,
					height : ( this.config.o === 'v' ) ? this.size.height : this.size.height + this.extra,
					backgroundColor : this.config.colorHiddenSides,
					transform : 'rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, ' + ( measure / 2 ) + 'px )'
				},
				backSideStyle : {
					width : this.size.width,
					height : this.size.height,
					backgroundColor : this.config.colorHiddenSides,
					transform : 'rotate3d( 0, 1, 0, 180deg ) translate3d( 0, 0, ' + ( measure / 2 ) + 'px ) rotateZ( 180deg )'
				},
				rightSideStyle : {
					width : measure,
					height : ( this.config.o === 'v' ) ? this.size.height : this.size.height + this.extra,
					left : ( this.config.o === 'v' ) ? this.size.width / 2 - this.size.height / 2 : 0,
					backgroundColor : this.config.colorHiddenSides,
					transform : 'rotate3d( 0, 1, 0, 90deg ) translate3d( 0, 0, ' + ( this.size.width / 2 ) + 'px )'
				},
				leftSideStyle : {
					width : measure,
					height : ( this.config.o === 'v' ) ? this.size.height : this.size.height + this.extra,
					left : ( this.config.o === 'v' ) ? this.size.width / 2 - this.size.height / 2  : 0,
					backgroundColor : this.config.colorHiddenSides,
					transform : 'rotate3d( 0, 1, 0, -90deg ) translate3d( 0, 0, ' + ( this.size.width / 2 ) + 'px )'
				},
				topSideStyle : {
					width : ( this.config.o === 'v' ) ? this.size.width + this.extra : this.size.width,
					height : measure,
					top : ( this.config.o === 'v' ) ? 0 : this.size.height / 2 - this.size.width / 2,
					backgroundColor : this.config.colorHiddenSides,
					transform : 'rotate3d( 1, 0, 0, 90deg ) translate3d( 0, 0, ' + ( this.size.height / 2 ) + 'px )'
				},
				bottomSideStyle : {
					width : ( this.config.o === 'v' ) ? this.size.width + this.extra : this.size.width,
					height : measure,
					top : ( this.config.o === 'v' ) ? 0 : this.size.height / 2 - this.size.width / 2,
					backgroundColor : this.config.colorHiddenSides,
					transform : 'rotate3d( 1, 0, 0, -90deg ) translate3d( 0, 0, ' + ( this.size.height / 2 ) + 'px )'
				}
			};

		},
		getEl : function() {

			this.$el = $('<div/>').css( this.style )
					.css( this.animationStyles.side1 )
					.append( $('<div/>').addClass('sb-side').css( this.sidesStyles.frontSideStyle ) )
					.append( $('<div/>').addClass('sb-side').css( this.sidesStyles.backSideStyle ) )
					.append( $('<div/>').addClass('sb-side').css( this.sidesStyles.rightSideStyle ) )
					.append( $('<div/>').addClass('sb-side').css( this.sidesStyles.leftSideStyle ) )
					.append( $('<div/>').addClass('sb-side').css( this.sidesStyles.topSideStyle ) )
					.append( $('<div/>').addClass('sb-side').css( this.sidesStyles.bottomSideStyle ) );
			
			this._showImage( this.config.prev );
			
			return this.$el;

		},
		_showImage : function( imgPos ) {

			var sideIdx,
				$item = this.config.items.eq( imgPos ),
				imgParam = {
					'background-size' : this.config.size.width + 'px ' + this.config.size.height + 'px'
				};

			imgParam.backgroundImage = 'url(' + $item.find( 'img' ).attr('src') + ')';
			
			switch( this.side ) {

				case 1 : sideIdx = 0; break;
				case 2 : sideIdx = ( this.config.o === 'v' ) ? 4 : 2; break;
				case 3 : sideIdx = 1; break;
				case 4 : sideIdx = ( this.config.o === 'v' ) ? 5 : 3; break;

			};

			imgParam.backgroundPosition = ( this.config.o === 'v' ) ? - ( this.pos * this.size.width ) + 'px 0px' : '0px -' + ( this.pos * this.size.height ) + 'px';
			this.$el.children().eq( sideIdx ).css( imgParam );

		},
		rotate : function( callback ) {

			var self = this, animationStyle;

			setTimeout(function() {

				if( self.config.direction === 'next' ) {

					switch( self.side ) {
						case 1 : animationStyle = self.animationStyles.side2; self.side = 2; break;
						case 2 : animationStyle = self.animationStyles.side3; self.side = 3; break;
						case 3 : animationStyle = self.animationStyles.side4; self.side = 4; break;
						case 4 : animationStyle = self.animationStyles.side1; self.side = 1; break;
					};
				
				}
				else {

					switch( self.side ) {
						case 1 : animationStyle = self.animationStyles.side4; self.side = 4; break;
						case 2 : animationStyle = self.animationStyles.side1; self.side = 1; break;
						case 3 : animationStyle = self.animationStyles.side2; self.side = 2; break;
						case 4 : animationStyle = self.animationStyles.side3; self.side = 3; break;
					};

				}
				
				self._showImage( self.config.current );
				
				var animateOut 	= {}, animateIn	= {};
				
				if( self.config.o === 'v' ) {

					animateOut.left = '+=' + self.disperseFactor + 'px';
					animateIn.left = '-=' + self.disperseFactor + 'px';
				
				}
				else if( self.config.o === 'h' ) {

					animateOut.top = '+=' + self.disperseFactor + 'px';
					animateIn.top = '-=' + self.disperseFactor + 'px';
				
				}

				self.$el.css( animationStyle ).animate( animateOut, self.config.speed / 2 ).animate( animateIn, self.config.speed / 2 , function() {
					
					if( callback ) {

						callback.call( self, self.pos );

					}

				});

			}, this.config.sequentialFactor * this.pos + 30 );

		}

	};
	
	var logError = function( message ) {

		if ( window.console ) {

			window.console.error( message );
		
		}

	};
	
	$.fn.slicebox = function( options ) {

		var self = $.data( this, 'slicebox' );
		
		if ( typeof options === 'string' ) {
			
			var args = Array.prototype.slice.call( arguments, 1 );
			
			this.each(function() {
			
				if ( !self ) {

					logError( "cannot call methods on slicebox prior to initialization; " +
					"attempted to call method '" + options + "'" );
					return;
				
				}
				
				if ( !$.isFunction( self[options] ) || options.charAt(0) === "_" ) {

					logError( "no such method '" + options + "' for slicebox self" );
					return;
				
				}
				
				self[ options ].apply( self, args );
			
			});
		
		} 
		else {
		
			this.each(function() {
				
				if ( self ) {

					self._init();
				
				}
				else {

					self = $.data( this, 'slicebox', new $.Slicebox( options, this ) );
				
				}

			});
		
		}
		
		return self;
		
	};
	
} )( jQuery, window );

Open in new window


modernizr.custom.46884.js

/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
 * Build: http://modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load
 */
;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["&#173;",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.csstransforms=function(){return!!F("transform")},q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};

Open in new window


Thanks,

D
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38875721
Definitely some resources are not getting loaded.

Which browser you use ?

Do you use chrome or firefox. Both of these have a nice debugging tools.

Can you post the public  URL to you site ?
0
 

Author Comment

by:TLN_CANADA
ID: 38877226
Hi pravinasar,

I've tried it on FF and Chrome but it gives the same errors. Unfortunately I can't provide you with a live link as it's a private website I'm working on. I've opened the debugging tools but can't see from this what the issue might be.  Would you be able to recreate it from the files I've sent you? I think you should have all of them.

Thank you,

D
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38877824
In chrome, inspect the element.
When a debug  panel pop-ups, goto console panel and see the errors.

and posts these errors.

Alternately, undo the changes for weighted repeats for a certain tags, and try.

I duplicated the your setup (css, js files,) I have no problems.
0
 

Author Comment

by:TLN_CANADA
ID: 38878235
I wonder could I pm you the link to the site rather than posting it here so you could see it ?
0
 

Author Comment

by:TLN_CANADA
ID: 38879313
Hi pravinasar,

It gives no errors in the console.

Thanks,

D
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38879892
I am stumped.

As you posted earlier, it used to work before incorporating the changes related to weighted selection of list items.
0
 

Author Comment

by:TLN_CANADA
ID: 38881370
Okay pravinasar, I will test this today without the weighted elements to make sure it's working correctly and get back to you.
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

Author Comment

by:TLN_CANADA
ID: 38882639
Hi pravinasar, I retried this on FF and Chrome using the old code here:

<script type="text/javascript">
            
            //the is the function that is added for randomising
            
            
            this.randomtip = function(){

      var pause = 3000; // define the pause for each tip (in milliseconds) 
      var length = $("#sb-slider li").length; 
      var temp = -1;            

      this.getRan = function(){
            // get the random number
            var ran = Math.floor(Math.random()*length) + 1;
            return ran;
      };
      this.show = function(){
            var ran = getRan();
            // to avoid repeating
            while (ran == temp){
                  ran = getRan();
            }; 
            temp = ran;
            $("#sb-slider  li").hide();      
            $("#sb-slider li:nth-child(" + ran + ")").fadeIn("fast");            
      };
      
      show(); setInterval(show,pause);
      
};

$(document).ready(function(){      
      randomtip();
});


//This is the slicer slider function
            
            
                  $(function() {
                        
                        var Page = (function() {

                              var $navArrows = $( '#nav-arrows' ).hide(),
                                    $shadow = $( '#shadow' ).hide(),
                                    slicebox = $( '#sb-slider' ).slicebox( {
                                          onReady : function() {

                                                $navArrows.show();
                                                $shadow.show();

                                          },
                                          orientation : 'r',
                                          cuboidsRandom : true
                                    } ),
                                    
                                    init = function() {

                                          initEvents();
                                          
                                    },
                                    initEvents = function() {

                                          // add navigation events
                                          $navArrows.children( ':first' ).on( 'click', function() {

                                                slicebox.next();
                                                return false;

                                          } );

                                          $navArrows.children( ':last' ).on( 'click', function() {
                                                
                                                slicebox.previous();
                                                return false;

                                          } );

                                    };

                                    return { init : init };

                        })();

                        Page.init();

                  });
            </script>

Open in new window


but the same issue is happening so I guess it doesn't have anything to do with the newer function you wrote for this. If you could send me an email address I could PM you the link so you can see the page on the site. There are no errors on the console on this version either.

Thanks for your help,

D
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38883275
Publishing the email address through EE is against the policy.

Goto

http://www.experts-exchange.com/M_3560142.html

and look for my contact information
0
 

Author Comment

by:TLN_CANADA
ID: 38883361
Thanks, I sent you an email now :)
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38884340
Try

cuboidsRandom : false


The random image pickup functions are conflicting
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38884406
Ignore my last comment about

cuboidsRandom : false

Stand by for an update.

Definitely it is conflict (of random image pickup function and slicebox image rotation function)
0
 

Author Comment

by:TLN_CANADA
ID: 38885682
Thanks pravinasar.
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38891659
After duplicating the your source code and set up (css, javascript files, etc.),  it is evident the
slicebox  _startSlideshow function with autoPlay option and random  list item display code are conflicting and running in parallel

As a result, some times you end up seeing two images , as each of these functions try to manage the display of list item (which has image, caption and link)

That means random image pick up code as it exists today can not used. This will need to be plugged into slicebox autoplay code.
0
 

Author Comment

by:TLN_CANADA
ID: 38892180
Sorry, I just realised I should post the response here :)

Thank you very much Pravin. Would it be possible to make one small change to this. Can we have it so that certain options are weighted to appear closer to the start but they will only appear a second time after the slider has went through all of the slides the first time?
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38892958
Now this adds different set of rules and definitely scope creep to the original problem statement.

It can be done. It is matter of keeping the scores (which appeared first, total number of items and checking them off once they appear
0
 

Author Comment

by:TLN_CANADA
ID: 38894353
Okay  pravinasar,

I understand, would you like me to open a new question about the second part of this?

Thanks for your help,

Derek
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38906395
Let me know, what are your expectation.

If you are satisfied with the answer, please close this one.
0
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 500 total points
ID: 38906401
Forgot to attach the file.
jquery.slicebox.js
0
 

Author Comment

by:TLN_CANADA
ID: 38912855
Thank you very much pravinasar. Would it be possible to change this slightly so it randomises the display on the first iteration also?

If you like I can open a new question about this and post the link here?

Thanks again for your help,

D
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38913519
Please close this one.

I have been very  accommodative about the requirements creep.
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38914117
Your last request if totally opposite of the request posted on 2013-02-15 at 03:20:50


>>Would it be possible to make one small change to this. Can we have it so that certain >>options are weighted to appear closer to the start but they will only appear a second time >>after the slider has went through all of the slides the first time?
0
 

Author Comment

by:TLN_CANADA
ID: 38915124
Thanks pravinasar, yes I think you misunderstood my requirement from this sentence, I could have elaborated to avoid confusion :)

Thanks for your help with all of this, it is appreciated.
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 38918747
Thanks,
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now