I want to open main image in fancybox when click on main image in flexslider.
If possible that when click on main image and open it in fancybox with all thumbnail as like display in flexslider with prev and next button.
How to do it possible? Is there any parameter in flexslider or need to do customization?
Please help me. I mention code here.
Thanks
=> Code :
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox.css"/>
<script src="modernizr.js"></script>
<script src="jquery.flexslider.js"></script>
<style type="text/css">
#import "https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css";
body { font-family: avenir, sans-serif; }
#slider .slides img {
width: 450px;
height: 300px;
margin: 0 auto;
}
.container{
max-width: 50%;
margin : 0 auto;
}
#carousel .flex-active-slide img {
opacity: 1;
}
#carousel img {
opacity: 0.65;
}
.flex-direction-nav .flex-next { right: 0 !important; margin-right: -40px; }
.flex-direction-nav .flex-prev { left: 0 !important; margin-left: -40px; }
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; cursor: pointer;}
</style>
<script type="text/javascript">
$(window).load(function() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 70,
itemMargin: 10,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
$('#carousel li').click(function() {
$('#carousel li').removeClass('flex-active-slide')
$(this).addClass('flex-active-slide');
});
</script>
</head>
<body>
<!-- Include jQuery library and Flexslider script -->
<!-- Place somewhere in the <body> of your page -->
<div class="container">
<div id="slider" class="flexslider" onclick="func(this)">
<ul class="slides">
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<li>
<img src="7.jpg" />
</li>
<li>
<img src="8.jpg" />
</li>
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<li>
<img src="7.jpg" />
</li>
<li>
<img src="8.jpg" />
</li>
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
</div>
</body>
</html>
fancyBox works with any slider/carousel, you just have to iniatialise using .selector option and you have to tweak this to suit your needs, e.g., this selector has to return visible links and has to exclude duplicates. Something like this:
$().fancybox({
selector : '.slides li:not(.clone) a'
});
Here are demos using
Slick - https://codepen.io/fancyapps/pen/pdbrjx
OwlCarousel2 - https://codepen.io/fancyapps/pen/mqvOoz
Swiper - https://codepen.io/fancyapps/pen/eWVyVg
flexslider - https://codepen.io/fancyapps/pen/QQdXwx
Related
I am creating a website wherein a user is looking at the tracking screen. In this screen the user is able to see the current status of the package. As soon as first process is completed, the completed process then blurred and the current status is glows. Here is the code I have written in HTML and CSS
li {
list-style-type: none;
float: left;
margin: 10px;
}
.imgage {
margin-top: 150px;
}
body h2 {
font-family: sans-serif, 'Montserrat';
}
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<ul>
<li>
<div class="imgage">
<img src="images/fil_1.jpg" width="202px" height="100px">
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img src="images/export1.jpg" width="202px" height="100px">
<h2>IMPORT</h2>
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img src="images/UKimport.jpg" width="202px" height="100px">
<h2>CARRIER</h2>
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img src="images/DHL.jpg" width="202px" height="100px">
<h2>DHL</h2>
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img src="images/HMRC_logo.jpg" width="202px" height="100px">
<h2>HMRC</h2>
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img src="images/Importt.jpg" width="202px" height="100px">
</li>
</ul>
</div>
I tried my best to understand what you wanted to do.
My interpretation is that you wanted to blur the page while things get loaded and then show the loaded page.
I added the code to do that plus I added a code to emulate the photos that were not loading since they were not included with the full URI to reach them.
If by any chance this is not what you wanted, then please edit your question and let me know so I can change my answer to it.
// Emulating loading the photos
$(window).on('load', function() {
$("#cover").fadeOut(200);
});
function callLoad(){
$(window).load();
}
setTimeout(callLoad, 1000);
$(function() {
$('.image').each(function(){
let randomNumber = (Math.floor(Math.random() * 100) + 1);
$(this).attr('src', 'https://picsum.photos/id/' + randomNumber + '/202/100');
});
var images = $('.image').sort(function (a, b) {
return +$(a).data('sort') - +$(b).data('sort');
});
var index = 0;
var getNextImage = function(index){
var remainder = index % images.length;
return $(images[(remainder === 0) ? images.length - 1 : remainder - 1]);
};
$("#btnNext").click(function(){
getNextImage(index - 1).addClass("blur-content");
getNextImage(index).toggleClass("blur-content");
index++;
});
});
li {
list-style-type: none;
float: left;
margin: 10px;
}
.imgage {
margin-top: 50px;
}
body h2 {
font-family: sans-serif, 'Montserrat';
}
#cover {
top:0;
left: 0;
position: fixed;
height: 100%;
width: 100%;
background: #CCC;
z-index:9999;
}
.blur-content {
-webkit-filter: url(#svg-blur);
filter: url(#svg-blur);
}
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<button id="btnNext"> Next </button>
<div id="cover" class="blur-content"></div>
<div>
<ul>
<li>
<div class="imgage">
<img class="image blur-content" src="images/fil_1.jpg" width="202px" height="100px" data-sort="7">
<h2>SOMETHING</h2>
</li>
<li>
<div class="imgage">
<img class="image blur-content" src="images/export1.jpg" width="202px" height="100px" data-sort="2">
<h2>IMPORT</h2>
</li>
<li>
<div class="imgage">
<img class="image blur-content" src="images/UKimport.jpg" width="202px" height="100px" data-sort="3">
<h2>CARRIER</h2>
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img class="image blur-content" src="images/DHL.jpg" width="202px" height="100px" data-sort="4">
<h2>DHL</h2>
</li>
<li>
<div class="imgage">
<img class="image blur-content" src="images/HMRC_logo.jpg" width="202px" height="100px" data-sort="5">
<h2>HMRC</h2>
</li>
<li>
<div class="imgage">
<img class="image blur-content" src="images/Importt.jpg" width="202px" height="100px" data-sort="6">
<h2>HMRC2</h2>
</li>
</ul>
</div>
<!-- SVG Blur Filter -->
<!-- 'stdDeviation' is the blur amount applied -->
<svg id="svg-filter-blur">
<filter id="svg-blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
</filter>
</svg>
I'm working on a Vue poject and I let the user choose the width and height of app main container by clicking on each device specific icon (mobile, tablet, laptop and desktop). something like firefox responsive tool. how can I force elements inside the main container respond to it's own viewport rather than browser viewport?
I'm using UIKit width component to define my breakpoints. I know I can achieve this by adding/removing classes dynamically, but my Vue components are added dynamicallly by the user, so it's more complex.
I thought there might be a more generic way to do this. here's the sample code ( number of visible slides changes in defferent viewports and if my component is a grid element items inside it should wrap ( based on container width ) ):
<div id="main-container" :style="{width: deviceWidth, height: deviceHeight}">
<!-- Dynamically added component -->
<div class="uk-position-relative uk-visible-toggle uk-light" uk-slider>
<!-- UIKit Width classes -->
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li>
<img src="../../img/01.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>1</h1></div>
</li>
<li>
<img src="../../img/02.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>2</h1></div>
</li>
<li>
<img src="../../img/03.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>3</h1></div>
</li>
<li>
<img src="../../img/04.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>4</h1></div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
</div>
Explanation
This is a very simple, and minimal answer, it's literally been written to simply illustrate how you can tackle your problem, but as you can see within this answer, pressing the different buttons makes the containing element grow/shrink.
As you can see within this solution, all of the elements that are responsive will respond based on the parent element's size. It's really easy to achieve this if you use fixed sizes, like in my example.
Although, take note, I only selected to use a very minimal implementation, no use of Vue or anything sophisticated, this is a simple solution, using native technologies only.
Edit
After having learned exactly what you're looking for, the long story short is that there's no clean & easy way to do that, at least to my knowledge, your best bet would be to simply change & alter the classes, that, by far makes the most sense.
Because your question is somewhat vague, to me it appears that you're trying to execute logic similar to what #arieljuod has stated, where you're trying to run media queries on specific DOM elements rather than the user's viewport.
I'm sorry to inform you that to my knowledge there's no clean and easy way to achieve this, not to say that there isn't a way, I'm sure someone has found a way, but a clean, concise, easy to read, solution, I highly doubt there's such a solution.
const clickHandler = txt => {
let clName = '';
switch (txt) {
case 'Desktop':
clName = 'desktop';
break;
case 'Tablet':
clName = 'tablet';
break;
case 'Mobile':
clName = 'mobile';
break;
default:
clName = 'desktop';
}
document.getElementById("app").className = clName;
};
document.querySelectorAll("#sizes button").forEach(btn => {
btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
width: 100%;
display: block;
overflow: auto;
}
#sizes button {
float: left;
margin: 15px;
padding: 15px;
border: 1px solid black;
background: white;
box-sizing: border-box;
width: calc(33.33% - 30px);
}
#app {
height: 100vh;
background: #eee;
}
#app.desktop {
width: 960px;
}
#app.tablet {
width: 700px;
}
#app.mobile {
width: 320px;
}
.col-2 {
display: block;
overflow: auto;
}
.col-2>* {
float: left;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
box-sizing: border-box;
border: 1px solid black;
}
/* Just for a demo */
#redBlock {
background: red;
height: 100px;
width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<div id="sizes">
<button>Desktop</button>
<button>Tablet</button>
<button>Mobile</button>
</div>
<div id="app" class="desktop">
<div class="col-2">
<p>Hello</p>
<p>World!</p>
</div>
<div id="redBlock"></div>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>1</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>2</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>3</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>4</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>5</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>6</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>7</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>8</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>9</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>10</h1>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>
Possible Solution
What I would do in this scenario is as stated above, alter classes on the slider, like so, I mean you could use extra/additional logic to check the user's width & whatnot, but this is possibly the most simplistic approach possible.
const clickHandler = txt => {
const slider = document.getElementById("mySlider");
let clName = '';
switch (txt) {
case 'Desktop':
clName = 'desktop';
slider.className = 'uk-slider-items uk-child-width-1-4';
break;
case 'Tablet':
clName = 'tablet';
slider.className = 'uk-slider-items uk-child-width-1-3';
break;
case 'Mobile':
clName = 'mobile';
slider.className = 'uk-slider-items uk-child-width-1-2';
break;
default:
clName = 'desktop';
slider.className = 'uk-slider-items uk-child-width-1-4';
}
document.getElementById("app").className = clName;
};
document.querySelectorAll("#sizes button").forEach(btn => {
btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
width: 100%;
display: block;
overflow: auto;
}
#sizes button {
float: left;
margin: 15px;
padding: 15px;
border: 1px solid black;
background: white;
box-sizing: border-box;
width: calc(33.33% - 30px);
}
#app {
height: 100vh;
background: #eee;
}
#app.desktop {
width: 960px;
}
#app.tablet {
width: 700px;
}
#app.mobile {
width: 320px;
}
.col-2 {
display: block;
overflow: auto;
}
.col-2>* {
float: left;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
box-sizing: border-box;
border: 1px solid black;
}
/* Just for a demo */
#redBlock {
background: red;
height: 100px;
width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<div id="sizes">
<button>Desktop</button>
<button>Tablet</button>
<button>Mobile</button>
</div>
<div id="app" class="desktop">
<div class="col-2">
<p>Hello</p>
<p>World!</p>
</div>
<div id="redBlock"></div>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul id="mySlider" class="uk-slider-items uk-child-width-1-4">
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>1</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>2</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>3</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>4</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>5</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>6</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>7</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>8</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>9</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>10</h1>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>
I'm using a slider to show Images in a web page. Code works fine and the images slide properly. But when I add images dynamically via jquery, the images are stacking one below other instead of sliding. What could be the reason?
Here is the code which works fine, when I statically link images to the slider.
<div class="slider" data-arrows="true" >
<ul class="slides" id="slider" >
<li> <img alt="Image" src="img/work-1.jpg" /> </li>
<li> <img alt="Image" src="img/work-1.jpg" /> </li>
<li> <img alt="Image" src="img/work-1.jpg" /> </li>
<li> <img alt="Image" src="img/work-1.jpg" /> </li>
</ul>
</div>
This is where I'm stuck when I add images dynamically via append the images are stacking one below the other.
for(var i=0; i<10;i++){
var x = ' <li>'+
'<img alt="Image" src="img/work-1.jpg" />'+
'</li>';
$("#slider").append(x);
}
If you're open to using flexbox, you could do something like this with your css:
$(document).ready(function() {
for (var i = 0; i < 10; i++) {
var x = ' <li>' +
'<img alt="Image" src="https://placebear.com/g/100/100" />' +
'</li>';
$("#slider").append(x);
}
})
.slides {
display: flex;
padding-left: 0;
list-style: none;
}
<div class="slider" data-arrows="true">
<ul class="slides" id="slider">
<li> <img alt="Image" src="https://placebear.com/g/100/100" /> </li>
<li> <img alt="Image" src="https://placebear.com/g/100/100" /> </li>
<li> <img alt="Image" src="https://placebear.com/g/100/100" /> </li>
<li> <img alt="Image" src="https://placebear.com/g/100/100" /> </li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you need the slides to wrap, you can add flex-wrap: wrap; to your .slides css selector.
I have a slider that created by amazingslider plugin. It works good but is there a way to add a link (href) to caption of each image? I tried but the link does not show in the slider caption.
Here is my snippet :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.worldinbag.com/js/amazingslider.js"></script>
<script src="http://www.worldinbag.com/js/initslider-1.js"></script>
<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:804px;margin:0px auto 59px; overflow:hidden;">
<div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
<ul class="amazingslider-slides" style="display:none;">
<li>
<img src="http://uupload.ir/files/4hlh_img-10.jpg" alt="img-10" title="This is a caption This is a caption This is a caption This is a caption This is a caption " data-description="This is a caption This is a caption This is a caption This is a caption This is a caption "
/>
</li>
<li>
<img src="http://uupload.ir/files/8dn2_img-11.jpg" alt="img-10" title="img-10" data-description="This is a caption" />
</li>
</ul>
<ul class="amazingslider-thumbnails" style="display:none;">
<li>
<img src="http://uupload.ir/files/zck1_img-10-tn.jpg" alt="img-10" title="img-10" />
</li>
<li>
<img src="http://uupload.ir/files/jcyq_img-11-tn.jpg" alt="img-11" title="img-11" />
</li>
</ul>
</div>
</div>
What you can do is to add a link tag to the caption attribute. This works if you are using single quotes or escaped double quotes:
<a href='#your-url'>your caption</a>
With this method it's only possible to insert links to the caption, not to link the whole caption itself.
And another hint: Try not to use inline styles, better use the classes and ids you already use to apply your styles.
#amazingslider-wrapper-1 {
display: block;
position: relative;
max-width: 804px;
margin: 0 auto;
overflow: hidden;
}
#amazingslider-1 {
display: block;
position: relative;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.worldinbag.com/js/amazingslider.js"></script>
<script src="http://www.worldinbag.com/js/initslider-1.js"></script>
<div id="amazingslider-wrapper-1">
<div id="amazingslider-1">
<ul class="amazingslider-slides" style="display:none;">
<li>
<img src="http://uupload.ir/files/4hlh_img-10.jpg" alt="img-10" title="<a href='#'>This is a link</a> This is a caption This is a caption This is a caption This is a caption " data-description="This is a caption This is a caption This is a caption This is a caption This is a caption "
/>
</li>
<li>
<img src="http://uupload.ir/files/8dn2_img-11.jpg" alt="img-10" title="img-10" data-description="<a href='#'>This is a link</a>" />
</li>
</ul>
<ul class="amazingslider-thumbnails" style="display:none;">
<li>
<img src="http://uupload.ir/files/zck1_img-10-tn.jpg" alt="img-10" title="img-10" />
</li>
<li>
<img src="http://uupload.ir/files/jcyq_img-11-tn.jpg" alt="img-11" title="img-11" />
</li>
</ul>
</div>
</div>
when I run the below code, the page doesn't scroll, and doesn't show all of my page container. first I used Ajax but my menu didn't work. then I had to use Iframe tag. but it has a problem too. I try to discover the problem but I didn't succeed. can anybody help me to solve this?
<div id="maincontainer" style="position: fixed; width: 80%; height:500px; right: 10%; ">
<table style="background-color: rgb(100, 100, 100); border-radius: 5px;" dir="rtl">
<tr>
<td style="width: 90px; height: 30px;">صفحه اصلی</td>
<td style="width: 60px; height: 30px;">پروفایل</td>
</tr>
</table>
<div id="three" style="font-family: 'B Homa'; font-size: large;">
<ol>
<li data-slide-name="slide-one">
<h2>
<span>مدیریت مدیران</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/1.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-two">
<h2>
<span>مدیریت فرم ها</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/2.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-three">
<h2>
<span>مدیریت فرهنگی</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/3.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-four">
<h2>
<span>مدیریت آپلود سنتر</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/4.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-five">
<h2>
<span>مدیریت اخبار</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/5.jpg" alt="image" />
</div>
</li>
</ol>
<noscript>
<p>
Please enable JavaScript to get the full experience.
</p>
</noscript>
</div>
<div>
<ul class="menu">
<li><span class="l"></span><span class="r"></span><span class="t">مديريت کاربران</span>
<ul>
<li>کاربران فعال</li>
<li>کاربران بلاک</li>
<li>تمام کاربران</li>
<li>کاربران تایید نشده</li>
</ul>
</li>
<li><a href="#"><span class="l"></span><span class="r"></span>
<span class="t">مديريت آپلودسنتر</span></a>
<ul>
<li>نمایه جدید</li>
<li>لیست نمایه ها</li>
<li>دسته بندی جدید</li>
<li>لیست دسته ها</li>
<li>آیتم جدید</li>
<li>لیست آیتم ها</li>
</ul>
</li>
</ul>
</div>
<div id="contentwrapper">
<div id="contentcolumn"><%--<div id="newContent" style="float:left; width: 100%; height: 615px; direction: rtl; ">
</div>--%>
<iframe id="frame" runat="server" style="width: 1095px; height: 1600px;"></iframe>
</div>
</div>
<div id="stickybar" class="expstickybar">
</div>
<div style="text-align: center; padding-top: 3px">
<b>Copyright (c)</b>
</div>
<!-- LeftPanel Plugin -->
<div class="float">
<div class="moduletable">
<p>
برنامه امروز
</p>
</div>
</div>
<script language="javascript" type="text/javascript">
//$(document).ready(function () {
// $('#accordion').accordion();
//});
function ChangeSrc(trg) {
var frm = document.getElementById("frame");
if (frm) {
frm.src = trg;
}
}
</script>
<script type="text/javascript">
(function ($, d) {
$('#three').liteAccordion({ autoPlay: true, theme: 'dark', rounded: true, enumerateSlides: true, firstSlide: 1, easing: 'easeInOutQuart' });
})(jQuery, document);
</script>
</div>
Please, just remove the css property position: fixed; from maincontainer div.
As you can see at this sample that I made from you sample html code, I just remove that property.
You could also play around with the css property overflow:auto; that controls when to show the scroll, or show/hide the content beyond the limited area of a div.