I am using Tiny Scrollbar.
Want to achieve horizontal scrolling. Look example of #scrollbar2
Code of that is here.
Markup code is at below.
<div class="wrapper wrapper-head" id="wrapper-head1" style="overflow-x: visible;">
<div class="scrollbar disable" style="width: 1548px;">
<div class="track" style="width: 1548px;">
<div class="thumb" style="width: 1548px;">
<div class="end">
</div>
</div>
</div>
</div>
<div class="div-table table-header viewport" style="overflow-x: hidden;">
<div class="div-table-row overview" style="overflow-x: visible; left: 0px;">
<<<<<< Content >>>>>>>
</div>
</div>
JS code is as below
$(document).ready(function(){
$("div.wrapper-head div.table-header").addClass("viewport").css('overflow-x','hidden');
$("div.wrapper-head div.div-table-row").addClass('overview').css('overflow-x','visible');
$("div.wrapper-head").css('overflow-x','visible');
scrollHtml = '<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>';
$("div.wrapper-head").prepend(scrollHtml);
$("div.wrapper-head").tinyscrollbar({ axis: 'x' });
});
I am not getting any error in browser console, but I am not getting tiny scrollbar as well.
What I want to achieve this
thanks in advance.
Related
I have an HTML table which is as following
Some of the code is below:
<table>
<tr>
<td>
<div style="width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 103px; width:80px;" class="location-block">
<div class="city-img">
<img src="worldwide-location.png" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
<td>
<div style=" width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 50px; width:80px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
<div style="height: 50px; width:80px; margin-top: -27px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
the table looks like the following:
enter image description here
As you can see the white space between each column, I am trying to reduce the white spaces between them, but this is not happening, I have tried padding-left and also gave cell spacing to the table, its not changing, can anyone tell me whats wrong with my code? Thanks in advance.
If you decide to use Bootstrap grid you can avoid to use HTML table tag, and use a structure like this:
<div class="row">
<div class="col margin-col">
<div>Images and content 1</div>
</div>
<div class="col margin-col">
<div>Images and content 2</div>
</div>
</div>
usign a proper CSS rule like this to set padding (inside columns) and margin (outside columns):
.margin-col{
padding: 10px;
margin: 20px;
}
I need to rearrange some content based on window/screen size.
This is how it looks when in full:
And this is what I need when screen size 768 or less:
This is my code structure:
<div class="container">
<div class="row">
<div class="col-md-9 site-main-content">
<div class="content">
<!--Main content-->
</div>
</div>
<div class="col-md-3 site-sidebar-content">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
</div>
</div>
Not sure how to achieve this.
Update: I can not use hidden property. Box 1 contains some ajax search form. If I put it above main content (on full screen) and set display none, ajax form doesn't work anymore. So I am looking for a javascript snippet to remove box 1 from it's location and load it above main content when on smaller screen.
I have used hidden classes in my example please check and let me know...
Updated Fiddle
HTML
<div class="row">
<div class="col-md-9">
<div class="box-1 hidden-md hidden-lg">
Box 1
</div>
<div class="mainBox">
<div class="content">
Main Content
</div>
</div>
</div>
<div class="col-md-3">
<div class="box-1 hidden-xs hidden-sm">
Box 1
</div>
<div class="box-2">
Box 2
</div>
<div class="box-3">
Box 3
</div>
</div>
</div>
CSS
.mainBox{
background:green;
min-height:300px;
padding:10px;
margin-bottom:10px;
}
.box-1{
background:red;
min-height:100px;
padding:10px;
margin-bottom:10px;
}
.box-2, .box-3{
background:#00A2E8;
min-height:100px;
padding:10px;
margin-bottom:10px;
}
I have link with image in it. This all construction is wraped in some divs. Problem : except image, also is clickable area of div-wrapper. I don't know why it is possible. So i want to prevent this behaviour. Now i can just do this with javascript (return false on div click) and with css (change curson type on div hover).
Can i somehow done this just with css?
Thanks.
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center">
<div style="white-space: nowrap">
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/></a>
<br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
JsFiddle Example
For those who don't know what i'm asking : I want to make clickable area that are limited by sides of image. Now i can click on div that are wrapper of image to be redirected by link.
Since you're using Bootstrap and the img-responsive class makes an image a block element, you need to change that behavior. Block elements take up the full width of their parent container. You can fix that by making the image an inline element:
img.img-responsive {
display:inline;
}
jsFiddle example
Or just don't use the img-responsive class.
pointer-event:none;
Ya, you can do this using CSS :)
pointer-event:none;
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center">
<div style="white-space: nowrap" class='no-link'>
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/>
</a><br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
<style>
.no-link{
}
</style>
Based on your jsFiddle example, simply change yor code to:
<div style="white-space: nowrap; width:200px; margin: auto;">
The cause of the "side effect" is because your A TAG is taking all the parent DIV area, thus the DIV itself is taking the whole space of its own Parent, making it appears as if the clickable area is stretching beyond of the A TAG (which is not true).
To prevent such behavior it is always a good practice to limit the size of the container to the size of the clickable element inside it (width AND height, whenever necessary).
Have a good coding day! :)
You should use display: inline-block; and set the width of the containing div.
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center" style="width: 100%; margin-left:auto; margin-right: auto;">
<div style="white-space: nowrap; display: inline-block; width: 200px;">
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0" />
</a>
<br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
just Add same margin and width in div also
--example
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center">
<div style="white-space: nowrap;margin: 0 auto; width: 200px;">
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/></a>
<br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
I am using Masonry in my webpage. The problem is that after the page loaded, all images stack vertically, one image in a row. I would like them to stack both horizontally and vertically. See My Jsfiddle.
I use the following code in html:
<div class="container">
<div id="items">
<!-- the .box repeats several times -->
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
</div>
</div>
and the following javascript code:
$(document).ready(function(){
var $container = $('#items');
$container.masonry({
itemSelector: '.box',
isFitWidth: true
});
});
and also the CSS:
.box { margin: 5px; width: 214px; }
.box img { width: 100%; }
.panel .panel-heading {
color: #ffffff;
text-align: center;
margin-right: 0;
height: 150px
}
-------------------- Update ---------------------
The above code is just an abstraction of my webpage, in my first version of fiddle (http://jsfiddle.net/shapeare/saonpswu/), I accidentally put .box into separate #items, therefore, the code didn't work. This problem is pointed out by #Skelly. Thanks, Skelly. Now the fiddle works for the above demo (http://jsfiddle.net/shapeare/saonpswu/1), however, my webpage still cannot work. Now I have put almost the same content as my webpage in the following fiddle:
http://jsfiddle.net/shapeare/saonpswu/2
Fix your HTML so that there aren't separate DIV's with id="items"
<div id="items">
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
</div>
Demo: http://bootply.com/OD2uHuKupr
I forgot to mention that I am using Angular.js which probably caused this problem. I am now using the directive from http://passy.github.io/angular-masonry/ which resolved my problem.
I have tried to use the foundation framework with the orbit sliders and when I test it on the browser, the slider performs the transitions, however the animations are not being performed and simply fades from 1 section to another.
Only when I try to resize the window, it works as expected.
After further inspection, apparently when the slider attempts to change using 'horizontal-push' the variable this.outerWIdth for the orbit-slide div is 1 instead of the actual width of the div.
Here is my markup for the features slider which I am using orbit for.
<div id="features-wrap" class="wrapper">
<!-- Insert Features Here -->
<div id="features-gutter" class="row">
<section id="features" class="row">
<div id="welcome">
<div class="eight columns">
<h4>Welcome</h4>
<p>Hello.</p>
</div>
<div class="four columns">
<img src="img/content/promo1.jpg" alt="Promo Image 1" width="320" height="220">
</div>
</div>
<div id="decorated">
<div class="eight columns">
<h4>Decorated Apparel</h4>
<p>Some Text</p>
</div>
<div class="four columns">
<img src="img/content/promo2.jpg" alt="Promo Image 1" width="320" height="220">
</div>
</div>
<div id="promotional">
<div class="eight columns">
<h4>Protional Products</h4>
<p>Some Text</p>
</div>
<div class="four columns">
<img src="img/content/promo3.jpg" alt="Promo Image 1" width="320" height="220">
</div>
</div>
</section>
</div>
<!-- End Insert Features Here -->
</div>
end of code
Here is also the Javascript I am calling.
var featuresSlider = $('#features');
featuresSlider.orbit({fluid: '2x1', animationSpeed: 650, animation: 'horizontal-push' });
Is there anything I am doing with the code or is it really a bug with the current script for orbit?
Thanks.
found the answer. I in order for the slider to get the right outerWidth I had to go to the div that initializes the sliders and overide the width that is set by the plugin in the css file. For example:
If features controls my orbit slider, then i need to do this:
#features {
width: <set the width here> !important;
<any other styles here>
}
Thanks