Hi, Im not sure what type of plugin NOWTV use to create this (photo attached below)
At the top,it has a side scroll and when you click on the links it loads as a tab bar on each section.
I'm not sure if there is a plugin similar to this I could use or best way to create this?
(On desktop I'm planning to have 5 images - tablet 4 images and Mobile 2 images per line)
Any thought would be most helpful
Thanks
Tim
7
Replies
I am trying to find a widget that does this action. mov attached so you can see what I'm trying to find: http://www.tcdesignstamford.co.uk/test.mov
On a tablet or mobile when you sideswipe, it changes the tab bar and does not move the images as they are set to scroll down the page.
The code I am using, scrolls at the top but the tabs, you have to be clicked on to change the pages instead of sideswiping it. thats why im trying to find some different code to do this?
also because I have added a panel within the box which will hold an image and text inside the black panel I can't seem to get the panel to repeat so that it flows down the page as shown here. (for some reason it always goes down the page as one row)
any suggestions?
Thanks
Tim
I found some code that allows the tab bar to be moved as a wipe motion which on desktop work then you click on each tab and on mobile and tablets via the swipe motion.
example attached: http://www.tcdesignstamford.co.uk/scroll.html
The only problem is when the table resizes the tab section it go onto the second line or text get smaller. instead of just hiding with a hidden side scroll system.
is there a way to do this
any suggestions please?
Tim
code attached:
----
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<style>
@charset "UTF-8";
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
body { font-family:'Roboto'; background-color:#fafafa;}
pre {
padding: 30px;
background-color: #ececec;
white-space: pre-wrap;
word-wrap: break-word;
line-height: 1.8;
}
.wrap {
width: 960px;
margin: 150px auto;
}
.heading01,
.heading02 {
color: #247BA0;
padding-bottom: 0.2em;
border-bottom: 2px solid #247BA0;
}
.heading01 { margin: 50px 0; }
.heading02 {
margin: 30px 0;
}
.table01 {
margin: 30px 0;
width: 100%;
border: 1px solid #70C1B3;
border-width: 1px 0 0 1px;
border-collapse: collapse;
overflow-x: scroll;
}
.table01 th,
.table01 td {
padding: 20px;
border: 1px solid #70C1B3;
border-width: 0 1px 1px 0;
text-align: left;
vertical-align: top;
line-height: 1.5;
}
@media (max-width:640px) {
.wrap {
width: auto;
margin: 0;
padding: 20px 10px;
}
}
@charset "UTF-8";
.swichtab-controller {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
}
.swichtab-controller > li {
flex: 1 1 auto;
border: #70C1B3 1px solid;
border-width: 1px 1px 1px 0;
}
.swichtab-controller > li:first-child {
border-width: 1px;
}
.swichtab-controller > li > a {
display: flex;
height: 50px;
align-items: center;
justify-content: center;
flex: 1 1 auto;
color: #70C1B3;
text-decoration: none;
}
.swichtab-controller > li.is-active > a {
background-color: #70C1B3;
color: #fff;
}
.swichtab-contents {
padding: 20px;
border: #70C1B3 1px solid;
border-width: 0 1px 1px 1px;
overflow: hidden;
}
.swichtab-panel {
display: none;
}
</style>
<div class="wrap"> <!-- /.swichtab -->
<div class="tabGroup tabGroup2">
<ul class="swichtab-controller">
<li data-swichtab="controller"><a href="#tab1">tab1</a></li>
<li data-swichtab="controller"><a href="#tab2">tab2</a></li>
<li data-swichtab="controller"><a href="#tab3">tab3</a></li>
<li data-swichtab="controller"><a href="#tab4">tab4</a></li>
<li data-swichtab="controller"><a href="#tab5">tab5</a></li>
<li data-swichtab="controller"><a href="#tab6">tab6</a></li>
<li data-swichtab="controller"><a href="#tab7">tab7</a></li>
<li data-swichtab="controller"><a href="#tab8">tab8</a></li>
<li data-swichtab="controller"><a href="#tab9">tab9</a></li>
<li data-swichtab="controller"><a href="#tab10">tab10</a></li>
</ul>
<div class="swichtab-contents">
<div id="tab1" class="swichtab-panel" data-swichtab="target">
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab2" class="swichtab-panel" data-swichtab="target">
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab3" class="swichtab-panel" data-swichtab="target">
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab4" class="swichtab-panel" data-swichtab="target">
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab5" class="swichtab-panel" data-swichtab="target">
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab6" class="swichtab-panel" data-swichtab="target">
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab7" class="swichtab-panel" data-swichtab="target">
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab8" class="swichtab-panel" data-swichtab="target">
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab9" class="swichtab-panel" data-swichtab="target">
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab10" class="swichtab-panel" data-swichtab="target">
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- /.swichtab-contents -->
</div>
<!-- /.swichtab -->
</div>
<!-- /.wrap -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="./src/js/jquery.swichTab.js" charset="utf-8"></script>
<script type="text/javascript">
$('.tabGroup1').swichTab();
$('.tabGroup2').swichTab({
cahngePanel: 'fade',
swiper: true,
index: 2,
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
-----------
----------
Java scrip code
-------
(function($) {
$.fn.swichTab = function(options) {
var elements = this;
var opts = $.extend({}, $.fn.swichTab.defaults, options);
elements.each(function() {
$(this).data('swichTab', new swichTab($(this), opts));
});
return this;
};
$.fn.swichTab.defaults = {
cahngePanel: 'toggle',
swiper: false,
index: 0,
};
function swichTab(elm, opts) {
var self = this,
$swichtab = elm,
$controller = elm.find('[data-swichtab="controller"]'),
$target = elm.find('[data-swichtab="target"]');
this.handleEvent = function() {
// click event
$controller.on("click", function(e) {
var i = $(this).index();
e.preventDefault();
// cahngePanel
if (opts.cahngePanel === 'toggle') {
$controller.removeClass("is-active");
$(this).addClass("is-active");
$target.removeClass("is-active").hide().eq(i).addClass("is-active").show();
} else if (opts.cahngePanel === 'fade') {
$controller.removeClass("is-active");
$(this).addClass("is-active");
$target.removeClass("is-active").hide().eq(i).addClass("is-active").stop().fadeIn();
}
});
// swiper
if (opts.swiper === true) {
self.swiper(elm);
}
};
this.swiper = function(elm) {
var targetLength = $target.length,
currentIndex = $target.filter('is-active').index(),
goToIndex = '',
direction,
position,
y1,
y2;
function goToPrev() {
if (currentIndex <= 0) {
goToIndex = (targetLength - 1) % targetLength;
} else {
goToIndex = (currentIndex - 1);
}
$controller.removeClass('is-active').eq(goToIndex).addClass('is-active');
$target.removeClass("is-active").hide().eq(goToIndex).addClass("is-active").stop().fadeIn();
currentIndex = goToIndex;
}
function goToNext() {
goToIndex = (currentIndex + 1) % targetLength;
$controller.removeClass('is-active').eq(goToIndex).addClass('is-active');
$target.removeClass("is-active").hide().eq(goToIndex).addClass("is-active").stop().fadeIn();
currentIndex = goToIndex;
}
elm.on('touchstart', onTouchStart);
elm.on('touchmove', onTouchMove);
elm.on('touchend', onTouchEnd);
function onTouchStart(event) {
y1 = event.originalEvent.touches[0].clientY;
position = getPositionX(event);
direction = '';
}
function onTouchMove(event) {
y2 = event.originalEvent.touches[0].clientY;
if (Math.abs(y1 - y2) < 5) {
event.preventDefault();
}
if (position - getPositionX(event) > 100) {
direction = 'left';
} else if (position - getPositionX(event) < -100) {
direction = 'right';
}
}
function onTouchEnd(event) {
if (direction == 'right') {
goToPrev();
} else if (direction == 'left') {
goToNext();
}
}
function getPositionX(event) {
return event.originalEvent.touches[0].pageX;
}
};
this.init = function() {
$controller.eq(opts.index).addClass("is-active").show();
$target.eq(opts.index).addClass("is-active").show();
self.handleEvent();
};
return self.init();
}
}(jQuery));
------
------
AdChoices