Part 3 - resizing height - bootstrap

Developer
Khalid Munir
Size
5,805 Kb
Views
26,312
  1. Part 3 - resizing height - bootstrap Previews
  2. Part 3 - resizing height - bootstrap HTML Codes
  3. Part 3 - resizing height - bootstrap CSS Codes
  4. Part 3 - resizing height - bootstrap JS Codes

How do I make an part 3 - resizing height - bootstrap?

Row added bootstrap rows.. What is a part 3 - resizing height - bootstrap? How do you make a part 3 - resizing height - bootstrap? This script and codes were developed by Khalid Munir on 26 August 2022, Friday.

Part 3 - resizing height - bootstrap Previews
IQ Test

Part 3 - resizing height - bootstrap - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>part 3 - resizing height - bootstrap </title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid fh"> <div class="row fh"> <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 eightyfive fl"> <div class="col-lg-12 h5p"></div> <div class="col-lg-12 h15 oran"><div class="oran"><h4><strong class="text-center">Welcome to Greenbak Road masjid</strong></h4><span class="text-center">On this screen you will find salah times and general information about the masjid.</span></div></div> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 h5p"></div> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 h70"> <div class="col-xs-12 col-md-12 h25 dred"> <h1 class="text-center"><span id="todayTime" >1:25 pm</span></h1> <h4 class="text-center"> <span id="todayEDate">Friday April 8, 2016</span></h4> <h4 class="text-center"><span id="todayIDate">1 Rajab, 1437</span></h4> </div> <div class="col-xs-6 h10 lred salat"><h3>Fajar</h3></div> <div class="col-xs-6 h10 rred salat"><h3>07:15</h3></div> <div class="col-xs-6 h10 dred salat"><h3>Zuhr</h3></div> <div class="col-xs-6 h10 dred salat"><h3>07:15</h3></div> <div class="col-xs-6 h10 lred salat"><h3>Asar</h3></div> <div class="col-xs-6 h10 rred salat"><h3>07:15</h3></div> <div class="col-xs-6 h10 lred salat"><h3>Maghrib</h3></div> <div class="col-xs-6 h10 rred salat"><h3>07:15</h3></div> <div class="col-xs-6 h10 lred salat"><h3>Esha</h3></div> <div class="col-xs-6 h10 rred salat"><h3>07:15</h3></div> <div class="col-xs-6 h10 lred salat"><h3>Jumma</h3></div> <div class="col-xs-6 h10 rred salat"><h3>07:15</h3></div> <div class="col-xs-12 col-md-12 h15 dred"> <h5 class="text-center"><span id="timeTillNext"><br>Time till next Salah: Zuhr</span></h5> <h3 class="text-center"> <span id="timeToSalat">00:20:43</span></h3></div> </div> </div> <!-- close col-md-8 --> <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 eightyfive fl "><br><br> <div class="divred"> <div> <img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/Tariwah-Dua.jpg">
<img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/nature-q-c-1920-1080-10.jpg"> <img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/duaafterazan.jpg"> <img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/nature-q-c-1920-822-9.jpg"> <img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/duaafterazan.jpg"> <img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/nature-q-c-1920-822-6.jpg"> <img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/duaafterazan.jpg"> <img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/nature-q-c-1920-822-10.jpg"> <img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/duaafterazan.jpg"> <img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/duaafterazan.jpg">
<img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/Tariwah-Dua.jpg">
<img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/duaafterazan.jpg"> <img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/nature-q-c-1920-1080-4.jpg"> <img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/duaafterazan.jpg">
<img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/Tariwah-Dua.jpg">
<img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/nature-q-c-1920-1080-5.jpg"> <img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/duaafterazan.jpg">
<img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/Tariwah-Dua.jpg">
<img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/nature-q-c-1920-1080-9.jpg"> <img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/duaafterazan.jpg">
<img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/Tariwah-Dua.jpg">
<img class="mySlides img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/nature-q-c-1920-1080-10.jpg"> </div>
</div> </div> <!-- close col-md-8 --> <div id="footer" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 h15 fl "> <div class="col-lg-12 h5p "></div> <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 oran fh">Welcome to Greenbak road masjid ticker <ul class="newsticker"> <li><h3>Please dont park your car near the masjid on Friday's as this space is reserved for DIsabled users.</h3></li> <li><h1>Curabitur porttitor ante eget hendrerit adipiscing.</h1></li> <li><h1>Praesent ornare nisl lorem, ut condimentum lectus gravida ut. another sentence to make this a long entry</h1></li> <li><h1>Nunc ultrices tortor eu massa placerat posuere.</h1></li> <li><h2>Etiam imperdiet volutpat libero eu tristique.</h2></li> <li><h2>Curabitur porttitor ante eget hendrerit adipiscing.</h2></li> <li><h2>Praesent ornare nisl lorem, ut condimentum lectus gravida ut.</h2></li> <li><h2>Nunc ultrices tortor eu massa placerat posuere.</h2></li> <li>Etiam imperdiet volutpat libero eu tristique.</li> <li>Curabitur porttitor ante eget hendrerit adipiscing.</li> <li>Praesent ornare nisl lorem, ut condimentum lectus gravida ut.</li> <li>Nunc ultrices tortor eu massa placerat posuere.</li> <li>Etiam imperdiet volutpat libero eu tristique.</li> <li>Curabitur porttitor ante eget hendrerit adipiscing.</li> <li>Praesent ornare nisl lorem, ut condimentum lectus gravida ut.</li> <li>Nunc ultrices tortor eu massa placerat posuere.</li> <li>Etiam imperdiet volutpat libero eu tristique.</li> <li>Curabitur porttitor ante eget hendrerit adipiscing.</li> <li>Praesent ornare nisl lorem, ut condimentum lectus gravida ut.</li> <li>Nunc ultrices tortor eu massa placerat posuere.</li>
</ul> </div> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 oran fh"><img class="img-responsive" src="http://www.activesignage.co.uk/digitalmasjid/images/poweredbyyi-v0.1.jpg"</img>"</div> <div class="col-lg-12 h5p"></div> </div> </div> <!-- close row -->
</div> <!-- close container-fl --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Part 3 - resizing height - bootstrap - Script Codes CSS Codes

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
html,body{height:100%;}
h3{ text-align:center;
}
body{ background: url('http://activesignage.co.uk/digitalmasjid/images/bg-red.png'); background-size: 1440px 800px; background-repeat:repeat;
}
.container { height:100%;
}
.fill{ width:100%; height:100%; min-height:100%; background-color:#990000; padding:0px; color:#efefef;
}
.twentygold{ width:30%; height:20%; min-height:20%; background-color:#999900; padding:2px; color:#cccccc;
}
#todayTime,#timeToSalat,#timeTillNext { color:white;
}
#todayEDate { color:white;
}
#todayIDate { color:white;
}
.salat { color:white;
}
.w50p{width:50%}
.green{ background-color:#A94442;
}
.red{ background-color:#8E2C2A;
}
.dred{ background-color:#712D2D;
}
.divred{ padding:10px; background-color:#712D2D;
}
.lred{ background-color:#882B2B;
}
.rred{ background-color:#9E3B3B;
}
.grey{ background-color:#d47472;
}
.oran{ background-color:#ffffff;
}
.twentyred{ width:45%; height:20%; min-height:20%; background-color:red; padding:0px; color:#cccccc;
}
.fl{ float:left;
}
.fh{height:100%;}
.eightyfive{ height:85%;
}
.h5p{ height:5%;
}
.h15{ height:15%;
}
.h10{ height:10%;
}
#blockTitle{ background-color: #000; color: #cccccc;
}
.h20{ height:20%;
}
.h30{ height:30%;
}
.h25{ height:25%;
}
.h70{ height:70%;
}
.jumbotron{ color: #000;
align:top;
}

