We Keep Coding

Image is overlapping content after resizing

I tried to create JS function that resize image by clicking on it. It works but I have problem with overlapping content. After I click on image it will resize and overlap content above and under my image I tried to set width, height, position(absolute) but nothing works. I want to push the content away from image.
let img = document.getElementById("changeImg");
// Function to increase image size
function scaleupImg() {
// Set image size to 2 times original
img.style.transform = "scale(2)";
// Animation effect
img.style.transition = "transform 0.25s ease";
}
#changeImg {
width: 50%;
height: 50%;
padding: 10px;
margin: 10px;
}
.cool-icon-box {
width: 100%;
height: 1000%;
padding: 10px;
margin: 10px;
}
<section>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra cursus ex, eget auctor lectus volutpat sed. Maecenas vel ornare arcu.</p>
<div class="cool-icon-box">
<img id="changeImg" src="https://3.bp.blogspot.com/-7x5c_f1yzsQ/XHv9FZKHrEI/AAAAAAAADrE/4iGl9Lm6K2odX4SdWbU_RN6gZesx4IaGACEwYBhgL/s1600/html.jpg" alt="" onclick="scaleupImg()">
</div>
</section>
<section>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra cursus ex, eget auctor lectus volutpat sed. Maecenas vel ornare arcu.</p>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

The css scale() function will always overlay neighboring elements. Try this..
let img = document.getElementById("changeImg");
// Function to increase image size
function scaleupImg() {
// Set image size to 2 times original
img.style = "height:100%;width:100%";
// Animation effect
img.style.transition = "transform 0.25s ease";
}

Set transition on the image element in the CSS with width as the property to transition. In your code, remove the setting of the transition. When clicking on the image, all you need to do is apply img.style.width = "100%".
The problem with using scale is it scales the image in place, thus, it can overlap other elements.
let img = document.getElementById("changeImg");
// Function to increase image size
function scaleupImg() {
// Set image size to 2 times original
img.style.width = "100%";
}
#changeImg {
width: 50%;
height: 50%;
padding: 10px;
margin: 10px;
transition:width 0.25s ease;
}
.cool-icon-box {
width: 100%;
height: 1000%;
padding: 10px;
margin: 10px;
}
<section>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra cursus ex, eget auctor lectus volutpat sed. Maecenas vel ornare arcu.</p>
<div class="cool-icon-box">
<img id="changeImg" src="https://3.bp.blogspot.com/-7x5c_f1yzsQ/XHv9FZKHrEI/AAAAAAAADrE/4iGl9Lm6K2odX4SdWbU_RN6gZesx4IaGACEwYBhgL/s1600/html.jpg" alt="" onclick="scaleupImg()">
</div>
</section>
<section>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra cursus ex, eget auctor lectus volutpat sed. Maecenas vel ornare arcu.</p>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

That is, because positioning by position: relative and changes to the element by the transform-property are only applied after the element has been inserted into the DOM.
By that I mean that visual changes of the elements achieved by using position: relative in combination with the top-, left-, right- and bottom-property as well as by using the transform-property do not affect the layout of its parent or its siblings. These changes only affect the element itself and its children.

Image max height and max width while preserving aspect ratio

Is it possible to give max-height and max-width to an image while preserving aspect ratio without using js?
For example,
I want an image to be with a height of 38px and the width auto.
If the width is higher than 200px, I want the width to be 200px and the height auto.
If it's not possible without js, does anyone have an idea how to do it with js and without resizing the image after it's already loaded?

