tag:blogger.com,1999:blog-8655233920018801732024-11-01T03:35:40.149-07:00Aslam Hindkohttp://www.blogger.com/profile/01515054524231789268noreply@blogger.comBlogger5125tag:blogger.com,1999:blog-865523392001880173.post-90961939610127797212015-03-31T06:44:00.002-07:002015-03-31T06:44:09.157-07:00<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dwyr5TfMl5qCfibsz9V44OvNXxqjq0_DWuJajUn2EKtCzGP8cLCxymcLLiR--0IKZbh0hFBQIxr0egK6yMoKQ' class='b-hbp-video b-uploaded' frameborder='0'></iframe></div> <br /></div> Aslam Hindkohttp://www.blogger.com/profile/01515054524231789268noreply@blogger.com0tag:blogger.com,1999:blog-865523392001880173.post-519098884170487932015-03-31T04:28:00.001-07:002015-03-31T04:28:32.303-07:00<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dz4XAtnoHA42hTLM9bQU3qRv7cdW6IgX0R8cK0-Yu9y_LxD1831X83KNUVhMpoSvqruDKGzA9kJv2mZiHunOg' class='b-hbp-video b-uploaded' frameborder='0'></iframe></div> <br /></div> Aslam Hindkohttp://www.blogger.com/profile/01515054524231789268noreply@blogger.com0tag:blogger.com,1999:blog-865523392001880173.post-88041819293637885072015-03-31T04:04:00.000-07:002015-03-31T04:21:27.180-07:00<div dir="ltr" style="text-align: left;" trbidi="on"> <span style="background-color: white; color: blue; font-size: x-large;"><b>HTML</b></span><div> _________________________________________________________________________________</div> <div> <br /></div> <div> <div> &lt;section class="demo"&gt;</div> <div> &nbsp; &lt;button class="next"&gt;Next&lt;/button&gt;</div> <div> &nbsp; &lt;button class="prev"&gt;Previous&lt;/button&gt;</div> <div> &nbsp; &lt;div class="container"&gt;</div> <div> &nbsp; &nbsp; &lt;div style="display: inline-block;"&gt;</div> <div> &nbsp; &nbsp; &nbsp; &lt;img src="http://placeimg.com/400/200/people"/&gt;</div> <div> &nbsp; &nbsp; &lt;/div&gt;</div> <div> &nbsp; &nbsp; &lt;div&gt;</div> <div> &nbsp; &nbsp; &nbsp;&lt;img src="http://placeimg.com/400/200/any"/&gt;</div> <div> &nbsp; &nbsp; &lt;/div&gt;</div> <div> &nbsp; &nbsp; &lt;div&gt;</div> <div> &nbsp; &nbsp; &nbsp; &lt;img src="http://placeimg.com/400/200/nature"/&gt;</div> <div> &nbsp; &nbsp; &lt;/div&gt;</div> <div> &nbsp; &nbsp; &lt;div&gt;</div> <div> &nbsp; &nbsp; &nbsp; &lt;img src="http://placeimg.com/400/200/architecture"/&gt;</div> <div> &nbsp; &nbsp; &lt;/div&gt;</div> <div> &nbsp; &nbsp; &lt;div&gt;</div> <div> &nbsp; &nbsp; &nbsp; &lt;img src="http://placeimg.com/400/200/animals"/&gt;</div> <div> &nbsp; &nbsp; &lt;/div&gt;</div> <div> &nbsp; &nbsp; &lt;div&gt;</div> <div> &nbsp; &nbsp; &nbsp; &lt;img src="http://placeimg.com/400/200/people"/&gt;</div> <div> &nbsp; &nbsp; &lt;/div&gt;</div> <div> &nbsp; &nbsp; &lt;div&gt;</div> <div> &nbsp; &nbsp; &nbsp; &lt;img src="http://placeimg.com/400/200/tech"/&gt;</div> <div> &nbsp; &nbsp; &lt;/div&gt;</div> <div> &nbsp; &lt;/div&gt;</div> <div> &lt;/section&gt;</div> <div> <br /></div> <div> &lt;div class="explanation"&gt;</div> <div> &nbsp; Building a slideshow like pattern that can accurately cycle through a number of unknown divs, forwards and backwards. Trying to use as little code as possible. Leave a comment if you see a way to do it better!</div> <div> &lt;/div&gt;</div> </div> <div> _________________________________________________________________________________</div> <div> <span style="color: orange; font-size: x-large;"><b>CSS</b></span></div> <div> _________________________________________________________________________________</div> <div> <div> .container {</div> <div> &nbsp; max-width: 400px;</div> <div> &nbsp; background-color: black;</div> <div> &nbsp; margin: 0 auto;</div> <div> &nbsp; text-align: center;</div> <div> &nbsp; position: relative;</div> <div> }</div> <div> .container div {</div> <div> &nbsp; background-color: white;</div> <div> &nbsp; width: 100%;</div> <div> &nbsp; display: inline-block;</div> <div> &nbsp; display: none;</div> <div> }</div> <div> .container img {</div> <div> &nbsp; width: 100%;</div> <div> &nbsp; height: auto;</div> <div> }</div> <div> <br /></div> <div> button {</div> <div> &nbsp; position: absolute;</div> <div> }</div> <div> <br /></div> <div> .next {</div> <div> &nbsp; right: 5px;</div> <div> }</div> <div> <br /></div> <div> .prev {</div> <div> &nbsp; left: 5px;</div> <div> }</div> </div> <div> _________________________________________________________________________________</div> <div> <b><span style="color: purple; font-size: x-large;">Java Script</span></b></div> <div> _________________________________________________________________________________</div> <div> <div> var currentIndex = 0,</div> <div> &nbsp; items = $('.container div'),</div> <div> &nbsp; itemAmt = items.length;</div> <div> <br /></div> <div> function cycleItems() {</div> <div> &nbsp; var item = $('.container div').eq(currentIndex);</div> <div> &nbsp; items.hide();</div> <div> &nbsp; item.css('display','inline-block');</div> <div> }</div> <div> <br /></div> <div> var autoSlide = setInterval(function() {</div> <div> &nbsp; currentIndex += 1;</div> <div> &nbsp; if (currentIndex &gt; itemAmt - 1) {</div> <div> &nbsp; &nbsp; currentIndex = 0;</div> <div> &nbsp; }</div> <div> &nbsp; cycleItems();</div> <div> }, 3000);</div> <div> <br /></div> <div> $('.next').click(function() {</div> <div> &nbsp; clearInterval(autoSlide);</div> <div> &nbsp; currentIndex += 1;</div> <div> &nbsp; if (currentIndex &gt; itemAmt - 1) {</div> <div> &nbsp; &nbsp; currentIndex = 0;</div> <div> &nbsp; }</div> <div> &nbsp; cycleItems();</div> <div> });</div> <div> <br /></div> <div> $('.prev').click(function() {</div> <div> &nbsp; clearInterval(autoSlide);</div> <div> &nbsp; currentIndex -= 1;</div> <div> &nbsp; if (currentIndex &lt; 0) {</div> <div> &nbsp; &nbsp; currentIndex = itemAmt - 1;</div> <div> &nbsp; }</div> <div> &nbsp; cycleItems();</div> <div> });</div> </div> <div> <br /></div> </div> Aslam Hindkohttp://www.blogger.com/profile/01515054524231789268noreply@blogger.com0tag:blogger.com,1999:blog-865523392001880173.post-38336695136087105962015-03-05T06:40:00.000-08:002015-03-05T06:40:07.649-08:00<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dzieitWydfHc2yAP6fyLQPusWvn9PXtHqvnXqbkvhDX5DSfaRgqKvULc5_F4ZLNIJ1SdU2780GhqGelTME' class='b-hbp-video b-uploaded' frameborder='0'></iframe></div> <br /></div> Aslam Hindkohttp://www.blogger.com/profile/01515054524231789268noreply@blogger.com0tag:blogger.com,1999:blog-865523392001880173.post-27260399162785538042015-03-04T07:00:00.000-08:002015-03-04T07:00:01.348-08:00<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dx3uCFzyK2QQG-V9Pxv3dfJbuyiU_jV4_SfWTyvw74giAyW74vfX60ocavZkvweHfBVKhNgPzz00ag0x0XTEA' class='b-hbp-video b-uploaded' frameborder='0'></iframe></div> <br /></div> Aslam Hindkohttp://www.blogger.com/profile/01515054524231789268noreply@blogger.com0