Part 3 - resizing height - bootstrap - Script Codes JS Codes

//$("body").css("overflow", "hidden");
myIndex = 0;
carousel();
function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 2000); // Change image every 2 seconds
}
/* _____ _____ _____ _______ /\ \ /\ \ /\ \ /::\ \ /::\ \ /::\ \ /::\ \ /::::\ \ /::::\ \ \:::\ \ /::::\ \ /::::::\ \ /::::::\ \ \:::\ \ /::::::\ \ /::::::::\ \ /:::/\:::\ \ \:::\ \ /:::/\:::\ \ /:::/~~\:::\ \ /:::/__\:::\ \ \:::\ \ /:::/__\:::\ \ /:::/ \:::\ \ /::::\ \:::\ \ /::::\ \ \:::\ \:::\ \:::/ / \:::\ \ /::::::\ \:::\ \__ /::::::\ \_\:::\ \:::\ \:/____/ \:::\____\ /:::/\:::\ \:::\____\ \ /:::/\:::\ \ \:::\ \:::\ \ | |:::| | /:::/ \:::\ \:::| | \/:::/ \:::\____\ \:::\ \:::\____\___| |:::|____| \::/ |::::\ /:::|____| /:::/ \::/ / \:::\ \::/ / _\___/:::/ / \/____|:::::\/:::/ /\/:::/ / \/____/\ \:::\ \/____/:\ |::| /:::/ / |:::::::::/ /:::::/ / \:::\ \:::\ \ \:::\|::|/:::/ / |::|\::::/ /\::::/____/ \:::\ \:::\____\ \::::::::::/ / |::| \::/____/ \:::\ \ \:::\ /:::/ / \::::::::/ / |::| ~| \:::\ \ \:::\/:::/ / \::::::/ / |::| | \:::\ \ \::::::/ / \::::/____/ \::| | \:::\____\ \::::/ / |::| | \:| | \::/ / \::/ / |::|____| \|___| \/____/ \/____/ ~~ ____.________ _____ .___ .___ | |\_____ \ __ __ ___________ ___.__. / _ \ __| _/__ _______ ____ ____ ____ __| _/ | | / / \ \| | \_/ __ \_ __ < | | / /_\ \ / __ |\ \/ /\__ \ / \_/ ___\/ __ \ / __ |
/\__| |/ \_/. \ | /\ ___/| | \/\___ | / | \/ /_/ | \ / / __ \| | \ \__\ ___// /_/ |
\________|\_____\ \_/____/ \___ >__| / ____| \____|__ /\____ | \_/ (____ /___| /\___ >___ >____ | \__> \/ \/ \/ \/ \/ \/ \/ \/ \/ _______ ___________.__ __ \ \ ______ _ ________ \__ ___/|__| ____ | | __ ___________ ______ / | \_/ __ \ \/ \/ / ___/ | | | |/ ___\| |/ // __ \_ __ \ ______ /_____/ / | \ ___/\ /\___ \ | | | \ \___| <\ ___/| | \/ /_____/ \____|__ /\___ >\/\_//____ > |____| |__|\___ >__|_ \\___ >__| \/ \/ \/ \/ \/ \/
============================================================================================================== JQuery Advanced News Ticker 1.0.11 (20/02/14) created by risq website (docs & demos) : http://risq.github.io/jquery-advanced-news-ticker/
==============================================================================================================
*/
;
(function($, window, document, undefined) { 'use strict'; var pluginName = 'newsTicker', defaults = { row_height: 20, max_rows: 3, speed: 400, duration: 2500, direction: 'up', autostart: 1, pauseOnHover: 1, nextButton: null, prevButton: null, startButton: null, stopButton: null, hasMoved: function() {}, movingUp: function() {}, movingDown: function() {}, start: function() {}, stop: function() {}, pause: function() {}, unpause: function() {} }; function Plugin(element, options) { this.element = element; this.$el = $(element); this.options = $.extend({}, defaults, options); this._defaults = defaults; this._name = pluginName; this.moveInterval; this.state = 0; this.paused = 0; this.moving = 0; if (this.$el.is('ul, ol')) { this.init(); } } Plugin.prototype = { init: function() { this.$el.height(this.options.row_height * this.options.max_rows) .css({overflow : 'hidden'}); this.checkSpeed(); if(this.options.nextButton && typeof(this.options.nextButton[0]) !== 'undefined') this.options.nextButton.click(function(e) { this.moveNext(); this.resetInterval(); }.bind(this)); if(this.options.prevButton && typeof(this.options.prevButton[0]) !== 'undefined') this.options.prevButton.click(function(e) { this.movePrev(); this.resetInterval(); }.bind(this)); if(this.options.stopButton && typeof(this.options.stopButton[0]) !== 'undefined') this.options.stopButton.click(function(e) { this.stop() }.bind(this)); if(this.options.startButton && typeof(this.options.startButton[0]) !== 'undefined') this.options.startButton.click(function(e) { this.start() }.bind(this)); if(this.options.pauseOnHover) { this.$el.hover(function() { if (this.state) this.pause(); }.bind(this), function() { if (this.state) this.unpause(); }.bind(this)); } if(this.options.autostart) this.start(); }, start: function() { if (!this.state) { this.state = 1; this.resetInterval(); this.options.start(); } }, stop: function() { if (this.state) { clearInterval(this.moveInterval); this.state = 0; this.options.stop(); } }, resetInterval: function() { if (this.state) { clearInterval(this.moveInterval); this.moveInterval = setInterval(function() {this.move()}.bind(this), this.options.duration); } }, move: function() { if (!this.paused) this.moveNext(); }, moveNext: function() { if (this.options.direction === 'down') this.moveDown(); else if (this.options.direction === 'up') this.moveUp(); }, movePrev: function() { if (this.options.direction === 'down') this.moveUp(); else if (this.options.direction === 'up') this.moveDown(); }, pause: function() { if (!this.paused) this.paused = 1; this.options.pause(); }, unpause: function() { if (this.paused) this.paused = 0; this.options.unpause(); }, moveDown: function() { if (!this.moving) { this.moving = 1; this.options.movingDown(); this.$el.children('li:last').detach().prependTo(this.$el).css('marginTop', '-' + this.options.row_height + 'px') .animate({marginTop: '0px'}, this.options.speed, function(){ this.moving = 0; this.options.hasMoved(); }.bind(this)); } }, moveUp: function() { if (!this.moving) { this.moving = 1; this.options.movingUp(); var element = this.$el.children('li:first'); element.animate({marginTop: '-' + this.options.row_height + 'px'}, this.options.speed, function(){ element.detach().css('marginTop', '0').appendTo(this.$el); this.moving = 0; this.options.hasMoved(); }.bind(this)); } }, updateOption: function(option, value) { if (typeof(this.options[option]) !== 'undefined'){ this.options[option] = value; if (option == 'duration' || option == 'speed'){ this.checkSpeed(); this.resetInterval(); } } }, add: function(content){ this.$el.append($('<li>').html(content)); }, getState: function() { if (paused) return 2 // 2 = paused else return this.state;// 0 = stopped, 1 = started }, checkSpeed: function() { if (this.options.duration < (this.options.speed + 25)) this.options.speed = this.options.duration - 25; }, destroy: function() { this._destroy(); // or this.delete; depends on jQuery version } }; $.fn[pluginName] = function(option) { var args = arguments; return this.each(function() { var $this = $(this), data = $.data(this, 'plugin_' + pluginName), options = typeof option === 'object' && option; if (!data) { $this.data('plugin_' + pluginName, (data = new Plugin(this, options))); } // if first argument is a string, call silimarly named function if (typeof option === 'string') { data[option].apply(data, Array.prototype.slice.call(args, 1)); } }); };
})(jQuery, window, document);
$('.newsticker').newsTicker();
Part 3 - resizing height - bootstrap - Script Codes
Part 3 - resizing height - bootstrap - Script Codes
Home Page Home
Developer Khalid Munir
Username khalidmunir
Uploaded August 26, 2022
Rating 3
Size 5,805 Kb
Views 26,312
Do you need developer help for Part 3 - resizing height - bootstrap?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Khalid Munir (khalidmunir) Script Codes
Name
Github 404 page is so cool
Qibla direction
A Pen by Khalid Munir
CSS TRICKS - corner ribbon
Part1 - make new static analog clock
Generate a dynamic table - javascript and HTML
Single Image upload knockout
Scroll button detect
Get Masjid data via json from dropdown
Clock from w3school tutorial
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!