You can nest the image in a 200x38 container, then set the max-width and max-height of the image to 100%. Here is a working snippet (I have included JS to make it interactive, but it is not necessary. Try resizing the container using the sliders):
var width = document.getElementById("width");
var height = document.getElementById("height");
var widthInput = document.getElementById("widthInput");
var heightInput = document.getElementById("heightInput");
var imageContainer = document.querySelector("div");
widthInput.addEventListener("input", function() {
width.innerHTML = this.value + "px";
imageContainer.style.width = this.value + "px";
});
heightInput.addEventListener("input", function() {
height.innerHTML = this.value + "px";
imageContainer.style.height = this.value + "px";
});
div {
width: 200px;
height: 200px;
border: 1px dashed #000;
}
.image {
display: block;
max-width: 100%;
max-height: 100%;
background: #333;
}
<div>
<img class="image" src="https://via.placeholder.com/400"/>
</div>
<br/>
<label>Width: <span id="width">200px</span></label>
<br/>
<input id="widthInput" type="range" min="0" max="400"/>
<br/>
<label>Height: <span id="height">200px</span></label>
<br/>
<input id="heightInput" type="range" min="0" max="400"/>
You can notice that however you change the dimensions of the container, the image is still contained within it. By setting the container to 200px wide by 38px tall, you can force the image to stay within the limits 0px ≤ width ≤ 200px and 0px ≤ height ≤ 38px.

There is a built in CSS style called max-width and max-height and I really do not think min-width exists, incase you are wondering. You can refer to the example below to understand better. Also I am using text instead of an image, but you should get the idea.
I have nested the actual div instead another div so you could play around with the resizing.
#con {
resize: both;
overflow: auto;
}
#box {
/*Here you could say auto instead*/
height: 200px;
max-width: 200px;
}
<!DOCTYPE html />
<html>
<head></head>
<body>
<div id="con">
<div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus auctor ipsum, in convallis mi lobortis in. Phasellus molestie suscipit rutrum. Duis et convallis lectus. Etiam id urna massa. Nulla sagittis erat nec arcu rutrum elementum. Vestibulum blandit erat vestibulum, ullamcorper augue vitae, accumsan mi. Sed consectetur, quam vel efficitur interdum, ante ligula interdum justo, a dictum ligula tortor sed nunc. Cras eget magna ac urna imperdiet laoreet eget sed ante. Vivamus condimentum tortor sit amet diam elementum malesuada sed sed neque. Vestibulum et magna mollis, consequat nibh ut, facilisis orci. Phasellus fermentum sodales libero, et vehicula enim ornare ut. Donec non bibendum metus. Cras hendrerit, quam a pellentesque varius, tortor nunc maximus lectus, at gravida diam ipsum ut metus. Etiam orci felis, dapibus id cursus eu, dapibus ut augue. Proin a leo viverra, tempus ipsum nec, lacinia lacus. Maecenas id dolor nec neque lobortis interdum quis quis nisi.</div>
</div>
</body>
</html>

Using both width auto and height auto will give to following code. To center horizontal I used the align-items center of the flexbox.
.container,
.container * {
box-sizing: border-box;
}
.container {
display: flex;
width: 800px;
margin: 10px auto;
}
.img {
display: flex;
align-items: center;
width: 25%;
height: 150px;
border: 2px solid silver;
}
.img img {
display: block;
border: 0;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
margin: auto;
}
<div class="container">
<div class="img">
<img src="http://placekitten.com/200/300" alt="">
</div>
<div class="img">
<img src="http://placekitten.com/300/200" alt="">
</div>
<div class="img">
<img src="http://placekitten.com/250/350" alt="">
</div>
<div class="img">
<img src="http://placekitten.com/350/200" alt="">
</div>
</div>

You have to use max-width and height and object-fit CSS properties for image.. see example
.img img {
max-width: 200px;
height: 38px;
object-fit: contain;
object-position: left;
}
<div class="img"><img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png"></div>
Hope it works... if any question comment pls

Here are 2 examples of the solution I think would work, the first image has less than width: 200px; and the second one has more than width: 200px;
Again, I'm not sure if it would work for you, but I think it would, and if it doesn't I would love to know why.
<style>
img {
max-width: 200px;
height: auto;
}
</style>
<img src="https://dummyimage.com/180x400/666/fff.jpg" alt="test">
<br>
<img src="https://images.pexels.com/photos/5686476/pexels-photo-5686476.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="test 2">

