I want to combine coda slider with a jquery scrollbar. Does anybody knows how to do that?
http://www.tradinx.com/codatest
$(function(){
$(".scroll-bar").slider({
slide: function( event, ui ) {
// Code for triggering coda slider .. ??
}
});
});
--
<div id="slider">
<div class="scroll">
<div class="scrollContainer">
<div class="panel" id="image1"><img src="data/8f8bc5cb2fdac666c9534f7c4b78c010.jpg" alt="" /></div>
<div class="panel" id="image2"><img src="data/42a4c582d65e46dda4ddcde70a5b2afc.jpg" alt="" /></div>
<div class="panel" id="image3"><img src="data/30c32091eb1121f630c48016b04a6f04.jpg" alt="" /></div>
<div class="panel" id="image4"><img src="data/31f3ae0aac735d2b9432e88108e75b86.jpg" alt="" /></div>
</div>
</div>
<div class="scroll-bar"></div>
<div class="photo-thumb-block">
<div class="photo-thumb"><img src="small/8f8bc5cb2fdac666c9534f7c4b78c010.jpg" style="width:159px;height:119px;" alt="" /></div>
<div class="photo-thumb"><img src="small/42a4c582d65e46dda4ddcde70a5b2afc.jpg" style="width:159px;height:119px;" alt="" /></div>
<div class="photo-thumb"><img src="small/30c32091eb1121f630c48016b04a6f04.jpg" style="width:159px;height:119px;" alt="" /></div>
<div class="photo-thumb last"><img src="small/31f3ae0aac735d2b9432e88108e75b86.jpg" style="width:159px;height:119px;" alt="" /></div>
</div>
</div>
Does anyone have an idea?
Thanks.
If you were to turn off the css div overflow of the mail images container (the long one) you'd see that there is already a scroll bar.
So my question to you is, what exactly is the scrollbar supposed to do?
Related
I am having issues making the text area fill the width of the panel any ideas??
My code is below
<div class="panel panel-primary">
<div id="div_EssentialInformation" class="panel-heading">Essential information</div>
<div id="content" style="display:none;">
<div class="panel-body">
<textarea class="form-control" rows="3" style="resize:none;"></textarea>
</div>
<div class="panel-footer clearfix">
<div class="pull-right">
<a id="btn_edit" class="btn btn-primary">Edit</a>
<a id="btn_save" class="btn btn-danger" style="display:none">Save</a>
</div>
</div>
</div>
</div>
i have a script that toggles the display of the content div, below is the js script
$("#div_EssentialInformation").click(function () {
$("#content").slideToggle(500);
})
I am getting this
Add this to your css
textarea {
width: 100% !important;
}
Then i try to change year in Bootstrap DateTimePicker i see the strange result - yers shows in one line and out of widget borders. How it can be fixed?
attach
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
use it. if posible please attached the code:)
Hi
i have try to loop throw data in "Categories" Table and it works - i got data when i open View in first time but if i click on a tab to see its content i got only first record ?
i don't know why i lose all data i got in first time ?
Razor Code:
#section personAds{
<h2 class="title text-center">Person Ads</h2>
<div class="col-sm-12">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Cars</li>
</ul>
</div>
<div class="tab-content">
#foreach (var personItems in Model.Where(isCompany => isCompany.isCompany == false))
{
<div class="tab-pane fade active in" id="propertytab">
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfoslide text-center">
<img src="#Url.Content(personItems.catImage)" alt="" />
<h4>#personItems.catName</h4>
<i class="#personItems.classIcon"></i>More
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="carstab">
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfoslide text-center">
<img src="#Url.Content(personItems.catImage)" alt="" />
<h4>#personItems.catName</h4>
<i class="#personItems.classIcon"></i>More
</div>
</div>
</div>
</div>
</div>
}
</div>
}
Controller Code:
public ActionResult Contact()
{
var model = _db.Categories.ToList();
return View(model);
}
and i try to remove where condition and i got same result - when i click on any tab i got only first record ?!
Please see the Video of Problem ... Click Here
From the look of your code I think you have simply got your 'foreach' in the wrong position.
It looks like you are creating repeated 'tab' DIV's which will each have just one record in.
This is probably somewhat better, notice I have moved the 'propertytab' outside of the #foreach
<div class="tab-pane fade active in" id="propertytab">
#foreach (var personItems in Model.Where(isCompany => isCompany.isCompany == false))
{
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfoslide text-center">
<img src="#Url.Content(personItems.catImage)" alt="" />
<h4>#personItems.catName</h4>
<i class="#personItems.classIcon"></i>More
</div>
</div>
</div>
</div>
}
</div>
<div class="tab-pane fade" id="carstab">
#foreach (var personItems in Model.Where(isCompany => isCompany.isCompany == false))
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfoslide text-center">
<img src="#Url.Content(personItems.catImage)" alt="" />
<h4>#personItems.catName</h4>
<i class="#personItems.classIcon"></i>More
</div>
</div>
</div>
</div>
}
</div>
thanks for helping:
here is my objectif: make Make a fullscreen responsive slider on a homepage with joomla:
the main problem my template's slider position is in multiple container just like these
<div>
<div id="ja-slider" class="wrap ">
<div class="main">
<div class="main-inner1 clearfix">
<div class="ja-moduletable ;Position: slider" id="Mod104">
<div class="moduletable-inner clearfix">
<div class="ja-box-ct clearfix">
<div id="slider" class="favslider">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
what I wish is:
<div>
<div id="ja-slider" class="wrap ">
<div id="slider" class="favslider">
</div>
</div>
</div>
is there anyone could help? thanks a lots! I'm not a programmer but I understand html and CSS.
thanks again! hoping this thread could helps others!
You might be able to override the existing code using an extension like ReReplacer or similar:
http://extensions.joomla.org/extensions/edition/replace/4336
I have simple manual text slider with using show/hide code. every thing is ok but when i click previous slide button, current text will be hide but previous one won't show. why it doesn't show ?!
this is my html code:
<div class="hand_1" id="hand_1">
<img id="hand_img_1" src="myimage1.png" width="176.25" height="332.25" />
<div class="hand_text_1">
<h2>header</h2>
<p>paragraph 1</p>
<div class="connect-links">
<a id="next_icon_1" href="#" ></a>
</div>
</div>
</div>
<div class="hand_2" id="hand_2" style="display:none;">
<img id="hand_img_2" src="myimage2.png" width="176.25" height="332.25" />
<div class="hand_text_2">
<h2>header 2</h2>
<p>paragraph 2</p>
<div class="connect-links">
<a id="next_icon_2" href="#"></a>
<a id="previous_icon_2" href="#"></a>
</div>
</div>
</div>
and this is my javascript:
$(document).ready(function(){
$('#next_icon_1').on("click", function(){
$('#hand_img_1').fadeOut('fast');
$('.hand_text_1').fadeOut('fast');
$('.hand_2').fadeIn('fast');
});
$('#previous_icon_2').on("click", function(){
$('#hand_img_2').fadeOut('fast');
$('.hand_text_2').fadeOut('fast');
$('.hand_1').fadeIn('fast');
});
});