Specifying height or width will keep the aspect ratio. Specifying both the max-height and max-width will keep the aspect ratio. Specifying height and max-height makes no sense. Specifying height and max-width cannot guarantee your aspect ratio.

Responsive full screen video below fixed top navbar

How can I have a full sized responsive HTML5 video under the bootstrap's fixed top nav bar?
This is my sample code:
<nav><!-- navbar goes here --></nav>
<div class="container">
<div style="width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<video controls="" style="height: auto; width: 100%" autoplay="">
<source src="videos/myvideo.mov">
</video>
</div>
</div>
After searching through many questions, the above video div could actually fits my video completely on the window (which actually moves my video to middle of the body and scales to fit entire window), so I thought if I could adjust the transform values to something else would work.
But nav bar stays above video and there is a cut off of video on the top.
Is there any way to make my video fit completely under the navbar?
Should I use the media queries and set fixed width & height of video & its container? Is that right way?
Could be like this http://jsfiddle.net/mgmilcher/8R7Xx/sho/ but this hides part of video on the tap by navbar

You can easily do this by calculating your header height, and setting it as margin-top on your video-container on init as well as on resize.
This is your updated fiddle
Update your code like so:
function scaleVideoContainer() {
var navbarHeight = $('.navbar-fixed-top').height() + 'px',
height = $(window).height(),
unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css({
'margin-top': navbarHeight,
'height': unitHeight
});
}

If you using bootstrap then they have own responsive embedded class. Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
Rules are directly applied to , , , and elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.
Pro-Tip! You don't need to include frameborder="0" in your s as we override that for you.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
OR
With out bootstrap
Create a container div around the iframe code and give it a class eg:
<div class="video-container"><iframe.......></iframe></div>
Add in the CSS:
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
The first CSS declarations target the video container and the second target what is in the container, in this case it's the iframe, you can also apply this to objects and embed elements.
That's it the video will now scale as the viewport is resized, the magic element is the padding-bottom rule of 56.25%, this figure is reached by using the video's aspect ratio of 16*9, so 9 divided by 16 = 0.5625 or 56.25%, full explanation in alistapart article.
Also get same out put using JS.
function scaleVideoContainer() {
var navbarHeight = $('.navbar-fixed-top').height() + 'px',
height = $(window).height(),
unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css({
'margin-top': navbarHeight,
'height': unitHeight
});
}
Here's your updated fiddle.
/** Document Ready Functions **/
/********************************************************************/
$(document).ready(function() {
// Resive video
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
scaleVideoContainer();
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
/** Reusable Functions **/
/********************************************************************/
function scaleVideoContainer() {
var navbarHeight = $('.navbar-fixed-top').height() + 'px';
var height = $(window).height();
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css({
'margin-top': navbarHeight,
'height': unitHeight
});
}
function initBannerVideoSize(element) {
$(element).each(function() {
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element) {
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
videoWidth,
videoHeight;
console.log(windowHeight);
$(element).each(function() {
var videoAspectRatio = $(this).data('height') / $(this).data('width'),
windowAspectRatio = windowHeight / windowWidth;
if (videoAspectRatio > windowAspectRatio) {
videoWidth = windowWidth;
videoHeight = videoWidth * videoAspectRatio;
$(this).css({
'top': -(videoHeight - windowHeight) / 2 + 'px',
'margin-left': 0
});
} else {
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({
'margin-top': 0,
'margin-left': -(videoWidth - windowWidth) / 2 + 'px'
});
}
$(this).width(videoWidth).height(videoHeight);
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .poster img {
width: 100%;
bottom: 0;
position: absolute;
}
.video-container .filter {
z-index: 100;
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 100%;
}
.video-container .title-container {
z-index: 1000;
position: absolute;
top: 35%;
width: 100%;
text-align: center;
color: #fff;
}
.video-container .description .inner {
font-size: 1em;
width: 45%;
margin: 0 auto;
}
.video-container .link {
position: absolute;
bottom: 3em;
width: 100%;
text-align: center;
z-index: 1001;
font-size: 2em;
color: #fff;
}
.video-container .link a {
color: #fff;
}
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company Name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Services
</li>
<li class="active">Sectors
</li>
<li class="active">News
</li>
<li class="active">About Us
</li>
<li class="active">Contact Us
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="homepage-hero-module">
<div class="video-container">
<div class="title-container">
<div class="headline">
<h1>Welcome to our Company</h1>
</div>
<div class="description">
<div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
</div>
</div>
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="http://dfcb.github.io/BigVideo.js/vids/dock.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.</video>
<div class="poster hidden">
<img src="http://www.videojs.com/img/poster.jpg" alt="">
</div>
</div>
</div>
<div class="container" id="content">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p>
<a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>
<a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
</div>
<hr>
<footer>
<p>© Company 2014</p>
</footer>
</div>
<!-- /container -->

use bootstrap builtin class responsive and here is some different method
link

Wordpress + JQuery UI Tabs + Dynamically changing Width of Tabs

I'm trying to setup a tabbed pane (via jQuery) on one of my pages in a WordPress site. I have the tabs working and for the most part, it looks how I want it at this stage. There's one issue though - setting the width of the tabs so that each tab's span is long enough that all of them combined is equal to the space of the pane. Now this normally wouldn't be too hard, but the thing is I don't know how many tabs will be there in the end (my client is unsure).
Here's the CSS I'm using via Jetpack's Custom CSS functionality:
.ui-tabs-nav {
font-size: larger;
font-weight: bold;
background: none;
height: 30px;
/*To stop nav block scaling of tab size*/
}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: .2em .2em 0;
border: none;
background: none;
}
.ui-tabs .ui-tabs-nav li {
display: inline;
border: none;
margin: 0 0 -5px;
background: none;
}
.ui-tabs-anchor {
color: #000034;
}
ul.ui-widget-header, ul.ui-widget-content, ul.ui-state-default, ul.ui-state-hover {
background: none;
border: none;
}
.ui-tabs-active a {
text-decoration: none;
background: none;
color: #222222;
position: relative;
z-index: 5;
}
And some javascript to adjust the width of the tabs:
jQuery(document).ready(function($) {
var numTabs = $('#tabs li').length;
var tabWidth = 100 / numTabs;
var tabPercent = tabWidth + "%";
var liArray = $('#tabs li');
var i;
for (i = 0; i < liArray.length; i++) {
liArray[i].style.width = tabPercent;
}
});
And finally, some HTML:
<div id="tabs">
<ul class="ui-widget-header ui-corner-top">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div id="tabs1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
So yeah, with these snippets in mind - how do I use Javascript to dynamically apply a style to my tabs so that the width of them all combined = 100% of the pane?
Thanks!

Change the li to a block element so you can set its width.
jQuery(document).ready(function($) {
$("#tabs").tabs();
var numTabs = $('#tabs li').length;
var tabWidth = 98 / numTabs; // using 98 because sometimes using 100 will cause last element to get "bumped" down below the first element.
var tabPercent = tabWidth + "%";
$('#tabs li').each(function () {
$(this).css("width", tabPercent);
$(this).css("display", "inline-block");
});
});
http://jsfiddle.net/bwzhLzco/1/

Jquery Slide DIV half of page only

I try To make Something Like that which present at Microsoft's Support Website.See -> (Visit Here)
Click on any Product which list there. (Note: Purpose of this article/Question is not MARKETING on any Product!!! It just for Knowledge.)
When You click on any one of listed there, one drop-down appear.
Now Here Points of my question are comes out. After click on menu item you can see that there is one "Select a topic" list and when you click on any one of them, 2nd list comes out. and after click on item from 2nd list 3rd one list comes out. I exactly try to make a script like that. I search over internet and make a one div slider. But it slide whole div.
Here is my code what I done
HTML
<div id="gallery">
<div id="slider">
<div style="background:#cf5">1</div>
<div style="background:#ada">2</div>
<div style="background:#b0b">3</div>
</div>
<span id="prev">Prev</span>
<span id="next">Next</span>
</div>
CSS
#gallery{
position:relative;
margin: 0 auto;
overflow:hidden;
width:500px;
height:330px; /* +30 = space for buttons */
text-align:center; /* to center the buttons */
}
#slider{
position:absolute;
left:0;
height:300px;
text-align:left; /* to reset text inside slides */
}
#slider > div {
position:relative;
float:left;
width:500px;
height:300px;
}
#prev, #next{
display:inline-block;
position:relative;
top:300px;
cursor:pointer;
padding:5px;
}
Jquery
$(function(){
var $gal = $('#gallery'),
$sli = $('#slider'),
$box = $('div',$sli),
W = $gal.width(), // 500
N = $box.length, // 3
C = 0; // a counter
$sli.width(W*N);
$('#prev, #next').click(function(){
C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N;
$sli.stop().animate({left: -C*W },800);
});
});
And Here Is Example of Of my code on Fiddle

After do some R&D on it. I make something like that
HTML
<div>
<input type="submit" id = "submit" value = "Show panel"/>
<span id = "showpanel1"></span>
</div>
<div id = "slider" style = "display:none">
<div class = "panel1" style = "display:none">
<ul>
<li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
<li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
<li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
<li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
<li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
<li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
<li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
<li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
</ul>
</div>
<div class = "panel2" style = "display:none">
<ul>
<li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
<li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
<li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
<li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
<li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
<li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
<li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
<li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
</ul>
</div>
</div>
<!-- Load Loder GIF -->
<div id = "loader" style = "display:none">
<img src = "loader.gif">
</div>
<!-- QnA Div Start -->
<div id = "qaslider" style = "display:none">
<div class = "mainpanel" style = "display:none">
<ul>
<li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
<li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
<li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
<li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
<li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
<li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
<li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
<li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
</ul>
</div>
</div>
JS
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var firsttext;
$(".panel1").on('click','li',function (){
$(".panel2").show("slide", { direction: "right" }, 1000);
$("span").text($(this).html());
firsttext = $(this).html();
});
$('#submit').click(function() {
$(".mainpanel").hide();
$("#slider").show("slide", { direction: "right" }, 0);
$(".panel2").hide("slide", { direction: "right" }, 0);
$(".panel1").show("slide", { direction: "right" }, 1000);
});
$(".panel2").on('click','li',function (){
$("span").text(firsttext + " > " + $(this).html());
$( "#slider" ).fadeOut( "slow" );
$("#loader").show("slide", { direction: "right" }, 800);
$("#loader").center(true);
setTimeout(removeslider,4000)
});
});
function removeslider()
{
$("#loader").hide("slide", { direction: "left" }, 800);
$("#qaslider").show("slide", { direction: "right" }, 0);
$(".mainpanel").show("slide", { direction: "right" }, 1000);
}
// Custome Jquery Function to stop/place element at center screen
jQuery.fn.center = function(parent) {
if (parent) {
parent = this.parent();
} else {
parent = window;
}
this.css({
"position": "absolute",
"top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
"left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
});
return this;
}
</script>
Style
<style>
.panel1 .panel1
{
border:1px solid black;
margin-right:800;
margin-top:20px;
}
#loader
{
margin-right:708;
margin-top:117px;
margin-left:525px;
}
.panel1 ul li:hover, .panel2 ul li:hover
{
cursor:hand
}
#slider > div {
position:relative;
float:left;
width:500px;
height:300px;
}
</style>